/* =====================================================================
   NYVAZ home page — scroll-driven 3D galleries (.g3d--flow, --ring, --stack, --fan)
   Markup: resources/views/front/partials/gallery-3d.blade.php
   Script: public/main-css/js/gallery-3d.js
   Loaded only by the home page. Every rule is scoped to .g3d.

   Base styles = phone / reduced-motion / no-JS layout: a swipeable row that snaps.
   .g3d.is-3d (added by the script on any screen tall enough) = pinned stage, products
   positioned in 3D space; the script only writes transform / opacity.
   ===================================================================== */

.g3d {
    --g3d-ink: #2B2B2B;
    --g3d-paper: #F8F8F8;
    --g3d-mist: #E8E8E8;
    --g3d-stone: #5E5E5E;           /* secondary text: 6.1:1 on the paper background */
    --g3d-accent: #530404;
    --g3d-serif: 'Poppins', 'Jost', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --g3d-ease: cubic-bezier(.22, .61, .36, 1);
    --g3d-gutter: var(--gutter, 40px);
    --g3d-card: min(72vw, 340px);

    position: relative;
    background: #FFFFFF;
    color: var(--g3d-ink);
    overflow: hidden;
}

.g3d-frame { padding: clamp(56px, 8vw, 112px) 0; }

/* ---------- Heading ---------- */
.g3d-head {
    max-width: 1440px;
    margin: 0 auto 28px;
    padding: 0 var(--g3d-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.g3d-head .nv-eyebrow { margin-bottom: 10px; }
.g3d .g3d-title { margin: 0; font-size: clamp(36px, 4.4vw, 68px); line-height: 1; }

/* ---------- Track (swipe row by default) ---------- */
.g3d-stage { position: relative; }
.g3d-track {
    list-style: none;
    margin: 0;
    padding: 12px max(var(--g3d-gutter), calc((100% - var(--g3d-card)) / 2)) 8px;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: 1000px;
}
.g3d-track::-webkit-scrollbar { display: none; }
.g3d-track:focus-visible { outline: 2px solid var(--g3d-ink); outline-offset: -2px; }

.g3d-item {
    flex: 0 0 var(--g3d-card);
    scroll-snap-align: center;
    min-width: 0;
}

/* ---------- Product image ---------- */
.g3d-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--g3d-mist);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}
.g3d-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .7s var(--g3d-ease), transform 1.2s var(--g3d-ease);
}
.g3d-media .g3d-alt { opacity: 0; }
@media (hover: hover) {
    .g3d-item:not(.is-inactive) .g3d-media:hover .g3d-alt { opacity: 1; }
    .g3d-item:not(.is-inactive) .g3d-media:hover img { transform: scale(1.035); }
}

/* ---------- Product details ---------- */
.g3d-info { padding-top: 20px; }
.g3d-index {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--g3d-stone);
}
.g3d-name {
    margin: 0 0 8px;
    font-family: var(--g3d-serif);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: none;
    color: var(--g3d-ink);          /* the storefront colours every heading black */
}
.g3d-name,
.g3d-name a { font-family: var(--g3d-serif); }   /* the storefront sets its text font on every a/span */
.g3d-name a { color: inherit; text-decoration: none; }
.g3d-desc {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--g3d-stone);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.g3d-price {
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 15px;
}
.g3d-price-now { font-weight: 500; letter-spacing: .02em; }
.g3d-price s { font-size: 13px; color: var(--g3d-stone); }
.g3d-meta {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g3d-stone);
}
.g3d-off {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g3d-accent);
}
.g3d-soldout {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g3d-accent);
}
.g3d-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    color: var(--g3d-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s var(--g3d-ease);
}
.g3d-cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    transition: transform .45s var(--g3d-ease);
}
.g3d-cta:hover { color: var(--g3d-accent); }
.g3d-cta:hover svg { transform: translateX(5px); }

/* ---------- Progress ---------- */
.g3d-foot {
    max-width: 1440px;
    margin: 28px auto 0;
    padding: 0 var(--g3d-gutter);
    display: flex;
    align-items: center;
    gap: 20px;
}
.g3d-count {
    margin: 0;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--g3d-stone);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.g3d-count b {
    font-family: var(--g3d-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--g3d-ink);
}
.g3d-bar {
    position: relative;
    flex: 1;
    max-width: 220px;
    height: 1px;
    background: #D4D4D4;
    overflow: hidden;
}
.g3d-bar span {
    position: absolute;
    inset: 0;
    background: var(--g3d-ink);
    transform-origin: 0 50%;
    transition: transform .6s var(--g3d-ease);
}
.g3d-hint {
    display: none;
    margin: 0 0 0 auto;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--g3d-stone);
}

/* Phone: the script adds .is-swipe and tilts each image toward the centre as it is swiped */
.g3d.is-swipe .g3d-media { will-change: transform; }
.g3d.is-swipe .g3d-info { transition: opacity .4s var(--g3d-ease); }
.g3d.is-swipe .g3d-item.is-inactive .g3d-info { opacity: .45; }


