/* =========================================================
ANVIL0 — Product page visual layer ("Sand & Ink" redesign, wave 3)
Loaded ONLY by product.html, AFTER css/styles.css and the page's own
inline <style> block (gallery/opt-group/accordion/review rules).
Same pattern as css/home-v2.css and css/shop-v2.css: everything here
is scoped under body.product-v2, so it cannot leak to any other page.
Reuses the exact same design tokens/fonts so all three pages read as
one system.

Nothing here changes markup, ids, or JS-driven behavior — gallery
thumbs, size/finish swatches, quantity stepper, Add to Cart, the FAQ
accordion, review submission and the related-products rail all keep
working exactly as before; this file only restyles the existing DOM.
========================================================= */

body.product-v2{
--hv-ink: #0e0d0c;
--hv-panel: #191715;
--hv-panel-2: #14120f;
--hv-line: #232019;
--hv-line-soft: #2b261d;
--hv-line-btn: #3a352c;
--hv-sand: #c9b494;
--hv-sand-hi: #d8c5a8;
--hv-sand-dark: #17130d;
--hv-paper: #ece7dd;
--hv-text-2: #d6cec1;
--hv-text-3: #b8ad9c;
--hv-text-4: #8d8272;

--hv-display: 'Archivo', 'Arial Narrow', sans-serif;
--hv-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--hv-mono: 'JetBrains Mono', 'Courier New', monospace;

/* Legacy variable bridge — recolors any leftover inline
style="...var(--accent...)" (e.g. the shared footer's Privacy Policy
link, and any other var(--accent)-styled inline links on this page)
without touching markup. */
--accent: var(--hv-sand);

background: var(--hv-ink);
background-image: none;
}
body.product-v2 #main-content,
body.product-v2 .site-footer{
background: var(--hv-ink);
font-family: var(--hv-body);
color: var(--hv-paper);
}

/* ---------------------------------------------------------------
Announcement bar / header / buttons — identical treatment to
shop-v2 and home-v2, so the chrome around every redesigned page
reads as one system.
--------------------------------------------------------------- */
body.product-v2 .announce{
background: var(--hv-panel);
border-bottom: 1px solid var(--hv-line);
color: var(--hv-text-3);
font-family: var(--hv-mono);
letter-spacing: 0.14em;
}
body.product-v2 .announce b{ color: var(--hv-sand); font-weight: 500; }

body.product-v2 .site-header{
background: rgba(14,13,12,0.94);
border-bottom: 1px solid var(--hv-line);
}
body.product-v2 .logo-word{
font-family: var(--hv-display);
font-weight: 800;
letter-spacing: 0.14em;
color: var(--hv-paper);
}
body.product-v2 .logo-word b{ color: var(--hv-sand); }
body.product-v2 .logo small{
font-family: var(--hv-mono);
color: var(--hv-text-4);
}
body.product-v2 .main-nav a{
font-family: var(--hv-body);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--hv-text-3);
}
body.product-v2 .main-nav a:hover,
body.product-v2 .main-nav a.active{
color: var(--hv-paper);
border-color: var(--hv-sand);
}
body.product-v2 .main-nav a .tag{
font-family: var(--hv-mono);
background: var(--hv-line);
color: var(--hv-text-4);
}
body.product-v2 .nav-icon-btn{
color: var(--hv-text-3);
font-family: var(--hv-mono);
}
body.product-v2 .nav-icon-btn:hover{ color: var(--hv-paper); }
body.product-v2 .cart-count{
background: var(--hv-sand);
color: var(--hv-sand-dark);
}

