/* ================= TOKENS ================= */
:root {
    --em-900: #20234F;
    --em-800: #292E70;
    --em-700: #353F9C;
    --em-600: #4959C7;
    --em-500: #6579F2;
    --em-100: #DFE4FF;
    --em-050: #F0F2FF;

    --sand: #D9D7F0;
    --gold: #F08A52;

    --bg: #F0F2F8;
    --surface: #FFFFFF;
    --surface-2: #F7F8FC;
    --surface-3: #E8EBF5;

    --charcoal: #191C30;
    --ink: #30364D;
    --muted: #747C96;
    --line: #DDE1ED;

    --glow: 244, 245, 255;

    --shadow-s: 0 8px 20px rgba(32, 35, 79, .07);
    --shadow-m: 0 20px 44px rgba(32, 35, 79, .11);
    --shadow-l: 0 34px 80px rgba(32, 35, 79, .16);

    --r-xl: 36px;
    --r-lg: 26px;
    --r-md: 18px;

    --foot-bg: #191C30;
    --foot-tx: #B9BED5;
}

[data-theme="dark"] {
    --bg: #10121F;
    --surface: #191C2D;
    --surface-2: #20243A;
    --surface-3: #292E47;

    --charcoal: #F1F2FF;
    --ink: #D8DBF0;
    --muted: #9A9FBD;
    --line: #303550;

    --glow: 16, 18, 31;

    --shadow-s: 0 8px 20px rgba(0, 0, 0, .32);
    --shadow-m: 0 20px 44px rgba(0, 0, 0, .44);
    --shadow-l: 0 34px 80px rgba(0, 0, 0, .58);

    --foot-bg: #0A0C16;
    --foot-tx: #A1A7C4;

    --em-900: #DDE1FF;
    --em-800: #B8C0FF;
    --em-700: #9AA7FF;
    --em-600: #8493FF;
    --em-500: #A2ADFF;
    --em-100: #292B50;
    --em-050: #20233D;

    --sand: #39344F;
    --gold: #FFA779;
}

/* ================= BASE ================= */
* { -webkit-tap-highlight-color: transparent }

html { scroll-behavior: smooth; scroll-padding-top: 96px }

body {
    font-family: 'Jost', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.6;
    transition: background .45s ease, color .45s ease;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity .45s;
    background:
        radial-gradient(700px 500px at 85% -5%, rgba(22, 163, 127, .10), transparent 60%),
        radial-gradient(600px 420px at -8% 10%, rgba(232, 220, 203, .5), transparent 62%),
        radial-gradient(700px 520px at 50% 110%, rgba(11, 107, 83, .08), transparent 60%);
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(700px 500px at 85% -5%, rgba(22, 163, 127, .10), transparent 60%),
        radial-gradient(600px 420px at -8% 10%, rgba(20, 36, 29, .7), transparent 62%),
        radial-gradient(700px 520px at 50% 110%, rgba(11, 107, 83, .12), transparent 60%);
}

h1, h2, .serif {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--charcoal);
    letter-spacing: -.02em
}

h3, h4, h5, h6 { color: var(--charcoal) }
a { text-decoration: none }
::selection { background: var(--em-700); color: #fff }

.eyebrow {
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--em-500);
    font-weight: 600
}

.text-muted-2 { color: var(--muted) !important }
.section { padding: 52px 0 }

.panel {
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-s);
    border: 1px solid var(--line);
    transition: background .45s, border-color .45s
}

.italic { font-style: italic; font-family: 'Playfair Display', serif }

/* ================= BUTTONS ================= */
.btn {
    border-radius: 999px;
    font-weight: 500;
    transition: .3s cubic-bezier(.2, .7, .3, 1)
}

.btn-em {
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    padding: .72rem 1.5rem;
    border: 0;
    box-shadow: 0 12px 26px rgba(11, 107, 83, .3)
}

.btn-em:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(11, 107, 83, .38)
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line);
    padding: .68rem 1.35rem
}

.btn-ghost:hover {
    border-color: var(--em-600);
    color: var(--em-600);
    background: var(--surface)
}

.btn-sand {
    background: var(--sand);
    color: var(--em-900);
    border: 0;
    padding: .7rem 1.4rem;
    font-weight: 600
}

.btn-sand:hover {
    transform: translateY(-2px);
    color: var(--em-900);
    background: #ddd0bc
}

