/* ─────────────────────────────────────────────────────────────
   Highland Cabinetry — Single Product page
   Loaded only on is_product() (functions.php). WooCommerce core CSS is
   NOT dequeued here (see functions.php dequeue list), so most rules need
   !important to win over woocommerce-general.css — same approach shop.css
   already uses for the same reason.
   ──────────────────────────────────────────────────────────── */

/* ─── 1. Layout ────────────────────────────────────────────── */
.hc-product-layout {
  margin-bottom: 56px;
}

/* ─── 1b. Gallery ─────────────────────────────────────────────
   Markup: woocommerce/single-product/product-image.php (Bootstrap carousel +
   modal). Layout/spacing comes from Bootstrap utilities in that template; the
   rules here are the brand skin plus the bits Bootstrap has no utility for
   (fixed aspect ratio, hover-revealed arrows, thumb active ring).
   Core WooCommerce CSS still loads on this page, hence the !important on rules
   that collide with .woocommerce-product-gallery / .images selectors.
   ──────────────────────────────────────────────────────────── */
.hc-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  /* Core sets opacity:0 on .woocommerce-product-gallery and relies on its own
     JS to fade it in. That JS isn't loaded here, so pin it visible. */
  opacity: 1 !important;
}

.hc-gallery__carousel {
  position: relative;
  border-radius: var(--hc-r-lg);
  overflow: hidden;
  box-shadow: var(--hc-sh);
  background: var(--hc-warm);
}

/* Core ships `.woocommerce-product-gallery__image:nth-child(n+2){width:25%;
   display:inline-block}` to lay out its own static thumb row, and woocommerce.css
   loads after the Bootstrap CDN link — so it beat `.carousel-item{display:none}`
   and every slide past the first rendered stacked over slide 1 at quarter width.
   Restore Bootstrap's own show/hide contract. */
.hc-gallery .carousel-item {
  display: none !important;
  width: 100% !important;
}
.hc-gallery .carousel-item.active,
.hc-gallery .carousel-item.carousel-item-start,
.hc-gallery .carousel-item.carousel-item-end,
.hc-gallery .carousel-item.carousel-item-prev,
.hc-gallery .carousel-item.carousel-item-next {
  display: block !important;
}

/* Uniform frame regardless of source image ratio — the catalogue mixes
   portrait cabinet shots with square placeholders, and without this the column
   height jumped between slides. */
.hc-gallery .carousel-item {
  aspect-ratio: 1 / 1;
}

.hc-gallery .carousel-item,
.hc-gallery__zoom {
  width: 100%;
  height: 100%;
}

.hc-gallery__zoom {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.hc-gallery__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  border-radius: 0 !important;
  display: block;
}

/* Zoom affordance — sits over the image, fades up on hover, always visible on
   touch where there is no hover to reveal it. */
.hc-gallery__zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hc-heading);
  box-shadow: var(--hc-sh);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.hc-gallery__zoom:hover .hc-gallery__zoom-hint,
.hc-gallery__zoom:focus-visible .hc-gallery__zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ── Arrows ── */
.hc-gallery__nav {
  width: auto !important;
  padding: 0 10px !important;
  opacity: 1 !important;
  background: none !important;
}
.hc-gallery__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--hc-heading);
  box-shadow: var(--hc-sh);
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.hc-gallery__nav:hover .hc-gallery__nav-icon,
.hc-gallery__nav:focus-visible .hc-gallery__nav-icon {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}
.hc-gallery__nav:active .hc-gallery__nav-icon {
  transform: scale(0.94);
}
.hc-gallery__nav--lg .hc-gallery__nav-icon {
  width: 46px;
  height: 46px;
}

/* Keep the arrows out of the way until the shopper is on the image — but only
   where hover is a real input, so touch devices always see them. */
@media (hover: hover) {
  .hc-gallery__carousel .hc-gallery__nav {
    opacity: 0 !important;
    transition: opacity 0.18s;
  }
  .hc-gallery__carousel:hover .hc-gallery__nav,
  .hc-gallery__carousel:focus-within .hc-gallery__nav {
    opacity: 1 !important;
  }
}

/* ── Thumbnails ── */
.hc-gallery__thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-r);
  background: var(--hc-warm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hc-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}
