/* =============================================================================
   PDP
   Two-column product_main (gallery left, summary right), variation TILES,
   and a Description / Ingredients accordion — matching the source's
   product_main + accordion sections.
   ============================================================================= */
.th-pdp__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: 32px 40px;   /* NOT the shorthand — see .th-collection */
  align-items: start;
}

/* ⚠ WooCommerce ships `.woocommerce div.product div.summary{float:right;width:48%}`
   at (0,3,2). A float is IGNORED inside grid but the percentage is NOT, so the
   summary column silently squeezes to ~48% of its own track. Same defect class
   as the account sidebar collapsing to 78px. Beat it on specificity, not
   !important. */
.woocommerce div.product .th-pdp__main div.summary,
.woocommerce div.product .th-pdp__summary {
  float: none;
  width: auto;
}
.woocommerce div.product .th-pdp__main div.images {
  float: none;
  width: auto;
}

/* ⚠ MEASURED: the source PDP title is 20.64px / 20.64px / 700 and carries the
   theme's `h6` utility class — it is deliberately SMALL, not a hero heading.
   An earlier 32px looked like a product title and was wrong by 50%. This is
   exactly the kind of value eyeballing "corrects" in the wrong direction. */
.th-pdp__title {
  font-size: var(--th-fs-pdp-title);   /* 20.64px -> 18px at 38em, measured */
  line-height: 1;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  margin: 0 0 12px;
}

/* `.woocommerce div.product p.price` is (0,2,2) — a bare `.th-pdp__price`
   at (0,1,0) loses. Qualify it. */
.woocommerce div.product .th-pdp__price,
.woocommerce div.product .th-pdp__price p.price,
.th-pdp__price {
  font-size: 2.4rem;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  margin: 0 0 20px;
}
.th-pdp__price del { color: var(--th-muted); font-weight: var(--th-fw-normal); margin-right: 8px; }
.th-pdp__price ins { text-decoration: none; }

/* ---------- variation tiles ---------- */
.th-variation { margin-bottom: 20px; }

.th-variation__label {
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-bold);
  text-transform: none;
  margin-bottom: 8px;
  color: var(--th-heading);
}

.th-tiles { display: flex; flex-wrap: wrap; gap: 8px; }

.th-tile {
  min-width: 72px;
  padding: 10px 16px;
  background: #fff;
  color: var(--th-text);
  border: 1px solid var(--th-field-border);
  border-radius: 0;
  font-family: var(--th-font);
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-semi);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--th-speed-fast), color var(--th-speed-fast);
}

/* The chosen tile decides which variant goes in the cart, so the selected
   state has to be unmistakable — not a subtle tint. */
.th-tile.is-selected,
.th-tile[aria-checked="true"] {
  background: var(--th-btn-bg);
  border-color: var(--th-btn-bg);
  color: #fff;
}
.th-tile:focus-visible { outline: 2px solid var(--th-btn-bg); outline-offset: 2px; }

.th-tile.is-unavailable {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Woo's reset link */
.th-variations .reset_variations {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--th-fs-xs);
  color: var(--th-muted);
  text-decoration: underline;
}

/* ---------- add to cart ---------- */
.woocommerce div.product form.cart .button,
.th-pdp__form .single_add_to_cart_button {
  width: 100%;
  height: 52px;
  font-size: var(--th-fs-card-cta);
  font-weight: var(--th-fw-bold);
  border-radius: 0;
}

.woocommerce div.product form.cart div.quantity { margin-bottom: 12px; }

/* ---------- accordion ---------- */
.th-pdp__accordion { padding: 8px 0 40px; }

.th-acc { border-top: 1px solid var(--th-border); }
.th-acc:last-child { border-bottom: 1px solid var(--th-border); }

.th-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: 0;
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  text-align: left;
}

.th-acc__sign { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.th-acc__sign::before,
.th-acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--th-speed-fast);
}
.th-acc__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.th-acc__sign::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.th-acc__head[aria-expanded="true"] .th-acc__sign::after { transform: scaleY(0); }

.th-acc__body { padding: 0 0 20px; }
.th-acc__body[hidden] { display: none; }

/* ---------- related ---------- */
.woocommerce div.product .related > h2,
.related.products > h2 {
  font-size: var(--th-fs-h2);
  line-height: var(--th-lh-h2);
  text-align: center;
  margin: 24px 0;
}

@media (max-width: 991px) {
  .th-pdp .th-pdp__main { grid-template-columns: 1fr; gap: 24px; }
}


/* ⚠ WooCommerce's stock `.onsale` flash is absolutely positioned and escapes
   the viewport on this layout (measured at L-7 and R1441 against a 1440
   viewport). It is also stock Woo UI the source does not use: the source
   shows its own `.badge.sale` INSIDE the product card, which we reproduce as
   `.th-pcard__badge`. Per the override law, stock Woo UI is a defect until
   proven to match — so this is removed rather than restyled. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale {
  display: none;
}


/* =============================================================================
   PDP INFO CARDS + FAQs

   Both sections were MISSING from the build entirely. The source places the
   info-card strip between the buy box and the description, and the FAQ block
   between the description and the recommendations.
   ============================================================================= */

.th-pdp__info-cards { padding: 24px 0; }

/* ---- FAQs ----
   Source layout: image on the left, accordion on the right, stacking to
   image-then-text on mobile. */
.th-pdp__faq { padding: 32px 0 8px; }
.th-faq__inner { display: grid; gap: 24px; }
.th-faq__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--th-radius, 6px);
}
.th-faq__title {
  margin: 0 0 8px;
  font-size: 2.4rem;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
}

.th-faq__item { border-bottom: 1px solid var(--th-border); }
.th-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  font-size: 1.7rem;
  font-weight: var(--th-fw-semi);
  line-height: 1.35;
  color: var(--th-heading);
  cursor: pointer;
}
.th-faq__q::-webkit-details-marker { display: none; }

/* A +/- sign built from two bars, so there is no icon font to load and the
   open state needs no JS. */
.th-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.th-faq__sign::before,
.th-faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--th-speed-fast, .2s) ease;
}
.th-faq__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.th-faq__sign::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.th-faq__item[open] .th-faq__sign::after { transform: scaleY(0); }

.th-faq__a { padding: 0 2px 18px; }
.th-faq__a p { margin: 0 0 10px; }
.th-faq__a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .th-faq__sign::before,
  .th-faq__sign::after { transition: none; }
}

/* The source puts the image beside the questions once there is room. */
@media (min-width: 48em) {
  .th-faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px; }
}