body.product-v2 .btn{
font-family: var(--hv-body);
border-radius: 999px;
letter-spacing: 0.02em;
text-transform: none;
transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
body.product-v2 .btn-primary{
background: var(--hv-sand);
color: var(--hv-sand-dark);
border: none;
font-weight: 600;
}
body.product-v2 .btn-primary:hover{ background: var(--hv-sand-hi); }
body.product-v2 .btn-outline{
background: transparent;
border: 1px solid var(--hv-line-btn);
color: var(--hv-text-2);
}
body.product-v2 .btn-outline:hover{ border-color: #554d40; color: var(--hv-paper); }
body.product-v2 .btn-sm{ padding: 8px 14px; font-size: 12px; }

/* ---------------------------------------------------------------
Breadcrumb — identical treatment to shop-v2.
--------------------------------------------------------------- */
body.product-v2 .breadcrumb{
font-family: var(--hv-mono);
color: var(--hv-text-4);
border-bottom: 1px solid var(--hv-line);
}
body.product-v2 .breadcrumb a{ color: var(--hv-text-4); }
body.product-v2 .breadcrumb a:hover{ color: var(--hv-sand); }
body.product-v2 .breadcrumb span{ color: var(--hv-text-3); }

/* Generic tag pill — used for "Ships in…" and "Verified Customer". */
body.product-v2 .tag{
font-family: var(--hv-mono);
border-radius: 999px;
background: var(--hv-line);
color: var(--hv-text-3);
border-color: var(--hv-line-btn);
}
body.product-v2 .tag-muted{ background: transparent; border-color: var(--hv-line-btn); color: var(--hv-text-4); }

/* ---------------------------------------------------------------
Gallery — main image panel + thumbnail strip.
--------------------------------------------------------------- */
body.product-v2 .gallery-main{
background: var(--hv-panel);
background-image: none;
border: 1px solid var(--hv-line);
border-radius: 20px;
}
body.product-v2 .gallery-thumbs div{
background: var(--hv-panel);
border: 1px solid var(--hv-line);
border-radius: 10px;
}
body.product-v2 .gallery-thumbs div.active{ border-color: var(--hv-sand); }

/* ---------------------------------------------------------------
Product info column
--------------------------------------------------------------- */
body.product-v2 .eyebrow{
font-family: var(--hv-mono);
color: var(--hv-text-3);
letter-spacing: 0.14em;
}
body.product-v2 .eyebrow::before{ background: var(--hv-sand); }
body.product-v2 #pdp-title{
font-family: var(--hv-display);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--hv-paper);
}
body.product-v2 #pdp-price{
font-family: var(--hv-mono);
color: var(--hv-sand);
font-weight: 500;
}
body.product-v2 #pdp-desc{
font-family: var(--hv-body);
color: var(--hv-text-3);
}

/* "Made to order" callout — restyled as a quiet sand-accented panel
rather than the old ember/danger warning treatment; the message is
informational, not urgent, in this design. */
body.product-v2 .urgency{
background: var(--hv-panel);
border: 1px solid var(--hv-line);
border-left: 3px solid var(--hv-sand);
color: var(--hv-text-2);
font-family: var(--hv-mono);
border-radius: 10px;
}
body.product-v2 .urgency svg{ stroke: var(--hv-sand); }

body.product-v2 .opt-group .heading-caption,
body.product-v2 .opt-group h4{
font-family: var(--hv-mono);
color: var(--hv-text-3);
font-weight: 500;
}
body.product-v2 .opt-swatch{
font-family: var(--hv-mono);
background: var(--hv-panel);
border: 1px solid var(--hv-line-btn);
color: var(--hv-text-2);
border-radius: 999px;
}
body.product-v2 .opt-swatch.active{
border-color: var(--hv-sand);
color: var(--hv-sand-dark);
background: var(--hv-sand);
}
body.product-v2 .qty-stepper{
border: 1px solid var(--hv-line-btn);
border-radius: 999px;
background: var(--hv-panel);
}
body.product-v2 .qty-stepper button{ color: var(--hv-text-2); }
body.product-v2 .qty-stepper button:hover{ color: var(--hv-paper); }
body.product-v2 .qty-stepper input{ color: var(--hv-paper); font-family: var(--hv-mono); }

