/* ── RESET ── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        /* ── TOKENS ── */
        :root {
            --bg:      #f0f0eb;
            --bg-alt:  #e8e8e3;
            --white:   #ffffff;
            --ink:     #111111;
            --mid:     #666666;
            --border:  #cccccc;
            --accent:  #111111;
            --radius:  0px;
            --ease:    cubic-bezier(.4,0,.2,1);
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            overflow-x: hidden;
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { display: block; max-width: 100%; }
        button { font-family: inherit; cursor: pointer; border: none; background: none; }

        /* ── HEADER ── */
        header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 900;
            background: rgba(240,240,235,0.96);
            border-bottom: 1px solid var(--border);
            padding: 0 2.5rem;
            height: 68px;
            display: flex;
            align-items: center;
            backdrop-filter: blur(12px);
            transition: box-shadow .3s;
        }

    /* Compact inputs for admin login panel */
    .admin-page .auth-panel .auth-form input[type="email"],
    .admin-page .auth-panel .auth-form input[type="password"] {
        max-width: 300px;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

    .admin-page .auth-panel .auth-form label { display:block; margin-top:0.65rem; }

    /* Center auth panel and limit width for compact login */
    .admin-page .auth-panel .auth-inner {
        max-width: 520px;
        margin: 2.5rem auto;
        padding: 1.25rem;
    }
    .admin-page .auth-panel .auth-form {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .admin-page .auth-panel .auth-form label { text-align:center; width:100%; }
    .admin-page .auth-panel .auth-form input[type="email"],
    .admin-page .auth-panel .auth-form input[type="password"] {
        width: 280px;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
        margin: 0.35rem 0 0.6rem 0;
    }
    .admin-page .auth-panel .auth-form .btn-primary { align-self: center; margin-top: .6rem; }
    .admin-page .auth-note {
        margin-top: 0.6rem;
        text-align: center;
        color: var(--muted, #666);
    }
        header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.06); }

        header #site-header .logo img,
        .header-logo {
            max-height: 100px;
            height: auto;
            width: auto;
            display: block;
            image-rendering: auto;
        }

        .logo .header-logo {
            width: 68px;
            max-height: 42px;
            transition: transform .18s var(--ease), opacity .18s var(--ease);
        }

        .admin-logo .header-logo {
            width: 130px;
            max-width: 100%;
            max-height: 80px;
            margin: 0 auto;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 900;
            letter-spacing: .5rem;
            cursor: pointer;
        }

        .hero-logo-text {
            display: inline-block;
            font-family: 'Bebas Neue', Arial, sans-serif;
            text-transform: uppercase;
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .admin-logo {
            margin-bottom: 1rem;
        }

        .logo:hover .header-logo,
        .logo:focus-visible .header-logo {
            transform: translateY(-2px) scale(1.02);
            opacity: 0.95;
        }

        .footer-logo {
            display: block;
            width: 120px;
            max-width: 100%;
            height: auto;
            margin-bottom: 1rem;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1.75rem;
            margin-left: auto;
        }

        nav ul {
            display: flex;
            flex-wrap: nowrap;
            gap: 2.2rem;
            align-items: center;
        }

        nav a {
            font-size: .78rem;
            letter-spacing: .2rem;
            text-transform: uppercase;
            white-space: nowrap;
            position: relative;
            padding-bottom: 3px;
            transition: opacity .25s;
        }
        @media (max-width: 1100px) {
            nav ul { gap: 1.4rem; }
        }
        nav a::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 0; height: 1px;
            background: var(--ink);
            transition: width .25s var(--ease);
        }
        nav a:hover { opacity: .7; }
        nav a:hover::after { width: 100%; }

        nav a.active {
            opacity: .85;
        }
        nav a.active::after {
            width: 100%;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            position: relative;
        }

        .menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(17,17,17,.12);
            border-radius: 50%;
            background: rgba(240,240,235,.96);
            cursor: pointer;
            transition: transform .2s, border-color .2s, background .2s;
        }
        .menu-toggle:hover {
            background: rgba(240,240,235,1);
            border-color: rgba(17,17,17,.16);
            transform: translateY(-1px);
        }
        .menu-toggle span {
            width: 22px;
            height: 2px;
            background: var(--ink);
            border-radius: 999px;
            display: block;
            transition: transform .25s ease, opacity .25s ease;
        }
        .menu-toggle span + span {
            margin-top: 5px;
        }
        .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .menu-toggle.open span:nth-child(2) { opacity: 0; }
        .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

        /* Checkout keeps customers focused: hamburger menu only appears on mobile, as a way back home. */
        .checkout-page .menu-toggle { display: none; }

        .menu-dropdown {
            position: absolute;
            top: calc(100% + 0.75rem);
            right: 0;
            min-width: 220px;
            background: rgba(240,240,235,.96);
            border: 1px solid rgba(17,17,17,.12);
            box-shadow: 0 14px 28px rgba(0,0,0,.08);
            padding: .75rem 0;
            display: none;
            flex-direction: column;
            gap: .2rem;
            z-index: 960;
        }
        .menu-dropdown.show {
            display: flex;
        }
        .menu-dropdown a {
            padding: .8rem 1rem;
            font-size: .92rem;
            font-family: 'Bebas Neue', Arial, sans-serif;
            letter-spacing: .25rem;
            text-transform: uppercase;
            color: var(--ink);
            transition: background .2s;
        }
        .menu-dropdown a:hover {
            background: rgba(17,17,17,.04);
        }

        .dropdown {
            position: relative;
        }
        .dropdown > a {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
        }
        .dropdown-arrow {
            font-size: .8rem;
            transition: transform .2s ease;
        }
        .dropdown:hover .dropdown-arrow,
        .dropdown:focus-within .dropdown-arrow {
            transform: rotate(180deg);
        }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 220px;
            background: rgba(255,255,255,.98);
            border: 1px solid rgba(17,17,17,.12);
            box-shadow: 0 12px 30px rgba(0,0,0,.1);
            padding: .8rem 0;
            display: none;
            flex-direction: column;
            gap: .2rem;
            z-index: 950;
        }
        .dropdown:hover .dropdown-menu,
        .dropdown:focus-within .dropdown-menu {
            display: flex;
        }
        .dropdown-menu a {
            padding: .75rem 1rem;
            font-size: .85rem;
            text-transform: none;
            letter-spacing: .05rem;
            color: var(--ink);
            transition: background .2s;
        }
        .dropdown-menu a:hover {
            background: rgba(17,17,17,.04);
        }

        .mobile-dropdown {
            display: flex;
            flex-direction: column;
            gap: .2rem;
        }
        .mobile-dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 1rem 0;
            border: none;
            background: none;
            color: var(--ink);
            font-size: .95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1rem;
            cursor: pointer;
        }
        .mobile-dropdown-toggle:focus {
            outline: 2px solid rgba(17,17,17,.3);
            outline-offset: 4px;
        }
        .mobile-dropdown-menu {
            display: none;
            flex-direction: column;
            gap: .2rem;
            padding-left: 1rem;
        }
        .mobile-dropdown.open .mobile-dropdown-menu {
            display: flex;
        }
        .mobile-dropdown.open .dropdown-arrow {
            transform: rotate(180deg);
        }
        .mobile-dropdown-menu a {
            padding: .75rem 0;
            border-bottom: 1px solid var(--border);
            font-size: .9rem;
            letter-spacing: .1rem;
            color: var(--ink);
        }
        .mobile-dropdown-menu a:last-child { border-bottom: none; }

        .wishlist-header-btn,
        .cart-btn {
            position: relative;
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            transition: background .2s, transform .2s;
        }

        .wishlist-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            min-width: 18px;
            min-height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: var(--ink);
            color: var(--white);
            font-size: .65rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wishlist-header-btn:hover,
        .cart-btn:hover {
            background: rgba(17,17,17,.08);
            transform: translateY(-1px);
        }

        .wishlist-header-btn svg,
        .cart-btn svg {
            width: 22px; height: 22px;
            stroke: var(--ink);
            fill: none;
            stroke-width: 1.5;
        }

        .wishlist-drawer {
            position: fixed;
            top: 0; right: 0;
            width: 400px; max-width: 95vw;
            height: 100vh;
            background: var(--white);
            z-index: 960;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform .35s var(--ease);
        }
        .wishlist-drawer.open { transform: translateX(0); }

        .wishlist-footer {
            padding: 1.5rem 1.8rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: center;
        }

        .wishlist-footer .checkout-btn {
            width: 100%;
            padding: 1rem;
        }

        .wishlist-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
            align-items: center;
        }
        .wishlist-item:last-child {
            border-bottom: none;
        }
        .wishlist-thumb {
            width: 68px; height: 68px;
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 2rem;
            flex-shrink: 0;
            overflow: hidden;
        }
        .thumb-photo {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
            transform: scale(var(--photo-zoom, 1));
        }
        .wishlist-body {
            flex: 1;
        }
        .wishlist-name {
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .1rem;
            text-transform: uppercase;
            margin-bottom: .15rem;
        }
        .wishlist-meta {
            font-size: .68rem;
            color: var(--mid);
            letter-spacing: .1rem;
            text-transform: uppercase;
        }
        .wishlist-remove {
            color: var(--mid);
            font-size: 1.1rem;
            line-height: 1;
            transition: color .2s;
            background: none;
            border: none;
            cursor: pointer;
        }
        .wishlist-remove:hover { color: var(--ink); }

        /* Cart icon */
        .cart-btn {
            position: relative;
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
        }
        .cart-btn svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
        .cart-badge {
            position: absolute;
            top: -6px; right: -6px;
            min-width: 18px; height: 18px;
            padding: 0 5px;
            background: var(--ink);
            color: var(--bg);
            font-size: .6rem;
            font-weight: 700;
            border-radius: 999px;
            display: flex; align-items: center; justify-content: center;
            transform: scale(0);
            transition: transform .2s var(--ease);
        }
        .cart-badge.show { transform: scale(1); }

        /* Hamburger */
        .menu-toggle {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: 40px;
            height: 40px;
            padding: 6px;
            border-radius: 50%;
            background: rgba(240,240,235,0.96);
        }
        .menu-toggle span {
            display: block;
            width: 22px; height: 1.5px;
            background: var(--ink);
            transition: transform .3s var(--ease), opacity .3s;
        }
        .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
        .menu-toggle.open span:nth-child(2) { opacity: 0; }
        .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

        /* ── MOBILE NAV ── */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 56px; right: 0;
            width: 50vw;
            max-width: 320px;
            height: calc(100vh - 56px);
            overflow-y: auto;
            background: #f6f4e9;
            padding: 2rem 1.5rem 2rem;
            z-index: 999;
            flex-direction: column;
            gap: .5rem;
            box-shadow: -4px 0 30px rgba(0,0,0,.12);
        }
        .mobile-nav.open { display: flex; }
        .mobile-nav a {
            font-size: .95rem;
            letter-spacing: .18rem;
            text-transform: uppercase;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
        }
        .mobile-nav a:last-child { border-bottom: none; }

        /* ── HERO ── */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            background: linear-gradient(180deg, #f0f0eb 0%, #e8e8e3 55%, #f0f0eb 100%);
            position: relative;
            overflow: hidden;
        }

        .shop-page.hero {
            min-height: 86vh;
            padding: 1.8rem 1.8rem 2rem;
            background: linear-gradient(180deg, #faf7f2 0%, #f2ede6 60%, #faf7f2 100%);
        }

        .hero-background {
            position: absolute;
            inset: 0;
            z-index: 0;
            background: radial-gradient(circle at center, rgba(255,255,255,.85) 0%, rgba(234,229,220,.4) 22%, rgba(240,240,235,0) 52%);
            pointer-events: none;
            filter: blur(1px);
        }

        .hero-background::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.18) 0deg 15deg, rgba(255,255,255,0) 15deg 30deg);
            transform: rotate(0deg);
            animation: rotateHeroBg 22s linear infinite;
            mix-blend-mode: soft-light;
            opacity: .65;
        }

        /* Decorative background lines */
        .hero::before, .hero::after {
            content: '';
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            pointer-events: none;
        }

        @keyframes rotateHeroBg {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .hero::before {
            width: 700px; height: 700px;
            border: 1px solid rgba(0,0,0,.04);
        }
        .hero::after {
            width: 450px; height: 450px;
            border: 1px solid rgba(0,0,0,.06);
        }

        .hero-content {
            max-width: 800px;
            z-index: 1;
            padding-top: 68px;
        }

        .hero-eyebrow {
            font-size: .72rem;
            letter-spacing: .45rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: 1.5rem;
            opacity: 0;
            animation: fadeUp .8s .1s var(--ease) forwards;
        }

        .hero h1,
        .hero-logo {
            font-size: clamp(4rem, 12vw, 8rem);
            font-weight: 900;
            letter-spacing: .8rem;
            line-height: 1;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeUp .9s .12s var(--ease) forwards;
        }

        /* Keep existing hero-logo fallback for imagery */
        .hero-logo {
            width: min(380px, 85%);
            height: auto;
            display: inline-block;
        }

        /* Prominent centered text logo */
        .hero-logo-text {
            font-family: 'Bebas Neue', Arial, sans-serif;
            font-size: clamp(5rem, 14vw, 12rem);
            font-weight: 400;
            letter-spacing: .9rem;
            line-height: 0.9;
            margin-bottom: 1rem;
            display: inline-block;
            background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, #555555 50%, var(--ink) 60%, var(--ink) 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none;
            opacity: 0;
            animation: fadeUp .9s .12s var(--ease) forwards, shimmer 2.2s ease-in-out infinite 1.2s;
            position: relative;
        }

        .shop-page .hero-logo-text {
            font-size: clamp(5rem, 12vw, 8.5rem);
            letter-spacing: .7rem;
        }

        .hero-center {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            position: relative;
            isolation: isolate;
        }

        .hero-logo-shine::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(
                110deg,
                transparent 37%,
                rgba(205, 173, 111, .24) 45%,
                rgba(255, 255, 255, .95) 50%,
                rgba(205, 173, 111, .5) 54%,
                transparent 63%
            );
            background-size: 260% 100%;
            background-position: 130% 0;
            -webkit-mask: url('../logo/pynx-logo-black.png') center / contain no-repeat;
            mask: url('../logo/pynx-logo-black.png') center / contain no-repeat;
            animation: logo-shine-sweep 5.2s cubic-bezier(.22, .61, .36, 1) infinite;
        }

        .hero-logo-image {
            display: block;
            width: clamp(130px, 26vw, 400px);
            height: auto;
            object-fit: contain;
            animation: logo-glow 5.2s ease-in-out infinite;
        }

        .shop-page .hero-content {
            padding-top: 16px;
            transform: translateY(-4px);
            max-width: 760px;
        }

        .shop-page .hero-sub {
            margin-top: 0.5rem;
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            letter-spacing: .35rem;
        }

        .shop-page .hero-actions {
            margin-top: 2rem;
            gap: 1rem;
        }

        .hero-sub {
            font-size: .9rem;
            letter-spacing: .45rem;
            color: var(--mid);
            text-transform: uppercase;
            margin-bottom: .75rem;
            opacity: 0;
            animation: fadeUp .8s .4s var(--ease) forwards;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp .8s .55s var(--ease) forwards;
        }

        .promo-marquee {
            width: 100%;
            overflow: hidden;
            border-top: 1px solid rgba(17,17,17,.08);
            border-bottom: 1px solid rgba(17,17,17,.12);
            padding: 2.5rem 0 2rem;
            margin-bottom: 0;
            background: rgba(255,255,255,.98);
        }

        .promo-marquee-inner {
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .hero-marquee-track {
            display: inline-flex;
            align-items: center;
            min-width: 200%;
            white-space: nowrap;
            font-size: clamp(1.5rem, 4vw, 3.2rem);
            letter-spacing: .9rem;
            text-transform: uppercase;
            color: var(--ink);
            font-weight: 700;
            line-height: 1;
            animation: marquee 22s linear infinite;
        }

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

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .85rem 2.4rem;
            background: var(--ink);
            color: var(--bg);
            font-size: .75rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            transition: background .25s, color .25s, transform .2s;
        }
        .btn-primary:hover { background: #333; transform: translateY(-1px); }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .85rem 2.4rem;
            border: 1.5px solid var(--ink);
            color: var(--ink);
            font-size: .75rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            background: transparent;
            transition: background .25s, color .25s, transform .2s;
        }
        .btn-secondary:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }

        /* ── FEATURES ── */
        .features {
            padding: 1rem 2rem 3.5rem;
            border-top: none;
            border-bottom: 1px solid var(--border);
            background: var(--white);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
            gap: 0;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        /* --------------------
           Responsive breakpoints
           -------------------- */

        @media (max-width: 900px) {
            header {
                padding: 0 1.2rem;
                height: 62px;
            }

            .logo { font-size: 1.25rem; letter-spacing: .35rem; }
            .logo .header-logo { width: 58px; max-height: 36px; }

            nav ul { display: none; }
            .menu-toggle { display: flex; }
            .checkout-page .menu-toggle { display: flex; }

            .header-right { gap: .8rem; }

            .hero-content { padding-top: 62px; }
            .hero-eyebrow { font-size: .62rem; margin-bottom: 1rem; }

            .hero-logo-text { font-size: clamp(4rem, 12vw, 9rem); letter-spacing: .7rem; }

            .btn-primary, .btn-secondary { padding: .72rem 1.8rem; font-size: .72rem; }

            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        }

        @media (max-width: 480px) {
            header { height: 56px; }
            .logo { font-size: 1.05rem; letter-spacing: .28rem; }

            .header-actions { gap: .3rem; }
            .wishlist-header-btn, .cart-btn, .menu-toggle { width: 36px; height: 36px; }
            .wishlist-header-btn svg, .cart-btn svg { width: 18px; height: 18px; }
            .menu-toggle span { width: 18px; height: 1.5px; }

            .mobile-nav { top: 56px; height: calc(100vh - 56px); }
            .wishlist-badge { top: -4px; }

            .hero-content { padding-top: 72px; }
            .hero-eyebrow { font-size: .6rem; }
            .hero-logo-text { font-size: clamp(3rem, 14vw, 6.5rem); letter-spacing: .45rem; }

            .hero-sub { font-size: .82rem; }

            .features { padding: 2rem 1rem; }

            .footer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
            .footer-bottom { text-align: center; }
        }

        /* Force images and SVGs to scale smoothly */
        img, svg { max-width: 100%; height: auto; }

        /* Reduce excessive letter-spacing on very small screens */
        @media (max-width: 360px) {
            .hero-logo-text { letter-spacing: .25rem; }
            nav a { letter-spacing: .12rem; }
        }

        .feature {
            padding: 2rem 1.5rem;
            border-right: 1px solid var(--border);
            cursor: pointer;
            transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .feature:last-child { border-right: none; }
        .feature:hover,
        .feature:active,
        .feature:focus-within {
            background: var(--bg);
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(17,17,17,.08);
        }

        .feature-icon {
            font-size: 1.6rem;
            margin-bottom: .9rem;
            display: block;
            transition: transform .2s ease, color .2s ease;
        }
        .feature:hover .feature-icon,
        .feature:active .feature-icon,
        .feature:focus-within .feature-icon { transform: scale(1.18); color: var(--ink); }
        .feature-title {
            font-size: .72rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            margin-bottom: .4rem;
            font-weight: 700;
        }
        .feature-desc { font-size: .78rem; color: var(--mid); }

        /* ── SECTION SHELL ── */
        .section {
            padding: 7rem 2rem;
        }
        .section--alt { background: var(--bg-alt); }
        .section--white { background: var(--white); }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .section-eyebrow {
            font-size: .68rem;
            letter-spacing: .4rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: .8rem;
        }
        .section-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            letter-spacing: .5rem;
            position: relative;
            display: inline-block;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 50px; height: 2px;
            background: var(--ink);
            margin: 1rem auto 0;
        }

        /* ── PRODUCT GRID ── */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px,400px));
            justify-content: center;
            gap: 2px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-card {
            background: var(--white);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform .35s var(--ease);
        }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }

        /* Colour-coded placeholder image */
        .product-image {
            width: 100%;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: background .4s;
        }

        .product-image .pi-inner {
            font-size: 5rem;
            line-height: 1;
            filter: grayscale(1) opacity(.15);
            transition: transform .4s var(--ease), filter .3s;
            user-select: none;
        }
        .product-photo {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            object-position: center center;
            transform: scale(var(--photo-zoom, 1));
            transform-origin: center center;
            transition: transform .4s var(--ease);
        }
        .product-gallery-preview { position: absolute; inset: 0; }
        .product-gallery-preview .product-photo { position: absolute; inset: 0; transition: opacity .35s ease, transform .4s var(--ease); }
        .product-gallery-preview .product-photo-hover { opacity: 0; }
        .product-card:hover .product-gallery-preview .product-photo { transform: scale(calc(var(--photo-zoom, 1) * 1.04)); }
        .product-card:hover .product-gallery-preview .product-photo-hover { opacity: 1; }
        .product-card-cap:hover .product-gallery-preview .product-photo,
        .product-card-cap:focus-within .product-gallery-preview .product-photo { transform: scale(var(--photo-zoom, 1)); }
        .product-card-cap:hover .product-gallery-preview .product-photo-primary,
        .product-card-cap:focus-within .product-gallery-preview .product-photo-primary { opacity: 0; }
        .product-card-cap:hover .product-gallery-preview .product-photo-hover,
        .product-card-cap:focus-within .product-gallery-preview .product-photo-hover { opacity: 1; }
        .product-card:hover .product-image .pi-inner {
            transform: scale(1.08);
            filter: grayscale(.6) opacity(.2);
        }

        /* Add-to-bag action */
        .product-overlay {
            position: absolute;
            inset: 0;
            background: rgba(17,17,17,0);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 1.5rem;
            transition: background .3s;
        }
        .product-card:hover .product-overlay { background: rgba(17,17,17,.08); }

        .quick-add {
            padding: .7rem 1.8rem;
            background: var(--ink);
            color: var(--bg);
            font-size: .68rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            opacity: 1;
            transform: translateY(0);
            transition: opacity .25s, transform .25s;
        }
        .quick-add:disabled { background: #6b7280; cursor: not-allowed; }
        .product-card:hover .quick-add {
            opacity: 1;
            transform: translateY(0);
        }
        .product-stock-note {
            margin-top: .5rem;
            color: #b91c1c;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .08rem;
            text-transform: uppercase;
        }

        .admin-edit-btn {
            position: absolute;
            top: 1rem;
            left: 1rem;
            padding: .55rem 1rem;
            background: rgba(255,255,255,.95);
            color: var(--ink);
            border-radius: 999px;
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .08rem;
            border: 1px solid rgba(17,17,17,.12);
            cursor: pointer;
            opacity: .95;
            transition: transform .2s, box-shadow .2s;
            z-index: 2;
        }
        .admin-edit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(0,0,0,.1);
        }

        /* Wishlist */
        .wishlist-btn {
            position: absolute;
            top: 1rem; right: 1rem;
            width: 34px; height: 34px;
            background: var(--white);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            opacity: 1;
            transform: scale(1);
            transition: opacity .25s, transform .25s;
            z-index: 2;
        }
        .wishlist-btn svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
        .wishlist-btn.active svg { fill: var(--ink); }
        .product-card:hover .wishlist-btn { opacity: 1; transform: scale(1); }

        .product-info { padding: 1.4rem 1.4rem 1.8rem; }
        .product-sold-count {
            margin-top: .9rem;
            padding-top: .7rem;
            border-top: 1px solid var(--line);
            color: var(--mid);
            font-size: .72rem;
            text-align: right;
            letter-spacing: .03rem;
        }
        .product-name {
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .15rem;
            text-transform: uppercase;
            margin-bottom: .3rem;
        }
        .product-category {
            font-size: .65rem;
            color: var(--mid);
            letter-spacing: .25rem;
            text-transform: uppercase;
            margin-bottom: .8rem;
        }
        .product-price {
            font-size: 1rem;
            font-weight: 300;
            letter-spacing: .05rem;
        }
        .product-price.sale {
            font-weight: 700;
            color: #dc2626;
        }
        .product-original-price {
            font-size: 0.85rem;
            color: var(--mid);
            text-decoration: line-through;
            margin-top: 0.25rem;
        }
        .product-sale-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(220,38,38,0.1);
            color: #dc2626;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1rem;
            text-transform: uppercase;
            border-radius: 999px;
            padding: 0.25rem 0.55rem;
            margin-left: 0.5rem;
        }
        .shop-category-card {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform .4s var(--ease), box-shadow .4s var(--ease);
        }
        .shop-category-card::after {
            content: 'OPEN COLLECTION  ↗';
            position: absolute;
            right: 1.8rem;
            bottom: 1.8rem;
            font-size: .62rem;
            letter-spacing: .18rem;
            opacity: .55;
            transform: translateY(8px);
            transition: opacity .3s, transform .3s;
        }
        .shop-category-card:hover {
            transform: translateY(-8px) rotate(-.5deg);
            box-shadow: 0 30px 70px rgba(17,17,17,.18) !important;
        }
        .shop-category-card:hover::after {
            opacity: 1;
            transform: translateY(0);
        }
        .shop-category-card.is-visited {
            filter: grayscale(1) contrast(.9);
            opacity: .55;
        }
        .shop-category-card.is-opening {
            animation: categoryLaunch .32s var(--ease) forwards;
        }
        @keyframes categoryLaunch {
            to { opacity: .35; transform: scale(.96) translateY(-4px); }
        }
        .category-switch {
            position: fixed;
            top: 86px;
            z-index: 850;
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            min-width: 148px;
            padding: .7rem .85rem;
            color: var(--ink);
            background: rgba(255,255,255,.9);
            border: 1px solid rgba(17,17,17,.2);
            border-radius: 999px;
            box-shadow: 0 10px 28px rgba(17,17,17,.14);
            backdrop-filter: blur(10px);
            text-decoration: none;
            text-align: left;
            transition: transform .3s var(--ease), box-shadow .3s, background .3s, opacity .3s;
        }
        .category-switch-next { right: 2rem; }
        .category-switch-previous { left: 2rem; }
        .category-switch:hover {
            transform: translateX(6px) translateY(-2px);
            background: #fff;
            box-shadow: 0 14px 34px rgba(17,17,17,.2);
        }
        .category-switch-previous:hover { transform: translateX(-6px) translateY(-2px); }
        .category-switch-arrow {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 34px;
            color: #fff;
            background: var(--ink);
            border: 1px solid var(--ink);
            border-radius: 50%;
            font-size: 1.3rem;
            font-weight: 700;
            transition: background .3s, color .3s;
        }
        .category-switch:hover .category-switch-arrow { background: #333; }
        .category-switch-kicker,
        .category-switch-label { display: block; }
        .category-switch-kicker {
            font-size: .58rem;
            letter-spacing: .18rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: .25rem;
        }
        .category-switch-label {
            font-family: 'Bebas Neue', Arial, sans-serif;
            font-size: 1.25rem;
            letter-spacing: .16rem;
        }
        .admin-product-card {
            display: block;
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 12px;
            margin-bottom: 1rem;
            padding: 1rem;
            background: #fff;
            box-shadow: 0 2px 12px rgba(17,17,17,.04);
        }
        .about-page-section { padding-top: 8rem; padding-bottom: 8rem; }
        .about-page-grid {
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }
        .about-page-grid p {
            margin: 0;
            font-size: 1.05rem;
            line-height: 1.9;
            color: var(--mid);
        }
        .about-page-values { background: var(--ink); color: var(--bg); }
        .about-page-values .section-eyebrow { color: rgba(240,240,235,.55); }
        .about-page-values .section-title { color: var(--bg); }
        .about-page-values .section-title::after { background: var(--bg); }
        .about-values-grid {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
        }
        .about-value { padding: 2rem; border: 1px solid rgba(240,240,235,.18); }
        .about-value span { color: rgba(240,240,235,.5); font-size: .7rem; letter-spacing: .2rem; }
        .about-value h3 { margin: 2.5rem 0 .8rem; font-family: 'Bebas Neue', Arial, sans-serif; font-size: 2rem; letter-spacing: .16rem; }
        .about-value p { margin: 0; color: rgba(240,240,235,.65); line-height: 1.7; }
        .about-page .menu-toggle { display: none; }
        @media (max-width: 900px) {
            .about-page .menu-toggle { display: flex; }
        }
        @media (max-width: 600px) {
            .about-page-grid, .about-values-grid { grid-template-columns: 1fr; gap: 1rem; }
            .about-page-section { padding-top: 6rem; padding-bottom: 6rem; }
            .about-value { padding: 1.5rem; }
        }
        .admin-product-card .product-card-body {
            display: grid;
            gap: 0.85rem;
        }
        .admin-product-card .admin-product-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .admin-product-card .product-edit-row {
            display: grid;
            gap: 0.4rem;
        }
        .admin-product-card .product-edit-row label {
            font-size: 0.8rem;
            color: var(--mid);
            text-transform: uppercase;
            letter-spacing: 0.08rem;
        }
        .admin-product-card .product-edit-row input[type='number'] {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.95rem;
        }
        .admin-product-card .product-edit-actions {
            display: flex;
            justify-content: flex-end;
        }
        .admin-product-card .item-badge.sale-badge {
            background: rgba(220,38,38,.12);
            color: #dc2626;
        }

        /* ── ABOUT ── */
        .about-inner {
            max-width: 680px;
            margin: 0 auto;
            text-align: center;
        }
        .about-inner p {
            color: #444;
            font-size: 1.05rem;
            line-height: 1.9;
            margin-bottom: 1.2rem;
        }
        .about-stats {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 0;
            border: 1px solid var(--border);
            margin-top: 3.5rem;
        }
        .stat {
            padding: 2rem 1rem;
            border-right: 1px solid var(--border);
            text-align: center;
        }
        .stat:last-child { border-right: none; }
        .stat-num {
            font-size: 2.5rem;
            font-weight: 900;
            letter-spacing: .2rem;
            display: block;
            margin-bottom: .3rem;
        }
        .stat-label {
            font-size: .65rem;
            letter-spacing: .3rem;
            text-transform: uppercase;
            color: var(--mid);
        }

        /* ── CONTACT FORM ── */
        .contact-inner {
            max-width: 600px;
            margin: 0 auto;
        }
        .page-contact { padding-top: 68px; }
        .checkout-layout {
            max-width: 980px;
            display: grid;
            grid-template-columns: minmax(260px, .85fr) minmax(320px, 1fr);
            gap: 3rem;
            align-items: start;
        }
        .checkout-layout { overflow-anchor: none; }
        .checkout-success {
            grid-column: 2;
            grid-row: 1;
            align-self: start;
        }
        .checkout-layout.checkout-complete {
            display: flex;
            justify-content: center;
            max-width: 700px;
            min-height: 55vh;
            margin: 0 auto;
        }
        .checkout-layout.checkout-complete .checkout-summary,
        .checkout-layout.checkout-complete .checkout-form {
            display: none !important;
        }
        .checkout-layout.checkout-complete .checkout-success {
            display: block !important;
            align-self: center;
            width: 100%;
            max-width: 560px;
            margin: 0;
            text-align: center;
        }
        .checkout-intro-copy {
            max-width: 460px;
            margin: 1rem auto 0;
            color: var(--mid);
            font-size: .9rem;
            line-height: 1.7;
            letter-spacing: .03rem;
        }
        .checkout-summary {
            padding: 1.5rem;
            background: var(--white);
            border: 1px solid var(--line);
        }
        .checkout-summary-header h3 {
            margin: .35rem 0 1.5rem;
            font-family: 'Bebas Neue', Arial, sans-serif;
            font-size: 2rem;
            letter-spacing: .12rem;
        }
        .checkout-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 0;
            border-top: 1px solid var(--line);
            font-size: .9rem;
        }
        .checkout-item-thumb {
            width: 58px;
            height: 58px;
            flex: 0 0 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            border-radius: 4px;
            overflow: hidden;
        }
        .checkout-item-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
        }
        .checkout-item-details {
            flex: 1;
            min-width: 0;
        }
        .checkout-item strong,
        .checkout-item-size,
        .checkout-item-quantity {
            display: block;
        }
        .checkout-item-size,
        .checkout-item-quantity,
        .checkout-empty {
            color: var(--mid);
            font-size: .75rem;
            margin-top: .3rem;
        }
        .checkout-item-price {
            white-space: nowrap;
            font-size: .9rem;
        }
        .checkout-summary-total {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--ink);
            text-transform: uppercase;
            letter-spacing: .16rem;
            font-size: .72rem;
        }
        .checkout-summary-total strong {
            font-size: 1rem;
            letter-spacing: 0;
        }
        .modal-img .gallery-arrow { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(17,17,17,.68); color: #fff; font-size: 1.7rem; line-height: 1; }
        .modal-img .gallery-prev { left: .8rem; }
        .modal-img .gallery-next { right: .8rem; width: auto; min-width: 76px; padding: 0 .75rem; font-size: .75rem; letter-spacing: .04rem; }
        .modal-img .gallery-count, .modal-img .gallery-label { position: absolute; z-index: 1; bottom: .8rem; padding: .35rem .6rem; border-radius: 3px; background: rgba(17,17,17,.75); color: #fff; font-size: .72rem; }
        .modal-img .gallery-count { left: .8rem; }
        .modal-img .gallery-label { right: .8rem; }
        .modal-gallery-photo { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
        .gallery-transition-next { animation-name: product-gallery-next; }
        .gallery-transition-previous { animation-name: product-gallery-previous; }
        @keyframes product-gallery-next { from { opacity: .35; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
        @keyframes product-gallery-previous { from { opacity: .35; transform: translateX(-28px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
        @media (prefers-reduced-motion: reduce) {
            .modal-gallery-photo { animation-duration: .01ms; }
        }
        .checkout-payment { border: 1px solid var(--border); padding: 1rem; margin: 1.5rem 0; }
        .checkout-payment legend { font-size: .65rem; letter-spacing: .2rem; color: var(--mid); }
        .checkout-payment label { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; }
        .checkout-payment label[hidden] { display: none; }
        .checkout-payment input { accent-color: var(--ink); }
        .checkout-payment p { color: var(--mid); font-size: .78rem; margin: .5rem 0 0; }
        .checkout-payment .checkout-payment-info {
            margin-top: .8rem;
            padding: .8rem 1rem;
            border-left: 2px solid #8b7143;
            background: rgba(205, 173, 111, .1);
            color: var(--ink);
            font-size: .82rem;
            line-height: 1.55;
        }
        .checkout-payment .checkout-payment-info[hidden] { display: none; }
        .checkout-return-agreement { align-items: center; display: flex; gap: .55rem; margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; }
        .checkout-return-agreement[hidden] { display: none; }
        .checkout-return-agreement input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #8b7143; }
        .checkout-return-agreement a { color: var(--ink); text-decoration: underline; text-underline-offset: .15em; }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .form-group { margin-bottom: 1rem; }
        .form-group label {
            display: block;
            font-size: .65rem;
            letter-spacing: .3rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: .5rem;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: .85rem 1rem;
            background: var(--bg);
            border: 1px solid var(--border);
            font-family: inherit;
            font-size: .9rem;
            color: var(--ink);
            outline: none;
            transition: border-color .2s;
            appearance: none;
            border-radius: 0;
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus { border-color: var(--ink); }
        .form-group textarea { min-height: 130px; resize: vertical; }
        .review-photo-limit,
        .review-photo-help { color: var(--mid); font-size: .75rem; letter-spacing: 0; text-transform: none; }
        .review-photo-help { margin: .45rem 0 0; }
        .review-photo-previews,
        .review-admin-photos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
        .review-photo-preview,
        .review-admin-photos img {
            width: 76px;
            height: 76px;
            flex: 0 0 76px;
            border: 1px solid var(--line);
            background: var(--white);
            object-fit: cover;
        }
        .review-photo-preview { position: relative; }
        .review-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
        .review-photo-preview button {
            position: absolute;
            top: -7px;
            right: -7px;
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 50%;
            background: var(--ink);
            color: var(--white);
            font-size: 1.15rem;
            line-height: 1;
            cursor: pointer;
        }
        .checkout-address-note { font-size: .72rem; color: var(--mid); margin: .5rem 0 0; letter-spacing: .02rem; text-transform: none; }
        .checkout-address-note.error { color: #a12622; }
        .form-group select:disabled { opacity: .65; cursor: not-allowed; }
        .form-submit {
            display: block;
            width: auto;
            min-width: 220px;
            margin: .5rem auto 3.5rem;
        }
        .page-contact .page-header {
            max-width: 760px;
            margin: 0 auto 2.5rem;
            text-align: center;
        }

        /* Desktop-only spacing so header isn't obscured by fixed header on larger screens */
        @media (min-width: 481px) {
            .page-contact .page-header { margin-top: 5rem; }
        }
        .page-contact .page-sub {
            font-family: 'Bebas Neue', sans-serif;
            text-align: center;
            font-size: 1rem;
            letter-spacing: .2rem;
            margin: 1.2rem auto 0;
            max-width: 760px;
            color: var(--mid);
        }
        .contact-panel { margin-bottom: 4rem; }
        .form-success {
            text-align: center;
            padding: 3rem;
            display: none;
        }
        .form-success .check {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .form-success p {
            font-size: .75rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            color: var(--mid);
        }

        /* ── FOOTER ── */
        footer {
            background: var(--ink);
            color: var(--bg);
            padding: 5rem 2.5rem 2rem;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 3rem;
            max-width: 1100px;
            margin: 0 auto 4rem;
            align-items: start;
        }
        .footer-brand {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .footer-brand img.footer-logo {
            width: 120px;
            max-width: 100%;
            margin-bottom: 1rem;
        }
        .footer-brand p { font-size: .8rem; color: rgba(240,240,235,.5); line-height: 1.7; }

        .footer-col h4 {
            font-size: .65rem;
            letter-spacing: .35rem;
            text-transform: uppercase;
            color: rgba(240,240,235,.4);
            margin-bottom: 1.2rem;
        }
        .footer-col a {
            display: block;
            font-size: .82rem;
            color: rgba(240,240,235,.7);
            margin-bottom: .6rem;
            transition: color .2s;
        }
        .footer-col a:hover { color: var(--bg); }

        /* Newsletter */
        .nl-form {
            display: flex;
            margin-top: .5rem;
            border: 1px solid rgba(255,255,255,.2);
        }
        .nl-form input {
            flex: 1;
            background: transparent;
            border: none;
            padding: .75rem 1rem;
            color: var(--bg);
            font-family: inherit;
            font-size: .82rem;
            outline: none;
        }
        .nl-form input::placeholder { color: rgba(240,240,235,.35); }
        .nl-form button {
            padding: 0 1.1rem;
            border-left: 1px solid rgba(255,255,255,.2);
            color: var(--bg);
            font-size: 1rem;
            transition: background .2s;
        }
        .nl-form button:hover { background: rgba(255,255,255,.08); }

        .social-icons {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-top: 1rem;
            justify-content: center;
        }
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #999999;
            color: #ffffff;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,.15);
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
            transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        }
        .social-link svg {
            width: 28px;
            height: 28px;
        }
        .social-link:hover {
            transform: translateY(-3px) scale(1.1);
            background: #6e6e6e;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        }
        .social-link:active,
        .social-link:focus-visible {
            transform: translateY(-3px) scale(1.1);
            background: #555;
            outline: 2px solid var(--bg);
            outline-offset: 3px;
        }

        .footer-bottom {
            max-width: 1100px;
            margin: 0 auto;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .footer-bottom p { font-size: .72rem; color: rgba(240,240,235,.35); letter-spacing: .05rem; }
        .footer-bottom-links { display: flex; gap: 1.5rem; }
        .footer-bottom-links a { font-size: .7rem; color: rgba(240,240,235,.35); transition: color .2s; }
        .footer-bottom-links a:hover { color: rgba(240,240,235,.7); }

        .policy-modal {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;
        }
        .policy-modal.show { opacity: 1; pointer-events: auto; }
        .policy-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(10, 10, 10, .68);
            backdrop-filter: blur(5px);
        }
        .policy-modal-card {
            position: relative;
            width: min(100%, 620px);
            max-height: min(84vh, 760px);
            overflow-y: auto;
            padding: clamp(1.4rem, 5vw, 2.5rem);
            background: #f7f7f3;
            border: 1px solid rgba(205, 173, 111, .5);
            box-shadow: 0 28px 100px rgba(0, 0, 0, .3);
            transform: translateY(14px) scale(.985);
            transition: transform .25s var(--ease);
        }
        .policy-modal.show .policy-modal-card { transform: translateY(0) scale(1); }
        .policy-modal-card > .section-eyebrow {
            margin: 0 0 .5rem;
            color: #8b7143;
            font-size: .68rem;
            letter-spacing: .24rem;
        }
        .policy-modal-card h2 {
            margin: 0 2.5rem 1.1rem 0;
            color: var(--ink);
            font-family: 'Bebas Neue', Arial, sans-serif;
            font-size: clamp(2rem, 7vw, 3rem);
            font-weight: 400;
            letter-spacing: .1rem;
        }
        .policy-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 42px;
            height: 42px;
            border: 1px solid rgba(17, 17, 17, .14);
            border-radius: 50%;
            background: transparent;
            color: var(--ink);
            font-size: 1.6rem;
            cursor: pointer;
        }
        .policy-modal-content {
            color: #42423f;
            font-size: .92rem;
            line-height: 1.7;
        }
        .policy-modal-content h3 {
            margin: 1.1rem 0 .25rem;
            color: var(--ink);
            font-size: .78rem;
            letter-spacing: .1rem;
            text-transform: uppercase;
        }
        .policy-modal-content p { margin: .45rem 0; }
        .policy-modal-content ul,
        .policy-modal-content ol { margin: .45rem 0 .8rem 1.25rem; }
        .policy-modal-content ul { list-style: disc; }
        .policy-modal-content ol { list-style: decimal; }
        .policy-modal-content li { margin: .3rem 0; padding-left: .15rem; }
        .policy-essential-option, .policy-optional-option {
            display: flex;
            align-items: center;
            gap: .65rem;
            margin-top: .9rem;
            padding: .8rem;
            border: 1px solid rgba(17, 17, 17, .12);
            background: #fff;
            color: var(--ink);
            font-size: .85rem;
        }
        .policy-essential-option input, .policy-optional-option input {
            width: 18px;
            height: 18px;
            accent-color: #8b7143;
        }
        .policy-agreement-note {
            margin: 1.2rem 0 0;
            color: var(--mid);
            font-size: .78rem;
            line-height: 1.5;
        }
        .policy-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: .7rem;
            margin-top: 1.1rem;
        }
        .policy-modal-actions .btn-primary,
        .policy-modal-actions .btn-secondary {
            min-height: 44px;
        }
        body.policy-modal-open { overflow: hidden; }

        .admin-action-modal {
            position: fixed;
            inset: 0;
            z-index: 1300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .admin-action-modal[hidden] { display: none; }
        .admin-action-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(10, 10, 10, .68);
            backdrop-filter: blur(5px);
        }
        .admin-action-card {
            position: relative;
            width: min(100%, 480px);
            padding: clamp(1.4rem, 5vw, 2rem);
            border: 1px solid rgba(205, 173, 111, .5);
            background: #f7f7f3;
            box-shadow: 0 28px 100px rgba(0, 0, 0, .3);
        }
        .admin-action-card .section-eyebrow {
            margin: 0 0 .5rem;
            color: #8b7143;
            font-size: .68rem;
            letter-spacing: .24rem;
        }
        .admin-action-card h2 {
            margin: 0 0 .6rem;
            color: var(--ink);
            font-family: 'Bebas Neue', Arial, sans-serif;
            font-size: clamp(2rem, 7vw, 2.6rem);
            font-weight: 400;
            letter-spacing: .08rem;
        }
        .admin-action-card > p:not(.section-eyebrow) {
            margin: 0;
            color: #42423f;
            font-size: .9rem;
            line-height: 1.6;
        }
        .admin-action-input-label {
            display: block;
            margin: 1.1rem 0 .4rem;
            color: var(--ink);
            font-size: .78rem;
            font-weight: 700;
        }
        .admin-action-input {
            width: 100%;
            padding: .8rem 1rem;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--ink);
            font: inherit;
        }
        .admin-action-buttons {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: .7rem;
            margin-top: 1.4rem;
        }
        .admin-action-buttons button { min-height: 44px; }
        .admin-action-buttons .admin-action-danger { background: #8b302c; }
        body.admin-action-open { overflow: hidden; }

        /* ── AUTH PAGES ── */
        .page-auth {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6rem 1.5rem 4rem;
            background: linear-gradient(180deg, #f0f0eb 0%, #e8e8e3 100%);
        }
        .auth-panel {
            width: min(520px, 100%);
            background: rgba(255,255,255,.96);
            border: 1px solid rgba(17,17,17,.08);
            box-shadow: 0 30px 80px rgba(17,17,17,.08);
            padding: 3rem 2.3rem;
            border-radius: 24px;
        }
        
        @media (max-width: 640px) {
            .page-auth {
                padding: 2rem 1rem 3rem;
            }
            .auth-panel {
                width: 100%;
                padding: 2rem 1.5rem;
                border-radius: 16px;
                box-shadow: 0 15px 40px rgba(17,17,17,.06);
            }
            .auth-inner {
                max-width: 100%;
            }
            .section-header {
                margin-bottom: 1.5rem;
            }
            .auth-inner h1 {
                font-size: clamp(1.8rem, 5vw, 2.8rem);
                margin-bottom: 0.75rem;
            }
            .auth-inner .page-sub {
                font-size: .9rem;
                margin-bottom: 1.5rem;
            }
            .auth-form {
                gap: 0.9rem;
            }
            .auth-form label {
                font-size: .75rem;
            }
            .auth-form input {
                padding: 1rem 0.9rem;
                font-size: 1.1rem;
                border-radius: 10px;
            }
            .btn-primary, .btn-google-icon {
                padding: 1rem 1.8rem;
                font-size: .8rem;
                min-height: 50px;
                width: 100%;
            }
            .form-buttons {
                flex-direction: column;
                gap: 0.8rem;
                width: 100%;
            }
            .form-buttons .btn-primary,
            .form-buttons .btn-google-icon {
                width: 100%;
            }
            .btn-back {
                padding: 1rem 1.8rem;
                font-size: .8rem;
                width: 100%;
            }
            .auth-switch {
                font-size: .85rem;
                margin-top: 1.5rem;
            }
        }
        .auth-inner {
            max-width: 420px;
            margin: 0 auto;
        }
        .admin-page-auth .auth-panel {
            width: 100%;
            max-width: none;
            padding: 3rem 2rem;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            border: none;
            background: transparent;
        }
        .admin-page-auth .auth-inner {
            width: 100%;
            max-width: none;
            margin: 0;
        }
        .admin-dashboard {
            width: 100vw;
            max-width: none;
            display: flex;
            flex-direction: column;
            padding: 1.5rem 0;
            margin-left: calc(-50vw + 50%);
            background: rgba(240,240,240,0.5);
        }
        .orders-table-container {
            width: 100%;
            max-width: none;
            padding: 1rem;
            border-radius: 0;
            border: none;
            box-shadow: none;
        }
        .orders-table table {
            min-width: 1000px;
        }
        .section-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .auth-inner h1 {
            font-size: clamp(2.2rem, 4vw, 3.4rem);
            line-height: 1.05;
            letter-spacing: .12rem;
            margin-bottom: 1rem;
            color: var(--ink);
        }
        .auth-inner .page-sub {
            font-size: .95rem;
            color: var(--mid);
            margin: 0 auto;
            max-width: 330px;
            line-height: 1.7;
        }
        .auth-buttons {
            display: grid;
            gap: 1rem;
            margin-bottom: 1.75rem;
        }
        .auth-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .75rem;
            padding: 1rem 1.1rem;
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 999px;
            color: var(--ink);
            background: rgba(240,240,235,.9);
            transition: transform .2s, background .2s, border-color .2s;
        }
        .auth-btn:hover { background: #e8e8e3; transform: translateY(-1px); }
        .auth-form {
            display: grid;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .auth-form label {
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .1rem;
            text-transform: uppercase;
            color: var(--mid);
        }
        .auth-form input {
            width: 100%;
            padding: 1rem 1.1rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--white);
            font-size: 1rem;
            color: var(--ink);
            outline: none;
        }
        .auth-form input:focus { border-color: var(--ink); }
        .auth-note {
            font-size: .86rem;
            color: var(--mid);
            margin: -0.5rem 0 0.75rem;
            line-height: 1.4;
        }
        .auth-note.error {
            color: #b22;
        }
        .admin-link {
            display: inline-block;
        }
        .admin-link.admin-hidden {
            display: none !important;
        }

        .admin-page-auth {
            background: radial-gradient(circle at top center, rgba(255,255,255,.95), rgba(240,240,235,.94) 35%, rgba(236,232,221,.95) 100%);
        }
        .admin-dashboard {
            margin-top: 1rem;
        }
        .admin-dashboard-header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;

        /* ── AUTH / LOGIN PAGE ── */
        .auth-page {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 120px);
            padding: 2rem;
            background: linear-gradient(180deg, rgba(246,246,244,1) 0%, rgba(255,255,255,1) 100%);
        }
        .auth-panel {
            width: 100%;
            max-width: 420px;
            background: var(--white);
            padding: 2rem 2.4rem;
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(17,17,17,.06);
            text-align: center;
        }
        .auth-panel h2 { font-size: 1.4rem; margin-bottom: .25rem; }
        .auth-form { display: grid; gap: .8rem; margin-top: .6rem; }
        .auth-form label { text-align: left; font-size: .8rem; color:var(--mid); text-transform:uppercase; }
        .auth-form input { width: 100%; padding: .85rem 1rem; border-radius: 10px; border: 1px solid var(--border); }
        .auth-divider { margin: 1rem 0; font-size: .85rem; color: var(--mid); text-align: center; display: block; }
        .login-divider { margin: 1.2rem 0; text-align: center; position: relative; }
        .login-divider span { display: inline-block; padding: 0 0.8rem; font-size: .8rem; color: var(--mid); text-transform: uppercase; letter-spacing: .1rem; }
        .google-login-section { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-top: 1.2rem; width: 100%; }
        .btn-google-icon { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .1rem; text-transform: uppercase; transition: background .2s, border-color .2s, box-shadow .2s; margin: 0 auto 0.8rem; }
        .form-buttons .btn-google-icon { margin: 0; padding: .85rem 2.4rem; }
        .btn-google-icon:hover { background: #f8f9fa; border-color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
        .form-divider { text-align: center; font-size: .8rem; color: var(--mid); text-transform: uppercase; letter-spacing: .1rem; margin: 1.2rem 0; }
        .form-buttons { display: flex; flex-direction: column; gap: 0.8rem; justify-content: center; align-items: center; margin-top: 1.5rem; }
        .btn-back { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 2.4rem; background: transparent; border: 1.5px solid var(--ink); color: var(--ink); font-size: .75rem; letter-spacing: .25rem; text-transform: uppercase; border-radius: 6px; text-decoration: none; transition: background .25s, color .25s, transform .2s; }
        .btn-back:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
        .google-login-text { font-size: .8rem; color: var(--mid); letter-spacing: .05rem; margin: 0; }
        .btn-google { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 2.4rem; background: #fff; border: 1px solid #dcdcdc; border-radius: 12px; color: var(--ink); text-decoration: none; margin: 0.6rem auto; font-size: .75rem; letter-spacing: .25rem; text-transform: uppercase; transition: background .25s, border-color .25s, transform .2s; width: fit-content; }
        .btn-google:hover { background: #f5f5f5; border-color: var(--ink); transform: translateY(-1px); }
        .btn-google-alt { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 0.9rem 2rem; background: #fff; border: 1px solid #dadce0; border-radius: 6px; color: #3c4043; text-decoration: none; margin: 0 auto; font-size: .85rem; font-weight: 500; letter-spacing: .05rem; transition: background .2s, box-shadow .2s, border-color .2s; width: fit-content; }
        .btn-google-alt:hover { background: #f8f9fa; border-color: #dadce0; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
        .auth-note { margin-top: .6rem; }
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 0 2rem 1rem 2rem;
            background: transparent;
            border-bottom: 1px solid rgba(17,17,17,.06);
            flex-shrink: 0;
            margin-bottom: 1.5rem;
        }
        .admin-tabs {
            display: flex;
            gap: .75rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        .tab-button {
            padding: .9rem 1.25rem;
            border: 1px solid rgba(17,17,17,.12);
            border-radius: 999px;
            background: rgba(255,255,255,.9);
            color: var(--ink);
            cursor: pointer;
            transition: background .2s, border-color .2s, transform .2s;
        }
        .tab-button:hover {
            background: rgba(255,255,255,1);
            transform: translateY(-1px);
        }
        .tab-button.active {
            background: var(--ink);
            color: #fff;
            border-color: rgba(17,17,17,.2);
        }
        #orders-section {
            padding: 0 2rem;
            margin: 0;
            display: flex;
            flex-direction: column;
        }
        .admin-tabs {
            display: flex;
            gap: .75rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            padding: 0 2rem;
            background: transparent;
            border-bottom: none;
            flex-shrink: 0;
        }
        .admin-dashboard-actions {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .admin-dashboard-header h1 {
            margin: 0;
            font-size: clamp(2rem, 3.5vw, 2.8rem);
        }
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .dashboard-card {
            padding: 1.3rem 1.25rem;
            border-radius: 22px;
            background: rgba(255,255,255,.95);
            border: 1px solid rgba(17,17,17,.08);
            box-shadow: 0 18px 35px rgba(17,17,17,.04);
        }
        .dashboard-card h2 {
            margin: 0 0 .85rem;
            font-size: .82rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--mid);
        }
        .dashboard-card strong {
            display: block;
            font-size: clamp(2rem, 3vw, 2.6rem);
            margin-bottom: .45rem;
            color: var(--ink);
        }
        .card-note {
            color: var(--mid);
            line-height: 1.55;
            font-size: .95rem;
        }
        .admin-dashboard-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .95rem 1.2rem;
            border-radius: 999px;
            background: rgba(17,17,17,.06);
            color: var(--ink);
            font-weight: 700;
            letter-spacing: .05rem;
            margin-bottom: 1rem;
        }
        .orders-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1.25rem 0 1rem;
        }

        /* Order Cards Layout */
        .orders-list-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.2rem;
            padding: 0 2rem;
            margin-bottom: 2rem;
        }

        .order-card {
            background: #ffffff;
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(17,17,17,.04);
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .order-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px); gap: .8rem; margin: 1rem 0; }
        .order-filters input, .order-filters select { min-width: 0; padding: .8rem 1rem; border: 1px solid var(--border); background: #fff; font: inherit; }
        .waybill-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
        .waybill-panel input { min-width: 180px; padding: .55rem .7rem; border: 1px solid var(--border); }
        .waybill-panel small { flex-basis: 100%; color: var(--mid); }
        .order-tracking-btn, .order-payment-btn, .order-pickup-btn { padding: .6rem .8rem; background: var(--ink); color: var(--bg); font-size: .68rem; letter-spacing: .04rem; }
        .order-payment-btn { background: #176f56; }
        .order-status-control { display: flex; align-items: center; gap: .4rem; }
        .order-tracking-select { min-width: 9.5rem; padding: .55rem .6rem; border: 1px solid var(--border); background: #fff; font: inherit; font-size: .78rem; }

        .order-card:hover {
            box-shadow: 0 4px 20px rgba(17,17,17,.08);
            border-color: rgba(59,130,246,.2);
        }

        .order-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            background: linear-gradient(135deg, #f8fafc 0%, #f3f6fb 100%);
            border-bottom: 1px solid rgba(17,17,17,.06);
        }

        .order-number {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--ink);
        }

        .order-total-badge {
            background: rgba(34,197,94,.1);
            color: #22c55e;
            padding: .4rem .8rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: .95rem;
        }

        .order-header-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: .75rem;
        }

        .order-remove-btn {
            background: #fff;
            color: #b91c1c;
            border: 1px solid rgba(185,28,28,.35);
            border-radius: 999px;
            padding: .4rem .9rem;
            font-size: .85rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s ease, color .2s ease;
        }

        .order-remove-btn:hover:not(:disabled) {
            background: #b91c1c;
            color: #fff;
        }

        .order-remove-btn:disabled {
            opacity: .6;
            cursor: wait;
        }

        .order-ref {
            margin-left: .5rem;
            font-size: .75rem;
            font-weight: 600;
            color: #6b7280;
            letter-spacing: .04em;
        }

        .order-status-badge {
            padding: .4rem .8rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: .85rem;
        }

        .order-status-badge.pending {
            background: rgba(245,158,11,.14);
            color: #b45309;
        }

        .order-status-badge.done {
            background: #16a34a;
            color: #fff;
        }
        .order-status-badge.cancelled {
            background: #fee2e2;
            color: #b91c1c;
        }

        .order-done-btn {
            background: #16a34a;
            color: #fff;
            border: 1px solid #16a34a;
            border-radius: 999px;
            padding: .4rem .9rem;
            font-size: .85rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s ease, color .2s ease;
        }

        .order-done-btn:hover:not(:disabled) {
            background: #15803d;
        }

        .order-done-btn.undo {
            background: #fff;
            color: #374151;
            border-color: rgba(55,65,81,.35);
        }

        .order-done-btn.undo:hover:not(:disabled) {
            background: #f3f4f6;
        }
        .order-done-btn.cancel {
            background: #fff;
            color: #b91c1c;
            border-color: rgba(185,28,28,.35);
        }
        .order-done-btn.cancel:hover:not(:disabled) {
            background: #b91c1c;
            color: #fff;
        }

        .order-done-btn:disabled {
            opacity: .6;
            cursor: wait;
        }

        .order-card.order-done {
            border-color: rgba(22,163,74,.35);
        }
        .order-card.order-cancelled {
            border-color: rgba(185,28,28,.3);
            background: #fffafa;
        }

        .receipt-note.ok { color: #15803d; font-weight: 700; }
        .receipt-note.fail { color: #b91c1c; font-weight: 700; }
        .order-link-btn {
            background: none;
            border: 1px solid rgba(17,17,17,.25);
            border-radius: 999px;
            padding: .2rem .7rem;
            margin-left: .4rem;
            font-size: .78rem;
            font-weight: 700;
            cursor: pointer;
        }
        .order-link-btn:hover:not(:disabled) { background: #111; color: #fff; }
        .order-link-btn:disabled { opacity: .6; cursor: wait; }

        .order-card-body {
            padding: 1.5rem;
        }

        .order-info-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.2rem;
            margin-bottom: 1.2rem;
        }

        .order-info-row {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .order-info-row label {
            font-weight: 700;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ink);
        }

        .order-info-row span {
            font-size: 1rem;
            color: var(--ink);
            line-height: 1.5;
            word-break: break-word;
        }

        .order-info-row a {
            color: var(--ink);
            text-decoration: underline;
        }

        .order-divider {
            height: 1px;
            background: rgba(17,17,17,.06);
            margin: 1.2rem 0;
        }

        .order-items-section {
            margin-bottom: 0.5rem;
        }

        .items-label {
            display: block;
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ink);
            margin-bottom: 0.8rem;
        }

        .order-footer-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.2rem;
            padding-top: 0.5rem;
        }

        .order-footer-section .order-info-row label {
            font-size: 0.9rem;
            color: var(--mid);
        }

        .order-footer-section .order-info-row span {
            font-size: 1rem;
            color: var(--ink);
            font-weight: 600;
        }

        .order-total-value {
            font-weight: 700;
            font-size: 1.3rem;
            color: #22c55e;
        }

        .empty-state-card {
            text-align: center;
            padding: 3rem 2rem;
            color: var(--mid);
            font-size: 1rem;
            background: rgba(17,17,17,.02);
            border-radius: 12px;
            border: 1px dashed rgba(17,17,17,.12);
            margin: 0 2rem;
        }

        .orders-table-container {
            overflow: auto;
            border-radius: 8px;
            border: 1px solid rgba(17,17,17,.08);
            background: rgba(255,255,255,1);
            padding: 0;
            box-shadow: 0 4px 20px rgba(17,17,17,.06);
            width: calc(100% - 4rem);
            max-width: none;
            margin: 0 2rem;
            flex: 1;
            min-height: 400px;
            max-height: calc(100vh - 300px);
        }
        .orders-table table {
            width: 100%;
            min-width: 0;
            border-collapse: collapse;
            table-layout: auto; /* auto layout for better column fit */
            font-family: inherit;
            border: 1px solid rgba(17,17,17,.12);
        }
        .orders-table th,
        .orders-table td {
            padding: 0.8rem 1rem;
            border: 1px solid rgba(17,17,17,.12);
            vertical-align: top;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            min-width: 0;
        }
        .orders-table th {
            text-transform: uppercase;
            letter-spacing: .08rem;
            font-size: 13px;
            color: var(--mid);
            font-weight: 700;
            background: #f3f3f3;
            position: sticky;
            top: 0;
            z-index: 2;
            border-bottom: 2px solid rgba(17,17,17,.12);
        }
        .orders-table tbody tr:nth-child(even) { background: #ffffff; }
        .orders-table tbody tr:nth-child(odd) { background: #fbfbfb; }
        .orders-table tbody tr:hover { background: rgba(59,130,246,0.08); }
        .orders-table td a { color: var(--ink); text-decoration: underline; }

        /* Column widths for auto layout: fit end-to-end like Google Sheets */
        .orders-table th:nth-child(1), .orders-table td.order-index { min-width: 50px; text-align:center; }
        .orders-table th:nth-child(2), .orders-table td.order-customer { min-width: 150px; white-space: normal; }
        .orders-table th:nth-child(3), .orders-table td.order-phone { min-width: 100px; text-align:center; white-space: normal; }
        .orders-table th:nth-child(4), .orders-table td.order-address-cell { min-width: 140px; white-space: normal; }
        .orders-table th:nth-child(5), .orders-table td.order-items-cell { min-width: 250px; }
        .orders-table th:nth-child(6), .orders-table td.order-total { min-width: 90px; text-align:right; white-space: normal; }
        .orders-table th:nth-child(7), .orders-table td.order-created { min-width: 120px; text-align:center; white-space: normal; }

        /* Inline item chips: flow left-to-right to avoid horizontal scroll */
        .order-items { 
            margin: 0; 
            padding: 0; 
            display: flex; 
            gap: 0.6rem; 
            flex-wrap: wrap; 
            align-items: center;
            padding-left: 0;
            list-style: none;
        }
        .order-items li { 
            margin: 0; 
            background: rgba(17,17,17,0.04);
            padding: .5rem .75rem;
            border-radius: 10px;
            font-size: 1rem;
            white-space: nowrap;
            color: var(--ink);
        }

        /* Item chip with optional thumbnail and quantity badge */
        .item-chip { display: inline-flex; align-items: center; gap: .55rem; }
        .item-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; display: block; }
        .item-label { font-weight: 700; font-size: 1.05rem; }
        .item-badge { background: rgba(17,17,17,0.08); padding: .22rem .5rem; border-radius: 999px; font-size: .85rem; color: #111; margin-left: .35rem; }
        .item-price { margin-left: .5rem; font-size: 1.05rem; color: #111; font-weight: 700; }

        .orders-table .empty-state, .contacts-table .empty-state { text-align:center; padding: 1rem; color: #666; }

        /* Sheet-like overrides: larger font, taller rows, sticky header and denser grid */
        .orders-table table { font-size: 15px; border-spacing: 0; }
        .orders-table th { font-size: 13px; padding: 0.9rem 1rem; height: 56px; background: #f8fafc; }
        .orders-table td { font-size: 15px; padding: 0.7rem 1rem; height: 56px; }
        .orders-table tr { line-height: 1.4; }
        .orders-table th, .orders-table td { border-right: 1px solid rgba(17,17,17,0.06); }
        .orders-table thead th { box-shadow: 0 2px 0 rgba(17,17,17,0.02) inset; }
        .orders-table tbody { display: block; overflow: auto; height: calc(100% - 56px); }
        .orders-table thead, .orders-table tbody tr { display: table; width: 100%; table-layout: fixed; }
        .orders-table thead { width: calc(100% - 1em); }
        .orders-table tbody tr { display: table-row; }

        /* Contacts Table: Same Google Sheets Styling */
        .contacts-table table {
            width: 100%;
            min-width: 0;
            border-collapse: collapse;
            table-layout: auto;
            font-family: inherit;
            border: 1px solid rgba(17,17,17,.12);
            font-size: 15px;
            border-spacing: 0;
        }
        .contacts-table th,
        .contacts-table td {
            padding: 0.8rem 1rem;
            border: 1px solid rgba(17,17,17,.12);
            vertical-align: top;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            min-width: 0;
        }
        .contacts-table th {
            text-transform: uppercase;
            letter-spacing: .08rem;
            font-size: 13px;
            color: var(--mid);
            font-weight: 700;
            background: #f8fafc;
            position: sticky;
            top: 0;
            z-index: 2;
            border-bottom: 2px solid rgba(17,17,17,.12);
            padding: 0.9rem 1rem;
            height: 56px;
            box-shadow: 0 2px 0 rgba(17,17,17,0.02) inset;
        }
        .contacts-table tbody tr:nth-child(even) { background: #ffffff; }
        .contacts-table tbody tr:nth-child(odd) { background: #fbfbfb; }
        .contacts-table tbody tr:hover { background: rgba(59,130,246,0.08); }
        .contacts-table td { font-size: 15px; padding: 0.7rem 1rem; height: 56px; }
        .contacts-table tr { line-height: 1.4; }
        .contacts-table td a { color: var(--ink); text-decoration: underline; }
        .contacts-table th, .contacts-table td { border-right: 1px solid rgba(17,17,17,0.06); }

        /* Contacts table column widths */
        .contacts-table th:nth-child(1), .contacts-table td.contact-index { min-width: 50px; text-align: center; }
        .contacts-table th:nth-child(2), .contacts-table td.contact-name { min-width: 120px; white-space: normal; }
        .contacts-table th:nth-child(3), .contacts-table td.contact-email { min-width: 150px; white-space: normal; }
        .contacts-table th:nth-child(4), .contacts-table td.contact-phone { min-width: 110px; text-align: center; white-space: normal; }
        .contacts-table th:nth-child(5), .contacts-table td.contact-message { min-width: 280px; white-space: normal; }
        .contacts-table th:nth-child(6), .contacts-table td.contact-submitted { min-width: 150px; text-align: center; white-space: normal; }

        /* Concern Cards Layout */
        .contacts-list-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.2rem;
            padding: 0 2rem;
            margin-bottom: 2rem;
        }

        .concern-card {
            background: #ffffff;
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(17,17,17,.04);
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .concern-card:hover {
            box-shadow: 0 4px 20px rgba(17,17,17,.08);
            border-color: rgba(59,130,246,.2);
        }

        .concern-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            background: linear-gradient(135deg, #f8fafc 0%, #f3f6fb 100%);
            border-bottom: 1px solid rgba(17,17,17,.06);
        }

        .concern-number {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--ink);
        }

        .concern-status-badge {
            background: rgba(59,130,246,.1);
            color: #3b82f6;
            padding: .4rem .8rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: .95rem;
        }

        .concern-card-body {
            padding: 1.5rem;
        }

        .concern-info-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.2rem;
            margin-bottom: 1.2rem;
        }

        .concern-info-row {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .concern-info-row label {
            font-weight: 700;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ink);
        }

        .concern-info-row span {
            font-size: 1rem;
            color: var(--ink);
            line-height: 1.5;
            word-break: break-word;
        }

        .concern-info-row a {
            color: var(--ink);
            text-decoration: underline;
            font-size: 1rem;
        }

        .concern-divider {
            height: 1px;
            background: rgba(17,17,17,.06);
            margin: 1.2rem 0;
        }

        .concern-message-section {
            margin-bottom: 0.5rem;
        }

        .message-label {
            display: block;
            font-weight: 700;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ink);
            margin-bottom: 0.8rem;
        }

        .concern-message-text {
            font-size: 1rem;
            color: var(--ink);
            line-height: 1.6;
            margin: 0;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .concern-footer-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.2rem;
            padding-top: 0.5rem;
        }

        .concern-footer-section .concern-info-row label {
            font-size: 0.95rem;
            color: var(--ink);
        }

        .concern-footer-section .concern-info-row span {
            font-size: 1rem;
            color: var(--ink);
            font-weight: 600;
        }

        .item-thumb { width: 72px; height: 72px; border-radius: 8px; }
        .item-label { font-size: 1rem; }
        .item-badge { font-size: .95rem; padding: .3rem .6rem; }

        .auth-switch {
            text-align: center;
            font-size: .9rem;
            color: var(--mid);
        }
        .auth-switch a { color: var(--ink); font-weight: 700; }
        .auth-switch a:hover { opacity: .75; }

        /* ── CHECKOUT LOGIN MODAL ── */
        .auth-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(17,17,17,.55);
        }
        .auth-modal-content {
            position: relative;
            width: 100%;
            max-width: 420px;
            max-height: calc(100vh - 3rem);
            overflow-y: auto;
            background: var(--white);
            padding: 2.4rem 2.2rem 2rem;
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(17,17,17,.2);
            text-align: center;
        }
        .auth-modal-close {
            position: absolute;
            top: .6rem;
            right: .9rem;
            font-size: 1.8rem;
            line-height: 1;
            color: var(--mid);
            cursor: pointer;
        }
        .auth-modal-close:hover { color: var(--ink); }

        /* ── CART DRAWER ── */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.45);
            z-index: 950;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
        }
        .overlay.show { opacity: 1; pointer-events: all; }

        .cart-drawer {
            position: fixed;
            top: 0; right: 0;
            width: 400px; max-width: 95vw;
            height: 100vh;
            background: var(--white);
            z-index: 960;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform .35s var(--ease);
        }
        .cart-drawer.open { transform: translateX(0); }

        .drawer-header {
            padding: 1.5rem 1.8rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .drawer-title {
            font-size: .75rem;
            letter-spacing: .35rem;
            text-transform: uppercase;
            font-weight: 700;
        }
        .drawer-close {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            color: var(--mid);
            transition: color .2s;
        }
        .drawer-close:hover { color: var(--ink); }
        .drawer-actions {
            display: flex;
            align-items: center;
            gap: .3rem;
            margin-left: auto;
            margin-right: .8rem;
        }
        .drawer-actions button {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            color: var(--mid);
            font-size: 1.05rem;
            line-height: 1;
            transition: color .2s, border-color .2s, background .2s;
        }
        .drawer-actions button svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .drawer-actions button:hover {
            color: var(--ink);
            border-color: var(--border);
            background: var(--bg);
        }
        .drawer-clear {
            color: #8f3f3f;
        }
        .drawer-clear:hover {
            color: #b12f2f;
            border-color: rgba(177, 47, 47, .25);
            background: rgba(177, 47, 47, .06);
        }
        .drawer-select-all:disabled,
        .drawer-remove-selected:disabled {
            opacity: .35;
            cursor: not-allowed;
        }
        .drawer-select-item {
            display: flex;
            align-items: flex-start;
            padding-top: .2rem;
        }
        .drawer-select-item input {
            width: 16px;
            height: 16px;
            accent-color: var(--ink);
            cursor: pointer;
        }

        .cart-items-list {
            flex: 1;
            overflow-y: auto;
            padding: 1rem 1.8rem;
        }

        .cart-empty-msg {
            text-align: center;
            padding: 4rem 0;
            font-size: .75rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            color: var(--mid);
        }
        .cart-empty-msg svg {
            width: 40px; height: 40px;
            stroke: var(--border);
            fill: none;
            stroke-width: 1;
            margin: 0 auto 1rem;
            display: block;
        }

        .cart-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
            align-items: center;
        }
        .ci-thumb {
            width: 68px; height: 68px;
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 2rem;
            flex-shrink: 0;
            overflow: hidden;
        }
        .ci-body { flex: 1; }
        .ci-name {
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .1rem;
            text-transform: uppercase;
            margin-bottom: .15rem;
        }
        .ci-meta {
            font-size: .68rem;
            color: var(--mid);
            letter-spacing: .1rem;
            text-transform: uppercase;
            margin-bottom: .5rem;
        }
        .ci-actions {
            display: flex;
            justify-content: center;
            margin-bottom: .6rem;
        }
        .cart-action {
            font-size: .65rem;
            padding: .45rem 1rem;
            border-width: 1px;
            letter-spacing: .2rem;
            text-transform: uppercase;
            min-width: fit-content;
        }
        .ci-qty {
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .qty-btn {
            width: 26px; height: 26px;
            border: 1px solid var(--border);
            font-size: .9rem;
            display: flex; align-items: center; justify-content: center;
            transition: border-color .2s, background .2s;
        }
        .qty-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
        .qty-val { font-size: .82rem; min-width: 24px; text-align: center; }
        .ci-price {
            font-size: .88rem;
            font-weight: 300;
            flex-shrink: 0;
        }
        .ci-remove {
            color: var(--mid);
            font-size: 1.1rem;
            line-height: 1;
            transition: color .2s;
        }
        .ci-remove:hover { color: var(--ink); }

        .cart-footer {
            padding: 1.5rem 1.8rem;
            border-top: 1px solid var(--border);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cart-subtotal {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 1rem;
            margin-bottom: .4rem;
        }
        .cart-subtotal span:first-child {
            font-size: .68rem;
            letter-spacing: .3rem;
            text-transform: uppercase;
            color: var(--mid);
        }
        .cart-subtotal span:last-child { font-size: 1.2rem; font-weight: 300; }
        .cart-note {
            font-size: .68rem;
            color: var(--mid);
            margin-bottom: 1.2rem;
            letter-spacing: .05rem;
        }
        .checkout-btn {
            width: min(100%, 280px);
            padding: 1rem 1.5rem;
            margin: 0 auto;
            text-align: center;
            display: block;
        }

        /* ── PRODUCT MODAL ── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.5);
            z-index: 970;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
        }
        .modal-overlay.show { opacity: 1; pointer-events: all; }

        .modal-box {
            background: var(--white);
            width: 100%;
            max-width: 820px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            overflow: hidden;
            transform: scale(.96) translateY(10px);
            transition: transform .3s var(--ease);
            position: relative;
            max-height: 90vh;
        }
        .modal-overlay.show .modal-box { transform: scale(1) translateY(0); }

        .modal-img {
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            position: relative;
            overflow: hidden;
            font-size: 8rem;
            min-height: 360px;
        }
            .modal-img span { padding: 3rem; }
            .modal-img .product-photo {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
                transform: scale(var(--photo-zoom, 1));
                transform-origin: center;
            }
        .modal-info {
            padding: 2.5rem;
            overflow-y: auto;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }
        .modal-close {
            position: absolute;
            top: 1rem; right: 1rem;
            font-size: 1.4rem;
            color: var(--mid);
            z-index: 2;
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
        }
        .modal-close:hover { color: var(--ink); }
        .modal-cat {
            font-size: .6rem;
            letter-spacing: .28rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: .7rem;
        }
        .modal-name {
            font-size: clamp(1.15rem, 2vw, 1.35rem);
            font-weight: 900;
            letter-spacing: .12rem;
            text-transform: uppercase;
            margin-bottom: .5rem;
        }
        .modal-price {
            font-size: 1rem;
            font-weight: 300;
            margin-bottom: 1.1rem;
        }
        .modal-desc {
            font-size: .8rem;
            color: #444;
            line-height: 1.65;
            margin-bottom: 1.4rem;
        }
        .size-guide-link {
            align-self: flex-start;
            color: var(--mid);
            font-size: .75rem;
            margin-bottom: 1rem;
            text-decoration: underline;
        }
        .size-guide-dialog {
            position: fixed;
            inset: 0;
            margin: auto;
            width: min(94vw, 800px);
            max-height: 90vh;
            padding: 1rem;
            border: 0;
            background: var(--white);
        }
        .size-guide-dialog::backdrop { background: rgba(0,0,0,.7); }
        .size-guide-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .75rem;
        }
        .size-guide-header h2 { font-size: 1rem; }
        .size-guide-close { font-size: 1.5rem; width: 44px; height: 44px; }
        .size-guide-dialog img { display: block; width: 100%; height: auto; }
        .size-label {
            font-size: .65rem;
            letter-spacing: .3rem;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: .6rem;
        }
        .size-grid {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            margin-bottom: 1.8rem;
            min-height: 42px;
        }
        .size-opt {
            width: 42px; height: 42px;
            border: 1px solid var(--border);
            font-size: .72rem;
            letter-spacing: .05rem;
            display: flex; align-items: center; justify-content: center;
            transition: border-color .2s, background .2s;
            touch-action: manipulation;
        }
        .size-opt:hover, .size-opt.selected {
            border-color: var(--ink);
            background: var(--ink);
            color: var(--bg);
        }
        .modal-add {
            width: min(100%, 280px);
            padding: 1rem 1.5rem;
            margin: 1.5rem auto 0;
            text-align: center;
            justify-content: center;
        }

        .admin-product-editor {
            background: rgba(248,248,246,.95);
            border: 1px solid rgba(17,17,17,.08);
            border-radius: 18px;
            padding: 1rem 1.2rem;
            margin-bottom: 1.2rem;
        }
        .admin-editor-title {
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: .15rem;
            text-transform: uppercase;
            margin-bottom: .75rem;
        }
        .admin-editor-row {
            display: grid;
            gap: .5rem;
            margin-bottom: .8rem;
        }
        .admin-editor-row label {
            font-size: .78rem;
            color: var(--mid);
            letter-spacing: .08rem;
            text-transform: uppercase;
        }
        .admin-editor-row input[type='number'] {
            width: 100%;
            padding: .85rem 1rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: .95rem;
        }
        .admin-editor-row.admin-editor-checkbox {
            display: flex;
            align-items: center;
            gap: .65rem;
            margin-top: -.3rem;
        }
        .admin-save-btn {
            width: 100%;
            padding: .95rem 1rem;
            background: var(--ink);
            color: var(--bg);
            border-radius: 12px;
            font-weight: 700;
            letter-spacing: .08rem;
            text-transform: uppercase;
            cursor: pointer;
        }
        .admin-editor-status {
            font-size: .82rem;
            color: var(--mid);
            margin-top: .8rem;
            min-height: 1.1rem;
        }

        /* ── TOAST ── */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--ink);
            color: var(--bg);
            padding: .8rem 2rem;
            font-size: .7rem;
            letter-spacing: .25rem;
            text-transform: uppercase;
            z-index: 999;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s, transform .3s;
            white-space: nowrap;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* ── SCROLL REVEAL ── */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .7s var(--ease), transform .7s var(--ease);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes shimmer {
            0% {
                background-position: -100% 0;
            }
            50% {
                background-position: 100% 0;
            }
            100% {
                background-position: -100% 0;
            }
        }

        @keyframes logo-shine-sweep {
            0%, 12% { background-position: 130% 0; }
            52% { background-position: -30% 0; }
            100% { background-position: -30% 0; }
        }

        @keyframes logo-glow {
            0%, 12%, 100% { filter: drop-shadow(0 0 0 rgba(205, 173, 111, 0)); }
            42%, 56% { filter: drop-shadow(0 0 11px rgba(205, 173, 111, .42)); }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            nav { display: none; }
            .menu-toggle { display: flex; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .modal-box { grid-template-columns: 1fr; overflow-y: auto; }
            .modal-info { max-height: none; overflow-y: visible; }
            .modal-img { min-height: 200px; font-size: 5rem; }
            .modal-img.cap-gallery { min-height: min(75vw, 420px); }
            .modal-img span { padding: 2rem; }
        }
        @media (max-width: 600px) {
            header { padding: 0 1.2rem; }
            .section { padding: 5rem 1.2rem; }
            .modal-info { padding: 1.25rem; }
            .modal-cat { font-size: .52rem; letter-spacing: .2rem; }
            .modal-name { font-size: clamp(.9rem, 4vw, 1.08rem); letter-spacing: .07rem; }
            .modal-price { font-size: .9rem; }
            .modal-desc { font-size: .72rem; }
            .features-grid { grid-template-columns: 1fr 1fr; }
            .feature { border-right: none; border-bottom: 1px solid var(--border); padding: 1.5rem 1rem; }
            .feature:last-child { border-bottom: none; }
            .product-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; align-items: flex-start; }
            .about-stats { grid-template-columns: 1fr; }
            .stat { border-right: none; border-bottom: 1px solid var(--border); }
            .stat:last-child { border-bottom: none; }
            .form-row { grid-template-columns: 1fr; }
            .contact-inner { padding: 0 1rem; }
            .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
            .checkout-success { grid-column: 1; grid-row: 2; }
            .drawer-header { padding: 1.2rem 1rem; }
            .drawer-actions { gap: .15rem; margin-right: .2rem; }
            .category-switch {
                top: 78px;
                min-width: 0;
                padding: .55rem;
                gap: .5rem;
                transform: none;
            }
            .category-switch-next { right: .8rem; }
            .category-switch-previous { left: .8rem; }
            .category-switch-kicker { font-size: .48rem; letter-spacing: .1rem; }
            .category-switch-label { font-size: 1rem; letter-spacing: .1rem; }
            .category-switch-arrow { width: 30px; height: 30px; flex-basis: 30px; font-size: 1.05rem; }
            .page-contact .page-header,
            .page-contact .page-sub { padding: 0 1rem; }
            .contact-panel { margin-bottom: 2rem; }
            .form-submit { width: 100%; min-width: auto; }

            .admin-page-auth { padding: 0; }
            .admin-page-auth .auth-panel { padding: 1.5rem .75rem 2rem; }
            .admin-dashboard { width: 100%; margin-left: 0; padding: 1rem 0 2rem; }
            .admin-dashboard-header { padding: 0 1rem 1rem; gap: 1rem; }
            .admin-dashboard-header h1 { font-size: 1.8rem; }
            .admin-dashboard-copy .page-sub { font-size: .8rem; }
            .admin-dashboard-actions { width: 100%; }
            .admin-dashboard-actions button { flex: 1; min-width: 0; }
            .admin-tabs { padding: 0 1rem; gap: .5rem; overflow-x: auto; flex-wrap: nowrap; }
            .tab-button { flex: 0 0 auto; padding: .7rem .85rem; font-size: .72rem; }
            #orders-section { padding: 0 1rem; }
            .dashboard-cards { grid-template-columns: 1fr 1fr; gap: .6rem; }
            .dashboard-card { padding: .9rem .75rem; border-radius: 12px; }
            .dashboard-card h2 { font-size: .65rem; }
            .dashboard-card strong { font-size: 1.35rem; }
            .card-note { font-size: .72rem; }
            .orders-list-container, .contacts-list-container { padding: 0; gap: .8rem; }
            .order-card-header, .concern-card-header { padding: .9rem; }
            .order-card-header { flex-direction: column; align-items: stretch; gap: .75rem; }
            .order-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: 1rem; }
            .order-ref { margin-left: 0; white-space: nowrap; }
            .order-header-actions { width: 100%; justify-content: flex-start; gap: .5rem; }
            .order-header-actions .order-done-btn,
            .order-header-actions .order-remove-btn { flex: 1 1 calc(50% - .5rem); padding: .6rem .5rem; text-align: center; white-space: nowrap; }
            .order-status-badge, .order-total-badge { font-size: .8rem; padding: .35rem .7rem; }
            .order-items { flex-direction: column; align-items: stretch; }
            .item-chip { width: 100%; flex-wrap: wrap; gap: .4rem .55rem; }
            .item-label { flex: 1 1 8rem; min-width: 0; font-size: .9rem; word-break: break-word; }
            .item-price { margin-left: auto; font-size: .95rem; }
            .order-card-body, .concern-card-body { padding: .9rem; }
            .order-info-section, .concern-info-section { grid-template-columns: 1fr; gap: .8rem; }
            .order-info-row label, .concern-info-row label { font-size: .72rem; }
            .order-info-row span, .concern-info-row span { font-size: .85rem; }
            .order-items li { white-space: normal; max-width: 100%; }
            .products-list-container { padding: 0 1rem; }
        }
        /* Accessibility: respect reduced motion */
        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
        }

        /* Touch & Smooth scrolling tweaks */
        .cart-items-list, .modal-info {
            -webkit-overflow-scrolling: touch;
        }

        /* Improve tap targets on small screens */
        @media (max-width: 700px) {
            .order-filters { grid-template-columns: 1fr; }
            .wishlist-header-btn, .cart-btn, .menu-toggle, .nl-form button {
                width: 48px; height: 48px; padding: 0.2rem;
            }
            .btn-primary, .btn-secondary { padding: .9rem 2rem; font-size: .82rem; }
            .header { padding: 0 1rem; }
        }

        /* Device-specific refinements */
        @media (max-width: 480px) {
            .hero-logo-text { font-size: clamp(3.2rem, 12vw, 6.5rem); letter-spacing: .25rem; }
            nav { display: none; }
            .menu-toggle { display: flex; }
            .hero-content { padding-top: 64px; }
            .page-contact .page-header { margin-top: 1rem; }
            .modal-overlay { padding: .75rem; }
            .modal-box { max-height: 94vh; grid-template-columns: 1fr; overflow-y: auto; }
            .modal-img { min-height: 190px; max-height: 30vh; }
            .modal-img.cap-gallery { min-height: min(70vw, 30vh); }
            .modal-info { padding: 1.5rem; }
            .size-grid:not(:empty) { display: flex !important; min-height: 42px; margin-bottom: 1rem; }
            .size-opt { flex: 0 0 42px; min-width: 42px; }
            .hero::before { width: 420px; height: 420px; }
            .hero::after { width: 260px; height: 260px; }
        }

        @media (min-width: 1200px) {
            .hero-logo-text { font-size: clamp(6.5rem, 10vw, 14rem); letter-spacing: 1.2rem; }
        }

        /* Keep the home page compact without changing product card or grid spacing. */
        .index-page .hero {
            min-height: min(82vh, 760px);
        }
        .index-page .promo-marquee {
            padding: 1.25rem 0 1rem;
        }
        .index-page .features {
            padding: .5rem 2rem 1rem;
        }
        .index-page .feature {
            padding: 1.25rem 1.5rem;
        }
        .index-page .section {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .index-page footer {
            padding: 3rem 2.5rem 1.5rem;
        }
        .index-page .footer-grid {
            margin-bottom: 2.5rem;
        }
        .index-page .footer-bottom {
            padding-top: 1.25rem;
        }

        @media (max-width: 600px) {
            .index-page .hero {
                min-height: min(72vh, 560px);
                min-height: min(72svh, 560px);
            }
            .index-page .features {
                padding: .5rem 1rem 1rem;
            }
            .index-page .feature {
                padding: 1rem .75rem;
            }
            .index-page .section {
                padding-top: 3rem;
                padding-bottom: 3rem;
            }
            .index-page footer {
                padding: 2.5rem 1.2rem 1.25rem;
            }
            .index-page .footer-grid {
                margin-bottom: 1.75rem;
            }
        }

        .caps-page .hero-logo-text {
            font-size: clamp(3.5rem, 8vw, 7rem);
            letter-spacing: .45rem;
        }
        .caps-page .section-title {
            font-size: clamp(1.7rem, 3.5vw, 2.7rem);
            letter-spacing: .3rem;
        }

        /* Use transform + opacity for smoother animations on lower-end devices */
        .reveal, .hero-logo-text, .hero-eyebrow, .hero-sub, .hero-actions, .product-card {
            will-change: transform, opacity;
        }

        /* Disable tap highlight and smooth text rendering */
        a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }