/*
Theme Name: Elvari
Theme URI: https://elvaribd.com
Author: Elvari Brand
Description: Elvari — Everyday Bags. Elevated. Custom WooCommerce theme for Bangladesh DTC.
Version: 1.0.26
Requires at least: 6.4
Requires PHP: 8.1
WC requires at least: 8.0
WC tested up to: 9.9
Text Domain: elvari
*/

/* ============================================
   READABLE TEXT OVERRIDES
   Tailwind CDN JIT doesn't generate opacity modifiers for custom hex colors.
   Each value used in templates gets an explicit rgba() rule.
   Opacities tuned up from their class-name defaults for readability on
   small (11–15px) body copy over ivory/taupe. The class names keep the
   old hierarchy hints; the actual rendered contrast is higher.
   ============================================ */
.text-brown\/60 { color: rgba(59,47,47,0.78) !important; }
.text-brown\/70 { color: rgba(59,47,47,0.86) !important; }
.text-brown\/75 { color: rgba(59,47,47,0.90) !important; }
.text-ivory\/50 { color: rgba(247,243,238,0.72) !important; }
.text-ivory\/60 { color: rgba(247,243,238,0.80) !important; }
.text-ivory\/65 { color: rgba(247,243,238,0.84) !important; }
.text-ivory\/70 { color: rgba(247,243,238,0.88) !important; }
.text-ivory\/80 { color: rgba(247,243,238,0.94) !important; }
.text-ivory\/85 { color: rgba(247,243,238,0.96) !important; }

/* Small body copy — font-light (300) at 11–14px is too thin for good
   contrast even at high opacity. Bump weight a hair for any subtext that
   uses .font-body + .font-light at small sizes. */
.font-body.font-light.text-\[11px\],
.font-body.font-light.text-\[12px\],
.font-body.font-light.text-\[13px\] {
    font-weight: 400;
}

/* ============================================
   ELVARI LOGO — inline SVG sizing
   H·01 (horizontal masthead — wordmark + rule + diamond) is primary for header/footer.
   Color inherits from currentColor — re-tint by setting CSS color on the parent.
   ============================================ */
.elvari-logo svg {
    display: block;
    width: auto;
    height: 100%;
}
.elvari-logo--nav {
    height: 28px;
    display: inline-flex;
    align-items: center;
}
@media (min-width: 768px) {
    .elvari-logo--nav { height: 32px; }
}
.elvari-logo--footer {
    width: 200px;
    max-width: 65vw;
    display: inline-block;
}
@media (min-width: 768px) {
    .elvari-logo--footer { width: 240px; }
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: #F7F3EE;
    color: #3B2F2F;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Hardware-accelerate heavy hero/mosaic to keep pinch-zoom smooth on mobile */
.hero-carousel,
.mosaic-panel,
.showcase-bg-wrapper,
.showcase-product-wrapper {
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Remove will-change on mobile — it's a perf hint that backfires on iOS Safari
   when many elements opt-in. Re-enabled for desktop where it actually helps. */
@media (max-width: 767px) {
    .showcase-bg-image,
    .showcase-product-link {
        will-change: auto !important;
    }
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announce-track {
    display: flex;
    flex-direction: column;
    animation: announce-rotate 12s infinite;
}
.announce-track .announce-msg {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@keyframes announce-rotate {
    0%, 30%    { transform: translateY(0); }
    33%, 63%   { transform: translateY(-40px); }
    66%, 96%   { transform: translateY(-80px); }
    100%       { transform: translateY(0); }
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

#mobile-menu-backdrop.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================
   PRODUCT CARD
   ============================================ */
.product-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover {
    transform: translateY(-4px);
}
.product-card .product-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-img {
    transform: scale(1.04);
}

/* ============================================
   CATEGORY TILE
   ============================================ */
.category-tile {
    border-radius: 0.5rem;
    transition: all 0.4s ease;
}
.category-tile .cat-img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0.5rem;
}
.category-tile:hover .cat-img {
    transform: scale(1.06);
}
.category-tile .cat-overlay {
    transition: background 0.4s ease;
    border-radius: 0.5rem;
}
.category-tile:hover .cat-overlay {
    background: rgba(59,47,47,0.35);
}
.category-tile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(59,47,47,0) 0%, rgba(59,47,47,0.4) 100%);
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 3;
    pointer-events: none;
}

/* ============================================
   EDITORIAL MOSAIC
   ============================================ */
.mosaic-panel .mosaic-img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mosaic-panel:hover .mosaic-img {
    transform: scale(1.03);
}

/* ============================================
   FILTER TAB (shop page)
   ============================================ */
.filter-tab {
    position: relative;
}
.filter-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #3B2F2F;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.filter-tab:hover::after {
    transform: scaleX(1);
}

/* ============================================
   LINKS & BUTTONS
   ============================================ */
a, button {
    transition: opacity 0.2s, transform 0.2s;
}
a:focus-visible, button:focus-visible {
    outline: 2px solid #3B2F2F;
    outline-offset: 3px;
}

/* ============================================
   CTA BUTTON UNDERLINE ANIMATION
   ============================================ */
.cta-btn {
    position: relative;
    overflow: hidden;
}
.cta-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: translateX(-101%);
    transition: transform 0.3s ease;
}
.cta-btn:hover::after {
    transform: translateX(0);
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */
@keyframes scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(8px); opacity: 0.8; }
}

