:root {
    --neo-ink: #171319;
    --neo-muted: #77707c;
    --neo-paper: #fbfafc;
    --neo-line: rgba(25, 17, 28, .08);

    --neo-pink: #ff4f92;
    --neo-purple: #8368ff;
    --neo-blue: #48d6ff;

    --neo-font-ar:
        "Alexandria",
        "Segoe UI",
        system-ui,
        sans-serif;

    --neo-font-en:
        "Manrope",
        "Segoe UI",
        system-ui,
        sans-serif;

    --neo-ease:
        cubic-bezier(.2, .8, .2, 1);
}


/* ==================================================
   TYPOGRAPHY
================================================== */

html[lang="ar"] body {
    font-family: var(--neo-font-ar) !important;
}

html[lang="en"] body {
    font-family: var(--neo-font-en) !important;
}

body,
button,
input,
select,
textarea {
    font-family: inherit;
}

body {
    background:
        radial-gradient(
            circle at 12% 0,
            rgba(255,79,146,.055),
            transparent 24rem
        ),
        var(--neo-paper);

    color: var(--neo-ink);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -.035em;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
    letter-spacing: -.015em;
}


/* ==================================================
   STORE SHELL / HEADER
================================================== */

.store-shell {
    min-height: 100vh;
}

.store-header {
    position: sticky;
    top: 14px;
    z-index: 80;

    width:
        min(1380px, calc(100% - 28px));

    margin: 14px auto 0;

    padding:
        10px 12px 10px 16px;

    border:
        1px solid rgba(255,255,255,.72);

    border-radius: 22px;

    background:
        rgba(255,255,255,.76);

    backdrop-filter:
        blur(22px) saturate(150%);

    -webkit-backdrop-filter:
        blur(22px) saturate(150%);

    box-shadow:
        0 14px 42px
        rgba(37,22,43,.075);
}

.store-brand {
    gap: 10px;

    font-weight: 700;
    letter-spacing: -.025em;
}

.brand-mark {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--neo-pink),
            var(--neo-purple)
        );

    box-shadow:
        0 8px 24px
        rgba(255,79,146,.24);
}

.store-nav {
    gap: 5px;
}

.store-nav a {
    padding: 9px 13px;

    border-radius: 12px;

    font-size: .88rem;
    font-weight: 600;

    color: #625b67;

    text-decoration: none;

    transition:
        transform .2s var(--neo-ease),
        background .2s var(--neo-ease),
        color .2s var(--neo-ease);
}

.store-nav a:hover,
.store-nav a.active {
    color: var(--neo-ink);

    background:
        rgba(20,14,24,.055);
}

.store-nav a:hover {
    transform: translateY(-1px);
}


/* ==================================================
   CONTENT / HERO
================================================== */

.store-content {
    width:
        min(1420px, calc(100% - 28px));

    margin-inline: auto;

    padding-top:
        clamp(32px, 5vw, 64px);
}

.coca-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    align-items: center;

    gap:
        clamp(30px, 6vw, 90px);

    min-height:
        clamp(440px, 55vw, 680px);

    padding:
        clamp(34px, 6vw, 84px);

    overflow: hidden;

    border:
        1px solid var(--neo-line);

    border-radius:
        clamp(28px, 4vw, 48px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,244,249,.95)
        );

    box-shadow:
        0 28px 80px
        rgba(31,20,35,.07);
}

.coca-hero::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    inset-inline-end: -140px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,79,146,.18),
            rgba(132,104,255,.08) 38%,
            transparent 70%
        );

    filter: blur(8px);
}

.coca-hero-copy {
    position: relative;
    z-index: 3;

    max-width: 720px;
}

.coca-hero-kicker {
    display: inline-flex;

    padding: 8px 12px;

    margin-bottom: 20px;

    border:
        1px solid rgba(255,79,146,.13);

    border-radius: 999px;

    color: #bc3e73;

    background:
        rgba(255,79,146,.065);

    font-size: .74rem;
    font-weight: 700;

    letter-spacing: .13em;
}

.coca-hero h1 {
    margin: 0;

    max-width: 780px;

    font-size:
        clamp(3rem, 7vw, 7.2rem);

    line-height: .93;

    font-weight: 700;

    letter-spacing: -.075em;
}

html[lang="ar"] .coca-hero h1 {
    line-height: 1.13;
    letter-spacing: -.035em;
}

.coca-hero h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            110deg,
            var(--neo-pink),
            var(--neo-purple)
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.coca-hero-copy > p {
    max-width: 610px;

    margin:
        clamp(22px, 3vw, 32px)
        0;

    color: var(--neo-muted);

    font-size:
        clamp(1rem, 1.5vw, 1.18rem);

    line-height: 1.9;
}

.coca-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* Buttons */

.btn {
    border-radius: 15px !important;

    padding:
        12px 18px !important;

    font-weight: 650 !important;

    box-shadow: none;

    transition:
        transform .22s var(--neo-ease),
        box-shadow .22s var(--neo-ease) !important;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    border-color: transparent !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--neo-pink),
            var(--neo-purple)
        ) !important;

    box-shadow:
        0 12px 30px
        rgba(220,68,143,.22) !important;
}