.skew-btn {
    position: relative;
    border-radius: 16px;
    transform: skewX(-8deg);
    padding: .68rem 1.35rem;
    font-weight: 600;
    border: 0
}

.skew-btn span { display: inline-block; transform: skewX(8deg) }

/* ================= NAVBAR ================= */
.navbar {
    padding: .9rem 0;
    transition: padding .3s, background .3s;
    z-index: 1040
}

.navbar.scrolled {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-s);
    padding: .5rem 0
}

.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 16px rgba(11, 107, 83, .3)
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    letter-spacing: .2em;
    color: var(--charcoal)
}

.navbar-brand:hover { color: var(--em-600) }

.nav-tube {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
    display: flex;
    gap: 2px;
    box-shadow: var(--shadow-s);
    transition: background .45s, border-color .45s
}

.nav-tube .nav-link {
    color: var(--ink);
    font-size: .85rem;
    font-weight: 500;
    padding: .42rem .95rem;
    border-radius: 999px;
    position: relative;
    white-space: nowrap
}

.nav-tube .nav-link:hover { color: var(--em-600) }

.nav-tube .nav-link.active {
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    box-shadow: 0 6px 14px rgba(11, 107, 83, .3)
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--charcoal);
    position: relative;
    transition: .25s
}

.icon-btn:hover {
    background: var(--em-800);
    color: #fff;
    border-color: var(--em-800);
    transform: translateY(-2px) rotate(-6deg)
}

.count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, var(--em-600), var(--em-500));
    color: #fff;
    font-size: .66rem;
    font-weight: 600;
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg)
}

.count-badge.hide { display: none }
.wish-badge { background: linear-gradient(135deg, #b44b5e, #d96b7c) !important }

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .3rem .5rem;
    background: var(--surface)
}

.navbar-toggler:focus { box-shadow: none }

#themeToggle { overflow: hidden }

#themeToggle i {
    transition: .5s cubic-bezier(.34, 1.56, .64, 1);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center
}

#themeToggle .bi-sun { transform: translateY(-150%) rotate(-90deg) }
#themeToggle .bi-moon-stars { transform: translateY(0) rotate(0) }

[data-theme="dark"] #themeToggle .bi-moon-stars { transform: translateY(150%) rotate(90deg) }
[data-theme="dark"] #themeToggle .bi-sun { transform: translateY(0) rotate(0) }

.mob-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    margin-top: .7rem;
    padding: .9rem;
    box-shadow: var(--shadow-m)
}

.mob-menu a {
    display: block;
    padding: .5rem .8rem;
    border-radius: 12px;
    color: var(--ink);
    font-weight: 500
}

.mob-menu a:hover { background: var(--em-050); color: var(--em-700) }
.mob-menu a.active { background: var(--em-050); color: var(--em-700) }

#searchBar .form-control { border-radius: 999px }

/* ================= HERO ================= */
.hero { padding: 14px 0 8px }

.hero-shell {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 44px;
    padding: clamp(1.2rem, 3vw, 2.6rem);
    box-shadow: var(--shadow-m);
    position: relative;
    overflow: hidden;
    transition: background .45s, border-color .45s;
    --hx-from: #0b6b53;
    --hx-to: #16a37f;
    --hx-soft: #eef7f3
}

.hero-shell::before {
    content: "";
    position: absolute;
    left: -120px;
    top: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--em-050), transparent 70%);
    opacity: .7
}

.hero-left { position: relative; z-index: 3 }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: .4rem .95rem;
    border-radius: 999px;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600
}

.hero-eyebrow i { color: var(--em-500); animation: spinPulse 3s ease-in-out infinite }

@keyframes spinPulse {
    0%, 100% { transform: rotate(0) scale(1) }
    50% { transform: rotate(180deg) scale(1.2) }
}

.hero-h1 {
    font-size: clamp(1.9rem, 4.4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--charcoal);
    font-family: 'Jost', sans-serif;
    min-height: 2.2em
}

.hero-h1 .l2 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    background: linear-gradient(120deg, var(--em-800), var(--em-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero-price {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--hx-from, #0b6b53), var(--hx-to, #16a37f));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .4s
}

.hero-desc { color: var(--muted); font-size: .92rem; max-width: 26rem }

.swap-el { animation: swapIn .55s cubic-bezier(.2, .8, .3, 1) }

@keyframes swapIn {
    0% { opacity: 0; transform: translateY(16px) scale(.97) }
    100% { opacity: 1; transform: none }
}

.hero-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px
}

.hero-qty button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: var(--surface);
    color: var(--charcoal);
    font-weight: 600;
    transition: .2s;
    box-shadow: var(--shadow-s)
}

