/* ============================================================
   VARIABLES
============================================================ */

:root
{

    --clrBlack:      #030303;

    --clrPanel:      #0d060b;

    --clrPanelAlt:   #120810;

    --clrHotPink:    #ff149d;

    --clrPinkGlow:   rgba(255, 20, 157, 0.65);

    --clrNeonGreen:  #a6ff00;

    --clrAmber:      #ffb800;

    --clrWhite:      #ffffff;

    --clrSoftText:   #d8d8d8;

    --clrMuted:      #888;

    --clrBorderPink: rgba(255, 20, 157, 0.45);

    --glowText:      0 0 8px var(--clrHotPink), 0 0 22px rgba(255, 20, 157, 0.55);

    --glowBox:       0 0 16px rgba(255, 20, 157, 0.35), 0 0 40px rgba(255, 20, 157, 0.12);

    --fontCondensed: 'Anton', 'Arial Narrow', sans-serif;

    --fontSans:      'DM Sans', system-ui, sans-serif;

    --fontScript:    'Caveat', cursive;

    --maxWidth:      1200px;

    --sectionPad:    4rem;

    --headerH:       64px;

    --radiusCard:    12px;

    --radiusPill:    50px;

}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after
{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html
{

    scroll-behavior: smooth;

    scroll-padding-top: var(--headerH);

    -webkit-text-size-adjust: 100%;

}

body
{

    font-family: var(--fontSans);

    font-size: 1rem;

    line-height: 1.6;

    color: var(--clrSoftText);

    background-color: var(--clrBlack);

    overflow-x: hidden;

}

img
{

    display: block;

    max-width: 100%;

    height: auto;

}

ul
{

    list-style: none;

}

a
{

    color: inherit;

    text-decoration: none;

}

button
{

    font-family: inherit;

    cursor: pointer;

}

*:focus-visible
{

    outline: 2px solid var(--clrHotPink);

    outline-offset: 3px;

}

.skipToMain
{

    position: absolute;

    top: -9999px;

    left: 1rem;

    z-index: 9999;

    padding: 0.6rem 1.2rem;

    background-color: var(--clrHotPink);

    color: var(--clrWhite);

    font-family: var(--fontSans);

    font-size: 0.9rem;

    font-weight: 700;

    border-radius: var(--radiusPill);

    text-decoration: none;

}

.skipToMain:focus
{

    top: 1rem;

}


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

h1,
h2,
h3,
h4
{

    font-family: var(--fontCondensed);

    font-weight: 400;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    color: var(--clrWhite);

}


/* ── Neon Script Accent ── */

.accentScript
{

    font-family: var(--fontScript);

    font-size: 1.2em;

    font-weight: 700;

    color: var(--clrHotPink);

    text-transform: none;

    letter-spacing: 0;

    display: block;

    line-height: 0.95;

    margin-top: 0.05em;

    text-shadow: var(--glowText);

}


/* ============================================================
   BUTTONS
============================================================ */

/* ── Primary (hot pink) ── */

.btnPrimary
{

    display: inline-block;

    background-color: var(--clrHotPink);

    color: var(--clrWhite);

    padding: 0.8rem 2rem;

    border-radius: var(--radiusPill);

    font-family: var(--fontSans);

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    text-decoration: none;

    border: 2px solid var(--clrHotPink);

    box-shadow: 0 0 18px rgba(255, 20, 157, 0.45);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;

    white-space: nowrap;

    line-height: 1;

    cursor: pointer;

}

.btnPrimary:hover
{

    background-color: #e0008a;

    border-color: #e0008a;

    box-shadow: 0 0 28px rgba(255, 20, 157, 0.7);

    transform: translateY(-2px);

}

/* ── Large Button ── */

.btnLarge
{

    padding: 1rem 2.4rem;

    font-size: 0.88rem;

}

/* ── Outline (transparent, pink border) ── */

.btnOutline
{

    display: inline-block;

    background-color: transparent;

    color: var(--clrHotPink);

    padding: 0.8rem 2rem;

    border-radius: var(--radiusPill);

    font-family: var(--fontSans);

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    text-decoration: none;

    border: 2px solid var(--clrHotPink);

    box-shadow: 0 0 10px rgba(255, 20, 157, 0.2);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;

    white-space: nowrap;

    line-height: 1;

    cursor: pointer;

}

.btnOutline:hover
{

    background-color: rgba(255, 20, 157, 0.1);

    box-shadow: 0 0 20px rgba(255, 20, 157, 0.4);

    transform: translateY(-2px);

}


/* ============================================================
   SECTION SHARED STYLES
============================================================ */

.sectionInner
{

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: var(--sectionPad) 1.5rem;

}

.sectionLabelWrap
{

    text-align: center;

    margin-bottom: 0.75rem;

}

.sectionLabel
{

    display: inline-block;

    font-family: var(--fontSans);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.22em;

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

}

.sectionHeadline
{

    font-family: var(--fontCondensed);

    font-size: clamp(2.2rem, 7vw, 4.5rem);

    font-weight: 400;

    color: var(--clrWhite);

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    line-height: 1;

    margin-bottom: 0.9rem;

}

.sectionSub
{

    font-size: 0.95rem;

    color: var(--clrMuted);

    text-align: center;

    max-width: 520px;

    margin: 0 auto 3rem;

    line-height: 1.7;

}


/* ============================================================
   HEADER
============================================================ */

.siteHeader
{

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 100;

    background-color: rgba(3, 3, 3, 0.94);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid transparent;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.siteHeader.scrolled
{

    border-bottom-color: rgba(255, 20, 157, 0.3);

    box-shadow: 0 2px 24px rgba(255, 20, 157, 0.08);

}

.headerInner
{

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: 0 1.5rem;

    height: var(--headerH);

    gap: 1rem;

}

.logoLink
{

    flex-shrink: 0;

    display: flex;

    align-items: center;

}

.headerLogo
{

    height: 72px;

    width: auto;

    margin-top: 6px;

}

.headerCta
{

    display: none;

    flex-shrink: 0;

}


/* ============================================================
   NAVIGATION
============================================================ */

/* ── Mobile Overlay Nav ── */

.siteNav
{

    visibility: hidden;

    opacity: 0;

    position: fixed;

    inset: 0;

    background-color: rgba(3, 3, 3, 0.97);

    z-index: 90;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: calc(var(--headerH) + 2rem) 2rem 2rem;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;

    overflow-y: auto;

}

.siteHeader.navOpen .siteNav
{

    visibility: visible;

    opacity: 1;

}

.navList
{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.8rem;

}

.navItem
{

    list-style: none;

    position: relative;

}

.navLink
{

    font-family: var(--fontCondensed);

    font-size: 2.4rem;

    font-weight: 400;

    color: var(--clrWhite);

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    transition: color 0.2s ease, text-shadow 0.2s ease;

    position: relative;

    white-space: nowrap;

}

.navLink::after
{

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--clrHotPink);

    box-shadow: 0 0 8px var(--clrHotPink);

    transition: width 0.25s ease;

}

.navLink:hover
{

    color: var(--clrHotPink);

    text-shadow: var(--glowText);

}

.navLink:hover::after
{

    width: 100%;

}

.navLinkActive
{

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

}


/* ── Dropdown Trigger ── */

.navLinkHasDropdown
{

    display: flex;

    align-items: center;

    gap: 0.3rem;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

}

.navCaret
{

    display: inline-block;

    font-size: 0.7em;

    transition: transform 0.2s ease;

    color: inherit;

    line-height: 1;

}

.navItem.dropdownOpen .navCaret
{

    transform: rotate(180deg);

}


/* ── Mobile Sub-Nav (inside overlay) ── */

.navSubList
{

    display: none;

    flex-direction: column;

    align-items: center;

    gap: 0.8rem;

    margin-top: 0.8rem;

    padding-top: 0.8rem;

    border-top: 1px solid rgba(255, 20, 157, 0.2);

    width: 100%;

}

.navItem.dropdownOpen .navSubList
{

    display: flex;

}

.navSubLink
{

    font-family: var(--fontSans);

    font-size: 1rem;

    font-weight: 600;

    color: var(--clrMuted);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    text-decoration: none;

    transition: color 0.2s ease;

}

.navSubLink:hover
{

    color: var(--clrHotPink);

}


/* ── Burger Button ── */

.burgerBtn
{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    width: 44px;

    height: 44px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    flex-shrink: 0;

    z-index: 110;

    position: relative;

}

.burgerLine
{

    display: block;

    width: 24px;

    height: 2px;

    background-color: var(--clrWhite);

    border-radius: 2px;

    transition: transform 0.3s ease, opacity 0.3s ease;

    transform-origin: center;

}

.siteHeader.navOpen .burgerLine:nth-child(1)
{

    transform: translateY(7px) rotate(45deg);

}

.siteHeader.navOpen .burgerLine:nth-child(2)
{

    opacity: 0;

    transform: scaleX(0);

}

.siteHeader.navOpen .burgerLine:nth-child(3)
{

    transform: translateY(-7px) rotate(-45deg);

}


/* ============================================================
   HERO SECTION
============================================================ */

.heroSection
{

    position: relative;

    min-height: 100vh;

    min-height: 100svh;

    background-color: var(--clrBlack);

    display: flex;

    align-items: center;

    padding-top: var(--headerH);

    overflow: hidden;

}

.heroInner
{

    width: 100%;

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: 3.5rem 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 3rem;

}

/* ── Hero Content ── */

.heroContent
{

    flex: none;

}

.heroEyebrow
{

    margin-bottom: 0.75rem;

}

.heroEyebrowScript
{

    font-family: var(--fontScript);

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--clrHotPink);

    text-shadow:
        0 0 5px rgba(255, 20, 157, 0.45),
        0 0 14px rgba(255, 20, 157, 0.22);

}