.hc-gallery__thumb:hover {
  border-color: var(--hc-accent);
}
.hc-gallery__thumb.is-active {
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 2px rgba(171, 103, 43, 0.22);
}

/* ── Lightbox ── */
.hc-gallery-modal .modal-content {
  position: relative;
  background: transparent;
  border: 0;
}
.hc-gallery-modal__carousel {
  border-radius: var(--hc-r-lg);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.hc-gallery-modal__img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}
.hc-gallery-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.94);
  opacity: 1;
}
.hc-gallery-modal__counter {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.hc-product-summary-col .summary {
  width: 100% !important;
  float: none !important;
  /* White card framing the whole buy box, per the design. */
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 26px 26px 22px;
}

/* ─── 2. Title / rating / price ───────────────────────────────
   The summary is a flat stack of core-rendered blocks; these rules set the
   vertical rhythm so title → price → description → buy box read as steps in a
   hierarchy rather than one undifferentiated column.
   ──────────────────────────────────────────────────────────── */
.hc-product-eyebrow {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hc-accent);
  margin: 0 0 6px;
}
.hc-product-eyebrow a {
  color: inherit;
  text-decoration: none;
}
.hc-product-eyebrow a:hover {
  text-decoration: underline;
}

.hc-product-summary-col .product_title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.15 !important;
  color: var(--hc-heading) !important;
  margin-bottom: 10px !important;
}

/* Core prints the rating inline with no spacing of its own. */
.hc-product-summary-col .woocommerce-product-rating {
  margin-bottom: 12px !important;
}

/* Gold italic serif, matching the price treatment used on the collection
   cards and homepage — one price style across the site. */
.hc-product-summary-col p.price {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--hc-accent) !important;
  margin: 0 0 18px !important;
}
.hc-product-summary-col p.price del {
  color: var(--hc-muted) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  opacity: 0.8;
}
/* Sale price sits next to the struck-through original. */
.hc-product-summary-col p.price ins {
  text-decoration: none !important;
  margin-left: 8px;
}

.hc-product-summary-col .woocommerce-product-details__short-description {
  color: var(--hc-body);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ─── 3. Spec-tier badge ──────────────────────────────────────*/
.hc-spec-tier-badge {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hc-spec-tier-badge--construction_grade {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}
.hc-spec-tier-badge--standard {
  background: var(--hc-warm);
  color: var(--hc-body);
  border: 1px solid var(--hc-border);
}

/* ─── 4. Finish swatches ───────────────────────────────────────
   Circular colour swatches (hex from hc_colour_swatch_hex(), same map the
   /by-color/ collection cards use) with the active finish name called out
   next to the "Finish" label, per the design.
   ──────────────────────────────────────────────────────────── */
.hc-finish {
  margin: 18px 0;
}
.hc-finish__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hc-finish__label {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-finish__active {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-accent);
}
.hc-finish__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hc-finish__swatch {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--hc-border);
  background-color: var(--hc-warm);
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.hc-finish__swatch:hover {
  border-color: var(--hc-accent);
}
.hc-finish__swatch.is-active {
  border-color: var(--hc-white);
  box-shadow: 0 0 0 2px var(--hc-accent);
}

/* ─── 5. Stock / quantity line ────────────────────────────────*/
.hc-stock-line {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: var(--hc-text-sm) !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
}
.hc-stock-line--in {
  color: #2e7d32 !important;
}
.hc-stock-line--out {
  color: #c62828 !important;
}

/* ─── 6. Add to cart ──────────────────────────────────────────
   Per the design: qty stepper alone on its own row, then ADD TO CART and
   START 3D DESIGN stacked full-width below it (not side by side) — a
   different shape from the shop card's inline qty+button row (shop.css),
   so this is styled independently rather than sharing those rules.
   WooCommerce core CSS still loads here (see header), so the flex reset
   needs !important to beat woocommerce-general's form.cart rules.
   ──────────────────────────────────────────────────────────── */
.hc-product-summary-col form.cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px;
  margin-bottom: 0 !important;
}
.hc-product-summary-col .quantity {
  display: flex !important;
  align-items: flex-start !important;
}
/* The qty input is wrapped in .hc-qty (product-atc.js, via the shared
   qty-stepper.js also used on the cart page). Pill-shaped per the design,
   unlike the cart page's boxed stepper — overridden locally rather than
   changing the shared shop.css rules the cart page relies on. */
.hc-product-summary-col .quantity .hc-qty {
  height: 44px !important;
  width: auto !important;
  border-radius: 999px !important;
  border-color: var(--hc-border) !important;
}
.hc-product-summary-col .quantity .hc-qty__btn {
  font-size: 15px;
}
.hc-product-summary-col .quantity .qty {
  width: 40px !important;
  height: 100% !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-left: 1px solid var(--hc-border) !important;
  border-right: 1px solid var(--hc-border) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-align: center;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
}
.hc-product-summary-col .quantity .qty::-webkit-inner-spin-button,
.hc-product-summary-col .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* Bare fallback if JS fails to load and the input is never wrapped. */
.hc-product-summary-col .quantity .qty:not(.hc-qty *) {
  height: 44px !important;
  width: 100px !important;
  border: 1.5px solid var(--hc-border) !important;
  border-radius: 999px !important;
}

/* ADD TO CART / START 3D DESIGN — same size and shape, gold fill vs dark
   green fill, both full width and uppercase per the design. */
.hc-product-summary-col .single_add_to_cart_button,
.hc-product-summary-col .hc-start-3d-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s !important;
}
.hc-product-summary-col .single_add_to_cart_button {
  background: var(--hc-accent) !important;
  /* Dark green on gold, not white: white on this gold is 2.31:1 and fails AA. */
  color: var(--hc-dark) !important;
  border: 1.5px solid var(--hc-accent) !important;
}
.hc-product-summary-col .single_add_to_cart_button:hover {
  background: var(--hc-accent-d) !important;
  border-color: var(--hc-accent-d) !important;
  color: var(--hc-white) !important;
}
.hc-product-summary-col .single_add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}
/* Success state reuses --hc-dark (same green as Start 3D Design) instead of
   a generic flat green, so it stays inside the site's own palette. */
.hc-product-summary-col .single_add_to_cart_button.added {
  background: var(--hc-dark) !important;
  border-color: var(--hc-dark) !important;
  color: var(--hc-white) !important;
}
.hc-product-summary-col .single_add_to_cart_button.added::after {
  display: none !important;
  content: none !important;
}
/* WooCommerce injects this as a sibling of the button via $button.after() —
   lands after it in form.cart's column, full width to match. */
.hc-product-summary-col a.added_to_cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  background: transparent !important;
  color: var(--hc-accent) !important;
  border: 1.5px solid var(--hc-accent) !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}
.hc-product-summary-col a.added_to_cart:hover {
  background: var(--hc-accent) !important;
  color: var(--hc-dark) !important;
}

.hc-start-3d-btn {
  background: var(--hc-dark) !important;
  color: var(--hc-white) !important;
  border: 1.5px solid var(--hc-dark) !important;
}
.hc-start-3d-btn:hover {
  background: var(--hc-dark2) !important;
  border-color: var(--hc-dark2) !important;
  color: var(--hc-white) !important;
}

/* ─── 6b. Order Sample / wishlist / share row ──────────────────
   Order Sample and the heart (wishlist) are visual-only for now — no
   sample-order flow or wishlist feature exists yet on this site. Share
   is functional (Web Share API, falling back to copying the URL). See
   assets/js/product-atc.js.
   ──────────────────────────────────────────────────────────── */
.hc-product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.hc-product-actions__sample {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-btn-r);
  background: var(--hc-surface);
  color: var(--hc-heading);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.hc-product-actions__sample:hover {
  border-color: var(--hc-accent);
  background: var(--hc-warm);
}
.hc-product-actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--hc-border);
  border-radius: 50%;
  background: var(--hc-surface);
  color: var(--hc-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.hc-product-actions__icon:hover {
  border-color: var(--hc-accent);
  color: var(--hc-accent);
  background: var(--hc-warm);
}
.hc-product-actions__icon.is-active {
  border-color: var(--hc-accent);
  color: var(--hc-accent);
  background: var(--hc-warm);
}
.hc-product-actions__icon.is-active svg {
  fill: currentColor;
}

/* Stripe's express-checkout element (Link/Apple Pay/Google Pay) is moved
   here, after the Order Sample row, by product-atc.js — see that file for
   why. Its own margin-top:1em inline style already spaces it from the row
   above. */
#wc-stripe-express-checkout-element {
  margin-top: 18px !important;
}

/* ─── 6c. Trust row ────────────────────────────────────────────
   Free shipping / warranty / returns, per the design — a plain stacked list
   of icon + text lines under a top divider.
   ──────────────────────────────────────────────────────────── */
.hc-trust-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hc-border);
}
.hc-trust-row__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  color: var(--hc-body);
}
.hc-trust-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--hc-accent);
}

/* ─── 7. Product meta (SKU / categories / tags / vendor) ──────
   Markup: woocommerce/single-product/meta.php. Core renders these as bare
   inline spans that run together on one line; this lays them out as labelled
   rows in a panel, separated from the buy box above by a rule.
   ──────────────────────────────────────────────────────────── */
.hc-product-summary-col .product_meta {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid var(--hc-border);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm) !important;
}

.hc-meta__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

/* Fixed label column so the values line up into a readable second column. */
.hc-meta__label {
  flex: 0 0 92px;
  color: var(--hc-muted);
  font-size: var(--hc-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hc-meta__value {
  flex: 1 1 0;
  min-width: 0;
  color: var(--hc-body);
  font-weight: 500;
}

/* Part numbers read better monospaced — easier to compare and read back to a
   supplier over the phone. */
.hc-meta__row .sku,
.hc-meta__value.sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--hc-text-sm);
  letter-spacing: 0.02em;
  color: var(--hc-heading);
}

.hc-meta__links a {
  color: var(--hc-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s;
}
.hc-meta__links a:hover {
  border-bottom-color: var(--hc-accent);
}

/* Tags reuse the .hc-chip--sm pill from global.css (same component as the
   Available Colors row) — as links they need the anchor resets. */
.hc-meta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hc-meta__tag {
  text-decoration: none !important;
  color: var(--hc-body) !important;
  transition: border-color 0.18s, color 0.18s;
}
.hc-meta__tag:hover {
  border-color: var(--hc-accent);
  color: var(--hc-accent) !important;
}

.hc-meta__row--vendor .hc-meta__value {
  color: var(--hc-muted);
}

/* ─── 8. Specifications tab table ─────────────────────────────
   Bootstrap .table handles width, border-collapse, cell padding and row
   borders; these are the HC brand overrides on top of it.
   ──────────────────────────────────────────────────────────── */
.hc-specs-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hc-heading);
  --bs-table-border-color: var(--hc-border);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
}
.hc-specs-table tr:last-child > * {
  border-bottom-width: 0;
}
.hc-specs-table th {
  width: 220px;
  color: var(--hc-muted);
  font-weight: 500;
}
.hc-specs-table td {
  font-weight: 500;
  color: var(--hc-heading);
  /* Value right-aligned against its label, per the design. */
  text-align: right;
}
@media (max-width: 575.98px) {
  .hc-specs-table td { text-align: left; }
}

/* Material highlight badges under the specs table — 4 fixed construction
   callouts (see hc_get_specification_badges()), evenly spaced with rule
   dividers between them, per the design. */
.hc-spec-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hc-border);
}
.hc-spec-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 16px;
}
.hc-spec-badges__item + .hc-spec-badges__item {
  border-left: 1px solid var(--hc-border);
}
.hc-spec-badges__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hc-r);
  background: color-mix(in srgb, var(--hc-accent) 16%, var(--hc-warm));
  color: var(--hc-accent-d);
}
.hc-spec-badges__label {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-heading);
}
@media (max-width: 575.98px) {
  .hc-spec-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .hc-spec-badges__item + .hc-spec-badges__item {
    border-left: 0;
  }
}

/* ─── 8a2. Box Specification tab ───────────────────────────────
   Numbered callout list beside a placeholder illustration — the design
   shows a real exploded-view photo, which the catalogue does not have yet.
   ──────────────────────────────────────────────────────────── */
.hc-boxspec {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 40px;
  align-items: start;
}
.hc-boxspec__art {
  aspect-ratio: 4 / 3.6;
  border-radius: var(--hc-r-lg);
  background: color-mix(in srgb, var(--hc-warm) 62%, var(--hc-white));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: color-mix(in srgb, var(--hc-heading) 34%, transparent);
}
.hc-boxspec__art p {
  margin: 0;
  font-size: var(--hc-text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hc-boxspec__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hc-boxspec;
}
.hc-boxspec__list li {
  counter-increment: hc-boxspec;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  font-size: var(--hc-text-md);
  color: var(--hc-body);
}
.hc-boxspec__list li + li {
  border-top: 1px solid var(--hc-border);
}
.hc-boxspec__list li::before {
  content: counter(hc-boxspec);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hc-accent) 20%, var(--hc-warm));
  color: var(--hc-accent-d);
  font-size: var(--hc-text-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .hc-boxspec { grid-template-columns: 1fr; }
  .hc-boxspec__art { max-width: 260px; }
}

/* ─── 8a3. Assembly Instructions tab ──────────────────────────
   Video card on a warm panel — falls back to a play-icon placeholder when
   no video is set in the Customizer.
   ──────────────────────────────────────────────────────────── */
.hc-assembly__frame {
  background: var(--hc-warm);
  border-radius: var(--hc-r-lg) var(--hc-r-lg) 0 0;
  padding: 24px;
}
.hc-assembly__video {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: var(--hc-r);
  background: #000;
}
.hc-assembly__placeholder {
  aspect-ratio: 16 / 9;
  max-width: 520px;
  margin: 0 auto;
  border-radius: var(--hc-r);
  background: color-mix(in srgb, var(--hc-dark) 82%, #000);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-assembly__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hc-white) 92%, transparent);
  color: var(--hc-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hc-assembly__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--hc-dark2);
  border-radius: 0 0 var(--hc-r-lg) var(--hc-r-lg);
  color: var(--hc-white);
}
.hc-assembly__caption {
  font-weight: 600;
  font-size: var(--hc-text-md);
}
.hc-assembly__playbtn {
  background: none;
  border: none;
  color: var(--hc-accent);
  font-weight: 600;
  font-size: var(--hc-text-sm);
  cursor: pointer;
}

/* ─── 8a4. Terms & Condition tab ──────────────────────────────*/
.hc-terms__section + .hc-terms__section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hc-border);
}
.hc-terms__num {
  display: block;
  font-size: var(--hc-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--hc-accent);
  margin-bottom: 6px;
}
.hc-terms__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--hc-dark2);
  margin: 0 0 10px;
}
.hc-terms__body {
  margin: 0;
  color: var(--hc-body);
  line-height: 1.7;
  max-width: 68ch;
}

/* ─── 8a5. Reviews tab ─────────────────────────────────────────
   Markup: WooCommerce core's single-product-reviews.php (list) and its
   comment_form() (the write-a-review form) — no template override, so this
   styles core's own IDs/classes. The review list itself, the star widget,
   and the photo upload/preview already have theme styling in shop.css
   (#reviews, .hc-star-rating__*, .hc-review-image*); what's added here is
   the write-a-review form (name/email/comment/notes/submit), which
   comment_form() renders as bare, unclassed markup.
   ──────────────────────────────────────────────────────────── */
#tab-reviews .woocommerce-Reviews-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--hc-text-lg);
}
#review_form_wrapper {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hc-border);
}
#review_form .comment-reply-title {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--hc-dark2);
  margin-bottom: 18px;
}
#review_form .comment-reply-title small {
  margin-left: 10px;
}
#review_form .comment-reply-title small a {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-muted);
}
#review_form .comment-notes,
#review_form #email-notes {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  margin-bottom: 18px;
}
#review_form .comment-form-rating {
  margin-bottom: 18px;
}
#review_form p.comment-form-comment,
#review_form p.comment-form-review-image,
#review_form p.comment-form-author,
#review_form p.comment-form-email {
  margin-bottom: 18px;
}
/* Excludes the star widget's own <label> glyphs (shop.css's
   .hc-star-rating__stars label — the clickable ★ characters, not field
   labels): those aren't wrapped in a distinguishing class, so the safest
   fix is scoping this to the actual field labels by their known ids/for
   targets instead of a bare "label" selector that would also catch the
   stars and shrink/recolor them to plain text. */
#review_form p.comment-form-comment > label,
#review_form p.comment-form-review-image > label,
#review_form p.comment-form-author > label,
#review_form p.comment-form-email > label,
#review_form .hc-star-rating__label {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-heading);
  margin-bottom: 6px;
}
#review_form textarea#comment {
  width: 100%;
  max-width: 100%;
  resize: vertical;
}
#review_form input#author,
#review_form input#email {
  width: 100%;
  max-width: 420px;
}
#review_form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  margin-bottom: 20px;
}
#review_form .comment-form-cookies-consent label {
  margin-bottom: 0;
}
#review_form .hc-review-notes {
  margin: -4px 0 18px;
}
/* Core's own woocommerce.css (still loaded on this page — only dequeued on
   the front page/cart/account, see functions.php) styles this exact element
   via ".woocommerce #respond input#submit" — two IDs plus a class, which
   beats a single-ID selector regardless of source order. #respond#submit
   here matches that specificity so the brand styling actually wins instead
   of silently losing to core's default gray button. */
#respond #review_form .hc-review-submit,
#respond input#submit.hc-review-submit {
  /* input[type=submit] keeps native OS button chrome (background/border) under
     "appearance:auto" in every browser unless explicitly opted out — a plain
     class selector doesn't override that the way it would on a <button>. */
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 1.5px solid var(--hc-accent);
  border-radius: var(--hc-btn-r);
  background: var(--hc-accent);
  color: var(--hc-dark);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
#respond input#submit.hc-review-submit:hover {
  background: var(--hc-accent-d);
  border-color: var(--hc-accent-d);
  color: var(--hc-white);
}
#tab-reviews .must-log-in,
#tab-reviews .woocommerce-verification-required {
  color: var(--hc-muted);
  font-size: var(--hc-text-sm);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hc-border);
}
#tab-reviews .must-log-in a {
  color: var(--hc-accent);
}

/* Photo preview chips (assets/js/review-form.js) — already Bootstrap-classed
   (.border.rounded etc.); just bring the border/radius onto brand tokens. */
.hc-review-image-item {
  border-color: var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
}
.hc-review-image-item.border-danger {
  border-color: #c62828 !important;
}
.hc-review-image-item__reason {
  color: #c62828;
  font-size: var(--hc-text-xs);
}

/* ─── 8b. Product tabs (Description / Specifications / etc.) ──
   Core renders these unstyled — bare bordered <li> buttons. Underline the
   active tab in the brand gold, matching the design; a card wraps the panel
   so the whole block reads as one unit, like the collection sidebar card.
   ──────────────────────────────────────────────────────────── */
.woocommerce-tabs.wc-tabs-wrapper {
  margin-top: 48px;
}
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0 0 -1px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--hc-border) !important;
  list-style: none !important;
}
.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0 0 14px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-md);
  font-weight: 600;
  color: var(--hc-muted);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--hc-heading);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--hc-heading);
  border-bottom-color: var(--hc-accent);
}
.woocommerce-tabs .panel {
  padding: 28px 0 0 !important;
  border: 0 !important;
  color: var(--hc-body);
  line-height: 1.7;
}
.woocommerce-tabs .panel h2 {
  font-size: var(--hc-text-lg);
  color: var(--hc-heading);
  margin-bottom: 12px;
}

/* ─── 8c. Related products ─────────────────────────────────────
   Markup: woocommerce/single-product/related.php. Heading uses the site-wide
   .sec-head/.sec-label/.sec-title pattern (global.css); the product grid
   itself is core's own ul.products, styled by shop.css (already loaded here
   since is_product() implies is_woocommerce()).
   ──────────────────────────────────────────────────────────── */
.hc-related-products {
  margin-top: 64px;
}

/* ─── 9. Responsive ───────────────────────────────────────────*/
@media (max-width: 860px) {
  .hc-product-layout {
    margin-bottom: 40px;
  }
  .hc-specs-table th {
    width: 140px;
  }
  .hc-gallery__thumb {
    width: 60px;
    height: 60px;
  }
  /* The close button has no room above the dialog on small screens, so move it
     inside the top-right corner of the image instead. */
  .hc-gallery-modal__close {
    top: 10px;
    right: 10px;
  }
}