.hero-qty button:hover { background: var(--em-800); color: #fff }
.hero-qty span { min-width: 44px; text-align: center; font-weight: 600 }

.hero-order {
    background: linear-gradient(135deg, var(--hx-from, #0b6b53), var(--hx-to, #16a37f));
    color: #fff;
    border: 0;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--hx-from, #0b6b53) 38%, transparent);
    transition: .3s
}

.hero-order:hover { transform: translateY(-3px) scale(1.02); color: #fff }

/* stage */
.hero-stage { position: relative; min-height: 440px; perspective: 1400px }

.hero-block {
    position: absolute;
    right: 0;
    bottom: 6%;
    width: min(96%, 560px);
    height: 74%;
    border-radius: 44px;
    background: linear-gradient(150deg, var(--hx-from, #0b6b53), var(--hx-to, #16a37f));
    transition: background .7s ease;
    box-shadow: var(--shadow-l)
}

.hero-block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 44px;
    background: radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, .28), transparent 55%)
}

.hero-prod-wrap {
    position: absolute;
    right: 6%;
    bottom: 0;
    width: 62%;
    height: 112%;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform
}

.hero-prod {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 34px;
    mask-image: linear-gradient(#000 92%, transparent);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .3));
    cursor: pointer;
    transform: translateZ(60px)
}

.hero-block-mask {
    position: absolute;
    right: 0;
    bottom: 6%;
    width: min(96%, 560px);
    height: 74%;
    border-radius: 44px;
    overflow: hidden
}

.piv { animation: pivIn .85s cubic-bezier(.22, .9, .26, 1) both }

@keyframes pivIn {
    0% { opacity: 0; transform: rotateY(-72deg) translateX(-14%) scale(.72) }
    55% { opacity: 1; transform: rotateY(12deg) translateX(2%) scale(1.05) }
    100% { opacity: 1; transform: rotateY(0) translateX(0) scale(1) }
}

.floaty { position: absolute; pointer-events: none; z-index: 2; transition: background .7s, border-color .7s }

@keyframes floatyA {
    0%, 100% { transform: translate(0, 0) rotate(0) }
    50% { transform: translate(-12px, -18px) rotate(12deg) }
}

@keyframes floatyB {
    0%, 100% { transform: translate(0, 0) rotate(0) }
    50% { transform: translate(14px, 10px) rotate(-10deg) }
}

.floaty.ring {
    border: 3px solid var(--hx-to, #16a37f);
    border-radius: 50%;
    opacity: .55;
    animation: floatyA 6s ease-in-out infinite
}

.floaty.dot {
    background: var(--hx-to, #16a37f);
    border-radius: 50%;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--hx-to, #16a37f) 18%, transparent);
    animation: floatyB 7.5s ease-in-out infinite
}

.floaty.sq {
    background: transparent;
    border: 2px dashed color-mix(in srgb, var(--hx-to, #16a37f) 60%, transparent);
    border-radius: 10px;
    animation: floatyA 8s ease-in-out infinite
}

.hero-chip {
    position: absolute;
    z-index: 4;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .5rem .8rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--charcoal);
    box-shadow: var(--shadow-s);
    animation: floatyB 5s ease-in-out infinite
}

/* thumbs */
.hero-thumbs { display: flex; gap: 12px; margin-top: 26px }

.hero-thumb {
    width: 96px;
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 8px;
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: .35s cubic-bezier(.2, .7, .3, 1);
    position: relative
}

.hero-thumb img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 12px;
    pointer-events: none
}

.hero-thumb small {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 6px;
    line-height: 1.1
}

.hero-thumb em { display: block; font-style: normal; font-size: .66rem; color: var(--muted) }
.hero-thumb:hover { transform: translateY(-6px) }

.hero-thumb.on {
    border-color: var(--em-600);
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 14px 28px rgba(11, 107, 83, .22);
    background: var(--surface)
}

.hero-thumb.on::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--em-700), var(--em-500))
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.6rem;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed var(--line)
}

.hb { display: flex; align-items: center; gap: .6rem }

.hb i {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1rem
}

.hb b { font-size: .8rem; color: var(--charcoal); display: block; line-height: 1.1 }
.hb small { font-size: .7rem; color: var(--muted) }
.hb1 { background: #f3ead9; color: #a4802a }
.hb2 { background: var(--em-100); color: var(--em-700) }
.hb3 { background: #e9eef1; color: #4a6572 }
.hb4 { background: #f0e7e4; color: #96635a }

/* ================= MARQUEE CATEGORIES ================= */
.cat-hall {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-s);
    padding: 34px 0 30px;
    overflow: hidden;
    position: relative
}

.cat-hall::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 3;
    background: linear-gradient(90deg, var(--surface), transparent);
    pointer-events: none
}

.cat-hall::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 3;
    background: linear-gradient(-90deg, var(--surface-2), transparent);
    pointer-events: none
}

.cat-track {
    display: flex;
    gap: 2.6rem;
    width: max-content;
    animation: marquee 46s linear infinite;
    padding: 8px 0
}

.cat-track:hover { animation-play-state: paused }

@keyframes marquee { to { transform: translateX(-50%) } }

.cat-item { text-align: center; cursor: pointer; width: 150px; flex: 0 0 auto }

.cat-ring {
    position: relative;
    width: 122px;
    height: 122px;
    margin: 0 auto 12px;
    border-radius: 50%;
    padding: 5px;
    background: conic-gradient(from 120deg, var(--em-600), var(--sand), var(--em-600));
    transition: .45s cubic-bezier(.2, .7, .3, 1)
}

.cat-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 4px solid var(--surface)
}

.cat-emoji {
    position: absolute;
    right: -2px;
    bottom: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 1rem;
    box-shadow: var(--shadow-s);
    border: 1px solid var(--line)
}

.cat-item:hover .cat-ring { transform: scale(1.08) rotate(8deg); box-shadow: var(--shadow-m) }

.cat-item h6 {
    font-family: 'Playfair Display', serif;
    font-size: .98rem;
    margin: 0;
    white-space: nowrap
}

.cat-item small { color: var(--muted); font-size: .76rem }

.cat-click {
    display: block;
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--em-600);
    opacity: 0;
    transform: translateY(5px);
    transition: .3s
}

.cat-item:hover .cat-click { opacity: 1; transform: none }

@media(max-width:575px) {
    .cat-item { width: 118px }
    .cat-ring { width: 98px; height: 98px }
}

/* ================= PROMO ================= */
.promo-shell {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(120deg, var(--em-900), var(--em-700) 60%, var(--em-600));
    color: #eaf3ef;
    box-shadow: var(--shadow-m)
}

.promo-shell h2 { color: #fff }

.promo-img { height: 100%; min-height: 250px; width: 100%; object-fit: cover }

.promo-badge {
    position: absolute;
    z-index: 3;
    right: 8%;
    bottom: -30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--charcoal);
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: var(--shadow-l);
    border: 6px solid var(--sand);
    animation: spinSlow 14s linear infinite
}

@keyframes spinSlow { to { transform: rotate(360deg) } }

.promo-badge b {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    line-height: 1;
    display: block;
    color: var(--em-700)
}

.promo-badge small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }

/* ================= FEATURED (arch cards) ================= */
.arch-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 14px;
    text-align: center;
    transition: .4s cubic-bezier(.2, .7, .3, 1);
    height: 100%;
    position: relative
}

.arch-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-m);
    background: var(--surface)
}

.arch-card .arch {
    border-radius: 130px 130px 20px 20px;
    overflow: hidden;
    position: relative;
    background: var(--surface-3)
}

.arch-card .arch img {
    width: 100%;
    aspect-ratio: 4/4.6;
    object-fit: cover;
    transition: .6s
}

.arch-card:hover .arch img { transform: scale(1.07) }

.arch-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--surface);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--em-700);
    box-shadow: var(--shadow-s)
}

.arch-card h6 { font-family: 'Playfair Display', serif; font-size: 1rem; margin: .7rem 0 .1rem }

.arch-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px }

.arch-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: .25s
}

.arch-btn:hover { background: var(--em-800); color: #fff; border-color: var(--em-800) }

.arch-btn.add {
    width: auto;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    gap: .3rem;
    display: inline-flex;
    align-items: center
}

.wished {
    color: #d11f52 !important;
    border-color: #d11f52 !important;
    background: #fdf1f4 !important
}

[data-theme="dark"] .wished {
    background: #3a1d26 !important;
    color: #ff7a9b !important;
    border-color: #8c3a50 !important
}

.slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    scrollbar-width: none
}

