/**
 * Design System — Product detail page (Phase B)
 *
 * Aligns the existing .pdp-* template and the WooCommerce add-to-cart markup
 * with the design tokens. Loads after pdp.css and supersedes its palette by
 * remapping the legacy --lbc-* variables to design-system tokens within the
 * product scope, then adds the brief's new elements (eyebrow, tax line, stock
 * line, FAQ accordion, spec markers).
 *
 * References tokens from ds-tokens.css.
 *
 * @package Longboardcenter
 */

/* ----------------------------------------------------------------------
   Remap legacy palette -> design tokens for the whole product scope.
   pdp.css and related.php reference these variables, so this single
   remap retokens colour and type across the PDP without per-rule edits.
   ---------------------------------------------------------------------- */
.pdp-main,
.single-product-main,
.lbc-related{
  --lbc-orange:#FF4A1C;            /* = var(--c-accent) */
  --lbc-orange-dark:#D63A10;       /* = var(--c-accent-deep) */
  --lbc-orange-light:#FDEDE6;      /* = var(--c-accent-wash) */
  --lbc-orange-glow:rgba(255,74,28,.18);
  --lbc-font-heading:var(--font-display);
  --lbc-font-body:var(--font-body);
}

/* ----------------------------------------------------------------------
   Breadcrumbs — section 7.1 item 1 (.crumbs look on WC breadcrumb)
   ---------------------------------------------------------------------- */
.single-product-main .woocommerce-breadcrumb{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  color:var(--c-ink-soft);
  margin:var(--sp-4) 0;
}
.single-product-main .woocommerce-breadcrumb a{color:var(--c-ink-soft);text-decoration:none}
.single-product-main .woocommerce-breadcrumb a:hover{color:var(--c-accent-deep)}

/* ----------------------------------------------------------------------
   Brand eyebrow above the H1 — section 7.1 / 7.5 (brand sits in eyebrow)
   ---------------------------------------------------------------------- */
.pdp-eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-ink-faint);
  margin-bottom:var(--sp-2);
}
.pdp-title{color:var(--c-ink)}

/* ----------------------------------------------------------------------
   Price block — sale price in --c-sale, struck original, tax line
   ---------------------------------------------------------------------- */
.pdp-price ins,
.pdp-price ins .woocommerce-Price-amount{
  color:var(--c-sale);
  text-decoration:none;
}
.pdp-price del,
.pdp-price del .woocommerce-Price-amount{
  color:var(--c-ink-faint);
  text-decoration:line-through;
}
.pdp-price-tax{
  margin-top:var(--sp-1);
  font-size:var(--fs-sm);
  color:var(--c-ink-faint);
}

/* ----------------------------------------------------------------------
   Stock line — section 7.1 (uses .stock component)
   ---------------------------------------------------------------------- */
.pdp-stock{margin:var(--sp-3) 0}

/* ----------------------------------------------------------------------
   Benefit bullets — section 7.1
   ---------------------------------------------------------------------- */
.pdp-benefits{
  list-style:none;
  margin:var(--sp-4) 0;
  padding:0;
  display:grid;
  gap:var(--sp-2);
}
.pdp-benefits li{
  position:relative;
  padding-left:28px;
  font-size:var(--fs-base);
  color:var(--c-ink-soft);
  line-height:var(--lh-body);
}
.pdp-benefits li svg{
  position:absolute;
  left:0;
  top:3px;
  width:18px;height:18px;
  color:var(--c-accent);
}

/* ----------------------------------------------------------------------
   WooCommerce add-to-cart — quantity stepper (.qty look) + primary button.
   AJAX / flow / markup untouched; styling only.
   ---------------------------------------------------------------------- */
.pdp-cart-section .quantity{
  display:inline-flex;
  align-items:stretch;
  border:1.5px solid var(--c-line-strong);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--c-paper);
}
.pdp-cart-section .quantity .qty{
  width:56px;
  border:0;
  text-align:center;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:600;
  background:#fff;
  color:var(--c-ink);
}
.pdp-cart-section .single_add_to_cart_button,
.pdp-cart-section button.single_add_to_cart_button{
  font-family:var(--font-body);
  font-weight:600;
  background:var(--c-cta);
  color:var(--c-cta-text);
  border:2px solid transparent;
  border-radius:var(--r-md);
  padding:16px 32px;
  font-size:var(--fs-md);
  line-height:1;
  transition:background .15s,transform .12s var(--ease);
}
.pdp-cart-section .single_add_to_cart_button:hover{background:var(--c-cta-hover)}
.pdp-cart-section .single_add_to_cart_button:active{transform:translateY(1px)}
.pdp-cart-section .single_add_to_cart_button.disabled,
.pdp-cart-section .single_add_to_cart_button:disabled{
  background:var(--c-line);color:var(--c-ink-faint);cursor:not-allowed;
}

