/* ==========================================================================
   Brand theme overrides — one class per brand slug.
   Each class sets --brand-accent + optional --brand-accent-dark.
   Activated via body.brand-{slug} (set by NSH_Master_Landing::add_body_class).
   ========================================================================== */

body.brand-vitanity {
    --brand-accent: #5E7F6B;
    --brand-accent-dark: #3e5a4d;
}

body.brand-organic-muscle {
    --brand-accent: #2D5A3D;
    --brand-accent-dark: #1c3f29;
}

body.brand-wellness-nest {
    /* Legacy fallback — Wellness Nest uses its own template, this class
       is only useful if someone later migrates WN to Master Landing v2. */
    --brand-accent: #a3783d;
    --brand-accent-dark: #73521e;
}

/* ==========================================================================
   Collection section — brand-accent overrides
   ----------------------------------------------------------------------------
   parts/products-grid.php reuses the theme's .wn-* classes (which default to
   amber colors from Wellness Nest). For brand landing pages, swap amber →
   brand-accent on subtitle eyebrow, category group heading, product category
   eyebrow, and the CTA button background.
   ========================================================================== */

body.brand-vitanity .nsh-collection .wn-subtitle,
body.brand-vitanity .nsh-collection .nsh-collection-subtitle,
body.brand-vitanity .nsh-collection .nsh-collection-group-heading,
body.brand-vitanity .nsh-collection .nsh-collection-eyebrow,
body.brand-organic-muscle .nsh-collection .wn-subtitle,
body.brand-organic-muscle .nsh-collection .nsh-collection-subtitle,
body.brand-organic-muscle .nsh-collection .nsh-collection-group-heading,
body.brand-organic-muscle .nsh-collection .nsh-collection-eyebrow {
    color: var(--brand-accent) !important;
}

/* CTA button — brand color instead of theme's default dark (bark-900). Uses
   !important to beat inline styles and the .wn-btn-dark theme rule regardless
   of load order. */
body.brand-vitanity .nsh-collection-cta,
body.brand-organic-muscle .nsh-collection-cta {
    background: var(--brand-accent) !important;
    color: #fff !important;
}
body.brand-vitanity .nsh-collection-cta:hover,
body.brand-organic-muscle .nsh-collection-cta:hover {
    background: var(--brand-accent-dark) !important;
}

/* Product title hover uses brand-accent on brand pages (theme default is sage-600). */
body.brand-vitanity .nsh-collection .wn-product-body h3 a:hover,
body.brand-organic-muscle .nsh-collection .wn-product-body h3 a:hover {
    color: var(--brand-accent);
}

/* Shop-All CTA at bottom of Collection section ---------------------------- */
.nsh-collection-shop-all {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--nsh-v2-border);
}
.nsh-collection-shop-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border: 1.5px solid var(--nsh-v2-fg);
    color: var(--nsh-v2-fg);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nsh-collection-shop-all-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nsh-collection-shop-all-link:hover {
    background: var(--nsh-v2-fg);
    color: #fff;
    border-color: var(--nsh-v2-fg);
    transform: translateY(-1px);
}
.nsh-collection-shop-all-link:hover svg { transform: translateX(3px); }

/* Brand-accent for Shop-All on brand LPs. */
body.brand-vitanity .nsh-collection-shop-all-link,
body.brand-organic-muscle .nsh-collection-shop-all-link {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}
body.brand-vitanity .nsh-collection-shop-all-link:hover,
body.brand-organic-muscle .nsh-collection-shop-all-link:hover {
    background: var(--brand-accent);
    color: #fff;
    border-color: var(--brand-accent);
}

/* ==========================================================================
   Product card — luxury image frame (2026-04-19 round 4)
   Applies to BOTH Vitanity + Organic Muscle brand LPs. Supersedes the earlier
   brand-tinted frame (sand #f0ebe0 / beige #f7f3eb) with a near-white unified
   canvas + soft card shadow + drop-shadow on the bottle image.

   Design spec per user feedback:
     - 1:1 aspect ratio, consistent padding so bottle never touches edges
     - No hard border — card floats on page bg with soft shadow
     - Near-white canvas so bottle sits cleanly without competing colors
     - drop-shadow filter on <img> gives bottle a subtle depth halo
     - Hover: image scales 1.05 smoothly (.5s ease)
   ========================================================================== */
/* Card wrapper bg matches image-frame bottom color — unified cream across
   frame + body eliminates the visible midline seam (user feedback
   2026-04-20 round 3: "frame cream vs body white looks cheap, not
   premium"). Brand-specific below. */