.slider::-webkit-scrollbar { display: none }
.slider>* { flex: 0 0 250px; scroll-snap-align: start }

@media(max-width:575px) { .slider>* { flex: 0 0 74% } }

.s-nav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--charcoal);
    display: grid;
    place-items: center;
    transition: .25s
}

.s-nav:hover { background: var(--em-800); color: #fff }

/* ================= PRODUCT GRID (bento + tilt) ================= */
.prod-hall {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-s);
    overflow: hidden;
    background: var(--surface)
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    backdrop-filter: blur(8px);
    position: sticky;
    top: 78px;
    z-index: 20;
    border-radius: var(--r-xl) var(--r-xl) 0 0
}

.filter-scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    padding-bottom: 2px
}

.filter-scroll::-webkit-scrollbar { display: none }

.filter-pill {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 999px;
    padding: .46rem 1rem;
    font-size: .83rem;
    transition: .25s;
    white-space: nowrap
}

.filter-pill:hover { border-color: var(--em-500); color: var(--em-600); transform: translateY(-2px) }

.filter-pill.active {
    background: linear-gradient(135deg, var(--em-800), var(--em-600));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(11, 107, 83, .28)
}

.filter-pill .cnt { opacity: .6; font-size: .72rem; margin-left: .25rem }

.form-control, .form-select {
    border-radius: 14px;
    border: 1px solid var(--line);
    padding: .62rem .9rem;
    font-size: .92rem;
    background-color: var(--surface);
    color: var(--charcoal);
    transition: background .45s, border-color .45s
}

.form-control:focus, .form-select:focus {
    border-color: var(--em-500);
    box-shadow: 0 0 0 4px rgba(22, 163, 127, .14);
    background-color: var(--surface);
    color: var(--charcoal)
}

.form-control::placeholder { color: var(--muted) }

.form-label { font-size: .83rem; font-weight: 600; color: var(--charcoal); margin-bottom: .35rem }

.input-ic { position: relative }

.input-ic i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted)
}

.input-ic .form-control { padding-left: 36px }

.tilt-zone { padding: 24px }

.p-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .35s, border-color .35s, background .45s;
    transform-style: preserve-3d;
    will-change: transform;
    animation: cascade .55s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--i, 0)*70ms)
}

@keyframes cascade {
    0% { opacity: 0; transform: translateY(34px) rotate(1.6deg) scale(.92) }
    100% { opacity: 1; transform: none }
}

.p-card:hover { box-shadow: var(--shadow-m); border-color: transparent }

.p-thumb { position: relative; overflow: hidden; background: var(--thumb-bg, var(--surface-2)) }

.p-thumb::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 75%;
    background: radial-gradient(closest-side, hsl(var(--ch, 150 50% 60%)/.28), transparent);
    z-index: 0
}

.p-thumb img {
    width: 100%;
    aspect-ratio: 1.02/1;
    object-fit: cover;
    transition: .5s cubic-bezier(.2, .7, .3, 1);
    display: block;
    position: relative;
    z-index: 1;
    transform: translateZ(30px)
}

.p-card:hover .p-thumb img { transform: translateZ(30px) scale(1.06) }

.p-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(6px);
    color: var(--em-700);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--line)
}

.p-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    display: grid;
    place-items: center;
    transition: .25s;
    box-shadow: var(--shadow-s)
}

.p-wish:hover { transform: scale(1.15) rotate(-8deg) }
.p-wish.wished { color: #d11f52; border-color: #d11f52 }
.p-wish.pop { animation: popHeart .45s cubic-bezier(.34, 1.8, .5, 1) }

@keyframes popHeart {
    0% { transform: scale(1) }
    45% { transform: scale(1.35) }
    100% { transform: scale(1) }
}

.p-quick {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    background: rgba(20, 26, 23, .88);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: .8rem;
    padding: .5rem;
    opacity: 0;
    transform: translateY(12px);
    transition: .3s;
    backdrop-filter: blur(6px)
}

.p-card:hover .p-quick { opacity: 1; transform: translateY(0) }

.p-body {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
    position: relative;
    z-index: 2
}

.p-cat { font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase }

.p-name {
    font-size: 1.02rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    color: var(--charcoal)
}

.p-rate { font-size: .74rem; color: var(--gold) }

.p-foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.p-price { font-weight: 700; color: var(--em-700); font-size: 1.05rem }
.p-price s { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: .25rem }

.btn-add {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--em-050);
    color: var(--em-800);
    border: 1px solid var(--em-100);
    display: grid;
    place-items: center;
    transition: .3s cubic-bezier(.34, 1.56, .64, 1);
    position: relative
}