.heroHeadline
{

    font-family: var(--fontCondensed);

    font-size: clamp(3.2rem, 12vw, 7rem);

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.01em;

    line-height: 0.95;

    margin-bottom: 1.5rem;

}

.heroSub
{

    font-size: 0.98rem;

    color: var(--clrMuted);

    line-height: 1.75;

    max-width: 480px;

    margin-bottom: 2rem;

}

.heroCtas
{

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

    margin-bottom: 2rem;

}

/* ── Social Proof Strip ── */

.heroProof
{

    display: flex;

    align-items: center;

    gap: 1.2rem;

    flex-wrap: wrap;

}

.heroProofItem
{

    display: flex;

    flex-direction: column;

    gap: 0.1rem;

}

.heroProofNum
{

    font-family: var(--fontCondensed);

    font-size: 1.4rem;

    font-weight: 400;

    color: var(--clrHotPink);

    text-shadow: 0 0 12px rgba(255, 20, 157, 0.6);

    line-height: 1;

}

.heroProofLabel
{

    font-size: 0.68rem;

    color: var(--clrMuted);

    text-transform: uppercase;

    letter-spacing: 0.1em;

}

.heroProofDivider
{

    display: block;

    width: 1px;

    height: 28px;

    background-color: rgba(255, 255, 255, 0.1);

}

/* ── Hero Visual ── */

.heroVisual
{

    position: relative;

    width: 100%;

    max-width: 480px;

    margin: 0 auto;

}

.heroGlow
{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 85%;

    height: 85%;

    background: var(--clrHotPink);

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.25;

    pointer-events: none;

    z-index: 0;

}

.heroImgWrap
{

    position: relative;

    z-index: 1;

    border-radius: var(--radiusCard);

    overflow: hidden;

    aspect-ratio: 4 / 3;

    border: 1px solid var(--clrBorderPink);

    box-shadow: var(--glowBox);

}

.heroProductImg
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

/* ── Floating Decor Labels ── */

.heroDecor
{

    display: none;

    position: absolute;

    font-family: var(--fontScript);

    font-size: 1rem;

    font-weight: 700;

    color: var(--clrHotPink);

    text-shadow: var(--glowText);

    pointer-events: none;

    z-index: 2;

    white-space: nowrap;

}

.heroDecorA
{

    top: -1rem;

    right: -1rem;

    transform: rotate(8deg);

}

.heroDecorB
{

    bottom: 1rem;

    left: -1.2rem;

    transform: rotate(-6deg);

}


.showcaseCategoryBadge
{

    position: absolute;

    top: 0.85rem;

    left: 0.85rem;

    display: inline-block;

    background-color: var(--clrHotPink);

    color: var(--clrWhite);

    font-family: var(--fontSans);

    font-size: 0.6rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    padding: 0.25rem 0.7rem;

    border-radius: var(--radiusPill);

    z-index: 1;

}

.showcaseCta
{

    display: flex;

    justify-content: center;

    margin-top: 2.5rem;

}


/* ============================================================
   HOW ORDERING WORKS
============================================================ */

.howOrderSection
{

    background-color: var(--clrBlack);

    background-image: radial-gradient(rgba(255, 20, 157, 0.05) 1px, transparent 1px);

    background-size: 28px 28px;

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.howOrderSteps
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 0;

    position: relative;

}

.howOrderStep
{

    display: flex;

    align-items: flex-start;

    gap: 1.5rem;

    padding: 1.5rem 0;

    border-bottom: 1px solid rgba(255, 20, 157, 0.08);

    position: relative;

}