/* ============================================
   GRAIN OVERLAY — desktop only.
   On mobile, mix-blend-mode + repeated SVG noise causes severe pinch-zoom
   jitter and scroll jank on iOS Safari. Disabled below 768px.
   ============================================ */
@media (min-width: 768px) {
    .grain::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
        background-size: 128px 128px;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: overlay;
    }
}

/* Hero height — use static vh on mobile (dvh recalculates during pinch-zoom
   on iOS Safari, causing the page to lurch). Use dvh on desktop where it works fine. */
.hero-vh {
    height: 100vh;
}
@media (min-width: 768px) {
    .hero-vh {
        height: 100dvh;
    }
}

/* ============================================
   HORIZONTAL SCROLL (mobile)
   ============================================ */
.scroll-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-row::-webkit-scrollbar { display: none; }

/* ============================================
   FLOAT ANIMATION
   ============================================ */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ============================================
   DETAIL CARD
   ============================================ */
.detail-card {
    transition: transform 0.3s ease;
}
.detail-card:hover {
    transform: translateY(-3px);
}

/* ============================================
   HERO CROSSFADE CAROUSEL
   ============================================ */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-blur-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to right, black 0%, transparent 45%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 45%);
}
.hero-carousel .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1);
    animation: hero-crossfade 12s infinite;
    will-change: opacity, transform;
}
.hero-carousel .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-carousel .hero-slide:nth-child(2) { animation-delay: 6s; }

@keyframes hero-crossfade {
    0%      { opacity: 0; transform: scale(1); }
    4%      { opacity: 1; transform: scale(1); }
    46%     { opacity: 1; transform: scale(1.03); }
    50%     { opacity: 0; transform: scale(1.03); }
    100%    { opacity: 0; transform: scale(1); }
}

/* ============================================
   DETAIL VIDEO
   ============================================ */
.detail-card:hover .detail-video {
    filter: brightness(1.08);
}
.detail-video {
    transition: filter 0.4s ease;
}

/* ============================================
   MOSAIC VIDEO
   ============================================ */
.mosaic-video {
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mosaic-panel:hover .mosaic-video {
    transform: scale(1.03);
}

/* ============================================
   COLLECTION SHOWCASE — editorial dual-panel
   Lifestyle photo (80%) + product cutout
   overlapping right edge + top-right label
   ============================================ */
.showcase-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    padding: clamp(30px, 6vw, 80px) clamp(20px, 4vw, 60px);
    background: #F7F3EE;
}

.showcase-item {
    position: relative;
    display: block;
    width: 100%;
}

.showcase-bg-wrapper {
    width: 80%;
    position: relative;
    overflow: visible;
    background: #C6B8AB;
    aspect-ratio: 27 / 20;
    border-radius: 6px;
}

.showcase-bg-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.showcase-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.showcase-item:hover .showcase-bg-image {
    transform: scale(1.03);
}

.showcase-label {
    position: absolute;
    top: clamp(12px, 2vw, 28px);
    right: clamp(12px, 2vw, 28px);
    max-width: 35%;
    z-index: 5;
    pointer-events: auto;
}

.showcase-label h3 {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(15px, 1.3vw, 19px);
    letter-spacing: 0.02em;
    text-align: right;
    line-height: 1.35;
    color: #F7F3EE;
    text-shadow: 0 1px 12px rgba(59, 47, 47, 0.45);
}

.showcase-label h3 a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.showcase-label h3 a:hover {
    opacity: 0.65;
}

.showcase-product-wrapper {
    width: 35%;
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-45%);
    z-index: 3;
}

.showcase-product-link {
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.showcase-item:hover .showcase-product-link {
    transform: translateY(-18px);
}

.showcase-product-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transform: scale(1.2);
    transform-origin: center center;
    filter: drop-shadow(0 18px 32px rgba(59, 47, 47, 0.14));
}

/* Lune cutout — 10% smaller than default baseline */
@media (min-width: 768px) {
    .showcase-product-image[src*="lune-product"] {
        transform: scale(1.08);
    }
}
@media (max-width: 767px) {
    .showcase-product-image[src*="lune-product"] {
        transform: scale(1.17);
    }
}