.btn-add:hover { background: var(--em-800); color: #fff; transform: scale(1.12) rotate(-8deg) }

.btn-add.burst::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--em-500);
    animation: burst .5s ease-out forwards
}

@keyframes burst { to { transform: scale(1.8); opacity: 0 } }

/* spotlight bento card */
.spot-card {
    background: linear-gradient(135deg, var(--em-900), var(--em-700));
    border-radius: 26px;
    overflow: hidden;
    height: 100%;
    color: #e8f2ee;
    display: flex;
    position: relative;
    animation: cascade .55s cubic-bezier(.2, .8, .3, 1) both
}

.spot-card::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08)
}

.spot-txt { padding: 26px; flex: 1.1; display: flex; flex-direction: column; z-index: 2 }
.spot-txt h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.7rem) }
.spot-txt p { color: #cfe3db; font-size: .88rem }

.spot-tag {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 999px;
    padding: .26rem .75rem;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.spot-price { font-size: 1.7rem; font-weight: 700; color: #fff; margin-top: auto; padding-top: 12px }
.spot-price s { font-size: .85rem; color: #9dbdab; font-weight: 400; margin-left: .3rem }
.spot-img { flex: 1; position: relative; min-width: 150px }

.spot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

.spot-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--em-800) 0%, transparent 60%)
}

.spot-actions { display: flex; gap: 8px; margin-top: 12px }
.spot-card .btn-sand { padding: .55rem 1.15rem; font-size: .85rem }

.spot-card .p-wish {
    position: static;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.spot-card .p-wish.wished { color: #ff99b3; border-color: #ff99b3; background: rgba(255, 120, 155, .15) }

@media(max-width:575px) {
    .spot-card { flex-direction: column-reverse }
    .spot-img { min-height: 190px }
}

.empty-state { text-align: center; padding: 54px 12px; color: var(--muted) }

/* ================= WHY (staggered numbers) ================= */
.why-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: .4s cubic-bezier(.2, .7, .3, 1)
}

.why-card::after {
    content: attr(data-n);
    position: absolute;
    right: 14px;
    top: 2px;
    font-family: 'Playfair Display', serif;
    font-size: 4.6rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--em-600) 45%, transparent);
    opacity: .55;
    transition: .4s
}

.why-card:hover { transform: translateY(-9px) rotate(-.6deg); box-shadow: var(--shadow-m); border-color: transparent }
.why-card:hover::after { opacity: 1; -webkit-text-stroke-color: var(--em-600) }

.why-ic {
    width: 54px;
    height: 54px;
    border-radius: 50% 50% 50% 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 12px 22px rgba(11, 107, 83, .28);
    transition: .45s
}

.why-card:hover .why-ic { border-radius: 16px; transform: rotate(-8deg) }

@media(min-width:992px) {
    .why-grid>.col-lg-4:nth-child(3n+2) { transform: translateY(2.4rem) }
    .why-grid { padding-bottom: 2.4rem }
}

/* ================= FAQ ================= */
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: .3s
}

.faq-item:hover { border-color: color-mix(in srgb, var(--em-500) 40%, var(--line)) }

.faq-q {
    width: 100%;
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.15rem;
    text-align: left;
    color: var(--charcoal);
    font-weight: 500;
    font-size: .98rem
}

.faq-q .n {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--em-700);
    transition: .3s
}

.faq-item.open .faq-q .n {
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    transform: rotate(-8deg)
}

.faq-q i { margin-left: auto; transition: .35s; color: var(--muted) }
.faq-item.open .faq-q i { transform: rotate(180deg); color: var(--em-600) }

.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2, .7, .3, 1) }
.faq-a p { padding: 0 1.2rem 1.1rem 4.3rem; margin: 0; color: var(--muted); font-size: .92rem }