.howOrderStep:last-child
{

    border-bottom: none;

}

.howOrderNumWrap
{

    flex-shrink: 0;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid var(--clrHotPink);

    border-radius: 50%;

    box-shadow: 0 0 16px rgba(255, 20, 157, 0.3);

    background-color: rgba(255, 20, 157, 0.06);

}

.howOrderNum
{

    font-family: var(--fontCondensed);

    font-size: 1.4rem;

    font-weight: 400;

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.6);

    line-height: 1;

}

.howOrderContent
{

    flex: 1;

    min-width: 0;

    padding-top: 0.25rem;

}

.howOrderTitle
{

    font-family: var(--fontCondensed);

    font-size: 1.4rem;

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.04em;

    line-height: 1.1;

    margin-bottom: 0.4rem;

}

.howOrderDesc
{

    font-size: 0.88rem;

    color: var(--clrMuted);

    line-height: 1.72;

}


/* ============================================================
   REVIEWS PREVIEW
============================================================ */

.reviewsSection
{

    background-color: var(--clrPanelAlt);

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.reviewsTrustLine
{

    font-family: var(--fontSans);

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--clrMuted);

    text-align: center;

    margin-bottom: 2rem;

}

.reviewsGrid
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.25rem;

    margin-bottom: 2.5rem;

}

.reviewCard
{

    background-color: var(--clrPanel);

    border: 1px solid var(--clrBorderPink);

    border-radius: var(--radiusCard);

    padding: 1.8rem;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;

    transition: border-color 0.25s ease, box-shadow 0.25s ease;

}

.reviewCard:hover
{

    border-color: var(--clrHotPink);

    box-shadow: var(--glowBox);

}

.reviewCardPlaceholder
{

    border-style: dashed;

    border-color: rgba(255, 20, 157, 0.2);

    opacity: 0.6;

}

.reviewStars
{

    font-size: 1rem;

    color: var(--clrHotPink);

    text-shadow: 0 0 8px rgba(255, 20, 157, 0.6);

    letter-spacing: 0.1em;

    line-height: 1;

}

.reviewText
{

    font-size: 0.92rem;

    color: var(--clrSoftText);

    line-height: 1.72;

    font-style: italic;

}

.reviewAuthor
{

    font-family: var(--fontSans);

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--clrHotPink);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

/* ── Leave Review CTA Row ── */

.reviewsCtaRow
{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.75rem;

    text-align: center;

}

.reviewsCtaNote
{

    font-size: 0.8rem;

    color: var(--clrMuted);

    line-height: 1.5;

}


/* ============================================================
   READY TO ORDER — CTA BANNER
============================================================ */

.readyConversionSection
{

    position: relative;

    overflow: hidden;

    min-height: 440px;

    display: flex;

    align-items: center;

}

.dropsBg
{

    position: absolute;

    inset: 0;

    z-index: 0;

}

.dropsBgImg
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

.dropsOverlay
{

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(3, 3, 3, 0.93) 0%,
        rgba(3, 3, 3, 0.8) 100%
    );

}

.dropsInner
{

    position: relative;

    z-index: 1;

    text-align: center;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.2rem;

}

.dropsEyebrow
{

    display: inline-block;

    font-family: var(--fontSans);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.22em;

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

}

.dropsHeadline
{

    font-family: var(--fontCondensed);

    font-size: clamp(2.6rem, 8vw, 5rem);

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    line-height: 0.95;

    text-align: center;

}

.dropsText
{

    font-size: 0.95rem;

    color: rgba(255, 255, 255, 0.65);

    max-width: 440px;

    text-align: center;

    line-height: 1.7;

}


/* ============================================================
   PAGE INTRO — SHARED INNER PAGES
============================================================ */

.pageIntro
{

    background-color: var(--clrBlack);

    padding-top: calc(var(--headerH) + 3rem);

    padding-bottom: 3rem;

    border-bottom: 1px solid rgba(255, 20, 157, 0.1);

}

.pageIntroInner
{

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: 0 1.5rem;

}

.pageBack
{

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-family: var(--fontSans);

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--clrMuted);

    text-decoration: none;

    margin-bottom: 1.5rem;

    transition: color 0.2s ease;

}

.pageBack:hover
{

    color: var(--clrHotPink);

}

.pageIntroLabel
{

    font-family: var(--fontSans);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.22em;

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

    display: block;

    margin-bottom: 0.6rem;

}

.pageIntroHeadline
{

    font-family: var(--fontCondensed);

    font-size: clamp(2.8rem, 9vw, 5.5rem);

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.02em;

    line-height: 0.95;

    margin-bottom: 1rem;

}

.pageIntroSub
{

    font-size: 0.95rem;

    color: var(--clrMuted);

    line-height: 1.72;

    max-width: 520px;

}


/* ============================================================
   ORDER REQUEST PAGE
============================================================ */

.orderPageIntro
{

    background-color: var(--clrBlack);

    padding-top: calc(var(--headerH) + 3rem);

    padding-bottom: 3rem;

    border-bottom: 1px solid rgba(255, 20, 157, 0.1);

}

.orderPageIntroInner
{

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: 0 1.5rem;

}

.orderPageBack
{

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-family: var(--fontSans);

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--clrMuted);

    text-decoration: none;

    margin-bottom: 1.5rem;

    transition: color 0.2s ease;

}

.orderPageBack:hover
{

    color: var(--clrHotPink);

}

.orderPageIntroText
{

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

}

.orderPageHeadline
{

    font-family: var(--fontCondensed);

    font-size: clamp(2.8rem, 9vw, 5rem);

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.02em;

    line-height: 0.95;

}

.orderPageSub
{

    font-size: 0.95rem;

    color: var(--clrMuted);

    line-height: 1.72;

    max-width: 480px;

}

/* ── Order Section ── */

.orderSection
{

    background-color: var(--clrBlack);

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}


/* ============================================================
   ORDER BUILDER
============================================================ */

.builderWrap
{

    max-width: 680px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

/* ── Progress Bar ── */

.builderProgressBar
{

    height: 3px;

    background-color: rgba(255, 20, 157, 0.15);

    border-radius: var(--radiusPill);

    overflow: hidden;

}

.builderProgressFill
{

    height: 100%;

    background-color: var(--clrHotPink);

    box-shadow: 0 0 8px rgba(255, 20, 157, 0.6);

    border-radius: var(--radiusPill);

    transition: width 0.4s ease;

    width: 0%;

}

/* ── Step Label ── */

.builderStepLabel
{

    font-family: var(--fontSans);

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--clrMuted);

    text-transform: uppercase;

    letter-spacing: 0.12em;

}

/* ── Panels ── */

.builderPanel
{

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

}

.builderPanelHidden
{

    display: none;

}