.btn-secondary {
    border:
        1px solid var(--neo-line) !important;

    background:
        rgba(255,255,255,.75) !important;
}


/* Hero floating art */

.coca-hero-art {
    position: relative;

    min-height:
        clamp(300px, 33vw, 470px);

    perspective: 1200px;
}

.coca-hero-card {
    border:
        1px solid rgba(255,255,255,.75) !important;

    border-radius:
        26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.32)
        ) !important;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 30px 70px
        rgba(49,27,56,.13) !important;
}

.coca-hero-card.large {
    transform:
        rotateY(-12deg)
        rotateX(4deg)
        translateZ(20px);
}

.coca-hero-card.small.one {
    transform:
        rotate(8deg)
        translateZ(55px);
}

.coca-hero-card.small.two {
    transform:
        rotate(-7deg)
        translateZ(75px);
}


/* ==================================================
   NEO CATEGORY STAGE
================================================== */

.coca-neo-stage {
    position: relative;
    isolation: isolate;

    margin:
        clamp(28px, 5vw, 72px)
        0;

    padding:
        clamp(30px, 5vw, 70px);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        clamp(30px, 4vw, 50px);

    color: #fff;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255,79,146,.19),
            transparent 29%
        ),
        radial-gradient(
            circle at 85% 13%,
            rgba(72,214,255,.14),
            transparent 27%
        ),
        radial-gradient(
            circle at 52% 115%,
            rgba(131,104,255,.25),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #19151d 0%,
            #100e14 54%,
            #09090c 100%
        );

    box-shadow:
        0 38px 110px
        rgba(21,13,25,.2);
}

.coca-neo-grid {
    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.075) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0,
            transparent 82%
        );
}

.coca-neo-orb {
    position: absolute;
    z-index: -1;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(72px);

    opacity: .17;

    pointer-events: none;
}

.coca-neo-orb--pink {
    top: -160px;
    inset-inline-start: 12%;

    background: var(--neo-pink);
}

.coca-neo-orb--blue {
    bottom: -180px;
    inset-inline-end: 8%;

    background: var(--neo-blue);
}


/* Stage heading */

.coca-neo-stage__header {
    max-width: 800px;

    margin-bottom:
        clamp(30px, 5vw, 54px);
}

.coca-neo-stage__eyebrow,
.coca-neo-mini-label {
    display: block;

    color:
        rgba(255,255,255,.45);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}

html[lang="ar"]
.coca-neo-stage__eyebrow,
html[lang="ar"]
.coca-neo-mini-label {
    letter-spacing: .025em;
}

.coca-neo-stage__header h2 {
    margin:
        12px 0 18px;

    color: #fff;

    font-size:
        clamp(2.5rem, 6vw, 5.8rem);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -.065em;
}

html[lang="ar"]
.coca-neo-stage__header h2 {
    line-height: 1.16;
    letter-spacing: -.025em;
}

.coca-neo-stage__header > p {
    max-width: 650px;

    margin: 0;

    color:
        rgba(255,255,255,.61);

    font-size:
        clamp(.98rem, 1.5vw, 1.15rem);

    line-height: 1.85;
}

.coca-neo-stage__hint {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.35);

    font-size: .77rem;
}


/* Root floating glass */

.coca-neo-root-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(14px, 2vw, 24px);

    perspective: 1500px;
}