/* Secondary "buy now" button -> design-system secondary */
.pdp-buy-now-btn{
  background:transparent;
  color:var(--c-ink);
  border:2px solid var(--c-ink);
  border-radius:var(--r-md);
}
.pdp-buy-now-btn:hover{background:var(--c-ink);color:var(--c-cream)}

/* ----------------------------------------------------------------------
   Trust + shipping notice block — section 7.1 (icons inline SVG, no emoji)
   ---------------------------------------------------------------------- */
.pdp-trust-row{
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-paper);
}
.pdp-trust-item{color:var(--c-ink-soft)}
.pdp-trust-item svg{color:var(--c-accent)}
.pdp-ship-notice{margin-top:var(--sp-4)}
.pdp-ship-notice .notice__icon{flex-shrink:0}

/* ----------------------------------------------------------------------
   Tabs — section 7.1 item 3 (.tabs look)
   ---------------------------------------------------------------------- */
.pdp-tabs{border-bottom:2px solid var(--c-line)}
.pdp-tab{
  font-family:var(--font-body);
  color:var(--c-ink-soft);
  border-bottom:3px solid transparent;
}
.pdp-tab.is-active,
.pdp-tab[aria-selected="true"]{color:var(--c-ink);border-color:var(--c-accent)}

/* ----------------------------------------------------------------------
   Specifications — imperial first, "te bevestigen" marker (section 7.3)
   ---------------------------------------------------------------------- */
.pdp-specs-table{width:100%;border-collapse:collapse}
.pdp-specs-table th,
.pdp-specs-table td{
  text-align:left;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-sm);
}
.pdp-specs-table th{color:var(--c-ink-soft);font-weight:600;width:40%}
.pdp-specs-table td{color:var(--c-ink)}
.pdp-specs-note{
  font-size:var(--fs-sm);
  color:var(--c-ink-faint);
  margin-bottom:var(--sp-3);
}
.spec-tbc{
  display:inline-flex;
  align-items:center;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:var(--r-pill);
  background:var(--c-accent-wash);
  color:var(--c-accent-deep);
}

/* ----------------------------------------------------------------------
   Reviews empty state — section 7.4 (never fabricate)
   ---------------------------------------------------------------------- */
.pdp-no-reviews{
  border:1px dashed var(--c-line-strong);
  border-radius:var(--r-md);
  padding:var(--sp-6);
  text-align:center;
  color:var(--c-ink-soft);
  background:var(--c-paper);
}

/* ----------------------------------------------------------------------
   FAQ accordion — section 7.1 item 4 (.acc look)
   ---------------------------------------------------------------------- */
.pdp-faq{margin-top:var(--sp-7)}
.pdp-faq__title{font-family:var(--font-display);font-size:var(--fs-xl);margin-bottom:var(--sp-3);color:var(--c-ink)}
.pdp-faq details{border-bottom:1px solid var(--c-line)}
.pdp-faq summary{
  list-style:none;cursor:pointer;
  padding:var(--sp-4) 0;
  font-family:var(--font-display);
  font-weight:600;font-size:var(--fs-md);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--c-ink);
}
.pdp-faq summary::-webkit-details-marker{display:none}
.pdp-faq summary::after{content:"+";font-size:var(--fs-xl);color:var(--c-accent);transition:transform .2s}
.pdp-faq details[open] summary::after{transform:rotate(45deg)}
.pdp-faq__body{padding-bottom:var(--sp-4);color:var(--c-ink-soft);max-width:64ch}

/* ----------------------------------------------------------------------
   Sticky cart (mobile) — retoken
   ---------------------------------------------------------------------- */
.pdp-sticky-cart{background:var(--c-paper);border-top:1px solid var(--c-line)}
.pdp-sticky-cart__price{color:var(--c-ink);font-family:var(--font-display)}
.pdp-sticky-cart__btn{background:var(--c-cta);color:var(--c-cta-text);border-radius:var(--r-md)}
.pdp-sticky-cart__btn:hover{background:var(--c-cta-hover)}
.pdp-sticky-cart__btn:disabled{background:var(--c-line);color:var(--c-ink-faint)}

/* ----------------------------------------------------------------------
   Related products grid — section 7.1 item 5 (card surface on tokens)
   ---------------------------------------------------------------------- */
.lbc-related__title{font-family:var(--font-display);color:var(--c-ink)}
.lbc-related__item{
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}