/* ── Product Choice Grid ── */

.builderChoiceGrid
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.75rem;

}

.builderChoice
{

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.1rem 1.4rem;

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.2);

    border-radius: var(--radiusCard);

    cursor: pointer;

    text-align: left;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

}

.builderChoice:hover
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.05);

}

.builderChoice.isSelected
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.08);

    box-shadow: 0 0 12px rgba(255, 20, 157, 0.2);

}

.builderChoiceIcon
{

    font-size: 1.3rem;

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

    flex-shrink: 0;

    line-height: 1;

}

.builderChoiceName
{

    font-family: var(--fontCondensed);

    font-size: 1.15rem;

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.03em;

    line-height: 1.1;

    flex: 1;

}

.builderChoiceDetail
{

    font-family: var(--fontSans);

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--clrHotPink);

    white-space: nowrap;

    flex-shrink: 0;

}

/* ── Size Grid ── */

.sizeGrid
{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.75rem;

}

.sizeOption
{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.25rem;

    padding: 1rem;

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.2);

    border-radius: var(--radiusCard);

    cursor: pointer;

    text-align: center;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;

}

.sizeOption:hover
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.05);

}

.sizeOption.isSelected
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.08);

    box-shadow: 0 0 12px rgba(255, 20, 157, 0.2);

}

.sizeOptionName
{

    font-family: var(--fontCondensed);

    font-size: 1.1rem;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.04em;

    line-height: 1;

}

.sizeOptionPrice
{

    font-family: var(--fontSans);

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--clrHotPink);

}

/* ── Flavor Chips ── */

.flavorChipGrid
{

    display: flex;

    flex-wrap: wrap;

    gap: 0.6rem;

}

.flavorChip
{

    display: inline-block;

    padding: 0.5rem 1.1rem;

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.25);

    border-radius: var(--radiusPill);

    font-family: var(--fontSans);

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--clrSoftText);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;

}

.flavorChip:hover
{

    border-color: var(--clrHotPink);

    color: var(--clrHotPink);

}

.flavorChip.isSelected
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.1);

    color: var(--clrHotPink);

    box-shadow: 0 0 10px rgba(255, 20, 157, 0.2);

}

/* ── Date Input ── */

.builderDateWrap
{

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    max-width: 340px;

}

.builderDateInput
{

    color-scheme: dark;

}

.builderDateNote
{

    font-size: 0.82rem;

    color: var(--clrMuted);

    line-height: 1.55;

}

.builderDateError
{

    font-size: 0.84rem;

    color: var(--clrHotPink);

    line-height: 1.5;

}

/* ── Info Fields ── */

.builderInfoFields
{

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

/* ── Order Summary ── */

.orderSummary
{

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.2);

    border-radius: var(--radiusCard);

    overflow: hidden;

    margin-bottom: 1.25rem;

}

.summaryRow
{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.8rem 1.2rem;

    gap: 1rem;

    border-bottom: 1px solid rgba(255, 20, 157, 0.08);

}

.summaryRow:last-child
{

    border-bottom: none;

}

.summaryLabel
{

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--clrMuted);

}

.summaryValue
{

    font-size: 0.9rem;

    color: var(--clrSoftText);

    text-align: right;

}

.summaryRowPrice
{

    background-color: rgba(255, 20, 157, 0.04);

}

.summaryValuePrice
{

    font-family: var(--fontCondensed);

    font-size: 1.3rem;

    color: var(--clrHotPink);

    text-shadow: 0 0 8px rgba(255, 20, 157, 0.4);

    letter-spacing: 0.02em;

}

.summaryValuePending
{

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--clrAmber);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

/* ── Builder Nav Row ── */

.builderNavRow
{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding-top: 0.5rem;

}

.builderNavBtn
{

    min-width: 120px;

}

.builderSubmitBtn
{

    width: 100%;

    text-align: center;

    justify-content: center;

    margin-bottom: 1rem;

}


/* ============================================================
   FORM STYLES
============================================================ */

.formRow
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.1rem;

}

.formGroup
{

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}

.formLabel
{

    font-family: var(--fontSans);

    font-size: 0.72rem;

    font-weight: 700;

    color: var(--clrSoftText);

    text-transform: uppercase;

    letter-spacing: 0.1em;

}

.formInput,
.formSelect,
.formTextarea
{

    width: 100%;

    padding: 0.9rem 1rem;

    background-color: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 20, 157, 0.25);

    border-radius: 8px;

    font-family: var(--fontSans);

    font-size: 0.95rem;

    color: var(--clrWhite);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    appearance: none;

    -webkit-appearance: none;

    outline: none;

}

.formInput:focus,
.formSelect:focus,
.formTextarea:focus
{

    border-color: var(--clrHotPink);

    box-shadow: 0 0 0 3px rgba(255, 20, 157, 0.15);

}

.formInput::placeholder,
.formTextarea::placeholder
{

    color: rgba(255, 255, 255, 0.2);

}

.formSelect
{

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff149d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1rem center;

    padding-right: 2.5rem;

    cursor: pointer;

    color: var(--clrSoftText);

}

.formSelect option
{

    background-color: var(--clrPanel);

    color: var(--clrWhite);

}

.formTextarea
{

    resize: vertical;

    min-height: 100px;

    line-height: 1.6;

}

.formDisclaimer
{

    background-color: rgba(255, 20, 157, 0.06);

    border-left: 3px solid var(--clrHotPink);

    border-radius: 0 8px 8px 0;

    padding: 0.9rem 1.2rem;

    font-size: 0.86rem;

    color: var(--clrMuted);

    line-height: 1.65;

}

.formDisclaimer strong
{

    color: var(--clrSoftText);

    font-weight: 600;

}

/* ── Form Feedback ── */

.formFeedback
{

    padding: 1rem 1.2rem;

    border-radius: 8px;

    font-size: 0.9rem;

    line-height: 1.55;

    display: none;

}

.formFeedback.feedbackSuccess
{

    display: block;

    background-color: rgba(166, 255, 0, 0.08);

    border: 1px solid rgba(166, 255, 0, 0.3);

    color: var(--clrNeonGreen);

}

.formFeedback.feedbackError
{

    display: block;

    background-color: rgba(255, 20, 157, 0.08);

    border: 1px solid rgba(255, 20, 157, 0.3);

    color: var(--clrHotPink);

}


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

.siteFooter
{

    position: relative;

    background-color: var(--clrBlack);

    border-top: 1px solid rgba(255, 20, 157, 0.2);

    overflow: hidden;

    color: var(--clrMuted);

}

/* ── Watermark ── */

.footerWatermark
{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 780px;

    max-width: 90%;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    filter: brightness(8) saturate(0);

}

