/**
 * Velonix Labs — Product Detail (page-specific)
 * Enqueued only on is_product() (see inc/enqueue.php).
 *
 * The base hero grid, gallery panel, Certificate of Analysis card, and
 * related products list are NOT redefined here — they reuse
 * .hero-grid/.hero-visual/.hero-photo, .quality-grid, .coa, and
 * .index-list from components.css exactly as they appear on the
 * homepage. Only genuinely new elements, and this page's specific
 * proportion override below, live in this file.
 */

/* ===== Product hero grid — desktop/tablet/mobile compositions =====
   Previously this page had NO responsive treatment of its own at all
   below 1024px — it simply inherited the shared .hero-grid's generic
   single-column stack (components.css, @media max-width:1023px),
   with zero reordering and zero mobile-specific image sizing. That's
   confirmed by reading the file before touching it, not assumed: this
   whole block used to be four lines, only covering desktop. This is
   exactly why mobile read as "the desktop layout stacked vertically"
   — it genuinely was, because nothing here ever said otherwise.

   .product-add-to-cart is now a direct grid child in
   woocommerce/single-product.php (a sibling of .product-summary and
   .hero-visual, no longer nested inside .product-summary) —
   grid-template-areas is what actually needs that sibling
   relationship to place it independently per breakpoint: same column
   as the product info on desktop/tablet, but after the image
   specifically on mobile. That reorder is impossible via CSS alone
   while it stayed nested inside .product-summary's fixed position in
   the DOM, regardless of what order/flex tricks were applied to it.

   Desktop (≥1024px) — UNCHANGED from before: 1.5fr:1fr split, 340px
   image cap. Confirmed by measuring the actual rendered hero-visual
   width/position before and after this change and finding it
   pixel-identical (see verification in conversation). */
@media (min-width:1024px){
  .product-hero-grid{
    grid-template-columns:1.5fr 1fr;
    grid-template-areas:
      "summary visual"
      "cart visual";
  }
  .product-hero-grid .hero-visual{max-width:340px; margin-left:auto;}
}

/* Tablet (768–1023px) — explicitly requested to keep the desktop-style
   two-column composition, not the generic stack, just scaled down.
   Same grid-template-areas as desktop (summary+cart share the left
   column, visual spans both rows on the right) — only the column
   ratio, gap, and image cap differ, the same "reuse the composition,
   adjust the proportions" approach already used for the homepage
   hero's own tablet breakpoint. 1.3fr:0.7fr gives text relatively
   more room than desktop's 1.5:1.05 split, and a 260px image cap
   (versus desktop's 340px) keeps it comfortably smaller without
   feeling cramped at this width. */
@media (min-width:768px) and (max-width:1023px){
  .product-hero-grid{
    grid-template-columns:1.3fr 0.7fr;
    grid-template-areas:
      "summary visual"
      "cart visual";
    gap:40px;
  }
  .product-hero-grid .hero-visual{max-width:260px; margin-left:auto;}
}

/* Mobile (≤767px) — a deliberate composition, not the desktop layout
   stacked: category -> name -> price -> stock (.product-summary) ->
   product image (.hero-visual) -> quantity/Add to Basket (.cart) ->
   Product information (the .product-description section, which
   already lives in its own <section> entirely after this grid in
   single-product.php, so no reorder was needed there — only within
   this grid itself). Single column, explicit stacking order via
   grid-template-areas naming each piece on its own row, not simply
   inheriting whatever DOM order happened to produce. */
@media (max-width:767px){
  .product-hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "summary"
      "visual"
      "cart";
    gap:28px;
  }

  /* The actual "substantially smaller, feels like a product hero"
     request — reuses the exact technique already proven on the
     homepage hero's own mobile fix (a percentage max-width + centring,
     not a crop: object-fit:cover has nothing to crop since the
     container ratio still matches the source photo's own ratio).
     60% here (a bit tighter than the homepage hero's 68%) since a
     single product photo carries less compositional weight than a
     homepage hero image and can afford to sit smaller and more
     centred as a supporting element, not the page's visual anchor. */
  .product-hero-grid .hero-visual{
    max-width:60%;
    margin:0 auto;
  }
}

/* grid-area names are consistent across every breakpoint above — only
   the grid-template-areas matrix itself changes per breakpoint, not
   which named area each element belongs to, so these three
   assignments are unconditional and live once here rather than
   repeated inside each media query. */