@media (max-width: 767px) {
    .showcase-section {
        display: block;
        padding: 40px 16px 20px;
        position: relative;
        min-height: 400px;
    }
    .showcase-item {
        position: absolute;
        top: 40px;
        left: 16px;
        right: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.7s ease, visibility 0.7s ease;
        z-index: 1;
    }
    .showcase-item.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 2;
    }
    .showcase-bg-wrapper {
        width: 77%;
        aspect-ratio: 27 / 20;
        border-radius: 4px;
    }
    .showcase-bg-link {
        border-radius: 4px;
    }
    .showcase-label {
        top: 10px;
        right: 10px;
        max-width: 40%;
    }
    .showcase-label h3 {
        font-size: 14px;
    }
    .showcase-product-wrapper {
        width: 26%;
        top: 36%;
        right: 6%;
        transform: none;
    }
    .showcase-product-image {
        transform: scale(1.3);
        filter: drop-shadow(0 18px 32px rgba(59, 47, 47, 0.2));
    }

    /* Carousel pagination — vertical bars, right side */
    .showcase-pagination {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 10;
    }
    .showcase-dot {
        width: 2px;
        height: 18px;
        background: rgba(59, 47, 47, 0.22);
        border: none;
        padding: 0;
        cursor: pointer;
        border-radius: 1px;
        transition: background 0.35s ease, height 0.35s ease;
    }
    .showcase-dot.is-active {
        background: rgba(59, 47, 47, 0.85);
        height: 28px;
    }
}