body.product-v2 .trust-item svg{ stroke: var(--hv-sand); }
body.product-v2 .trust-item span{ font-family: var(--hv-body); color: var(--hv-text-3); }

/* FAQ accordion */
body.product-v2 .faq-item{ border-bottom: 1px solid var(--hv-line); }
body.product-v2 .faq-q{
font-family: var(--hv-mono);
color: var(--hv-text-2);
letter-spacing: 0.08em;
}
body.product-v2 .faq-q .chev{ color: var(--hv-text-4); }
body.product-v2 .faq-a{ font-family: var(--hv-body); color: var(--hv-text-3); }

/* ---------------------------------------------------------------
Sections below the fold (reviews, related products) — both use the
shared .section wrapper.
--------------------------------------------------------------- */
body.product-v2 .section{ border-top: 1px solid var(--hv-line); }
body.product-v2 .section-head h2{
font-family: var(--hv-display);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--hv-paper);
text-transform: none;
}
body.product-v2 .stars{ color: var(--hv-sand); font-family: var(--hv-mono); }

/* Reviews */
body.product-v2 .review{ border-bottom: 1px solid var(--hv-line); }
body.product-v2 .review-avatar{
background: var(--hv-panel);
border: 1px solid var(--hv-line-btn);
color: var(--hv-sand);
font-family: var(--hv-mono);
}
body.product-v2 .review strong{ font-family: var(--hv-body); color: var(--hv-paper); }
body.product-v2 .review p{ font-family: var(--hv-body); color: var(--hv-text-3); }
body.product-v2 .review-photo{ border: 1px solid var(--hv-line); border-radius: 10px; }
body.product-v2 .review-reply{
background: var(--hv-panel);
border-radius: 10px;
border-left: 3px solid var(--hv-sand);
}
body.product-v2 .review-reply strong{ color: var(--hv-sand-hi); }
body.product-v2 #pdp-reviews-empty{ font-family: var(--hv-body); color: var(--hv-text-4); }

/* Review form */
body.product-v2 #pdp-review-form-wrap h3{
font-family: var(--hv-display);
color: var(--hv-paper);
font-weight: 600;
}
body.product-v2 .field label{
font-family: var(--hv-mono);
color: var(--hv-text-3);
letter-spacing: 0.08em;
}
body.product-v2 .field input,
body.product-v2 .field select,
body.product-v2 .field textarea{
background: var(--hv-ink);
border: 1px solid var(--hv-line-btn);
color: var(--hv-paper);
border-radius: 10px;
font-family: var(--hv-body);
}
body.product-v2 .field input:focus,
body.product-v2 .field select:focus,
body.product-v2 .field textarea:focus{ border-color: var(--hv-sand); }
body.product-v2 #pdp-review-signin-note{ font-family: var(--hv-body); color: var(--hv-text-4); }
body.product-v2 #pdp-review-signin-note a{ color: var(--hv-sand); }