/* ================= NEWSLETTER ================= */
.news-card {
    position: relative;
    border-radius: var(--r-xl);
    padding: 2px;
    background: conic-gradient(from var(--spin, 0deg), var(--em-700), var(--sand), var(--em-500), var(--em-700));
    animation: spinBorder 6s linear infinite;
    box-shadow: var(--shadow-m)
}

@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false }

@keyframes spinBorder { to { --spin: 360deg } }

.news-inner {
    background: linear-gradient(140deg, #0a2e24, #0c4234 55%, #0a3027);
    border-radius: calc(var(--r-xl) - 2px);
    padding: clamp(1.4rem, 3.5vw, 2.6rem);
    color: #e8f2ee
}

.news-inner h2 { color: #fff }

.news-inner .form-control { background: rgba(255, 255, 255, .95); border: 0; color: #1c211f }
.news-inner .form-label { color: #cfe3db }

.news-ic {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .13);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--sand);
    animation: bell 4s ease-in-out infinite
}

@keyframes bell {
    0%, 88%, 100% { transform: rotate(0) }
    92% { transform: rotate(14deg) }
    96% { transform: rotate(-12deg) }
}

.form-check-input:checked { background-color: var(--em-500); border-color: var(--em-500) }
.invalid-feedback { color: #ff9d9d }

/* ================= CONTACT ================= */
.contact-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--em-050);
    color: var(--em-700);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
    border: 1px solid var(--em-100)
}

.map-holder {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 240px;
    border: 1px solid var(--line);
    background:
        linear-gradient(rgba(11, 107, 83, .05), rgba(11, 107, 83, .05)),
        repeating-linear-gradient(0deg, transparent 0 44px, var(--line) 44px 45px),
        repeating-linear-gradient(90deg, transparent 0 44px, var(--line) 44px 45px), var(--surface-2)
}

.map-road { position: absolute; background: var(--surface-3) }

.map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    color: var(--em-600);
    font-size: 2.2rem;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25));
    animation: bob 2.4s ease-in-out infinite
}

@keyframes bob {
    0%, 100% { transform: translate(-50%, -100%) }
    50% { transform: translate(-50%, -122%) }
}

/* ================= TRUST STRIP ================= */
.trust-item { display: flex; gap: 12px; align-items: flex-start }
.trust-item .contact-ic { border-radius: 50% }

/* ================= CART / WISH DRAWERS ================= */
.offcanvas { background: var(--surface); color: var(--ink); border: 0 }
.offcanvas-end { border-radius: 26px 0 0 26px }
.offcanvas-start { border-radius: 0 26px 26px 0 }
.offcanvas-header { border-bottom: 1px dashed var(--line) }

.cart-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    animation: swapIn .4s
}

.cart-row img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--surface-2)
}

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface)
}

.qty button { border: 0; background: transparent; width: 28px; height: 28px; color: var(--charcoal); line-height: 1 }
.qty button:hover { color: var(--em-600) }
.qty span { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 600 }

.sum-row { display: flex; justify-content: space-between; font-size: .92rem; padding: .3rem 0; color: var(--muted) }

.sum-row.total {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--charcoal);
    border-top: 1px solid var(--line);
    margin-top: .5rem;
    padding-top: .7rem
}

.cod-box {
    background: var(--em-050);
    border: 1px dashed var(--em-100);
    border-radius: 16px;
    padding: .8rem .9rem;
    font-size: .85rem;
    color: var(--em-700)
}

#checkoutList, #cartItems, #wishItems { min-height: 60px }

/* ================= MODALS ================= */
.modal-content {
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    background: var(--surface);
    color: var(--ink)
}

.modal-header { border-bottom: 1px solid var(--line); padding: 1.1rem 1.4rem }
.modal-title { font-size: 1.25rem }

.policy h6 { color: var(--em-600); font-weight: 600; margin-top: 1rem; letter-spacing: .02em }
.policy p { font-size: .92rem; color: var(--muted); margin-bottom: .35rem }

.btn-close { color: var(--charcoal) }
[data-theme="dark"] .btn-close { filter: invert(1) }

/* ================= ALERT STACK ================= */
#alertStack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 36px))
}