body.brand-vitanity .nsh-collection .wn-product,
body.brand-organic-muscle .nsh-collection .wn-product {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 1px 6px -1px rgba(28, 27, 26, 0.03),
                0 10px 28px -14px rgba(28, 27, 26, 0.07);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease;
    overflow: hidden;
}
body.brand-vitanity .nsh-collection .wn-product      { background: #faf7f2; }
body.brand-organic-muscle .nsh-collection .wn-product { background: #f5f1ea; }
body.brand-vitanity .nsh-collection .wn-product:hover,
body.brand-organic-muscle .nsh-collection .wn-product:hover {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 6px 20px -4px rgba(28, 27, 26, 0.08),
                0 30px 60px -20px rgba(28, 27, 26, 0.14);
}
/* Image frame: warm off-white canvas (cream/beige per brand) replaces pure
   white — user feedback 2026-04-20 "pure #fff looks flat, not premium US".
   Padding reduced 12% → 8% (2026-04-20 round 2): 12% left too much negative
   space, bottle looked floaty. 8% preserves breathing room without
   touching the edge. Gradient bg (top lighter → bottom ~3% darker) gives
   subtle studio-lighting feel: bottle appears lit from above. */
body.brand-vitanity .nsh-collection .wn-product-img,
body.brand-organic-muscle .nsh-collection .wn-product-img {
    aspect-ratio: 1 / 1;
    padding: 8%;
    border: 0;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
/* Frame gradient: top slightly brighter (studio-light from above), bottom
   MUST equal card wrapper bg so midline seam disappears. If card bg
   changes, update bottom stop here too. */
body.brand-vitanity .nsh-collection .wn-product-img {
    background: linear-gradient(180deg, #fdfbf7 0%, #faf7f2 100%);
}
body.brand-organic-muscle .nsh-collection .wn-product-img {
    background: linear-gradient(180deg, #f9f5ee 0%, #f5f1ea 100%);
}
/* Vignette overlay: subtle radial darken at edges → depth, luxury framing.
   z-index 0 keeps it below bottle image (z:1) + badge (z:2). */
body.brand-vitanity .nsh-collection .wn-product-img::after,
body.brand-organic-muscle .nsh-collection .wn-product-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                transparent 58%,
                rgba(28, 27, 26, 0.045) 100%);
    border-radius: inherit;
    z-index: 0;
}
/* Badge + quality-mark MUST render above vignette ::after — otherwise the
   vignette radial covers their top-corners. */
body.brand-vitanity .nsh-collection .wn-badge,
body.brand-organic-muscle .nsh-collection .wn-badge,
body.brand-vitanity .nsh-collection .nsh-v2-quality-mark,
body.brand-organic-muscle .nsh-collection .nsh-v2-quality-mark {
    z-index: 2;
}
/* The <img> itself — centered, object-fit contain. Drop-shadow softened
   2026-04-20: 12/18 at 0.10 → 8/14 at 0.06 so it complements (not stacks
   with) the natural shadow already baked into Shopify product shots. */
body.brand-vitanity .nsh-collection .wn-product-img img,
body.brand-organic-muscle .nsh-collection .wn-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Drop-shadow for grounded depth + subtle contrast/saturate pop so
       bottle colors don't wash out on warm cream gradient (2026-04-20
       round 2: +4% contrast, +6% saturate — imperceptible individually,
       noticeable across the grid). */
    filter: drop-shadow(0 8px 14px rgba(28, 27, 26, 0.08))
            drop-shadow(0 2px 4px rgba(28, 27, 26, 0.05))
            contrast(1.04)
            saturate(1.06);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    z-index: 1;
}
body.brand-vitanity .nsh-collection .wn-product:hover .wn-product-img img,
body.brand-organic-muscle .nsh-collection .wn-product:hover .wn-product-img img {
    transform: scale(1.04);
}

/* ==========================================================================
   Vitanity — Luxury Wellness polish (2026-04-19)
   Editorial typography (Playfair serif), ghost CTA, hairline editorial badge.
   Image-frame block lives above and is shared with OM for visual consistency.
   ========================================================================== */
body.brand-vitanity .nsh-collection {
    background: #fefdfb;
}
/* Serif product title — Playfair Display already loaded globally for H2s. */
body.brand-vitanity .nsh-collection .wn-product-body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin-top: 6px;
}
body.brand-vitanity .nsh-collection .wn-product-body h3 a {
    text-decoration: none;
    transition: color 0.2s ease;
}
body.brand-vitanity .nsh-collection .nsh-collection-eyebrow {
    font-weight: 500;
    letter-spacing: 0.14em;
    font-size: 0.64rem;
    opacity: 0.85;
}
body.brand-vitanity .nsh-collection .wn-price {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* OM keeps its sans-serif athletic identity but gains tabular-nums + tighter
   tracking for premium numeric alignment across the card grid. */
body.brand-organic-muscle .nsh-collection .wn-price {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
body.brand-organic-muscle .nsh-collection .wn-price-old {
    font-variant-numeric: tabular-nums;
}
/* Refined ghost CTA — outline with hairline border, fills on hover. */
body.brand-vitanity .nsh-collection-cta {
    background: transparent !important;
    color: var(--brand-accent) !important;
    border: 1px solid var(--brand-accent) !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 12px 20px !important;
    box-shadow: none;
}
body.brand-vitanity .nsh-collection-cta:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
}
/* Promotional amber .wn-badge (top-left) re-tuned to thin editorial label. */
body.brand-vitanity .nsh-collection .wn-badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--nsh-v2-fg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: 9px;
    border-radius: 2px;
    padding: 4px 10px;
    top: 14px;
    left: 14px;
}
/* Save-tag stays functional but muted — not gaudy green pill. */
body.brand-vitanity .nsh-collection .wn-save-tag {
    background: transparent;
    color: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}

/* ==========================================================================
   Organic Muscle — Athletic Luxury polish (2026-04-20)
   Badge: dark forest-green pill with white uppercase text — masculine,
   vintage-sport feel (distinct from Vitanity's airy cream pill).
   Save-tag: outlined forest-green matching the brand-accent palette.
   ========================================================================== */
body.brand-organic-muscle .nsh-collection .wn-badge {
    background: var(--brand-accent);
    color: #ffffff;
    border: 0;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-size: 9px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 5px 11px;
    top: 14px;
    left: 14px;
    box-shadow: 0 2px 8px rgba(45, 90, 61, 0.28);
}
body.brand-organic-muscle .nsh-collection .wn-save-tag {
    background: transparent;
    color: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}