:root {
      --ink: #272025;
      --muted: #6e5966;
      --cream: #fff7de;
      --pink: #ffd6e9;
      --hot: #ff5aa8;
      --mint: #bff3dc;
      --lemon: #fff07a;
      --sky: #bfe7ff;
      --lilac: #d9c6ff;
      --peach: #ffc29b;
      --white: #fffdf7;
      --line: rgba(39, 32, 37, .18);
      --shadow: 0 18px 38px rgba(112, 61, 93, .18);
      --radius: 28px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--cream); font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    img { max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }

    .announcement { overflow: hidden; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .announcement-track { display: inline-flex; width: max-content; padding: 10px 0; animation: announce 30s linear infinite; }
    .announcement-track span { margin-right: 28px; }
    @keyframes announce { to { transform: translateX(-33.3333%); } }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 16px clamp(16px, 3vw, 44px); background: rgba(255, 247, 222, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
    .nav-links, .nav-actions { display: flex; align-items: center; gap: 10px; }
    .nav-actions { justify-content: flex-end; }
    .nav a { font-size: 13px; font-weight: 900; text-transform: uppercase; }
    .brand { display: inline-flex; align-items: center; justify-content: center; width: clamp(132px, 18vw, 210px); line-height: 1; }
    .brand img { display: block; width: 100%; height: auto; }
    .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
    .pill:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

    .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 1000; text-transform: uppercase; box-shadow: 4px 4px 0 var(--hot); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
    .button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hot); }
    .button.secondary { background: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--mint); }

    /* Page header */
    .page-head {
      display: grid;
      gap: 16px;
      padding: clamp(34px, 6vw, 68px) clamp(16px, 5vw, 78px) clamp(26px, 3vw, 40px);
      text-align: center;
      background:
        radial-gradient(circle at 14% 24%, rgba(255, 90, 168, .28) 0 16%, transparent 17%),
        radial-gradient(circle at 84% 20%, rgba(191, 243, 220, .7) 0 14%, transparent 15%),
        linear-gradient(135deg, #fff7de 0%, #ffd6e9 52%, #fff07a 100%);
      border-bottom: 1px solid var(--line);
    }
    .page-head .eyebrow { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mint); font-size: 13px; font-weight: 900; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
    .page-head h1 { margin: 0 auto; max-width: none; white-space: nowrap; font-size: clamp(22px, 7.6vw, 76px); line-height: .9; }
    .page-head p { margin: 0 auto; max-width: 56ch; color: var(--muted); font-size: clamp(16px, 2vw, 20px); font-weight: 700; line-height: 1.4; }

    .breadcrumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12px; font-weight: 900; text-transform: uppercase; color: var(--muted); }
    .breadcrumb a:hover { color: var(--ink); }
    .breadcrumb span { opacity: .5; }

    /* Filter strip */
    .filter-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 16px clamp(16px, 5vw, 78px); border-bottom: 1px solid var(--line); background: var(--white); }
    .filter-chip { flex: 0 0 auto; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 900; background: var(--cream); text-transform: uppercase; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
    .filter-chip:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
    .filter-chip.is-active { background: var(--ink); color: var(--white); }

    .section { padding: clamp(36px, 5vw, 64px) clamp(16px, 5vw, 78px); }
    .result-count { margin: 0 0 20px; font-size: 13px; font-weight: 900; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }

    .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .product-card { display: flex; flex-direction: column; min-height: 100%; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--white); overflow: hidden; box-shadow: 5px 5px 0 rgba(39, 32, 37, .16); transition: transform .18s ease, box-shadow .18s ease; }
    .product-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(39, 32, 37, .18); }

    .variant-carousel { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--card-bg, var(--pink)); overflow: hidden; }
    .variant-carousel:before { content: ""; position: absolute; inset: 18px; border: 2px dashed rgba(39, 32, 37, .22); border-radius: 999px; }
    .variant-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateX(18px) scale(.96); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }
    .variant-slide.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
    .variant-slide img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(10px 14px 0 rgba(39, 32, 37, .14)); }
    .card-badge { position: absolute; z-index: 5; left: 14px; top: 14px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lemon); font-size: 11px; font-weight: 1000; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); }
    .carousel-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 22px; font-weight: 1000; line-height: 1; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transform: translateY(-50%); }
    .carousel-arrow.prev { left: 12px; }
    .carousel-arrow.next { right: 12px; }
    .variant-dots { position: absolute; left: 50%; bottom: 14px; z-index: 5; display: flex; gap: 8px; transform: translateX(-50%); }
    .variant-dot { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--swatch, var(--white)); cursor: pointer; box-shadow: 2px 2px 0 rgba(39, 32, 37, .2); padding: 0; }
    .variant-dot.is-active { outline: 3px solid var(--white); transform: scale(1.12); }
    .variant-name { position: absolute; left: 16px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lemon); font-size: 11px; font-weight: 1000; text-transform: uppercase; }

    .product-info { display: grid; gap: 12px; padding: 18px; }
    .product-info h3 { margin: 0; font-size: 23px; line-height: 1; }
    .product-info p { min-height: 40px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.35; }
    .price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 1000; }
    .price-row .from { display: flex; align-items: baseline; gap: 6px; }
    .price-row .from small { font-size: 12px; font-weight: 900; color: var(--muted); }
    .price-row .colors { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; }
    .view-btn { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 1000; text-transform: uppercase; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
    .view-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--hot); }

    /* CTA band */
    .cta-band { display: grid; gap: 16px; justify-items: center; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(16px, 5vw, 78px); background: var(--ink); color: var(--white); }
    .cta-band h2 { color: var(--white); font-size: clamp(32px, 5vw, 68px); line-height: .9; max-width: 18ch; }
    .cta-band p { margin: 0; color: rgba(255, 253, 247, .75); font-weight: 800; max-width: 48ch; }

    .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 26px clamp(16px, 5vw, 78px); background: var(--ink); color: rgba(255, 253, 247, .7); border-top: 1px solid rgba(255, 253, 247, .2); font-size: 13px; font-weight: 800; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
    .footer-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .footer-group + .footer-group { margin-left: 10px; padding-left: 18px; border-left: 1px solid rgba(255, 253, 247, .22); }
    .footer a { color: rgba(255, 253, 247, .82); }
    .footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

    @media (max-width: 980px) {
      .nav { grid-template-columns: 1fr auto; }
      .nav-links { display: none; }
      .brand { justify-self: start; }
      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .filter-strip { gap: 8px; padding: 14px 14px; }
      .filter-chip { padding: 8px 13px; font-size: 12px; }
    }
    @media (max-width: 620px) {
      .nav-actions .pill:first-child { display: none; }
      .product-grid { grid-template-columns: 1fr; }
      .filter-strip { gap: 7px; padding: 12px 10px; }
      .filter-chip { padding: 6px 11px; font-size: 11px; letter-spacing: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .announcement-track { animation: none; } }