.coca-neo-root {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;

    appearance: none;

    position: relative;

    min-height:
        clamp(310px, 31vw, 420px);

    padding:
        clamp(22px, 3vw, 32px);

    overflow: hidden;

    text-align: start;

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        clamp(23px, 2.7vw, 32px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(25px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(135%);

    box-shadow:
        0 26px 64px
        rgba(0,0,0,.18),
        inset 0 1px 0
        rgba(255,255,255,.12);

    cursor: pointer;

    transform:
        translateY(var(--lift))
        rotateX(var(--rx))
        rotateY(var(--ry));

    transform-style:
        preserve-3d;

    transition:
        transform .38s var(--neo-ease),
        border-color .32s var(--neo-ease),
        background .32s var(--neo-ease),
        box-shadow .32s var(--neo-ease);
}

.coca-neo-root:hover,
.coca-neo-root.is-active {
    --lift: -9px;

    border-color:
        rgba(255,255,255,.32);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 38px 92px
        rgba(0,0,0,.27),
        0 0 48px
        rgba(131,104,255,.08),
        inset 0 1px 0
        rgba(255,255,255,.18);
}

.coca-neo-root__glass {
    position: absolute;

    inset: 12px -8px -9px 11px;

    z-index: -1;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: inherit;

    transform:
        translateZ(-26px);
}

.coca-neo-root__top {
    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 16px;

    transform:
        translateZ(46px);
}

.coca-neo-root__icon {
    display: grid;

    place-items: center;

    width:
        clamp(68px, 7vw, 90px);

    height:
        clamp(68px, 7vw, 90px);

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 24px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.18),
        inset 0 1px 0
        rgba(255,255,255,.11);
}

.coca-neo-root__icon svg {
    width: 54%;
    height: 54%;

    stroke-width: 1.55;
}

.coca-neo-root__number {
    color:
        rgba(255,255,255,.24);

    font-size: .76rem;

    font-weight: 700;

    letter-spacing: .14em;
}

.coca-neo-root__content {
    position: absolute;

    inset-inline:
        clamp(22px, 3vw, 32px);

    bottom:
        clamp(22px, 3vw, 30px);

    transform:
        translateZ(58px);
}

.coca-neo-root__content strong {
    display: block;

    font-size:
        clamp(1.55rem, 2.7vw, 2.45rem);

    line-height: 1.2;

    font-weight: 700;
}

.coca-neo-root__content small {
    display: block;

    max-width: 350px;

    margin-top: 11px;

    color:
        rgba(255,255,255,.49);

    font-size: .86rem;

    line-height: 1.75;
}

.coca-neo-root__cta {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 19px;

    color:
        rgba(255,255,255,.85);

    font-size: .84rem;

    font-weight: 650;
}


/* Section deck */

.coca-neo-section-deck {
    margin-top: 22px;
}

.coca-neo-section-panel {
    display: none;

    padding:
        clamp(18px, 2.6vw, 28px);

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 25px;

    background:
        rgba(255,255,255,.048);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.coca-neo-section-panel.is-active {
    display: block;

    animation:
        neoReveal .38s
        var(--neo-ease)
        both;
}

.coca-neo-section-panel__top {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.coca-neo-section-panel__top strong {
    display: block;

    margin-top: 5px;

    font-size:
        clamp(1.15rem, 2vw, 1.55rem);
}

.coca-neo-view-all {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,.7);

    font-size: .8rem;

    font-weight: 600;

    text-decoration: none;
}

.coca-neo-view-all:hover {
    color: #fff;
}

.coca-neo-section-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.coca-neo-section-card {
    position: relative;

    min-height: 116px;

    padding: 18px;

    overflow: hidden;

    color: #fff;

    text-decoration: none;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 19px;

    background:
        rgba(255,255,255,.038);

    transition:
        transform .22s var(--neo-ease),
        border-color .22s var(--neo-ease),
        background .22s var(--neo-ease);
}

.coca-neo-section-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(255,255,255,.2);

    background:
        rgba(255,255,255,.075);
}

.coca-neo-section-card__line {
    display: block;

    width: 30px;
    height: 2px;

    margin-bottom: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--neo-pink),
            var(--neo-blue)
        );
}

.coca-neo-section-card strong {
    display: block;

    font-size: .96rem;

    font-weight: 650;
}

.coca-neo-section-card small {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,.38);

    font-size: .73rem;
}

.coca-neo-section-card__arrow {
    position: absolute;

    inset-inline-end: 15px;
    bottom: 13px;

    color:
        rgba(255,255,255,.34);
}


/* ==================================================
   OLD GENERIC CARDS - CLEAN, NOT LEGACY
================================================== */

.card,
.product-card {
    border:
        1px solid var(--neo-line) !important;

    border-radius: 22px !important;

    box-shadow:
        0 14px 42px
        rgba(28,18,31,.055) !important;
}


/* ==================================================
   FOOTER
================================================== */

.store-footer {
    margin-top:
        clamp(50px, 8vw, 100px);

    border-top:
        1px solid var(--neo-line);

    background: transparent;
}

.store-footer-inner {
    width:
        min(1380px, calc(100% - 28px));

    margin-inline: auto;

    padding-block:
        clamp(38px, 6vw, 70px);
}


/* ==================================================
   MOTION
================================================== */

@keyframes neoReveal {
    from {
        opacity: 0;

        transform:
            translateY(9px)
            scale(.992);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 980px) {

    .store-header {
        position: relative;
        top: auto;
    }

    .coca-hero {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .coca-hero-art {
        min-height: 280px;
    }

    .coca-neo-root-grid {
        grid-template-columns: 1fr;
    }

    .coca-neo-root {
        min-height: 245px;
    }

    .coca-neo-section-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==================================================
   PHONE
================================================== */

@media (max-width: 620px) {

    .store-header,
    .store-content,
    .store-footer-inner {
        width:
            calc(100% - 18px);
    }

    .store-content {
        padding-top: 18px;
    }

    .coca-hero {
        padding: 28px 20px;

        border-radius: 25px;
    }

    .coca-hero h1 {
        font-size:
            clamp(2.75rem, 15vw, 4.2rem);
    }

    .coca-hero-art {
        min-height: 220px;
    }

    .coca-neo-stage {
        margin-top: 22px;

        padding: 26px 15px;

        border-radius: 25px;
    }

    .coca-neo-stage__header h2 {
        font-size:
            clamp(2.5rem, 13vw, 3.7rem);
    }

    .coca-neo-root {
        min-height: 225px;

        border-radius: 23px;
    }

    .coca-neo-section-panel {
        padding: 14px;
    }

    .coca-neo-section-panel__top {
        align-items: flex-start;

        flex-direction: column;
    }

    .coca-neo-section-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }

    .coca-neo-section-card {
        min-height: 102px;

        padding: 14px;
    }
}


/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .coca-neo-root {
        transform: none !important;
    }
}