.footerWatermarkImg
{

    width: 100%;

    height: auto;

}

/* ── Footer Inner ── */

.footerInner
{

    position: relative;

    z-index: 1;

    max-width: var(--maxWidth);

    margin: 0 auto;

    padding: 3rem 1.5rem 0.25rem;

}

.footerTop
{

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding-bottom: 2rem;

}

/* ── Brand Column ── */

.footerLogo
{

    height: 59px;

    width: auto;

    filter: none;

    opacity: 1;

    margin-bottom: 0.6rem;

    display: block;

}

.footerTagline
{

    font-family: var(--fontScript);

    font-size: 1.1rem;

    color: var(--clrHotPink);

    font-weight: 600;

    text-shadow: 0 0 12px rgba(255, 20, 157, 0.4);

}

/* ── Social Icons ── */

.footerSocial
{

    display: flex;

    align-items: center;

    gap: 0.45rem;

    margin-top: 1rem;

}

.footerSocialLink
{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: 1px solid rgba(255, 20, 157, 0.28);

    border-radius: 8px;

    color: var(--clrHotPink);

    flex-shrink: 0;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

}

.footerSocialLink:hover
{

    border-color: var(--clrHotPink);

    background-color: rgba(255, 20, 157, 0.08);

    box-shadow: 0 0 14px rgba(255, 20, 157, 0.3);

}

.footerSocialLink svg
{

    display: block;

    flex-shrink: 0;

}

/* ── Info Columns ── */

.footerHeading
{

    font-family: var(--fontSans);

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--clrHotPink);

    text-shadow: 0 0 8px rgba(255, 20, 157, 0.4);

    margin-bottom: 0.6rem;

}

.footerText
{

    font-size: 0.85rem;

    color: var(--clrMuted);

    line-height: 1.7;

}

.footerLink
{

    color: var(--clrSoftText);

    text-decoration: none;

    transition: color 0.2s ease;

}

.footerLink:hover
{

    color: var(--clrHotPink);

}

.footerAddress
{

    font-style: normal;

    font-size: 0.85rem;

    color: var(--clrMuted);

    line-height: 1.75;

    margin-top: 0.5rem;

    margin-bottom: 0.4rem;

}

.footerPickupDays
{

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0;

    margin-bottom: 0.4rem;

}

.footerPickupDays li
{

    font-size: 0.85rem;

    color: var(--clrSoftText);

    line-height: 1.75;

}

.footerTextSm
{

    font-size: 0.76rem;

    color: rgba(136, 136, 136, 0.65);

    line-height: 1.65;

}

.footerNavList
{

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

}

/* ── Footer Legal Navigation ── */

.footerLegal
{

    position: relative;

    margin: 2rem 0 1.5rem;

    text-align: center;

}

.footerLegal::before
{

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background: rgba(255, 255, 255, 0.06);

    transform: translateY(-50%);

}

.footerLegalNav
{

    position: relative;

    z-index: 1;

    list-style: none;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

}

.footerLegalLink
{

    font-family: var(--fontSans);

    font-size: 0.68rem;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.22);

    text-decoration: none;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    padding: 0.25rem 0.75rem;

    background: var(--clrBlack);

    white-space: nowrap;

    transition: color 0.2s ease;

}

.footerLegalLink:hover
{

    color: var(--clrHotPink);

}

.footerLegalNav li:not(:last-child)::after
{

    content: '·';

    color: rgba(255, 255, 255, 0.12);

    font-size: 0.68rem;

    align-self: center;

}


/* ── Footer Bottom ── */

.footerBottom
{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.25rem;

}

.footerCopyright
{

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.2);

    text-align: center;

}

/* ── Dev Credit ── */

.footerDevCredit
{

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-family: var(--fontSans);

    font-size: 0.78rem;

    font-weight: 600;

    color: rgba(255, 20, 157, 0.65);

    text-decoration: none;

    letter-spacing: 0.04em;

    width: fit-content;

    align-self: center;

    transition: color 0.2s ease, text-shadow 0.2s ease;

}

.footerDevCredit:hover
{

    color: var(--clrHotPink);

    text-shadow: 0 0 10px rgba(255, 20, 157, 0.5);

}

.footerDevText
{

    opacity: 0.6;

    transition: opacity 0.2s ease;

}


/* ============================================================
   NAV ENTRANCE ANIMATIONS
============================================================ */