.ltoast {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 13px 14px 15px;
    box-shadow: var(--shadow-l);
    overflow: hidden;
    animation: ltIn .55s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes ltIn {
    0% { opacity: 0; transform: translateX(110%) rotate(3deg) scale(.94) }
    70% { opacity: 1; transform: translateX(-8px) rotate(-.6deg) }
    100% { transform: translateX(0) rotate(0) }
}

.ltoast.out { animation: ltOut .4s ease forwards }

@keyframes ltOut { to { opacity: 0; transform: translateX(110%) scale(.94) } }

.lt-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex: 0 0 auto;
    font-size: 1.05rem;
    animation: iconPop .5s cubic-bezier(.34, 1.8, .5, 1) .12s both
}

@keyframes iconPop {
    0% { transform: scale(0) rotate(-30deg) }
    100% { transform: scale(1) rotate(0) }
}

.t-ok .lt-ic { background: linear-gradient(135deg, var(--em-800), var(--em-500)) }
.t-love .lt-ic { background: linear-gradient(135deg, #b3345c, #ef5f8d) }
.t-warn .lt-ic { background: linear-gradient(135deg, #a56a12, #e0a53d) }
.t-info .lt-ic { background: linear-gradient(135deg, #2b5876, #4e9fd1) }

.ltoast b { display: block; font-size: .9rem; color: var(--charcoal); line-height: 1.25 }
.ltoast span { font-size: .8rem; color: var(--muted) }

.lt-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1;
    padding: 2px 4px
}

.lt-close:hover { color: var(--charcoal) }

.lt-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    border-radius: 99px;
    transform-origin: left;
    animation: ltBar 3.6s linear forwards
}

.t-ok .lt-bar { background: linear-gradient(90deg, var(--em-700), var(--em-500)) }
.t-love .lt-bar { background: linear-gradient(90deg, #b3345c, #ef5f8d) }
.t-warn .lt-bar { background: linear-gradient(90deg, #a56a12, #e0a53d) }
.t-info .lt-bar { background: linear-gradient(90deg, #2b5876, #4e9fd1) }

@keyframes ltBar { from { transform: scaleX(1) } to { transform: scaleX(0) } }

/* ================= FOOTER ================= */
footer {
    background: var(--foot-bg);
    color: var(--foot-tx);
    margin-top: 60px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transition: background .45s
}

footer h6 {
    color: #fff;
    font-weight: 600;
    letter-spacing: .05em;
    font-size: .86rem;
    text-transform: uppercase;
    margin-bottom: 1rem
}

footer a { color: var(--foot-tx); font-size: .92rem; transition: .25s; display: inline-block }
footer a:hover { color: #fff; transform: translateX(4px) }

.soc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    display: grid;
    place-items: center;
    color: #fff;
    transition: .28s
}

.soc:hover { background: var(--em-600); transform: translateY(-4px) rotate(-8deg) }

.back-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--em-800), var(--em-500));
    color: #fff;
    border: 0;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-m);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) rotate(0);
    transition: .35s;
    z-index: 1030
}

.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) }
.back-top:hover { transform: translateY(-3px) rotate(-8deg) }

[data-theme="dark"] img { filter: brightness(.94) }

/* ================= INNER PAGES ================= */
.page-hero { padding: 34px 0 26px }

.page-hero-shell {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 40px;
    box-shadow: var(--shadow-s);
    padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem);
    text-align: center
}

.page-hero-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(420px 220px at 12% 0%, var(--em-050), transparent 70%),
        radial-gradient(420px 240px at 88% 120%, color-mix(in srgb, var(--sand) 55%, transparent), transparent 70%)
}

.page-hero-shell>* { position: relative }
.page-hero-shell h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em }

.crumb { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.crumb a { color: var(--em-600) }
.crumb a:hover { color: var(--em-700) }

.lead-2 { max-width: 44rem; margin-inline: auto; color: var(--muted); font-size: .98rem }

.policy-page h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem) }
.policy-page .policy h6 { margin-top: 1.6rem }
.policy-page .policy h6:first-child { margin-top: 0 }

@media (prefers-reduced-motion: reduce) {
    .cat-track, .floaty, .promo-badge, .news-ic { animation: none !important }
    .piv { animation-duration: .01s }
}

@media(max-width:991px) {
    .section { padding: 40px 0 }
    .hero-stage { min-height: 380px; margin-top: 20px }
    .hero-block { width: 100%; height: 70% }
    .hero-block-mask { width: 100%; height: 70% }
    .hero-prod-wrap { right: 2% }
    .toolbar { position: static }
}