/* ============================================================
   Legacy Garage Door Depot — product description components
   Paste ONCE into Appearance → Customize → Additional CSS
   (or enqueue from a child theme). Reusable across all products.
   All classes are `lgd-` prefixed to avoid theme collisions.
   ============================================================ */

/* Palette comes from the theme Customizer via the --lgd-* variables published
   by the LGD Product SEO Additions mu-plugin. Fallbacks mirror the current
   theme_mod values, so this file still renders on-brand on its own.
     color_primary  #132436  navy
     color_button   #dd3333  brand red
     color_hover    #ad2727  brand red, hover
     breadcrumb_bg  #f2f2f2  soft grey                                        */
.lgd {
  --lgd-ink:      var(--lgd-primary, #132436);
  --lgd-muted:    #5b6875;
  --lgd-line:     #e2e5e8;
  --lgd-bg-soft:  var(--lgd-soft, #f2f2f2);
  --lgd-accent:   var(--lgd-brand, #dd3333);
  --lgd-accent-h: var(--lgd-brand-hover, #ad2727);
  --lgd-on-accent: var(--lgd-brand-ink, #ffffff);

  /* "In the box" uses primary navy rather than a green that appears nowhere
     else on the site. "Sold separately" uses brand red because that panel is
     all cross-sell links — red pulls the eye to them. */
  --lgd-ok:       var(--lgd-primary, #132436);
  --lgd-no:       var(--lgd-brand, #dd3333);

  /* Amber is the one deliberate departure from the palette. This block warns
     about a part that can cause serious injury, and a warning has to read as
     distinct from the brand/interactive red used everywhere else. */
  --lgd-warn-bg:  #fff8e6;
  --lgd-warn-ink: #7a4a00;
  --lgd-warn-ln:  #e8c069;

  --lgd-radius:   6px;
  color: var(--lgd-ink);
  line-height: 1.65;
}

.lgd h2 {
  margin: 2.4rem 0 .85rem;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  line-height: 1.25;
  scroll-margin-top: 90px;   /* offset sticky headers for #anchors */
}
.lgd h3 { margin: 1.3rem 0 .45rem; font-size: 1.05rem; line-height: 1.3; }
.lgd p  { margin: 0 0 .9rem; }
.lgd a  { color: var(--lgd-accent); text-decoration: underline; text-underline-offset: 2px; }
.lgd a:hover { text-decoration-thickness: 2px; }

.lgd-lede { font-size: 1.06rem; }

/* ---------- icons ---------- */
.lgd-ico       { width: 26px; height: 26px; flex: 0 0 auto; }
.lgd-ico--sm   { width: 18px; height: 18px; vertical-align: -3px; }
.lgd-ico--alert{ width: 30px; height: 30px; color: var(--lgd-warn-ink); }

/* ---------- generic grid ---------- */
.lgd-grid { display: grid; gap: .8rem; margin: 1.1rem 0 1.4rem; }
.lgd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.lgd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- spec cards ---------- */
.lgd-card {
  display: flex; flex-direction: column; gap: .18rem;
  padding: 1rem .95rem;
  border: 1px solid var(--lgd-line);
  border-radius: var(--lgd-radius);
  background: var(--lgd-bg-soft);
}
.lgd-card .lgd-ico { color: var(--lgd-accent); margin-bottom: .3rem; }
.lgd-card__label { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lgd-muted); }
.lgd-card__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.lgd-card__note  { font-size: .8rem; color: var(--lgd-muted); }

/* ---------- two-column split ---------- */
.lgd-split { display: grid; gap: .9rem; margin: 1.2rem 0 1.4rem;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.lgd-side { padding: 1.1rem; border: 1px solid var(--lgd-line);
            border-radius: var(--lgd-radius); background: #fff; }
.lgd-side__cone { display: block; width: 34px; height: 34px; border-radius: 50%;
                  margin-bottom: .6rem; box-shadow: inset 0 0 0 4px rgba(255,255,255,.55); }
.lgd-side--black .lgd-side__cone { background: #23272c; }
.lgd-side--red   .lgd-side__cone { background: var(--lgd-accent); }
.lgd-side--black { border-left: 4px solid #23272c; }
.lgd-side--red   { border-left: 4px solid var(--lgd-accent); }
.lgd-side__title { margin: 0 0 .5rem; font-size: 1.08rem; }
.lgd-side__specs { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; margin: 0 0 .7rem; }
.lgd-side__specs dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lgd-muted); }
.lgd-side__specs dd { margin: 0; font-weight: 600; }
.lgd-side__foot { margin: 0; font-size: .84rem; color: var(--lgd-muted); }

/* ---------- included / not included ---------- */
.lgd-io { padding: 1.05rem 1.1rem; border-radius: var(--lgd-radius); background: var(--lgd-bg-soft);
          border: 1px solid var(--lgd-line); }
.lgd-io h3 { margin: 0 0 .55rem; display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.lgd-io ul { margin: 0; padding-left: 1.15rem; }
.lgd-io li { margin-bottom: .3rem; }
.lgd-io--yes { border-left: 4px solid var(--lgd-ok); }
.lgd-io--yes h3 { color: var(--lgd-ok); }
.lgd-io--no  { border-left: 4px solid var(--lgd-no); }
.lgd-io--no  h3 { color: var(--lgd-no); }
.lgd-io__tip { margin: .7rem 0 0; padding: .6rem .75rem; font-size: .89rem;
               background: #fff; border: 1px dashed var(--lgd-line); border-radius: 6px; }

/* ---------- checklist ---------- */
.lgd-checklist { border: 1px solid var(--lgd-line); border-radius: var(--lgd-radius);
                 padding: 1rem 1.1rem; background: #fff; margin: 1.1rem 0; }
.lgd-checklist ul { list-style: none; margin: 0; padding: 0; }
.lgd-checklist li { position: relative; padding: .42rem 0 .42rem 1.85rem;
                    border-bottom: 1px dashed var(--lgd-line); }
.lgd-checklist li:last-child { border-bottom: 0; }
.lgd-checklist li::before {
  content: ""; position: absolute; left: 0; top: .72rem;
  width: 15px; height: 15px; border: 2px solid var(--lgd-accent); border-radius: 3px;
}
.lgd-tag { display: inline-block; margin-left: .4rem; padding: .06rem .42rem;
           font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
           color: #fff; background: var(--lgd-accent); border-radius: 3px; vertical-align: 1px; }
.lgd-tag--now { background: var(--lgd-ink); }

/* ---------- steps ---------- */
.lgd-steps { margin: 1.1rem 0 1.4rem; }
.lgd-step { display: flex; gap: .95rem; padding: 1rem 0; border-top: 1px solid var(--lgd-line); }
.lgd-step:last-child { border-bottom: 1px solid var(--lgd-line); }
.lgd-step__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
                 display: grid; place-items: center; font-weight: 700;
                 background: var(--lgd-accent); color: #fff; }
.lgd-step__body h3 { margin: .2rem 0 .4rem; }
.lgd-step__body p:last-child { margin-bottom: 0; }
.lgd-step__eg { font-size: .88rem; color: var(--lgd-muted); background: var(--lgd-bg-soft);
                border-radius: 6px; padding: .45rem .65rem; }

/* ---------- tables ---------- */
.lgd-table-wrap { overflow-x: auto; margin: 1.1rem 0 1.4rem;
                  border: 1px solid var(--lgd-line); border-radius: var(--lgd-radius); }
.lgd-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lgd-table caption { text-align: left; padding: .8rem 1rem; font-size: .84rem;
                     color: var(--lgd-muted); border-bottom: 1px solid var(--lgd-line); }
.lgd-table th, .lgd-table td { padding: .62rem 1rem; text-align: left; vertical-align: top;
                               border-bottom: 1px solid var(--lgd-line); }
.lgd-table tbody tr:last-child th, .lgd-table tbody tr:last-child td { border-bottom: 0; }
.lgd-table th[scope="row"] { width: 38%; font-weight: 600; background: var(--lgd-bg-soft); }
.lgd-table thead th { background: var(--lgd-ink); color: #fff; font-size: .8rem;
                      text-transform: uppercase; letter-spacing: .05em; }
.lgd-table--compare th[scope="row"] { width: auto; }
.lgd-row--current { background: #fdf2f2; font-weight: 600; }

/* ---------- alert ---------- */
.lgd-alert { display: flex; gap: .9rem; margin: 1.6rem 0;
             padding: 1.1rem 1.2rem; border: 1px solid var(--lgd-warn-ln);
             border-left: 5px solid var(--lgd-warn-ln);
             border-radius: var(--lgd-radius); background: var(--lgd-warn-bg); }
.lgd-alert__title { margin: 0 0 .5rem; font-size: 1.06rem; color: var(--lgd-warn-ink); }
.lgd-alert ul { margin: .5rem 0; padding-left: 1.15rem; }
.lgd-alert li { margin-bottom: .3rem; }
.lgd-alert__foot { margin: .6rem 0 0; font-weight: 600; }

/* ---------- symptom cards ---------- */
.lgd-sym { padding: .9rem 1rem; border: 1px solid var(--lgd-line);
           border-radius: var(--lgd-radius); background: #fff; }
.lgd-sym__k { display: block; font-weight: 700; margin-bottom: .22rem; color: var(--lgd-accent); }
.lgd-sym p { margin: 0; font-size: .92rem; color: var(--lgd-muted); }

/* ---------- FAQ ---------- */
.lgd-faq { border: 1px solid var(--lgd-line); border-radius: var(--lgd-radius);
           overflow: hidden; margin: 1.1rem 0 1.4rem; }
.lgd-faq details { border-bottom: 1px solid var(--lgd-line); }
.lgd-faq details:last-child { border-bottom: 0; }
.lgd-faq summary { cursor: pointer; padding: .95rem 2.4rem .95rem 1.1rem;
                   font-weight: 600; position: relative; list-style: none; }
.lgd-faq summary::-webkit-details-marker { display: none; }
.lgd-faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.28rem;
  width: 9px; height: 9px; border-right: 2px solid var(--lgd-accent);
  border-bottom: 2px solid var(--lgd-accent); transform: rotate(45deg);
  transition: transform .18s ease;
}
.lgd-faq details[open] summary::after { transform: rotate(-135deg); }
.lgd-faq summary:hover { background: var(--lgd-bg-soft); }
.lgd-faq details > p { margin: 0; padding: 0 1.1rem 1.05rem; color: var(--lgd-muted); }

/* ---------- notes ---------- */
.lgd-inline-note, .lgd-help, .lgd-final-note, .lgd-measure-note {
  font-size: .93rem; color: var(--lgd-muted);
}
.lgd-help, .lgd-measure-note {
  background: var(--lgd-bg-soft); border-left: 3px solid var(--lgd-accent);
  border-radius: 0 6px 6px 0; padding: .65rem .85rem;
}

/* ---------- figure ---------- */
.lgd-figure { margin: 1.2rem 0; }
.lgd-figure img { width: 100%; height: auto; border-radius: var(--lgd-radius);
                  border: 1px solid var(--lgd-line); display: block; }
.lgd-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--lgd-muted); }

/* ---------- short-description bits (outside .lgd wrapper) ---------- */
.woocommerce-product-details__short-description .lgd-usp {
  list-style: none; margin: .7rem 0; padding: 0;
}
.woocommerce-product-details__short-description .lgd-usp li {
  position: relative; padding-left: 1.5rem; margin-bottom: .34rem; font-size: .94rem;
}
.woocommerce-product-details__short-description .lgd-usp li::before {
  content: ""; position: absolute; left: 0; top: .48rem;
  width: 10px; height: 5px; border-left: 2px solid #dd3333;
  border-bottom: 2px solid #dd3333; transform: rotate(-45deg);
}
.woocommerce-product-details__short-description .lgd-measure-note {
  font-size: .88rem; color: #5b6875; background: var(--lgd-soft, #f2f2f2);
  border-left: 3px solid var(--lgd-brand, #dd3333); border-radius: 0 6px 6px 0; padding: .6rem .8rem;
}

/* ---------- print ---------- */
@media print {
  .lgd-faq details { display: block; }
  .lgd-faq details > p { display: block !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lgd-faq summary::after { transition: none; }
}