@keyframes navSlideFromLeft
{

    from
    {

        opacity: 0;

        transform: translateX(-14px);

    }

    to
    {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes navDropFromTop
{

    from
    {

        opacity: 0;

        transform: translateY(-8px);

    }

    to
    {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes navSlideFromRight
{

    from
    {

        opacity: 0;

        transform: translateX(14px);

    }

    to
    {

        opacity: 1;

        transform: translateX(0);

    }

}

.logoLink
{

    animation: navSlideFromLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;

}

@media (min-width: 1024px)
{

    .navList .navItem
    {

        animation: navDropFromTop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;

    }

    .navList .navItem:nth-child(1) { animation-delay: 0.06s; }

    .navList .navItem:nth-child(2) { animation-delay: 0.10s; }

    .navList .navItem:nth-child(3) { animation-delay: 0.14s; }

    .navList .navItem:nth-child(4) { animation-delay: 0.18s; }

    .navList .navItem:nth-child(5) { animation-delay: 0.22s; }

    .navList .navItem:nth-child(6) { animation-delay: 0.26s; }

    .navList .navItem:nth-child(7) { animation-delay: 0.30s; }

}

.headerCta
{

    animation: navSlideFromRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;

}


/* ============================================================
   HERO ENTRANCE ANIMATIONS
============================================================ */

@keyframes heroFadeUp
{

    from
    {

        opacity: 0;

        transform: translateY(18px);

    }

    to
    {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroFadeScale
{

    from
    {

        opacity: 0;

        transform: scale(0.97);

    }

    to
    {

        opacity: 1;

        transform: scale(1);

    }

}

.heroEyebrow
{

    animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;

}

.heroHeadline
{

    animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;

}

.heroVisual
{

    animation: heroFadeScale 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;

}

.heroSub
{

    animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;

}

.heroCtas
{

    animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;

}

.heroProof
{

    animation: heroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;

}


/* ============================================================
   VIEWPORT REVEAL — INTERSECTION OBSERVER UTILITY
============================================================ */

.revealOnScroll
{

    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

}

.revealOnScroll.revealed
{

    opacity: 1;

    transform: translateY(0);

}


/* ============================================================
   HOME FAQ — CTA NOTE
============================================================ */

.homeFaqCtaNote
{

    font-size: 0.88rem;

    color: var(--clrMuted);

    margin-bottom: 0.6rem;

    text-align: center;

}


/* ============================================================
   ORDER SUMMARY — CLICKABLE ROWS
============================================================ */

.summaryRowClickable
{

    cursor: pointer;

    border-radius: 6px;

    transition: background-color 0.15s ease;

}

.summaryRowClickable:hover
{

    background-color: rgba(255, 20, 157, 0.07);

}

.summaryRowClickable .summaryLabel::after
{

    content: " ✎";

    font-size: 0.6em;

    color: rgba(255, 20, 157, 0.45);

    margin-left: 0.3em;

    vertical-align: middle;

}


/* ============================================================
   HOME CONTACT — ENHANCED ELEMENTS
============================================================ */

.homeContactGrid
{

    grid-template-columns: 1fr;

    max-width: 760px;

}

@media (min-width: 640px)
{

    .homeContactGrid
    {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (min-width: 1024px)
{

    .homeContactGrid
    {

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

    }

}

.homeContactSub
{

    font-size: 0.78rem;

    color: var(--clrMuted);

    margin-top: 0.1rem;

    font-style: italic;

}

.homeContactMapLink
{

    display: inline-block;

    font-size: 0.83rem;

    color: var(--clrHotPink);

    text-decoration: none;

    margin-top: 0.4rem;

    transition: opacity 0.18s ease;

}

.homeContactMapLink:hover
{

    opacity: 0.75;

}

.homeContactLinkLarge
{

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--clrSoftText);

}

.homeContactDays
{

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    margin-top: 0.2rem;

}

.homeContactDay
{

    font-size: 0.88rem;

    color: var(--clrSoftText);

    font-weight: 500;

}

.homeContactMap
{

    margin-top: 2.5rem;

    border-radius: var(--radiusCard);

    overflow: hidden;

    border: 1px solid rgba(255, 20, 157, 0.12);

}

.homeContactMapIframe
{

    display: block;

    width: 100%;

    height: 280px;

    border: none;

}

@media (min-width: 768px)
{

    .homeContactMapIframe
    {

        height: 340px;

    }

}


/* ── Reduced-motion override ── */

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

    .logoLink,
    .navList .navItem,
    .headerCta,
    .heroEyebrow,
    .heroHeadline,
    .heroVisual,
    .heroSub,
    .heroCtas,
    .heroProof
    {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

    }

    .revealOnScroll
    {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}

.footerDevCredit:hover .footerDevText
{

    opacity: 1;

}

.footerDevLogo
{

    height: 50px;

    width: auto;

    display: inline-block;

    filter: brightness(6) saturate(0);

    opacity: 0.6;

    vertical-align: middle;

    transition: opacity 0.2s ease, filter 0.2s ease;

}

.footerDevCredit:hover .footerDevLogo
{

    opacity: 1;

    filter: brightness(10) saturate(0);

}


/* ============================================================
   MEDIA QUERIES — TABLET (min-width: 640px)
============================================================ */

@media (min-width: 640px)
{

    /* ── Reviews: 2 columns ── */

    .reviewsGrid
    {

        grid-template-columns: repeat(2, 1fr);

    }

    /* ── Form rows ── */

    .formRow
    {

        grid-template-columns: repeat(2, 1fr);

    }

    /* ── How Order: 2 columns ── */

    .howOrderSteps
    {

        grid-template-columns: repeat(2, 1fr);

    }

    .howOrderStep
    {

        border-bottom: none;

        border-right: 1px solid rgba(255, 20, 157, 0.08);

        padding: 1.5rem 2rem 1.5rem 0;

    }

    .howOrderStep:nth-child(even)
    {

        border-right: none;

        padding-left: 2rem;

        padding-right: 0;

    }

    /* ── Builder: 2-column choice grid ── */

    .builderChoiceGrid
    {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* ============================================================
   MEDIA QUERIES — TABLET LARGE (min-width: 768px)
============================================================ */

@media (min-width: 768px)
{

    :root
    {

        --sectionPad: 5rem;

    }

    /* ── Reviews: 3 columns ── */

    .reviewsGrid
    {

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

    }

    /* ── Footer bottom: row ── */

    .footerBottom
    {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }

    .footerTop
    {

        flex-direction: row;

        justify-content: space-between;

        align-items: flex-start;

        gap: 2.5rem;

    }

}


/* ============================================================
   MEDIA QUERIES — NAV BREAKPOINT (min-width: 920px)
============================================================ */

@media (min-width: 920px)
{

    /* ── Header: show CTA, hide burger ── */

    .burgerBtn
    {

        display: none;

    }

    .headerCta
    {

        display: inline-block;

    }

    /* ── Nav: restore to inline ── */

    .siteNav
    {

        visibility: visible;

        opacity: 1;

        position: static;

        background-color: transparent;

        flex-direction: row;

        padding: 0;

        z-index: auto;

        transition: none;

        flex: 1;

        justify-content: center;

        overflow-y: visible;

    }

    .navList
    {

        flex-direction: row;

        gap: 0.25rem;

    }

    .navLink
    {

        font-family: var(--fontSans);

        font-size: 0.78rem;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: 0.1em;

        color: var(--clrSoftText);

        padding: 0.5rem 0.75rem;

        display: inline-block;

    }

    .navLink::after
    {

        bottom: 0;

    }

    .navLink:hover
    {

        color: var(--clrHotPink);

        text-shadow: 0 0 10px rgba(255, 20, 157, 0.7);

    }

    /* ── Desktop Dropdown ── */

    .navLinkHasDropdown
    {

        font-family: var(--fontSans);

        font-size: 0.78rem;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: 0.1em;

        color: var(--clrSoftText);

        padding: 0.5rem 0.75rem;

        transition: color 0.2s ease;

    }

    .navLinkHasDropdown:hover
    {

        color: var(--clrHotPink);

    }

    .navSubList
    {

        display: flex;

        visibility: hidden;

        opacity: 0;

        position: absolute;

        top: calc(100% + 8px);

        left: 50%;

        transform: translateX(-50%);

        width: 240px;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        margin-top: 0;

        padding: 0.5rem 0;

        border-top: none;

        border: 1px solid rgba(255, 20, 157, 0.3);

        border-radius: var(--radiusCard);

        background-color: rgba(13, 6, 11, 0.97);

        backdrop-filter: blur(12px);

        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--glowBox);

        z-index: 200;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

        pointer-events: none;

    }

    .navSubList::before
    {

        content: '';

        position: absolute;

        top: -8px;

        left: 0;

        right: 0;

        height: 8px;

    }

    .navItem.dropdownOpen .navSubList,
    .navItem:hover .navSubList
    {

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

    }

    .navSubLink
    {

        display: block;

        width: 100%;

        padding: 0.65rem 1.2rem;

        font-family: var(--fontSans);

        font-size: 0.82rem;

        font-weight: 500;

        color: var(--clrSoftText);

        text-transform: none;

        letter-spacing: 0.02em;

        transition: color 0.15s ease, background-color 0.15s ease;

    }

    .navSubLink:hover
    {

        color: var(--clrHotPink);

        background-color: rgba(255, 20, 157, 0.06);

    }

}


/* ============================================================
   MEDIA QUERIES — DESKTOP (min-width: 1024px)
============================================================ */

@media (min-width: 1024px)
{

    :root
    {

        --sectionPad: 5.5rem;

        --headerH: 72px;

    }

    /* ── Hero: side-by-side ── */

    .heroInner
    {

        flex-direction: row;

        align-items: center;

        padding: 5rem 2rem;

        gap: 5rem;

    }

    .heroContent
    {

        flex: 1;

        min-width: 0;

    }

    .heroVisual
    {

        flex: 0 0 42%;

        max-width: 42%;

        margin: 0;

    }

    .heroImgWrap
    {

        aspect-ratio: 3 / 4;

        border-radius: 16px;

    }

    .heroDecor
    {

        display: block;

    }

    /* ── How Order: all 4 in a row ── */

    .howOrderSteps
    {

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

    }

    .howOrderStep
    {

        border-right: 1px solid rgba(255, 20, 157, 0.1);

        border-bottom: none;

        padding: 0 2rem 0 0;

    }

    .howOrderStep:last-child
    {

        border-right: none;

        padding-right: 0;

    }

    .howOrderStep:nth-child(even)
    {

        border-right: 1px solid rgba(255, 20, 157, 0.1);

        padding-left: 2rem;

        padding-right: 2rem;

    }

    .howOrderStep:last-child,
    .howOrderStep:nth-child(4)
    {

        border-right: none;

    }

}


/* ============================================================
   MEDIA QUERIES — WIDE (min-width: 1280px)
============================================================ */

@media (min-width: 1280px)
{

    .heroHeadline
    {

        font-size: 7rem;

    }

    .heroImgWrap
    {

        aspect-ratio: 4 / 5;

    }

    .sectionInner
    {

        padding-left: 2rem;

        padding-right: 2rem;

    }

}


/* ============================================================
   NAV — SPLIT ITEM (link + chevron toggle)
============================================================ */

.navItemInner
{

    display: flex;

    align-items: center;

}

.navChevronBtn
{

    background: none;

    border: none;

    cursor: pointer;

    color: var(--clrWhite);

    padding: 0.1rem 0.3rem;

    display: inline-flex;

    align-items: center;

    line-height: 1;

    transition: color 0.2s ease;

    flex-shrink: 0;

}

.navChevronBtn:hover
{

    color: var(--clrHotPink);

}

/* ── View Full Menu entry ── */

.navSubLinkAll
{

    border-top: 1px solid rgba(255, 20, 157, 0.12);

    margin-top: 0.25rem;

    padding-top: 0.75rem;

    color: var(--clrHotPink);

    font-weight: 700;

    letter-spacing: 0.06em;

}

.navSubLinkAll:hover
{

    color: var(--clrWhite);

}

@media (min-width: 920px)
{

    .navChevronBtn
    {

        color: var(--clrSoftText);

        font-size: 0.65rem;

        padding: 0.5rem 0.2rem;

    }

    .navChevronBtn:hover
    {

        color: var(--clrHotPink);

    }

}


/* ============================================================
   MINI GALLERY — HOMEPAGE VISUAL STRIP
============================================================ */

.miniGallerySection
{

    background-color: var(--clrBlack);

    border-top: 1px solid rgba(255, 20, 157, 0.06);

    padding: 0;

}

.miniGalleryGrid
{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 3px;

}

.miniGalleryItem
{

    overflow: hidden;

    aspect-ratio: 1;

    cursor: pointer;

    display: block;

    text-decoration: none;

}

.miniGalleryImg
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.45s ease;

}

.miniGalleryItem:hover .miniGalleryImg
{

    transform: scale(1.06);

}

.miniGalleryViewAll
{

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 1.5rem;

    background-color: rgba(255, 20, 157, 0.04);

    font-family: var(--fontSans);

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: var(--clrHotPink);

    text-decoration: none;

    border-top: 1px solid rgba(255, 20, 157, 0.1);

    transition: background-color 0.2s ease, color 0.2s ease;

}

.miniGalleryViewAll:hover
{

    background-color: rgba(255, 20, 157, 0.09);

    color: var(--clrWhite);

}

@media (min-width: 640px)
{

    .miniGalleryGrid
    {

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

    }

    .miniGalleryItem
    {

        aspect-ratio: 1;

    }

}


/* ============================================================
   FEATURED MENU — HOMEPAGE
============================================================ */

.featuredMenuSection
{

    background-color: var(--clrPanelAlt);

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.featuredMenuGrid
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.25rem;

    margin-bottom: 2.5rem;

}

.featuredMenuCard
{

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.2);

    border-radius: var(--radiusCard);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

}

.featuredMenuCard:hover
{

    border-color: var(--clrHotPink);

    box-shadow: var(--glowBox);

    transform: translateY(-2px);

}

.featuredMenuImgWrap
{

    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

}

.featuredMenuImg
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.45s ease;

}

.featuredMenuCard:hover .featuredMenuImg
{

    transform: scale(1.05);

}

.featuredMenuBadge
{

    position: absolute;

    top: 0.75rem;

    left: 0.75rem;

    background-color: var(--clrHotPink);

    color: var(--clrBlack);

    font-family: var(--fontSans);

    font-size: 0.62rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    padding: 0.28rem 0.7rem;

    border-radius: var(--radiusPill);

    line-height: 1.4;

}

.featuredMenuBody
{

    padding: 1.1rem 1.25rem 1.25rem;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

    flex: 1;

}

.featuredMenuName
{

    font-family: var(--fontCondensed);

    font-size: 1.2rem;

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.04em;

    line-height: 1.1;

}

.featuredMenuDesc
{

    font-size: 0.81rem;

    color: var(--clrMuted);

    line-height: 1.65;

    flex: 1;

}

.featuredMenuFooter
{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    margin-top: 0.7rem;

    padding-top: 0.7rem;

    border-top: 1px solid rgba(255, 20, 157, 0.1);

}

.featuredMenuPrice
{

    font-family: var(--fontCondensed);

    font-size: 1.1rem;

    color: var(--clrHotPink);

    text-shadow: 0 0 8px rgba(255, 20, 157, 0.4);

    letter-spacing: 0.02em;

}

.featuredMenuCta
{

    display: flex;

    align-items: center;

}

@media (min-width: 640px)
{

    .featuredMenuGrid
    {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (min-width: 1024px)
{

    .featuredMenuGrid
    {

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

    }

}


/* ============================================================
   PICKUP SCHEDULE — REDESIGNED HOMEPAGE SECTION
============================================================ */

.pickupScheduleSection
{

    background-color: var(--clrBlack);

    background-image: radial-gradient(rgba(255, 20, 157, 0.06) 1px, transparent 1px);

    background-size: 24px 24px;

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.pickupScheduleInner
{

    text-align: center;

}

.pickupDaysGrid
{

    display: grid;

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

    gap: 1rem;

    margin: 2rem auto;

    max-width: 480px;

}

.pickupDayCard
{

    background-color: var(--clrPanel);

    border: 1px solid rgba(255, 20, 157, 0.25);

    border-radius: var(--radiusCard);

    padding: 1.6rem 0.75rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    transition: border-color 0.25s ease, box-shadow 0.25s ease;

}

.pickupDayCard:hover
{

    border-color: var(--clrHotPink);

    box-shadow: 0 0 18px rgba(255, 20, 157, 0.15);

}

.pickupDayAbbr
{

    font-family: var(--fontCondensed);

    font-size: 2rem;

    color: var(--clrHotPink);

    text-shadow: 0 0 12px rgba(255, 20, 157, 0.5);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    line-height: 1;

}

.pickupDayFull
{

    font-family: var(--fontSans);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--clrMuted);

}

.pickupCapacityNote
{

    font-size: 0.86rem;

    color: var(--clrMuted);

    line-height: 1.72;

    max-width: 420px;

    margin: 0 auto 2rem;

}

.pickupCtaWrap
{

    margin-top: 2rem;

    text-align: center;

}

/* [DASHBOARD HOOK] — pickupDayCard will receive data-capacity-remaining attribute
   when the order management system is connected. JS can then display capacity here. */


/* ============================================================
   HOMEPAGE FAQ — MINI STRIP
============================================================ */

.homeFaqSection
{

    background-color: var(--clrPanelAlt);

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.homeFaqList
{

    max-width: 680px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 0;

}

.homeFaqItem
{

    border-bottom: 1px solid rgba(255, 20, 157, 0.08);

    padding: 1.2rem 0;

}

.homeFaqItem:last-child
{

    border-bottom: none;

}

.homeFaqQ
{

    font-family: var(--fontCondensed);

    font-size: 1.1rem;

    font-weight: 400;

    color: var(--clrWhite);

    text-transform: uppercase;

    letter-spacing: 0.03em;

    line-height: 1.2;

    margin-bottom: 0.4rem;

}

.homeFaqA
{

    font-size: 0.86rem;

    color: var(--clrMuted);

    line-height: 1.72;

}

.homeFaqCta
{

    max-width: 680px;

    margin: 2rem auto 0;

    text-align: center;

}


/* ============================================================
   HOMEPAGE CONTACT STRIP
============================================================ */

.homeContactSection
{

    background-color: var(--clrBlack);

    border-top: 1px solid rgba(255, 20, 157, 0.12);

}

.homeContactGrid
{

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.75rem;

    max-width: 680px;

    margin: 0 auto 2.5rem;

    text-align: center;

}

.homeContactItem
{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.35rem;

}

.homeContactLabel
{

    font-family: var(--fontSans);

    font-size: 0.66rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    color: var(--clrHotPink);

    text-shadow: 0 0 8px rgba(255, 20, 157, 0.4);

}

.homeContactValue
{

    font-size: 0.95rem;

    color: var(--clrSoftText);

    line-height: 1.55;

    font-style: normal;

}

.homeContactLink
{

    color: var(--clrSoftText);

    text-decoration: none;

    transition: color 0.2s ease;

}

.homeContactLink:hover
{

    color: var(--clrHotPink);

}

.homeContactCta
{

    max-width: 680px;

    margin: 0 auto;

    text-align: center;

}

@media (min-width: 640px)
{

    .homeContactGrid
    {

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

        text-align: left;

    }

    .homeContactItem
    {

        align-items: flex-start;

    }

}


/* ============================================================
   MOBILE HERO — TWO-ZONE REDESIGN
   Applies to: max-width 1023px (tablet + mobile)
   Desktop hero (1024px+) is completely untouched.
============================================================ */

/* ── On desktop, heroTopBand is a transparent layout pass-through ── */

.heroTopBand
{

    display: contents;

}

@media (max-width: 1023px)
{

    /* ── Disable flex centering; section height driven by content ── */

    .heroSection
    {

        display: block;

        min-height: 0;

        padding-top: 0;

    }

    /* ── Remove container padding so image band reaches full width ── */

    .heroInner
    {

        padding: 0;

        gap: 0;

    }

    /* ── Zone 1: fixed-height image band for eyebrow + headline ── */

    .heroTopBand
    {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        height: 340px;

        padding: var(--headerH) 1.5rem 2rem;

        overflow: hidden;

        background-image:
            radial-gradient(
                ellipse at center,
                rgba(3, 3, 3, 0.72) 0%,
                rgba(3, 3, 3, 0.90) 100%
            ),
            url('../graphics/images/bgPlatter.jpg');

        background-size: auto, cover;

        background-position: center, center;

        background-repeat: no-repeat, no-repeat;

    }

    /* ── Remove headline bottom margin inside band ── */

    .heroTopBand .heroHeadline
    {

        margin-bottom: 0;

    }

    /* ── Zone 2: solid black — CTAs + trust indicators ── */

    .heroSub
    {

        display: none;

    }

    .heroCtas
    {

        justify-content: center;

        padding: 2.5rem 1.5rem 0;

        margin-bottom: 1.5rem;

    }

    .heroProof
    {

        justify-content: center;

        padding: 0 1.5rem 3rem;

    }

    /* ── Hide the desktop split-layout product image ── */

    .heroVisual
    {

        display: none;

    }

}

/* ── Tablet: slightly taller image band ── */

@media (min-width: 640px) and (max-width: 1023px)
{

    .heroTopBand
    {

        height: 400px;

    }

}


/* ============================================================
   GALLERY INTRO — MOBILE BRIDGE SECTION
   Hidden on desktop. No border, no supporting copy.
============================================================ */

.galleryIntroSection
{

    background-color: var(--clrBlack);

}

.galleryIntroSection .sectionInner
{

    padding-bottom: 1.5rem;

}

@media (min-width: 1024px)
{

    .galleryIntroSection
    {

        display: none;

    }

}

/* ── Remove mini gallery separator on mobile ── */

@media (max-width: 1023px)
{

    .miniGallerySection
    {

        border-top: none;

    }

    .miniGallerySection .sectionInner
    {

        padding-top: 0;

    }

}