/* Desktop: both items always visible, pagination hidden */
@media (min-width: 768px) {
    .showcase-pagination {
        display: none;
    }
    .showcase-item {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ============================================
   HERO — primary CTA button
   ============================================ */
.hero-cta-primary {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid rgba(247, 243, 238, 0.6);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.hero-cta-primary:hover {
    background-color: rgba(247, 243, 238, 0.1);
    border-color: rgba(247, 243, 238, 0.9);
}

/* ============================================
   DETAILS CIRCLES — The Details section
   ============================================ */
.detail-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
}
@media (min-width: 768px) {
    .detail-circle {
        max-width: 320px;
    }
}

/* ============================================
   MOSAIC PANELS — The Edit section
   ============================================ */
.mosaic-panel--lg { min-height: 260px; }
.mosaic-panel--sm { min-height: 125px; }
@media (min-width: 768px) {
    .mosaic-panel--lg { min-height: 420px; }
    .mosaic-panel--sm { min-height: 200px; }
}

/* ============================================
   FADE-IN ON SCROLL
   Desktop: sections start hidden, JS observer reveals on scroll.
   Mobile: skip the animation — content shows immediately.
   This avoids the failure mode where mobile JS issues
   (LiteSpeed JS combine, iOS observer quirks) leave sections blank.
   ============================================ */
.fade-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
.fade-section.in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 767px) {
    .fade-section {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   SWIPER CAROUSEL — Elvari overrides
   ============================================ */
.elvari-swiper {
    overflow: visible !important;
}
.elvari-swiper .swiper-slide {
    height: auto;
}
/* Navigation arrows */
.elvari-swiper-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.elvari-swiper-nav button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(59,47,47,0.30);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
    flex-shrink: 0;
}
.elvari-swiper-nav button:hover {
    border-color: #3B2F2F;
    background: rgba(59,47,47,0.04);
}
.elvari-swiper-nav button svg {
    transition: transform 0.2s ease;
}
.elvari-swiper-nav button.swiper-prev:hover svg {
    transform: translateX(-2px);
}
.elvari-swiper-nav button.swiper-next:hover svg {
    transform: translateX(2px);
}
.elvari-swiper-nav button.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */

/* Hide WooCommerce default breadcrumbs and titles on product page */
.woocommerce-breadcrumb,
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* Remove WooCommerce default button styles */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: #3B2F2F;
    color: #F7F3EE;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 40px;
    border: 1px solid #3B2F2F;
    transition: background 0.3s, color 0.3s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: transparent;
    color: #3B2F2F;
}

/* Product image gallery */
.woocommerce div.product div.images .flex-control-thumbs li img {
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: #3B2F2F;
}

/* ============================================
   PRODUCT PAGE
   ============================================ */
.product-gallery-main {
    background: #F7F3EE;
    aspect-ratio: 3/4;
    overflow: hidden;
    touch-action: pan-y;
}
.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover-zoom only on devices with a real hover capability (mouse).
   On touch devices iOS treats first tap as hover, requiring a second
   tap to fire the click — scoping with @media (hover: hover) avoids that. */
@media (hover: hover) {
    .product-gallery-main:hover img {
        transform: scale(1.03);
    }
}

.product-thumb {
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s;
    background: #F7F3EE;
    /* Explicit width so the button is visible on first swatch tap even
       before the inner image has loaded — without this the button collapses
       to 0x0 on mobile (no parent width) and the thumb strip vanishes. */
    width: 60px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .product-thumb {
        width: 100%;
    }
}

/* Mobile thumbnail strip — horizontal scroll with hidden scrollbar.
   Lets the user swipe through more thumbnails than fit on screen. */
@media (max-width: 767px) {
    #elvari-thumbs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-left: 16px;
        padding-left: 16px;
        padding-right: 16px;
        margin-left: -16px;
        margin-right: -16px;
    }
    #elvari-thumbs::-webkit-scrollbar {
        display: none;
    }
}
.product-thumb.active {
    border-color: #3B2F2F;
}
@media (hover: hover) {
    .product-thumb:hover {
        border-color: #3B2F2F;
    }
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.colorway-swatch {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border: 1.5px solid #3B2F2F;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

/* Light swatches (cream, ivory, taupe) — brown border for contrast */
.colorway-swatch.swatch-light {
    border-color: #3B2F2F;
}

/* Dark swatches (black, burgundy, olive, red, brown) — brown border so they don't bleed into bg */
.colorway-swatch.swatch-dark {
    border-color: #3B2F2F;
}

.colorway-swatch.active {
    border-color: #3B2F2F;
    outline: 2px solid rgba(59,47,47,0.25);
    outline-offset: 2px;
}
/* Hover ring only on real hover devices.
   Without this scope, iOS Safari treats the first tap as a hover and
   requires a second tap to fire the click event on the swatch. */
@media (hover: hover) {
    .colorway-swatch:hover {
        border-color: #3B2F2F;
        outline: 2px solid rgba(59,47,47,0.25);
        outline-offset: 2px;
    }
}

.add-to-cart-btn {
    width: 100%;
    background: #3B2F2F;
    color: #F7F3EE;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 40px;
    border: 1px solid #3B2F2F;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.add-to-cart-btn:hover {
    background: transparent;
    color: #3B2F2F;
}

.accordion-item {
    border-bottom: 1px solid rgba(198,184,171,0.4);
}
.accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3B2F2F;
}
.accordion-toggle svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.accordion-toggle.open svg {
    transform: rotate(45deg);
}
.accordion-body {
    display: none;
    padding-bottom: 16px;
}
.accordion-body.open {
    display: block;
}

/* ============================================
   QUICK VIEW DRAWER
   ============================================ */
.qv-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(59, 47, 47, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.qv-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Mobile: bottom sheet */
.qv-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F7F3EE;
    padding: 24px 20px 32px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.qv-overlay.is-open .qv-drawer {
    transform: translateY(0);
}
.qv-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.qv-image-col {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    max-height: 220px;
}
.qv-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qv-close {
    display: block;
    margin-bottom: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.qv-close:focus-visible {
    outline: 1px solid #3B2F2F;
    outline-offset: 2px;
}

/* Desktop: right-side slide-in drawer */
@media (min-width: 768px) {
    .qv-drawer {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: auto;
        width: 420px;
        max-height: 100vh;
        transform: translateX(100%);
        padding: 40px 32px;
    }
    .qv-overlay.is-open .qv-drawer {
        transform: translateX(0);
    }
    .qv-inner {
        flex-direction: row;
        gap: 24px;
        align-items: flex-start;
    }
    .qv-image-col {
        flex: 0 0 160px;
        max-height: none;
        aspect-ratio: 3 / 4;
    }
    .qv-details-col {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================
   SORT DROPDOWN
   ============================================ */
.elvari-sort {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%233B2F2F' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 16px;
}

/* ============================================
   SINGLE PRODUCT — ADD TO CART FORM
   Override WooCommerce default button + qty
   ============================================ */
.woocommerce form.cart,
form.cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* Quantity control — custom −/+ stepper wrapping native input */
.woocommerce .quantity,
form.cart .quantity {
    margin: 0;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(59, 47, 47, 0.25);
    background: transparent;
    transition: border-color 0.2s ease;
}
.woocommerce .quantity:focus-within,
form.cart .quantity:focus-within {
    border-color: #3B2F2F;
}
.woocommerce .quantity .qty,
form.cart .quantity .qty {
    width: 44px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(59, 47, 47, 0.18);
    border-right: 1px solid rgba(59, 47, 47, 0.18);
    border-radius: 0;
    color: #3B2F2F;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 13px;
    text-align: center;
    box-shadow: none;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.woocommerce .quantity .qty:focus,
form.cart .quantity .qty:focus {
    outline: none;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button,
form.cart .quantity .qty::-webkit-outer-spin-button,
form.cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.elvari-qty-btn {
    width: 38px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #3B2F2F;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
}
.elvari-qty-btn:hover {
    background: #3B2F2F;
    color: #F7F3EE;
}
.elvari-qty-btn:focus {
    outline: none;
}
.elvari-qty-btn svg {
    display: block;
}

/* Add to Cart button */
.woocommerce button.button.alt,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
form.cart button.single_add_to_cart_button {
    flex: 1;
    height: 52px;
    padding: 0 40px;
    background: #3B2F2F;
    color: #F7F3EE;
    border: 1px solid #3B2F2F;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    text-shadow: none;
}
.woocommerce button.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
form.cart button.single_add_to_cart_button:hover {
    background: transparent;
    color: #3B2F2F;
}
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled,
.woocommerce .single_add_to_cart_button:disabled {
    background: #3B2F2F;
    color: #F7F3EE;
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   CART DRAWER — slide-in shopping bag
   ============================================ */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(59, 47, 47, 0.35);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.cart-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.cart-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    background: #F7F3EE;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: -20px 0 60px rgba(59, 47, 47, 0.15);
}
.cart-drawer-overlay.is-open .cart-drawer-panel {
    transform: translateX(0);
}
.cart-drawer-contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Header */
.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 20px;
    border-bottom: 1px solid rgba(198, 184, 171, 0.35);
}
.cart-drawer-title {
    margin: 0;
    letter-spacing: -0.01em;
}
.cart-drawer-close {
    background: transparent;
    border: none;
    color: #3B2F2F;
    cursor: pointer;
    padding: 6px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.cart-drawer-close:hover {
    opacity: 1;
}

/* Body */
.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px 32px;
}
.cart-drawer-empty {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.cart-drawer-shop-link {
    border-bottom: 1px solid #3B2F2F;
    padding-bottom: 3px;
    transition: opacity 0.2s ease;
}
.cart-drawer-shop-link:hover {
    opacity: 0.6;
}

/* Items list */
.cart-drawer-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cart-drawer-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(198, 184, 171, 0.3);
}
.cart-drawer-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.cart-drawer-item-thumb {
    flex: 0 0 88px;
    aspect-ratio: 3 / 4;
    background: #ece4d7;
    overflow: hidden;
}
.cart-drawer-item-thumb a,
.cart-drawer-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-drawer-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cart-drawer-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.cart-drawer-item-name {
    margin: 0;
}
.cart-drawer-item-name a {
    color: #3B2F2F;
    text-decoration: none;
}
.cart-drawer-item-name a:hover {
    opacity: 0.7;
}
.cart-drawer-remove {
    background: transparent;
    border: none;
    color: #3B2F2F;
    opacity: 0.35;
    cursor: pointer;
    padding: 2px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.cart-drawer-remove:hover {
    opacity: 1;
}
.cart-drawer-item-color {
    margin: 4px 0 0;
}
.cart-drawer-item-bottom {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* In-drawer quantity stepper */
.cart-drawer-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(59, 47, 47, 0.25);
    height: 44px;
}
.cart-drawer-qty-btn {
    width: 44px;
    background: transparent;
    border: none;
    color: #3B2F2F;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cart-drawer-qty-btn:hover {
    background: #3B2F2F;
    color: #F7F3EE;
}
.cart-drawer-qty-value {
    min-width: 28px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #3B2F2F;
    border-left: 1px solid rgba(59, 47, 47, 0.18);
    border-right: 1px solid rgba(59, 47, 47, 0.18);
}

/* Footer */
.cart-drawer-footer {
    padding: 20px 32px 28px;
    border-top: 1px solid rgba(198, 184, 171, 0.35);
    background: #F7F3EE;
}
.cart-drawer-tax-note {
    text-align: center;
    margin: 0 0 14px;
}
.cart-drawer-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    background: #3B2F2F;
    color: #F7F3EE;
    border: 1px solid #3B2F2F;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.cart-drawer-checkout:hover {
    background: transparent;
    color: #3B2F2F;
}
.cart-drawer-dot {
    opacity: 0.5;
}

@media (max-width: 767px) {
    .cart-drawer-panel {
        width: 72%;
        max-width: 320px;
    }
    .cart-drawer-header,
    .cart-drawer-body,
    .cart-drawer-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================
   DISPLAY TYPOGRAPHY REFINEMENTS
   ============================================ */
h1, h2 {
    text-rendering: optimizeLegibility;
}
.font-body {
    line-height: 1.75;
}

/* ============================================
   PAGE PROSE
   Long-form content rendered by page.php
   (Privacy Policy, Terms, About, FAQs, etc.)
   Headings use Cormorant; body inherits Montserrat.
   ============================================ */
.page-prose > *:first-child { margin-top: 0; }
.page-prose > *:last-child { margin-bottom: 0; }

.page-prose p {
    margin: 0 0 1.25em;
}

.page-prose h2 {
    font-family: 'Cormorant Garamond', Cormorant, 'Times New Roman', serif;
    font-weight: 300;
    color: #3B2F2F;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 2.5em 0 0.9em;
}
@media (min-width: 768px) {
    .page-prose h2 { font-size: 30px; }
}

.page-prose h3 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 400;
    color: #3B2F2F;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 1.8em 0 0.6em;
}

.page-prose ul,
.page-prose ol {
    margin: 0 0 1.25em;
    padding-left: 1.4em;
}
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose li {
    margin-bottom: 0.45em;
}
.page-prose li::marker {
    color: rgba(59,47,47,0.4);
}

.page-prose strong {
    color: #3B2F2F;
    font-weight: 500;
}

.page-prose em {
    font-style: italic;
    color: rgba(59,47,47,0.65);
}

.page-prose a {
    color: #3B2F2F;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(59,47,47,0.35);
    transition: text-decoration-color 0.2s ease;
}
.page-prose a:hover {
    text-decoration-color: rgba(59,47,47,0.85);
}

.page-prose hr {
    border: 0;
    border-top: 1px solid rgba(198,184,171,0.5);
    margin: 2.5em 0;
}

.page-prose blockquote {
    border-left: 2px solid rgba(198,184,171,0.6);
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: rgba(59,47,47,0.7);
}

/* ============================================
   NAV LINK HOVER UNDERLINES
   Matches the .cta-btn slide-in animation style.
   ============================================ */
.nav-link {
    position: relative;
    padding-bottom: 3px;
    display: inline-block;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after {
    transform: scaleX(1);
}

/* ============================================
   SCROLL-HIDE NAV
   ============================================ */
nav {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
nav.nav-hidden {
    transform: translateY(-100%);
}

/* ============================================
   TRUST STRIP DARK BAND
   ============================================ */
.trust-strip-dark .trust-divider {
    width: 1px;
    height: 32px;
    background: rgba(247, 243, 238, 0.15);
    flex-shrink: 0;
    align-self: center;
}

/* ============================================
   ASYMMETRIC CATEGORY TILE GRID
   Desktop: tall left tile + 2 stacked right tiles.
   Mobile: single column, all tiles portrait.
   ============================================ */
.cat-grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .cat-grid-asymmetric {
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: auto auto;
        gap: 1rem;
    }
    .cat-grid-asymmetric .cat-tile-tall {
        grid-row: span 2;
        aspect-ratio: 4 / 5;
    }
    .cat-grid-asymmetric .cat-tile-landscape {
        aspect-ratio: 16 / 9;
    }
}
/* Mobile: all tiles portrait regardless of type */
.cat-tile-tall,
.cat-tile-landscape {
    aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
    .cat-tile-landscape {
        aspect-ratio: 16 / 9;
    }
    .cat-tile-tall {
        aspect-ratio: 4 / 5;
    }
}

/* ============================================
   BRAND STORY SPLIT LAYOUT
   Desktop: image left + text right.
   Mobile: stacked, image 16:9 above text.
   ============================================ */
.brand-story-rule {
    width: 40px;
    height: 1px;
    background: rgba(198, 184, 171, 0.55);
    margin: 0 0 2rem;
}
.brand-story-split .brand-img-col {
    background:
        radial-gradient(ellipse at 38% 28%, rgba(247,243,238,0.75) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(166,148,130,0.35) 0%, transparent 45%),
        linear-gradient(160deg, #ddd3c7 0%, #c9b9a9 50%, #b8a898 100%);
    overflow: hidden;
    position: relative;
}
.brand-story-split .brand-img-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.07'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}
.brand-story-split .brand-img-col .brand-img-ornament {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 2;
    opacity: 0.25;
}

/* ============================================
   THE DETAILS SECTION — WARMER BACKGROUND
   ============================================ */
.details-section-bg {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(198,184,171,0.22) 0%, transparent 55%),
        #F7F3EE;
}

/* ============================================
   INSTAGRAM TILE HOVER
   ============================================ */
.insta-tile-hover {
    position: relative;
}
.insta-tile-hover .insta-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.32s ease, transform 0.32s ease;
    z-index: 10;
}
.insta-tile-hover:hover .insta-icon {
    opacity: 0.72;
    transform: scale(1);
}

/* ============================================
   SINGLE PRODUCT — GALLERY & STICKY
   ============================================ */
/* Force object-cover on the main product image regardless of Tailwind class */
#elvari-main-img {
    object-fit: cover !important;
}
/* Sticky right panel — desktop only */
@media (min-width: 768px) {
    .product-details-sticky {
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .product-details-sticky::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   FOOTER NEWSLETTER SEPARATOR
   ============================================ */
.footer-separator {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(247, 243, 238, 0.12);
    margin-top: 3.5rem;
}

/* ============================================
   SPEC TABLE — Dimensions accordion
   ============================================ */
.elvari-spec-table {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.elvari-spec-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(198, 184, 171, 0.22);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(59, 47, 47, 0.78);
}
.elvari-spec-row:last-child {
    border-bottom: none;
}
.elvari-spec-row dt {
    color: rgba(59, 47, 47, 0.38);
    letter-spacing: 0.04em;
    font-weight: 400;
}
.elvari-spec-row dd {
    margin: 0;
    color: rgba(59, 47, 47, 0.78);
}

/* ============================================
   BODY TEXT TOKENS — locked typography
   See brand/guidelines.md → Body Text Scale.
   Body L: primary content paragraphs (15/14px).
   Body M: card descriptions, secondary copy (14/13px).
   These selector lists are the single source of truth for body
   typography — do not redefine font-family/size/weight/tracking on
   any of these classes elsewhere. Per-section overrides (drop cap,
   lede, subhead, accordion spacing) are layered on top below.
   ============================================ */
.design-story-body,
.page-prose p,
.story-feature-body,
.accordion-body p,
.elvari-product-short-desc,
.elvari-archive-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.012em;
    color: rgba(59, 47, 47, 0.82);
    font-feature-settings: 'kern', 'liga', 'onum';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    hyphens: auto;
    hanging-punctuation: first last;
}

.design-story-benefit-body,
.cart-drawer-empty,
.product-card p,
.feature-grid-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.012em;
    color: rgba(59, 47, 47, 0.78);
    font-feature-settings: 'kern', 'liga', 'onum';
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
    .design-story-body,
    .page-prose p,
    .story-feature-body,
    .accordion-body p,
    .elvari-product-short-desc,
    .elvari-archive-subtitle { font-size: 14px; }

    .design-story-benefit-body,
    .cart-drawer-empty,
    .product-card p,
    .feature-grid-item p { font-size: 13px; }
}

/* ============================================
   DESIGN STORY — full-width editorial block
   Typography handled by Body L token above.
   This block layers structural + decorative overrides only.
   ============================================ */
.design-story-body {
    max-width: 620px;
}
.design-story-body p {
    margin: 0 0 1.8em;
}
/* Drop cap — first letter of the lede paragraph as a Cormorant italic capital.
   Floats so the body wraps around it. Optically calibrated to sit on the
   second line's baseline without crowding the descender. */
.design-story-body > p:first-of-type::first-letter,
.design-story-body > h2 + p::first-letter,
.design-story-body > h3 + p::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 4.4em;
    line-height: 0.92;
    float: left;
    margin: 0.06em 0.12em 0 -0.04em;
    color: rgba(59, 47, 47, 0.92);
    letter-spacing: -0.04em;
}
.design-story-body p:last-child {
    margin-bottom: 0;
}
/* Lede — first paragraph after the subhead reads as the entry point.
   Slightly larger, slightly darker, looser leading. */
.design-story-body > p:first-of-type,
.design-story-body > h2 + p,
.design-story-body > h3 + p {
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.008em;
    color: rgba(59, 47, 47, 0.88);
    margin-bottom: 1.7em;
}
/* Subhead — "A small bag with enormous presence" treated as editorial subtitle.
   Cormorant italic, refined size, with a hairline rule beneath that visually
   separates it from the body paragraphs. */
.design-story-body h2,
.design-story-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: rgba(59, 47, 47, 0.92);
    margin: 0 0 1.4em;
    padding-bottom: 1.1em;
    position: relative;
}
.design-story-body h2::after,
.design-story-body h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 1px;
    background: rgba(59, 47, 47, 0.25);
}
.design-story-body > h2:not(:first-child),
.design-story-body > h3:not(:first-child) {
    margin-top: 2em;
}
.design-story-benefits {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}
.design-story-benefit {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 22px 0;
}
.design-story-benefit--ruled {
    border-top: 1px solid rgba(198, 184, 171, 0.28);
}
.design-story-benefit-num {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 24px;
    color: rgba(59, 47, 47, 0.4);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    min-width: 1.6em;
    margin-top: -2px;
    font-style: italic;
    line-height: 1;
}
.design-story-benefit-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3B2F2F;
    margin: 0 0 10px;
}
/* Typography handled by Body M token at top of file. Margin-only override. */
.design-story-benefit-body {
    margin: 0;
}

/* Mobile: stack benefits below the heading+description, remove top padding,
   and step body sizes down per the Body Text Scale (Body L 15→14, Body M 14→13). */
@media (max-width: 767px) {
    .design-story-benefits {
        padding-top: 0;
        border-top: 1px solid rgba(198, 184, 171, 0.28);
        margin-top: 8px;
    }
    .design-story-benefit:first-child {
        padding-top: 16px;
    }
    .design-story-body {
        max-width: 100%;
        font-size: 14px;
    }
    .design-story-body p {
        margin: 0 0 1.6em;
    }
    .design-story-body > p:first-of-type,
    .design-story-body > h2 + p,
    .design-story-body > h3 + p {
        font-size: 15px;
    }
    .design-story-body > p:first-of-type::first-letter,
    .design-story-body > h2 + p::first-letter,
    .design-story-body > h3 + p::first-letter {
        font-size: 3.8em;
    }
    .design-story-body h2,
    .design-story-body h3 {
        font-size: 19px;
    }
    .design-story-benefit-num {
        font-size: 22px;
    }
    .design-story-benefit-title {
        font-size: 12px;
    }
    .design-story-benefit-body {
        font-size: 13px;
    }
}

/* ============================================
   MOBILE STICKY ADD TO CART
   Slides up from the bottom after the inline
   ATC form scrolls out of view. Hidden entirely
   on desktop (right-column panel is already
   sticky there).
   ============================================ */
.elvari-sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #F7F3EE;
    border-top: 1px solid rgba(198, 184, 171, 0.55);
    box-shadow: 0 -14px 34px rgba(59, 47, 47, 0.07);
    transform: translateY(105%);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Fill the iOS safe-area / home-indicator strip with the bar's own ivory
       so the bottom of the screen never shows an empty cream gap below the bar. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    pointer-events: none;
}
.elvari-sticky-atc.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.elvari-sticky-atc-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
}
.elvari-sticky-atc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.elvari-sticky-atc-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #3B2F2F;
    letter-spacing: -0.005em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elvari-sticky-atc-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(59, 47, 47, 0.55);
    margin: 0;
    letter-spacing: 0.02em;
}
.elvari-sticky-atc-price .woocommerce-Price-amount,
.elvari-sticky-atc-price bdi {
    font-weight: 400;
}
.elvari-sticky-atc-price del {
    opacity: 0.45;
    margin-right: 6px;
}
.elvari-sticky-atc-price ins {
    text-decoration: none;
}
.elvari-sticky-atc-btn {
    flex-shrink: 0;
    background: #3B2F2F;
    color: #F7F3EE;
    border: 1px solid #3B2F2F;
    padding: 0 22px;
    height: 46px;
    min-width: 128px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}
.elvari-sticky-atc-btn:active {
    background: transparent;
    color: #3B2F2F;
}
/* Desktop: hide entirely — right-column panel is already sticky */
@media (min-width: 768px) {
    .elvari-sticky-atc {
        display: none !important;
    }
}
/* Mobile: no extra bottom padding needed — the sticky ATC bar auto-hides
   once the footer enters the viewport (see single-product.php JS), so it
   never overlaps real content. */

/* ============================================
   REDUCED MOTION — accessibility
   Disables decorative animations for users
   with vestibular disorders.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRODUCT STORY — feature highlights, video,
   and lifestyle photo carousels
   ============================================ */
.story-carousel-wrap {
    position: relative;
}
.story-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.story-carousel::-webkit-scrollbar {
    display: none;
}
.story-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Feature slide layout — 2-col on desktop */
.story-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.story-feature--reverse {
    direction: rtl;
}
.story-feature--reverse > * {
    direction: ltr;
}
.story-feature-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgba(198, 184, 171, 0.18);
}
.story-feature-image img,
.story-feature-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-feature-image-placeholder {
    background: linear-gradient(165deg, #d4c8ba 0%, #C6B8AB 50%, #b8a898 100%);
}
.story-feature-copy {
    padding: 0 8px;
}
.story-feature-num {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(59, 47, 47, 0.18);
    margin-bottom: 18px;
}
.story-feature-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: #3B2F2F;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 18px;
}
.story-feature-body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.85;
    color: rgba(59, 47, 47, 0.62);
    margin: 0;
    max-width: 460px;
}

