:root {
            --background: hsl(40 20% 98%);
            --foreground: hsl(215 50% 10%);

            --card: hsl(0 0% 100%);
            --card-foreground: hsl(215 50% 10%);

            --primary: hsl(215 55% 10%);
            --primary-foreground: hsl(40 20% 98%);

            --secondary: hsl(40 15% 94%);
            --secondary-foreground: hsl(215 50% 10%);

            --muted: hsl(40 10% 93%);
            --muted-foreground: hsl(215 15% 45%);

            --accent: hsl(38 55% 58%);
            --accent-foreground: hsl(215 55% 10%);

            --destructive: hsl(0 84% 60%);
            --border: hsl(40 15% 88%);
            --ring: hsl(38 55% 58%);

            --navy: hsl(215 55% 10%);
            --navy-light: hsl(215 40% 18%);
            --gold: hsl(38 55% 58%);
            --gold-light: hsl(38 60% 72%);
            --warm-white: hsl(40 20% 98%);
            --radius: 18px;

            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background: var(--background);
            color: var(--foreground);
            font-family: "DM Sans", system-ui, sans-serif;
            line-height: 1.5;
        }

        img { max-width: 100%; display: block; }
        a { color: inherit; text-decoration: none; }
        button, input, select { font: inherit; }

        .container {
            width: min(1400px, calc(100% - 32px));
            margin: 0 auto;
        }

        .font-heading,
        h1, h2, h3, h4, h5, h6,
        .brand__text,
        .btn,
        .pill,
        .section-title {
            font-family: "Space Grotesk", system-ui, sans-serif;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--primary);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .site-header__inner {
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .header-left,
        .header-right {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--primary-foreground);
        }

        .brand__text {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .menu-toggle,
        .cart-link,
        .mobile-menu-btn {
            background: transparent;
            border: 0;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color .2s ease, opacity .2s ease;
        }

        .menu-toggle:hover,
        .cart-link:hover,
        .mobile-menu-btn:hover {
            color: #fff;
        }

        .cart-link {
            position: relative;
        }

        .cart-badge {
            position: absolute;
            top: -7px;
            right: -9px;
            min-width: 18px;
            height: 18px;
            border-radius: 999px;
            background: var(--gold);
            color: var(--accent-foreground);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            padding: 0 5px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 40px;
            padding: 0 16px;
            border-radius: 12px;
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            transition: all .2s ease;
        }

        .btn--primary {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .btn--primary:hover {
            opacity: .92;
        }

        .btn--gold {
            background: var(--gold);
            color: var(--accent-foreground);
        }

        .btn--gold:hover {
            background: var(--gold-light);
        }

        .btn--ghost {
            background: transparent;
            color: var(--primary-foreground);
            border-color: rgba(255,255,255,0.08);
        }

        .btn--full { width: 100%; }

        .desktop-only { display: inline-flex; }
        .mobile-only { display: none; }

        .menu-overlay {
            position: absolute;
            left: 0;
            right: 0;
            top: 56px;
            background: var(--navy-light);
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 12px 0;
            display: none;
        }

        .menu-overlay.is-open { display: block; }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .menu-grid a {
            padding: 14px;
            border-radius: 14px;
            color: var(--primary-foreground);
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-weight: 600;
        }

        .menu-grid a:hover {
            background: rgba(255,255,255,0.06);
        }

        .hero {
            position: relative;
            padding: 72px 0 56px;
            overflow: hidden;
        }

        .hero__watermark {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            user-select: none;
            overflow: hidden;
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-size: clamp(7rem, 18vw, 18rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.08em;
            color: rgba(125, 137, 151, 0.12);
        }

        .hero__content {
            position: relative;
            z-index: 1;
            max-width: 640px;
        }

        .hero__title {
            margin: 0 0 14px;
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-size: clamp(2.4rem, 5.6vw, 4.5rem);
            line-height: .98;
            letter-spacing: -0.05em;
            font-weight: 700;
        }

        .hero__subtitle {
            margin: 0 0 28px;
            color: var(--muted-foreground);
            font-size: 1.1rem;
        }

        .searchbar {
            display: flex;
            align-items: center;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .searchbar input {
            flex: 1;
            height: 52px;
            padding: 0 16px;
            border: 0;
            background: transparent;
            color: var(--foreground);
            outline: none;
        }

        .searchbar input::placeholder {
            color: rgba(92, 104, 118, 0.7);
        }

        .searchbar button {
            height: 52px;
            border-radius: 0;
            padding-inline: 20px;
        }

        .category-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 34px;
        }

        .pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 16px;
            border-radius: 999px;
            background: var(--secondary);
            color: var(--muted-foreground);
            font-size: 0.95rem;
            font-weight: 500;
            transition: all .2s ease;
        }

        .pill:hover {
            background: var(--muted);
            color: var(--foreground);
        }

        .pill--active {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 22px;
        }

        .section-title {
            margin: 0;
            font-size: 1.7rem;
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .sortbar {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .95rem;
        }

        .sortbar label {
            color: var(--muted-foreground);
            font-weight: 500;
        }

        .sortbar select {
            height: 38px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--card);
            color: var(--foreground);
            padding: 0 12px;
            outline: none;
        }

        .empty-state {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 32px;
            text-align: center;
            color: var(--muted-foreground);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .shop-card{
            position:relative;
        }

        .shop-card::before{
            content:"";
            position:absolute;
            inset:-1px;
            border-radius:25px;
            background:linear-gradient(180deg, rgba(201,161,95,.18), rgba(201,161,95,.04), rgba(201,161,95,0));
            opacity:0;
            transition:opacity .45s ease;
            pointer-events:none;
        }

        .shop-card:hover::before{
            opacity:1;
        }

        .shop-card__inner{
            position:relative;
            display:flex;
            flex-direction:column;
            height:100%;
            overflow:hidden;
            background:#fff;
            border:1px solid rgba(15,23,42,.08);
            border-radius:24px;
            transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
        }

        .shop-card:hover .shop-card__inner{
            border-color:rgba(201,161,95,.28);
            box-shadow:0 18px 40px rgba(15,23,42,.12);
        }

        .shop-card__media{
            position:relative;
            display:block;
            aspect-ratio:1/1;
            overflow:hidden;
            background:var(--secondary);
        }

        .shop-card__media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .7s ease;
        }

        .shop-card:hover .shop-card__media img{
            transform:scale(1.01);
        }

        .shop-card__overlay{
            position:absolute;
            inset:0;
            background:linear-gradient(to top, rgba(15,23,42,.55), rgba(15,23,42,0) 45%);
            opacity:0;
            transition:opacity .45s ease;
            pointer-events:none;
        }

        .shop-card:hover .shop-card__overlay{
            opacity:1;
        }

        .shop-card__placeholder{
            position:absolute;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
            color:rgba(92,104,118,.16);
        }

        .shop-card__top{
            position:absolute;
            top:12px;
            left:12px;
            right:12px;
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:8px;
            z-index:2;
        }

        .shop-card__badge{
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(18,31,53,.86);
            color:var(--primary-foreground);
            backdrop-filter:blur(10px);
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:10px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:.12em;
        }

        .shop-card__sale{
            margin-left:auto;
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(220,38,38,.9);
            color:#fff;
            backdrop-filter:blur(10px);
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:10px;
            font-weight:700;
            letter-spacing:.04em;
        }

        .shop-card__quick-form{
            margin:0;
        }

        .shop-card__quick{
            position:absolute;
            right:12px;
            bottom:12px;
            width:40px;
            height:40px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:999px;
            border:0;
            background:rgba(255,255,255,.92);
            color:var(--foreground);
            box-shadow:0 10px 25px rgba(15,23,42,.18);
            backdrop-filter:blur(8px);
            transform:translateY(10px);
            opacity:0;
            transition:all .3s ease;
            z-index:2;
            cursor:pointer;
        }

        .shop-card:hover .shop-card__quick{
            transform:translateY(0);
            opacity:1;
        }

        .shop-card__body{
            display:flex;
            flex:1;
            flex-direction:column;
            gap:10px;
            padding:16px;
        }

        .shop-card__eyebrow{
            width:fit-content;
            color:var(--gold);
            font-size:10px;
            font-weight:600;
            letter-spacing:.18em;
            text-transform:uppercase;
        }

        .shop-card__title{
            margin:0;
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:.98rem;
            font-weight:700;
            line-height:1.3;
            letter-spacing:-.02em;
        }

        .shop-card__title a:hover{
            color:var(--foreground);
        }

        .shop-card__divider{
            width:32px;
            height:1px;
            background:rgba(201,161,95,.45);
        }

        .shop-card__priceRow{
            margin-top:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }

        .shop-card__priceGroup{
            display:flex;
            align-items:baseline;
            gap:6px;
            flex-wrap:wrap;
        }

        .shop-card__price{
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:1.25rem;
            font-weight:800;
            line-height:1;
            letter-spacing:-.04em;
            color:var(--foreground);
        }

        .shop-card__currency{
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:.78rem;
            font-weight:700;
            color:var(--muted-foreground);
        }

        .shop-card__oldPrice{
            padding:2px 6px;
            border-radius:6px;
            background:rgba(220,38,38,.08);
            color:var(--destructive);
            font-family:"Space Grotesk", system-ui, sans-serif;
            font-size:10px;
            font-weight:700;
            text-decoration:line-through;
            text-decoration-color:rgba(220,38,38,.35);
        }

        .shop-card__cta-form{
            margin:0;
        }

        .shop-card__cta{
            width:34px;
            height:34px;
            flex:0 0 34px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:999px;
            border:1px solid var(--border);
            background:var(--secondary);
            color:var(--muted-foreground);
            transition:all .25s ease;
            cursor:pointer;
        }

        .shop-card__cta:hover{
            border-color:var(--gold);
            background:var(--gold);
            color:var(--accent-foreground);
        }

        .load-more {
            display: flex;
            justify-content: center;
            padding: 42px 0 10px;
        }

        .footer {
            margin-top: 52px;
            padding: 56px 0 24px;
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .footer__grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr 1fr 1fr;
            gap: 36px;
            margin-bottom: 36px;
        }

        .footer__brand {
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .footer__muted {
            color: rgba(255,255,255,0.45);
            font-size: .95rem;
            max-width: 320px;
        }

        .footer__title {
            margin-bottom: 14px;
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--gold);
        }

        .footer__links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer__links a,
        .footer__social a {
            color: rgba(255,255,255,0.55);
            font-size: .95rem;
            transition: color .2s ease;
        }

        .footer__links a:hover,
        .footer__social a:hover {
            color: var(--gold);
        }

        .footer__social {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        .footer__bottom {
            padding-top: 18px;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: rgba(255,255,255,0.28);
            font-size: .82rem;
        }

        @media (max-width: 1100px) {
            .products-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

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

        @media (max-width: 820px) {
            .desktop-only { display: none; }
            .mobile-only { display: inline-flex; }

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

            .section-head {
                flex-direction: column;
                align-items: flex-start;
            }

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

            .footer__bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 560px) {
            .container {
                width: min(100% - 20px, 1400px);
            }

            .hero {
                padding: 52px 0 38px;
            }

            .searchbar {
                flex-direction: row;
            }

            .searchbar input {
                min-width: 0;
            }

            .products-grid {
                gap: 14px;
            }

            .shop-card__body {
                padding: 14px;
            }

            .shop-card__price {
                font-size: 1.1rem;
            }

            .footer__grid {
                grid-template-columns: 1fr;
                gap: 26px;
            }
        }