.product-hero-grid .product-summary{ grid-area:summary; }
.product-hero-grid .hero-visual{ grid-area:visual; }
.product-hero-grid .product-add-to-cart{ grid-area:cart; }

.product-summary .index-cat{margin-bottom:12px;}
.product-summary h1{font-size:34px; font-weight:600; letter-spacing:-0.015em; margin-bottom:16px; font-family:'Plus Jakarta Sans',sans-serif;}

.product-price{font-family:'IBM Plex Mono',monospace; font-size:28px; color:var(--ink); margin-bottom:12px;}
.product-price del{color:var(--ink-faint); font-size:18px; margin-right:10px; opacity:0.7;}
.product-price ins{text-decoration:none;}

/* This page had no mobile type scale at all before — h1/price stayed
   fixed at their desktop size on every viewport, unlike .hero-h
   elsewhere (52px -> 36px -> 27px), the one inconsistency actually
   noticeable on a real product page at 320–430px. Matches that same
   two-step desktop/tablet/mobile scale, not a new one. */
@media (max-width:767px){
  .product-summary h1{font-size:26px;}
  .product-price{font-size:22px;}
  .product-price del{font-size:15px;}
}

.product-short-desc{font-size:15px; color:var(--ink-soft); line-height:1.75; max-width:460px; margin-bottom:20px;}

.product-stock-row{display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.product-stock-row .product-spec{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint);}

/* ===== add-to-cart — styles WooCommerce's own native form classes
   (.cart, .quantity, .qty, .single_add_to_cart_button) rather than
   custom-building the form, so quantity limits / variable-product
   dropdowns / AJAX add-to-cart keep working untouched. ===== */
.product-add-to-cart .cart{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.product-add-to-cart .quantity{display:inline-flex;}
.product-add-to-cart .qty{
  width:72px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; text-align:center; outline:none;
  transition:border-color 0.18s ease;
}
.product-add-to-cart .qty:focus{border-color:var(--accent);}
.product-add-to-cart .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px;
  border-radius:var(--radius); cursor:pointer; border:1px solid transparent; white-space:nowrap;
  background:var(--accent); color:#0D1017; padding:13px 26px;
  transition:background-color 0.18s ease;
}
.product-add-to-cart .single_add_to_cart_button:hover{background:#6E94EA;}
.product-add-to-cart .single_add_to_cart_button.disabled,
.product-add-to-cart .single_add_to_cart_button[disabled]{
  background:var(--surface); color:var(--ink-faint); cursor:not-allowed;
}
/* Variable-product dropdowns (native WooCommerce markup) */
.product-add-to-cart table.variations{width:100%; margin-bottom:16px; border-collapse:collapse;}
.product-add-to-cart table.variations td{padding:8px 0;}
.product-add-to-cart table.variations select{
  color-scheme:dark; width:100%; max-width:280px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px;
}
.product-add-to-cart .stock.out-of-stock{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:var(--radius); padding:13px 20px;
}

/* ===== long-form product description — plain prose, comfortable width ===== */
.product-description{font-size:15px; color:var(--ink-soft); line-height:1.8; max-width:720px;}
.product-description p{margin-bottom:20px;}
.product-description p:last-child{margin-bottom:0;}

/* ===== Research Pack — factual pricing label =====
   A restrained text line, not a coloured badge or pill — deliberately
   matching the same quiet, technical-data treatment already used for
   .product-spec/.stock elsewhere on this page, not inventing a new
   "promotional" visual language. Only ever rendered for a product in
   the Research Packs category with a genuine regular/sale price gap
   (velonix_get_pack_saving_percentage(), inc/template-tags.php) — for
   every other product this class simply never appears in the markup. */
.pack-saving-label{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-faint);
  margin-top:4px; margin-bottom:20px;
}

/* ===== Research Pack — "available" notice on an individual product =====
   A single bordered block, the same restrained treatment as this
   theme's other informational panels (e.g. the Basket/Checkout
   shipping-info-panel) — one border, one background tone, no
   secondary colour, no icon, no "SALE"-style visual weight. Only
   rendered when velonix_get_linked_research_pack() finds a genuine
   linked pack; an ordinary product with nothing linked never gets
   this element in the DOM at all. */
.research-pack-notice{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:20px; margin-top:24px;
}
.research-pack-notice-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--accent); font-weight:600; margin-bottom:8px;
}
.research-pack-notice p{
  font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:12px;
}
.research-pack-notice-link{
  font-size:14px; font-weight:600; color:var(--accent); text-decoration:none;
}
.research-pack-notice-link:hover{ color:#6E94EA; }