/* ---------------------------------------------------------------
Related products — same .card markup as the shop/home catalog grid,
restyled identically so it reads as one component sitewide.
--------------------------------------------------------------- */
body.product-v2 .grid .card{
background: none;
border: none;
border-radius: 0;
}
body.product-v2 .grid .card-media{
border-radius: 16px;
background: var(--hv-panel);
}
body.product-v2 .grid .card:hover .card-media img{ transform: scale(1.03); }
body.product-v2 .grid .card-media img{ transition: transform .25s ease-out; }
body.product-v2 .grid .card-body{ background: none; padding: 14px 2px 0; }
body.product-v2 .grid .card-title{
font-family: var(--hv-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--hv-paper);
text-transform: none;
}
body.product-v2 .grid .card:hover .card-title{ color: #ffffff; }
body.product-v2 .grid .card-desc{ display: none; }
body.product-v2 .grid .card-tags{
font-family: var(--hv-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hv-text-4);
margin-top: 4px;
display: block;
}
body.product-v2 .grid .card-tags .tag{ background: none; padding: 0; color: var(--hv-text-4); }
body.product-v2 .grid .card-foot{ margin-top: 12px; }
body.product-v2 .grid .price{ font-family: var(--hv-mono); color: var(--hv-sand); font-size: 14px; }
body.product-v2 .grid .price-label{ display: none; }
body.product-v2 .grid .card-badge{
font-family: var(--hv-mono);
background: var(--hv-sand);
color: var(--hv-sand-dark);
border-radius: 999px;
}
body.product-v2 .grid .card-badge.badge-sale{ background: #c96b4a; color: var(--hv-paper); }
body.product-v2 .grid .card-badge.badge-new{ background: var(--hv-paper); color: var(--hv-sand-dark); }
body.product-v2 .grid .card-fav{
background: rgba(14,13,12,0.55);
border: 1px solid var(--hv-line);
}
body.product-v2 .grid .card-fav svg{ stroke: var(--hv-text-2); }
body.product-v2 .grid .card-quickview{
background: rgba(14,13,12,0.55);
border: 1px solid var(--hv-line);
color: var(--hv-text-2);
}
body.product-v2 .grid .card-quickview:hover{ background: var(--hv-sand); border-color: var(--hv-sand); color: var(--hv-sand-dark); }

/* Quick View modal (js/main.js opens .qv-overlay/.qv-modal on Quick
View click from a related-product card — global markup, appended
under <body>). Identical treatment to shop-v2. */
body.product-v2 .qv-overlay{ background: rgba(14,13,12,0.88); }
body.product-v2 .qv-modal{
background: var(--hv-panel);
border: 1px solid var(--hv-line);
border-radius: 20px;
}
body.product-v2 .qv-close{
background: rgba(14,13,12,0.55);
border: 1px solid var(--hv-line);
color: var(--hv-paper);
}
body.product-v2 .qv-close:hover{ background: var(--hv-sand); border-color: var(--hv-sand); color: var(--hv-sand-dark); }
body.product-v2 .qv-media{ background: var(--hv-panel-2); }
body.product-v2 .qv-eyebrow{ font-family: var(--hv-mono); color: var(--hv-text-4); }
body.product-v2 .qv-title{ font-family: var(--hv-display); color: var(--hv-paper); font-weight: 700; }
body.product-v2 .qv-rating{ color: var(--hv-text-3); font-family: var(--hv-body); }
body.product-v2 .qv-rating .stars{ color: var(--hv-sand); }
body.product-v2 .qv-desc{ font-family: var(--hv-body); color: var(--hv-text-3); }
body.product-v2 .qv-price-row .price{ font-family: var(--hv-mono); color: var(--hv-sand); }
body.product-v2 .qv-price-row .old{ color: var(--hv-text-4); }

/* ---------------------------------------------------------------
Footer — identical treatment to shop-v2/home-v2.
--------------------------------------------------------------- */
body.product-v2 .site-footer{ border-top: 1px solid var(--hv-line); }
body.product-v2 .site-footer .heading-caption{
font-family: var(--hv-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--hv-paper);
text-transform: uppercase;
}
body.product-v2 .site-footer p,
body.product-v2 .site-footer ul a{ font-family: var(--hv-body); color: var(--hv-text-3); }
body.product-v2 .site-footer ul a:hover{ color: var(--hv-sand); }
body.product-v2 .site-footer .footer-bottom p{
font-family: var(--hv-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--hv-text-4);
}
body.product-v2 .site-footer .logo-word{ color: var(--hv-paper); }
body.product-v2 .site-footer .footer-pay span{ border-color: var(--hv-line-btn); color: var(--hv-text-4); font-family: var(--hv-mono); }
body.product-v2 .social-row a{ border-color: var(--hv-line-btn); }
body.product-v2 .social-row svg{ stroke: var(--hv-text-3); }