/* =====================================================================
   3D stage (phone, tablet, desktop; set up by gallery-3d.js)
   ===================================================================== */
.g3d.is-3d {
    /* Image height fills what is left of the screen after header, heading, details and progress */
    --g3d-img-h: clamp(300px, calc(100vh - var(--header-h, 72px) - 400px), 760px);
    --g3d-card: min(30vw, calc(var(--g3d-img-h) * .75));
}
.g3d.is-3d .g3d-frame {
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;                 /* phones: the height with the browser bars showing, so nothing hides under them */
    padding: calc(var(--header-h, 72px) + clamp(18px, 3.5vh, 40px)) 0 clamp(18px, 3.5vh, 36px);
    display: flex;
    flex-direction: column;
}
.g3d.is-3d .g3d-head { margin-bottom: 0; width: 100%; box-sizing: border-box; }
.g3d.is-3d .g3d-stage {
    flex: 1;
    min-height: 0;
    perspective: 1700px;
    perspective-origin: 50% 38%;
}
.g3d.is-3d .g3d-track {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    perspective: none;
    transform-style: preserve-3d;
}
.g3d.is-3d .g3d-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--g3d-card);
    margin: calc(var(--g3d-card) * -4 / 6 - 62px) 0 0 calc(var(--g3d-card) / -2);
    transform-origin: 50% 35%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.g3d.is-3d .g3d-item.is-inactive .g3d-media { cursor: pointer; }