/* Photo slide — denser carousel */
.story-carousel--photos {
    gap: 16px;
    padding-bottom: 4px; /* prevents focus ring clipping */
}
.story-carousel--photos .story-carousel-slide {
    flex: 0 0 33%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgba(198, 184, 171, 0.18);
}
.story-carousel--photos .story-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Carousel controls (prev / counter / next) */
.story-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
}
.story-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(59, 47, 47, 0.25);
    background: transparent;
    color: #3B2F2F;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
    padding: 0;
}
.story-carousel-btn:hover {
    border-color: rgba(59, 47, 47, 0.65);
    background: rgba(59, 47, 47, 0.04);
}
.story-carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.story-carousel-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(59, 47, 47, 0.62);
    min-width: 64px;
    text-align: center;
}

/* Lifestyle video */
.story-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(59, 47, 47, 0.04);
}
.story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-video-caption {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    color: rgba(59, 47, 47, 0.62);
    text-align: center;
    margin: 24px auto 0;
    max-width: 520px;
}

/* Mobile — stack feature slides, shrink photo slides, hide arrow buttons (rely on swipe) */
@media (max-width: 767px) {
    .story-feature {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .story-feature--reverse {
        direction: ltr;
    }
    .story-feature-image {
        aspect-ratio: 1 / 1;
    }
    .story-feature-title {
        font-size: 26px;
    }
    .story-carousel--photos .story-carousel-slide {
        flex: 0 0 75%;
        aspect-ratio: 4 / 5;
    }
    .story-carousel-btn {
        display: none;
    }
    .story-carousel-controls {
        gap: 0;
        margin-top: 20px;
    }
    .story-video-wrap {
        aspect-ratio: 4 / 5;
    }
}