.g3d.is-3d .g3d-index { display: none; }
/* Details sit under the centred product, a little wider than the image so names wrap less */
.g3d.is-3d .g3d-info {
    width: max(100%, min(480px, 40vw));
    margin-left: 50%;
    translate: -50% 0;
    padding-top: 18px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
    transition: opacity .25s ease-out, transform .4s var(--g3d-ease), visibility 0s .25s;
}
.g3d.is-3d .g3d-item.is-active .g3d-info {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s var(--g3d-ease) .1s, transform .7s var(--g3d-ease) .1s, visibility 0s;
}
.g3d.is-3d .g3d-name {
    margin-bottom: 6px;
    font-size: clamp(22px, 1.8vw, 28px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.g3d.is-3d .g3d-desc { -webkit-line-clamp: 1; max-width: 52ch; margin: 0 auto 10px; font-size: 13px; }
/* Price and CTA share one line */
.g3d.is-3d .g3d-price { display: inline-flex; margin: 0 22px 0 0; vertical-align: middle; }
.g3d.is-3d .g3d-cta { vertical-align: middle; }
.g3d.is-3d .g3d-foot { margin-top: 0; width: 100%; box-sizing: border-box; }
.g3d.is-3d .g3d-hint { display: block; }

/* Tablet: shallower stage, larger share of the width; the frame clears the fixed bottom tab bar */
@media (max-width: 1023px) {
    .g3d.is-3d {
        --g3d-tabbar: calc(58px + env(safe-area-inset-bottom, 0px));
        --g3d-img-h: clamp(260px, calc(100vh - var(--header-h, 56px) - var(--g3d-tabbar) - 380px), 640px);
        --g3d-card: min(50vw, calc(var(--g3d-img-h) * .75));
    }
    .g3d.is-3d .g3d-frame { padding-bottom: calc(var(--g3d-tabbar) + 20px); }
    .g3d.is-3d .g3d-stage { perspective: 1100px; }
}

@media (max-width: 767px) {
    .g3d-head { margin-bottom: 20px; }
    .g3d-foot { margin-top: 20px; }
    .g3d-bar { max-width: none; }

    /* Phone stage: one large product in the centre, neighbours peeking in from the edges */
    .g3d.is-3d {
        --g3d-img-h: clamp(220px, calc(100svh - var(--header-h, 56px) - var(--g3d-tabbar) - 340px), 560px);
        --g3d-card: min(70vw, calc(var(--g3d-img-h) * .75));
    }
    .g3d.is-3d .g3d-frame { padding-top: calc(var(--header-h, 56px) + 16px); padding-bottom: calc(var(--g3d-tabbar) + 14px); }
    .g3d.is-3d .g3d-head { align-items: flex-end; }
    .g3d.is-3d .g3d-title { font-size: clamp(32px, 9vw, 40px); }
    .g3d.is-3d .g3d-stage { perspective: 800px; touch-action: pan-y; }
    .g3d.is-3d .g3d-item { margin-top: calc(var(--g3d-card) * -4 / 6 - 58px); }
    .g3d.is-3d .g3d-info { width: calc(100vw - 2 * var(--g3d-gutter)); padding-top: 14px; }
    .g3d.is-3d .g3d-name { font-size: 21px; margin-bottom: 4px; }
    .g3d.is-3d .g3d-desc { margin-bottom: 8px; }
    .g3d.is-3d .g3d-price { margin-right: 16px; font-size: 14px; }
    .g3d.is-3d .g3d-hint { letter-spacing: .14em; }
}
/* Short phones: drop the one-line description to keep the image large */
@media (max-width: 767px) and (max-height: 700px) {
    .g3d.is-3d .g3d-desc { display: none; }
    .g3d.is-3d .g3d-item { margin-top: calc(var(--g3d-card) * -4 / 6 - 44px); }
}
@media (max-width: 359px) {
    .g3d.is-3d .g3d-hint { display: none; }
}


/* =====================================================================
   Ring variant (On Sale): dark stage, products ride the outside of a turning drum
   ===================================================================== */
.g3d--ring {
    --g3d-ink: #F8F8F8;
    --g3d-stone: #BDBDBD;           /* 8.9:1 on the stage */
    --g3d-mist: #3A3A3A;
    --g3d-accent: #E6B9B9;          /* the burgundy accent, lifted for a dark background */
    background: radial-gradient(ellipse 70% 62% at 50% 42%, #3A3A3A 0%, #282828 55%, #1D1D1D 100%);
}
.nv-home .g3d--ring .nv-eyebrow { color: #D9D9D9; }
.nv-home .g3d--ring .g3d-title { color: #F8F8F8; }
.nv-home .g3d--ring a.nv-link,
.nv-home .g3d--ring a.nv-link:hover { color: #F8F8F8; background-image: linear-gradient(#F8F8F8, #F8F8F8); }
.g3d--ring .g3d-media { background: #333; }
.g3d--ring .g3d-cta:hover { color: #FFFFFF; }
.g3d--ring .g3d-bar { background: #4A4A4A; }
.g3d--ring .g3d-count b { color: #F8F8F8; }

/* A slightly smaller product than the coverflow, seen from a touch above */
.g3d--ring.is-3d { --g3d-card: min(26vw, calc(var(--g3d-img-h) * .75)); }
.g3d--ring.is-3d .g3d-stage { perspective: 1500px; perspective-origin: 50% 28%; }
.g3d--ring.is-3d .g3d-track { transform: rotateX(-3deg); }
@media (max-width: 1023px) {
    .g3d--ring.is-3d { --g3d-card: min(44vw, calc(var(--g3d-img-h) * .75)); }
}
@media (max-width: 767px) {
    .g3d--ring.is-3d { --g3d-card: min(62vw, calc(var(--g3d-img-h) * .75)); }
    .g3d--ring.is-3d .g3d-stage { perspective: 900px; }
}

/* =====================================================================
   Stack variant (New Arrivals): a deck on a soft grey stage
   ===================================================================== */
.g3d--stack { background: radial-gradient(ellipse 80% 70% at 55% 45%, #F7F7F7 0%, #EDEDED 70%, #E6E6E6 100%); }
.g3d--stack .g3d-media { background: #DCDCDC; }
.g3d--stack .g3d-bar { background: #C9C9C9; }
.g3d--stack.is-3d .g3d-stage { perspective: 1400px; perspective-origin: 50% 40%; }
.g3d--stack.is-3d .g3d-item { transform-origin: 50% 50%; }
/* The deck reads best with the product a little smaller than the coverflow */
.g3d--stack.is-3d { --g3d-card: min(26vw, calc(var(--g3d-img-h) * .75)); }
@media (max-width: 1023px) { .g3d--stack.is-3d { --g3d-card: min(46vw, calc(var(--g3d-img-h) * .75)); } }
@media (max-width: 767px)  { .g3d--stack.is-3d { --g3d-card: min(64vw, calc(var(--g3d-img-h) * .75)); } }

/* =====================================================================
   Fan variant (Shop by Category): cards pivot around a point far below the stage
   ===================================================================== */
.g3d--fan { background: radial-gradient(ellipse 70% 80% at 50% 100%, #FFFFFF 0%, #FAFAFA 50%, var(--g3d-paper) 100%); }
.g3d--fan.is-3d { --g3d-card: min(22vw, calc(var(--g3d-img-h) * .75)); }
.g3d--fan.is-3d .g3d-stage { perspective: 1600px; perspective-origin: 50% 60%; }
.g3d--fan.is-3d .g3d-item { transform-origin: 50% 320%; }
.g3d--fan.is-3d .g3d-price { margin-right: 22px; }
@media (max-width: 1023px) { .g3d--fan.is-3d { --g3d-card: min(40vw, calc(var(--g3d-img-h) * .75)); } }
@media (max-width: 767px)  {
    .g3d--fan.is-3d { --g3d-card: min(60vw, calc(var(--g3d-img-h) * .75)); }
    .g3d--fan.is-3d .g3d-item { transform-origin: 50% 300%; }
}

@media (prefers-reduced-motion: reduce) {
    .g3d *, .g3d *::before, .g3d *::after { transition-duration: .01ms !important; }
}

/* Poppins: product names and the counter read better a little smaller and medium weight */
.g3d .g3d-name, .g3d.is-3d .g3d-name { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.g3d-count b { font-size: 22px; font-weight: 500; }