/* ===== Photoframers theme — page styles concatenated from Claude design ===== */

/* ----- home-classic.html ----- */
/* ——— Hero ——— */
  .hero {
    background: var(--cream-100);
    padding: var(--sp-16) 0 var(--sp-20);
    position: relative;
    overflow: hidden;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-20);
    align-items: center;
  }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 5.8vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: var(--forest-900);
    margin: var(--sp-6) 0 var(--sp-8);
  }
  .hero h1 em {
    font-style: italic;
    color: var(--forest-700);
  }
  .hero .lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-700);
    max-width: 480px;
    margin-bottom: var(--sp-8);
  }
  .hero .actions {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
  }
  .hero .trust {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-10);
    font-size: 13px;
    color: var(--ink-500);
  }
  .stars { color: #d8a847; letter-spacing: 1px; font-size: 14px; }

  /* Hero frame display - layered stack */
  .hero-art {
    position: relative;
    aspect-ratio: 5/6;
    display: grid;
    place-items: center;
  }
  .hero-frame-large {
    position: relative;
    width: 78%;
    aspect-ratio: 3/4;
    z-index: 2;
    transform: rotate(-2deg);
  }
  .hero-frame-back {
    position: absolute;
    width: 42%;
    aspect-ratio: 3/4;
    bottom: 8%;
    right: 4%;
    z-index: 1;
    transform: rotate(6deg);
  }
  .hero-frame-shelf {
    position: absolute;
    width: 30%;
    aspect-ratio: 4/3;
    top: 10%;
    left: 2%;
    z-index: 1;
    transform: rotate(-8deg);
  }
  .hero-tag {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 5;
    background: var(--brass-500);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: 8px 12px;
    border-radius: var(--r-full);
    text-transform: uppercase;
  }

  /* ——— Marquee USPs ——— */
  .marquee {
    background: var(--brass-500);
    color: #ffffff;
    padding: var(--sp-4) 0;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
  }
  .marquee-track {
    display: flex;
    gap: var(--sp-12);
    animation: scroll 60s linear infinite;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    align-items: center;
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: var(--sp-4); }
  .marquee-track .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.6); }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ——— Section base ——— */
  section { padding: var(--sp-24) 0; }
  section.tight { padding: var(--sp-16) 0; }
  .sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-12);
    gap: var(--sp-12);
  }
  .sec-head h2 {
    font-family: var(--font-display);
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    font-weight: 400;
    max-width: 720px;
  }
  .sec-head h2 em { font-style: italic; color: var(--forest-700); }
  .sec-head .sub {
    color: var(--ink-500);
    font-size: 15px;
    max-width: 360px;
    line-height: 1.55;
  }
  .sec-link {
    font-size: 13px;
    color: var(--forest-700);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--forest-300);
    padding-bottom: 2px;
    align-self: flex-end;
    white-space: nowrap;
  }
  .sec-link:hover { color: var(--forest-900); border-color: var(--forest-700); }

  /* ——— Category tiles ——— */
  .categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .cat-tile {
    background: var(--cream-100);
    aspect-ratio: 4/5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--sp-5);
    overflow: hidden;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
  }
  .cat-tile:hover { background: var(--cream-200); }
  .cat-tile .num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--forest-700);
    letter-spacing: 0.1em;
  }
  .cat-tile .cat-art {
    position: absolute;
    inset: 30% 15% 25% 15%;
    display: grid;
    place-items: center;
  }
  .cat-tile .pf-frame {
    width: 75%;
  }
  .cat-tile.tall .pf-frame { aspect-ratio: 3/4; }
  .cat-tile.wide .pf-frame { aspect-ratio: 4/3; }
  .cat-tile.square .pf-frame { aspect-ratio: 1; }
  .cat-tile h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: var(--forest-900);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
  }
  .cat-tile h3::after {
    content: "→";
    font-family: var(--font-sans);
    font-size: 18px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s, transform 0.2s;
  }
  .cat-tile:hover h3::after { opacity: 1; transform: translateX(0); }

  /* ——— USP grid ——— */
  .usps-section {
    background: var(--cream-50);
    padding: 0;
  }
  .usp-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ——— Featured products ——— */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8) var(--sp-6);
  }
  .product-card .pc-image .pf-frame {
    width: 70%;
    aspect-ratio: 3/4;
  }

  /* ——— Made-to-measure block ——— */
  .mtm {
    background: var(--brass-500);
    color: #ffffff;
    overflow: hidden;
  }
  .mtm-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 560px;
  }
  .mtm-text {
    padding: var(--sp-20) var(--sp-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .mtm-text .eyebrow { color: rgba(255,255,255,0.85) !important; }
  .mtm-text h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #ffffff;
    margin: var(--sp-5) 0 var(--sp-6);
  }
  .mtm-text h2 em { font-style: italic; color: #ffd84a !important; }
  .mtm-text p {
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    line-height: 1.6;
    max-width: 460px;
    margin-bottom: var(--sp-8);
  }
  .mtm-text .actions {
    display: flex;
    gap: var(--sp-3);
  }
  .mtm-text .btn-primary {
    background: #ffffff;
    color: var(--brass-600);
  }
  .mtm-text .btn-primary:hover {
    background: #ffd84a;
    color: var(--forest-900);
  }
  .mtm-text .btn-secondary {
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7);
  }
  .mtm-text .btn-secondary:hover {
    background: #ffffff;
    color: var(--brass-600);
    box-shadow: inset 0 0 0 1.5px #ffffff;
  }
  .mtm-spec {
    margin-top: var(--sp-12);
    display: flex;
    gap: var(--sp-12);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
  }
  .mtm-spec div { display: flex; flex-direction: column; gap: 4px; }
  .mtm-spec strong { font-family: var(--font-display); font-size: 28px; color: #ffffff; font-weight: 400; letter-spacing: -0.02em; }

  .mtm-art {
    background: var(--brass-600);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: var(--sp-12);
  }
  .mtm-art .pf-frame {
    width: 60%;
    aspect-ratio: 3/4;
    --mat-w: 50px;
  }
  .mtm-rulers {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .mtm-rulers::before,
  .mtm-rulers::after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,0.5);
  }
  .mtm-rulers::before {
    top: 20%; bottom: 20%; left: 8%;
    width: 1px;
  }
  .mtm-rulers::after {
    left: 20%; right: 20%; top: 8%;
    height: 1px;
  }
  .mtm-rulers .meas {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.1em;
  }
  .mtm-rulers .meas.h { top: 50%; left: 8%; transform: translate(-50%, -50%) rotate(-90deg); background: var(--brass-600); padding: 2px 6px; }
  .mtm-rulers .meas.v { top: 8%; left: 50%; transform: translate(-50%, -50%); background: var(--brass-600); padding: 2px 6px; }

  /* ——— Step-by-step ——— */
  .steps {
    background: var(--cream-100);
  }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    margin-top: var(--sp-12);
  }
  .step {
    background: var(--paper);
    padding: var(--sp-8);
    border-radius: var(--r-md);
    position: relative;
  }
  .step .num {
    font-family: var(--font-display);
    font-size: 64px;
    color: var(--forest-300);
    line-height: 1;
    letter-spacing: -0.04em;
    font-style: italic;
    font-weight: 400;
  }
  .step h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    margin: var(--sp-4) 0 var(--sp-3);
    color: var(--forest-900);
  }
  .step p {
    margin: 0;
    color: var(--ink-500);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ——— Story / Workshop ——— */
  .story-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--sp-16);
    align-items: center;
  }
  .story-img {
    aspect-ratio: 5/6;
    background: var(--cream-200);
    position: relative;
    overflow: hidden;
  }
  .story-img .placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .story-text h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.6vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: var(--forest-900);
    margin-bottom: var(--sp-6);
  }
  .story-text h2 em { font-style: italic; color: var(--forest-700); }
  .story-text p {
    color: var(--ink-700);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: var(--sp-4);
  }
  .story-text .signature {
    margin-top: var(--sp-8);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    color: var(--ink-500);
    font-size: 13px;
  }
  .story-text .sig-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    color: var(--forest-700);
  }

  /* ——— Reviews ——— */
  .reviews {
    background: var(--forest-50);
  }
  .reviews-head {
    text-align: center;
    margin-bottom: var(--sp-12);
  }
  .reviews-head h2 {
    font-family: var(--font-display);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--forest-900);
  }
  .reviews-head .trust-large {
    margin-top: var(--sp-4);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ink-700);
    font-size: 14px;
  }
  .reviews-head .trust-large .stars { font-size: 18px; }
  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .review {
    background: var(--paper);
    padding: var(--sp-6);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .review .quote {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.45;
    color: var(--forest-900);
    letter-spacing: -0.005em;
  }
  .review .meta {
    border-top: 1px solid var(--ink-100);
    padding-top: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ink-500);
  }
  .review .meta .name { font-weight: 600; color: var(--ink-700); }
  .review .stars { font-size: 13px; }

  /* ——— Editorial split (multi-aperture / framed prints) ——— */
  .editorial-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .edit-card {
    aspect-ratio: 4/3.2;
    position: relative;
    overflow: hidden;
    background: var(--cream-100);
    padding: var(--sp-10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
  }
  .edit-card.dark { background: var(--brass-500); color: #ffffff; }
  .edit-card .top { z-index: 2; }
  .edit-card .eyebrow { color: var(--brass-500); }
  .edit-card.dark .eyebrow { color: rgba(255,255,255,0.85) !important; }
  .edit-card h3 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin-top: var(--sp-3);
    max-width: 320px;
  }
  .edit-card h3 em { font-style: italic; }
  .edit-card.dark h3 em { color: #ffd84a !important; }
  .edit-card .cta {
    z-index: 2;
    font-size: 13px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    align-self: flex-start;
    opacity: 0.85;
  }
  .edit-card:hover .cta { opacity: 1; }
  .edit-card .art {
    position: absolute;
    right: -5%;
    bottom: -10%;
    width: 60%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }
  .edit-card .multi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 85%;
    aspect-ratio: 1;
  }
  .edit-card .multi-grid .pf-frame { width: 100%; aspect-ratio: 1; --mat-w: 14px; --frame-bevel: 8px; }

  /* ——— Journal ——— */
  .journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
  .article {
    text-decoration: none;
    color: inherit;
  }
  .article .img {
    aspect-ratio: 4/3;
    background: var(--cream-200);
    margin-bottom: var(--sp-5);
    position: relative;
    overflow: hidden;
  }
  .article .img .placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .article .cat {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--forest-700);
    text-transform: uppercase;
  }
  .article h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    margin: var(--sp-2) 0 var(--sp-3);
    color: var(--forest-900);
    letter-spacing: -0.01em;
  }
  .article .meta {
    font-size: 13px;
    color: var(--ink-500);
  }

  /* ——— Newsletter ——— */
  .newsletter {
    background: var(--cream-100);
    text-align: center;
    padding: var(--sp-20) 0;
  }
  .newsletter h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.2vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    max-width: 600px;
    margin: 0 auto var(--sp-4);
  }
  .newsletter h2 em { font-style: italic; color: var(--forest-700); }
  .newsletter p {
    color: var(--ink-500);
    margin: 0 auto var(--sp-8);
    max-width: 480px;
  }
  .newsletter form {
    display: flex;
    gap: var(--sp-2);
    max-width: 480px;
    margin: 0 auto;
  }
  .newsletter input[type="email"] {
    flex: 1;
    height: 52px;
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 0 var(--sp-5);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink-900);
  }
  .newsletter input[type="email"]:focus {
    outline: 0;
    border-color: var(--forest-700);
  }
  .newsletter .btn { height: 52px; }

  /* — placeholder lifestyle image — */
  .lifestyle-ph {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 30% 25%, var(--cream-200), transparent 60%),
      radial-gradient(circle at 70% 70%, var(--forest-100), transparent 55%),
      var(--cream-100);
  }
  .lifestyle-ph::after {
    content: attr(data-label);
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-400);
    text-transform: uppercase;
    background: rgba(255,255,255,0.7);
    padding: 6px 12px;
    border-radius: var(--r-full);
  }

  /* ——— Gallery Wall Sets ——— */
  .gallery-sets {
    padding: var(--sp-24) 0;
    background: var(--cream-50);
    border-top: 1px solid var(--ink-100);
  }
  .gallery-sets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
  .gallery-set {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .gallery-set:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.12);
  }
  .gallery-set .num-badge {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    background: var(--brass-500);
    color: white;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .gallery-set .arrangement {
    aspect-ratio: 4/3;
    display: grid;
    gap: 8px;
    padding: var(--sp-4);
  }
  .gallery-set.three .arrangement {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
  .gallery-set.four .arrangement {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .gallery-set.six .arrangement {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 6px;
  }
  .gallery-set .arrangement .pf-frame {
    width: 100%;
    aspect-ratio: 3/4;
    --mat-w: 8px;
    --frame-bevel: 4px;
  }
  .gallery-set .arrangement .pf-frame.wide { aspect-ratio: 4/3; }
  .gallery-set .arrangement .pf-frame.square { aspect-ratio: 1; }
  .gallery-set .meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
  }
  .gallery-set h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
  }
  .gallery-set .price {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--forest-900);
    font-weight: 500;
  }
  .gallery-set .desc {
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.55;
    margin: 0;
  }
  .gallery-set .swatches {
    display: flex;
    gap: 4px;
  }
  .gallery-set .swatches .sw {
    width: 14px; height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  }

  /* ——— Collections showcase ——— */
  .collections {
    padding: var(--sp-24) 0;
  }
  .collections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .collection {
    background: var(--cream-100);
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
  }
  .collection:hover { background: var(--cream-200); }
  .collection .img {
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: var(--sp-8);
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 60%),
      radial-gradient(circle at 70% 70%, rgba(0,0,0,0.04), transparent 50%);
  }
  .collection .img .pf-frame {
    width: 72%;
    aspect-ratio: 3/4;
    --mat-w: 28px;
    --frame-bevel: 12px;
  }
  .collection .info {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .collection .info .kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--brass-500);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .collection h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    margin-bottom: var(--sp-2);
  }
  .collection .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--ink-500);
    margin-top: var(--sp-3);
  }
  .collection .meta .price {
    font-family: var(--font-mono);
    color: var(--forest-900);
    font-weight: 500;
  }

  /* ——— Unique frames ——— */
  .unique {
    padding: var(--sp-24) 0;
    background: var(--cream-100);
  }
  .unique-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .unique-card {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    min-height: 440px;
  }
  .unique-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,0.14);
  }
  .unique-card.featured {
    background: var(--forest-900);
    color: var(--cream-50);
  }
  .unique-card .tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-500);
    background: rgba(46,108,246,0.08);
    padding: 4px 8px;
    border-radius: var(--r-full);
  }
  .unique-card.featured .tag {
    color: white;
    background: rgba(255,255,255,0.18);
  }
  .unique-card .art {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 200px;
  }
  .unique-card .art .pf-frame {
    height: 200px;
    width: auto;
    max-width: 75%;
  }
  /* Visual: Instax art container */
  .unique-card .art.instax {
    padding: var(--sp-2);
  }
  /* Visual: Instax = small square */
  .unique-card .art.instax .pf-frame {
    aspect-ratio: 1;
    --mat-w: 6px;
    --frame-bevel: 3px;
    height: 180px;
  }
  /* Vinyl = larger square frame containing record */
  .unique-card .art.vinyl .pf-frame {
    aspect-ratio: 1;
    --mat-w: 14px;
    --frame-bevel: 8px;
    height: 200px;
  }
  .unique-card .art.vinyl .pf-art {
    background:
      radial-gradient(circle at 50% 50%, #1a1a1a 0 4%, #5a5a5a 4% 6%, #1a1a1a 6% 38%, #5a5a5a 38% 40%, #1a1a1a 40% 50%);
  }
  /* Shirt = portrait frame with kit colours */
  .unique-card .art.shirt .pf-frame {
    aspect-ratio: 4/5;
    --mat-w: 18px;
    --frame-bevel: 10px;
    height: 220px;
  }
  .unique-card .art.shirt .pf-art {
    background: repeating-linear-gradient(90deg, #c4524a 0 14%, white 14% 18%, #c4524a 18% 32%);
  }
  /* Memorabilia = box frame */
  .unique-card .art.box .pf-frame {
    aspect-ratio: 4/5;
    --mat-w: 28px;
    --frame-bevel: 22px;
    height: 220px;
  }
  .unique-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin-bottom: 4px;
  }
  .unique-card.featured h3 { color: white; }
  .unique-card .desc {
    font-size: 12px;
    color: var(--ink-500);
    margin: 0;
    line-height: 1.4;
  }
  .unique-card.featured .desc { color: rgba(255,255,255,0.7); }
  .unique-card .price {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-700);
    margin-top: 8px;
  }
  .unique-card.featured .price { color: var(--brass-300); }

  /* Section background variant: ink with cobalt accents */
  section.dark-band {
    background: var(--forest-900);
    color: var(--cream-100);
  }
  section.dark-band .sec-head h2 { color: white; }
  section.dark-band .sec-head .sub { color: rgba(255,255,255,0.7); }
  section.dark-band .sec-link {
    color: white;
    border-color: rgba(255,255,255,0.4);
  }

  /* ═══════ MOBILE — home-classic specific ═══════ */
  @media (max-width: 1024px) {
    .hero-inner { gap: var(--sp-10); }
    .categories { grid-template-columns: repeat(3, 1fr); }
    .gallery-sets-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
    .gallery-sets-grid > :nth-child(3) { grid-column: 1 / -1; }
    .collections-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
    .unique-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
    .steps-grid { gap: var(--sp-4); }
    .reviews-grid { grid-template-columns: 1fr 1fr; }
    .journal-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .journal-grid > :nth-child(3) { grid-column: 1 / -1; max-width: 50%; }
  }

  @media (max-width: 768px) {
    /* Hero — stack vertical */
    .hero { padding: var(--sp-10) 0 var(--sp-16); }
    .hero-inner {
      grid-template-columns: 1fr;
      gap: var(--sp-10);
    }
    .hero h1 { font-size: clamp(40px, 9vw, 56px); margin: var(--sp-4) 0 var(--sp-5); }
    .hero .lede { font-size: 15px; }
    .hero .actions { flex-direction: column; align-items: stretch; }
    .hero .actions .btn { width: 100%; }
    .hero-art { aspect-ratio: 1; max-width: 480px; margin: 0 auto; }
    .hero-tag { font-size: 9px; padding: 6px 10px; }

    /* Marquee tighter */
    .marquee-track { font-size: 18px; gap: var(--sp-8); }

    /* Categories — 2 columns */
    .categories { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .cat-tile.wide { grid-column: 1 / -1; }
    .cat-tile h3 { font-size: 17px; }

    /* Bestsellers / Products — handled via tokens.css 2-col override */

    /* Made-to-measure */
    .mtm-inner { grid-template-columns: 1fr; }
    .mtm-text { padding: var(--sp-12) var(--sp-6); }
    .mtm-text h2 { font-size: clamp(32px, 7vw, 44px); }
    .mtm-text .actions { flex-direction: column; align-items: stretch; }
    .mtm-text .actions .btn { width: 100%; }
    .mtm-spec { flex-wrap: wrap; gap: var(--sp-6); }
    .mtm-spec strong { font-size: 22px; }
    .mtm-art { aspect-ratio: 4/3; padding: var(--sp-8); }

    /* Steps */
    .steps-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .step { padding: var(--sp-6); }
    .step .num { font-size: 48px; }

    /* Story */
    .story-inner {
      grid-template-columns: 1fr;
      gap: var(--sp-8);
    }
    .story-img { aspect-ratio: 4/3; }

    /* Reviews */
    .reviews-grid { grid-template-columns: 1fr; }
    .review { padding: var(--sp-5); }
    .review .quote { font-size: 16px; }

    /* Gallery sets */
    .gallery-sets-grid {
      grid-template-columns: 1fr;
      gap: var(--sp-4);
    }
    .gallery-sets-grid > :nth-child(3) { grid-column: auto; }

    /* Collections */
    .collections-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .collection .img { padding: var(--sp-5); }
    .collection h3 { font-size: 20px; }
    .collection .info { padding: var(--sp-4); }

    /* Unique frames */
    .unique-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .unique-card { min-height: 380px; padding: var(--sp-4); }
    .unique-card .art { min-height: 160px; }
    .unique-card .art .pf-frame { height: 160px; }
    .unique-card .art.shirt .pf-frame { height: 180px; }
    .unique-card .art.box .pf-frame { height: 180px; }
    .unique-card h3 { font-size: 18px; }

    /* Editorial split */
    .editorial-split { grid-template-columns: 1fr; gap: var(--sp-3); }
    .edit-card { aspect-ratio: 5/3; padding: var(--sp-8); }
    .edit-card h3 { font-size: 28px; }

    /* Journal */
    .journal-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .journal-grid > :nth-child(3) { grid-column: auto; max-width: none; }
    .article h3 { font-size: 18px; }

    /* Newsletter */
    .newsletter { padding: var(--sp-12) 0; }
    .newsletter form { flex-direction: column; gap: var(--sp-3); }
    .newsletter input[type="email"] { height: 48px; }
    .newsletter .btn { height: 48px; width: 100%; }
  }

  @media (max-width: 480px) {
    .categories { grid-template-columns: 1fr; }
    .cat-tile { aspect-ratio: 16/10; padding: var(--sp-4); }
    .cat-tile.tall, .cat-tile.square { aspect-ratio: 16/10; }
    .collections-grid { grid-template-columns: 1fr; }
    .unique-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .products-grid,
    .related-grid {
      grid-template-columns: 1fr !important;
    }
  }

/* ----- 404.html ----- */
.notfound {
    padding: var(--sp-20) 0 var(--sp-24);
    min-height: 70vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--cream-50);
  }
  .nf-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-16);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
  }
  .nf-text .num {
    font-family: var(--font-display);
    font-size: clamp(96px, 14vw, 200px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.85;
    color: var(--forest-900);
    margin-bottom: var(--sp-4);
  }
  .nf-text .num em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .nf-text h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--forest-900);
    margin: 0 0 var(--sp-3);
  }
  .nf-text h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .nf-text p {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 20px;
    color: var(--ink-700);
    line-height: 1.45;
    margin: 0 0 var(--sp-8);
    max-width: 460px;
  }
  .nf-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); }
  .nf-actions .btn-primary {
    height: 52px; padding: 0 var(--sp-8);
    background: var(--brass-500); color: white;
    border-radius: var(--r-md);
    font-size: 15px; font-weight: 500;
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .nf-actions .btn-primary:hover { background: var(--brass-600); }
  .nf-actions .btn-secondary {
    height: 52px; padding: 0 var(--sp-8);
    background: transparent; color: var(--forest-900);
    box-shadow: inset 0 0 0 1.5px var(--ink-200);
    border-radius: var(--r-md);
    font-size: 15px; font-weight: 500;
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .nf-actions .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--brass-500); color: var(--brass-500); }

  .quick-links {
    border-top: 1px solid var(--ink-200);
    padding-top: var(--sp-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-5);
    font-size: 14px;
  }
  .quick-links a {
    color: var(--ink-700);
    display: flex; align-items: center; gap: var(--sp-2);
  }
  .quick-links a:hover { color: var(--brass-500); }
  .quick-links a .ar { color: var(--ink-400); }

  .nf-art {
    position: relative;
    aspect-ratio: 4/5;
    display: grid;
    place-items: center;
  }
  /* Three frames stacked askew, with one mat empty (broken) */
  .nf-art .pf-frame { position: absolute; }
  .nf-art .pf-frame.a { width: 60%; aspect-ratio: 3/4; transform: rotate(-10deg) translate(-15%, -8%); z-index: 1; }
  .nf-art .pf-frame.b { width: 55%; aspect-ratio: 4/5; transform: rotate(6deg) translate(20%, 0%); z-index: 3; }
  .nf-art .pf-frame.c { width: 50%; aspect-ratio: 1; transform: rotate(14deg) translate(10%, 30%); z-index: 2; }
  .nf-art .pf-frame.b .pf-art {
    background: var(--cream-100);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 72px;
    color: var(--brass-500);
    font-weight: 600;
    letter-spacing: -0.04em;
  }
  .nf-art .pf-frame.b .pf-art::after {
    content: "?";
    font-style: italic;
    font-family: var(--font-italic);
  }

  @media (max-width: 1024px) { .nf-inner { grid-template-columns: 1fr; gap: var(--sp-10); text-align: center; } .nf-text p { margin-left: auto; margin-right: auto; } .nf-actions { justify-content: center; } .quick-links { max-width: 480px; margin: 0 auto; } .nf-art { max-width: 360px; margin: 0 auto; } }
  @media (max-width: 768px) {
    .notfound { padding: var(--sp-12) 0 var(--sp-16); }
    .nf-text .num { font-size: clamp(80px, 28vw, 140px); }
    .nf-text h1 { font-size: clamp(24px, 6.5vw, 32px); }
    .nf-text p { font-size: 17px; }
    .quick-links { grid-template-columns: 1fr; }
    .nf-actions .btn-primary, .nf-actions .btn-secondary { flex: 1; justify-content: center; }
  }

/* ----- about.html ----- */
.about-hero {
    background: var(--cream-100);
    padding: var(--sp-24) 0;
    position: relative;
    overflow: hidden;
  }
  .about-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
  }
  .about-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 6.4vw, 96px);
    line-height: 0.94;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--forest-900);
    margin: var(--sp-5) 0 var(--sp-6);
  }
  .about-hero h1 em { font-style: italic; color: var(--forest-700); }
  .about-hero p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-700);
    max-width: 540px;
    margin: 0;
  }
  .about-hero .img {
    aspect-ratio: 4/5;
    background:
      radial-gradient(circle at 30% 30%, var(--cream-200) 0%, transparent 60%),
      radial-gradient(circle at 70% 70%, var(--forest-100) 0%, transparent 50%),
      var(--cream-100);
    position: relative;
    overflow: hidden;
  }
  .about-hero .img-label {
    position: absolute;
    bottom: var(--sp-5);
    left: var(--sp-5);
    background: var(--paper);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-500);
    text-transform: uppercase;
    border-radius: var(--r-sm);
  }
  .about-hero .img-label strong {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--forest-900);
    margin-bottom: 2px;
  }

  /* Stats band */
  .stats-band {
    background: var(--brass-500);
    color: #ffffff;
    padding: var(--sp-12) 0;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-8);
  }
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .stat-item strong {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: -0.025em;
  }
  .stat-item strong em { font-style: italic; color: #ffd84a !important; }
  .stat-item .l {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
  }

  /* Story article */
  .story {
    padding: var(--sp-24) 0;
  }
  .story-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--sp-16);
    max-width: var(--container-narrow);
    margin: 0 auto;
  }
  .story-meta {
    position: sticky;
    top: var(--sp-5);
    align-self: start;
  }
  .story-meta .kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--brass-600);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
  }
  .story-meta h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.6vw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--forest-900);
  }
  .story-meta h2 em { font-style: italic; }
  .story-body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-700);
  }
  .story-body p { margin: 0 0 var(--sp-5); }
  .story-body p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 0.95;
    float: left;
    padding: 6px 10px 0 0;
    color: var(--forest-700);
  }
  .story-body .pull {
    font-family: var(--font-display);
    font-size: 28px;
    font-style: italic;
    line-height: 1.4;
    color: var(--forest-700);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
    padding: var(--sp-6) 0;
    margin: var(--sp-10) 0;
  }
  .figure {
    aspect-ratio: 16/10;
    background: var(--cream-200);
    margin: var(--sp-6) 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
  }
  .figure .placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .fig-cap {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-500);
    margin-top: calc(-1 * var(--sp-3));
    margin-bottom: var(--sp-6);
  }

  /* Team */
  .team {
    background: var(--cream-100);
    padding: var(--sp-24) 0;
  }
  .team h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    text-align: center;
    margin-bottom: var(--sp-3);
  }
  .team h2 em { font-style: italic; }
  .team .sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-500);
    text-align: center;
    margin-bottom: var(--sp-16);
  }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-10);
  }
  .team-card {
    text-align: left;
  }
  .team-card .img {
    aspect-ratio: 4/5;
    background:
      radial-gradient(circle at 50% 40%, var(--cream-300) 0%, transparent 60%),
      var(--cream-200);
    margin-bottom: var(--sp-5);
    position: relative;
  }
  .team-card .img::after {
    content: "Portrait · 4:5";
    position: absolute;
    bottom: var(--sp-4); left: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-500);
    background: rgba(255,255,255,0.7);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
  }
  .team-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--forest-900);
    margin-bottom: 2px;
  }
  .team-card h3 em { font-style: italic; }
  .team-card .role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--brass-600);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
  }
  .team-card p {
    font-size: 14px;
    color: var(--ink-500);
    line-height: 1.65;
    margin: 0;
  }

  /* Values */
  .values {
    padding: var(--sp-24) 0;
    background: var(--paper-warm);
  }
  .values h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    text-align: center;
    margin-bottom: var(--sp-12);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .values h2 em { font-style: italic; }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
  .value-card {
    background: var(--paper);
    padding: var(--sp-8);
    border-radius: var(--r-md);
  }
  .value-card .num {
    font-family: var(--font-display);
    font-size: 56px;
    font-style: italic;
    color: var(--forest-300);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .value-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--forest-900);
    margin: var(--sp-3) 0 var(--sp-3);
  }
  .value-card p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-700);
    margin: 0;
  }

  /* Workshop strip */
  .workshop-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 320px;
  }
  .workshop-strip > div {
    position: relative;
    overflow: hidden;
  }
  .workshop-strip > div:nth-child(1) {
    background:
      radial-gradient(circle at 30% 40%, var(--cream-300), transparent 60%),
      var(--cream-200);
  }
  .workshop-strip > div:nth-child(2) {
    background:
      radial-gradient(circle at 60% 50%, var(--forest-500), transparent 60%),
      var(--forest-800);
  }
  .workshop-strip > div:nth-child(3) {
    background:
      radial-gradient(circle at 50% 40%, var(--brass-300), transparent 60%),
      var(--cream-200);
  }
  .workshop-strip > div:nth-child(4) {
    background:
      radial-gradient(circle at 40% 50%, var(--forest-300), transparent 60%),
      var(--cream-100);
  }
  .workshop-strip .lbl {
    position: absolute;
    bottom: var(--sp-4); left: var(--sp-4);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--forest-900);
    background: rgba(255,255,255,0.8);
    padding: 4px 10px;
    border-radius: var(--r-sm);
  }
  .workshop-strip > div:nth-child(2) .lbl {
    color: var(--cream-50);
    background: rgba(15,33,24,0.6);
  }
  .workshop-strip .num {
    position: absolute;
    top: var(--sp-4); right: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-500);
    text-transform: uppercase;
  }
  .workshop-strip > div:nth-child(2) .num { color: var(--brass-300); }

  /* CTA */
  .cta-block {
    background: var(--brass-500);
    color: #ffffff;
    padding: var(--sp-24) 0;
    text-align: center;
  }
  .cta-block h2 {
    font-family: var(--font-display);
    font-size: clamp(44px, 4.8vw, 68px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: #ffffff;
    max-width: 760px;
    margin: 0 auto var(--sp-6);
  }
  .cta-block h2 em { font-style: italic; color: #ffd84a !important; }
  .cta-block p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    max-width: 540px;
    margin: 0 auto var(--sp-10);
    line-height: 1.5;
  }
  .cta-block .actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
  }
  .cta-block .actions .btn-primary {
    background: #ffffff;
    color: var(--brass-600);
  }
  .cta-block .actions .btn-primary:hover {
    background: #ffd84a;
    color: var(--forest-900);
  }
  .cta-block .actions .btn-secondary {
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7);
  }
  .cta-block .actions .btn-secondary:hover {
    background: #ffffff;
    color: var(--brass-600);
    box-shadow: inset 0 0 0 1.5px #ffffff;
  }

  /* ═══════ MOBILE — about.html ═══════ */
  @media (max-width: 1024px) {
    .about-hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .story-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .story-meta { position: static; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .workshop-strip { grid-template-columns: 1fr 1fr; height: auto; aspect-ratio: 2/1; }
  }

  @media (max-width: 768px) {
    .about-hero { padding: var(--sp-12) 0; }
    .about-hero h1 { font-size: clamp(40px, 9vw, 64px); }
    .about-hero p { font-size: 16px; }
    .about-hero .img { aspect-ratio: 4/3; }
    .stats-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
    }
    .stat-item strong { font-size: 36px; }
    .story { padding: var(--sp-12) 0; }
    .story-body { font-size: 15px; }
    .story-body p:first-child::first-letter { font-size: 44px; }
    .story-body .pull { font-size: 20px; padding: var(--sp-4) 0; margin: var(--sp-6) 0; }
    .team-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .team-card .img { aspect-ratio: 1; }
    .team-card h3 { font-size: 22px; }
    .values-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .value-card { padding: var(--sp-6); }
    .value-card .num { font-size: 36px; }
    .workshop-strip { grid-template-columns: 1fr 1fr; height: 360px; aspect-ratio: auto; }
    .cta-block { padding: var(--sp-12) 0; }
    .cta-block .actions { flex-direction: column; align-items: stretch; }
    .cta-block .actions .btn { width: 100%; }
  }

  @media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid .stat-item:nth-child(5) { grid-column: 1 / -1; }
    .workshop-strip { grid-template-columns: 1fr; }
  }

/* ----- help.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  .help-hero { padding: var(--sp-16) 0 var(--sp-10); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); text-align: center; }
  .help-hero h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; font-weight: 600; color: var(--forest-900); margin: 0 auto var(--sp-4); max-width: 720px; }
  .help-hero h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .help-hero .strap { font-family: var(--font-italic); font-style: italic; font-size: 20px; color: var(--ink-700); max-width: 560px; margin: 0 auto; }
  .help-search {
    max-width: 480px; margin: var(--sp-8) auto 0;
    position: relative;
  }
  .help-search input {
    width: 100%; height: 56px;
    background: var(--paper); border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 0 var(--sp-5) 0 var(--sp-12);
    font-family: inherit; font-size: 16px;
  }
  .help-search .ic {
    position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
    color: var(--ink-400); pointer-events: none;
  }

  /* Layout */
  .help-main { padding: var(--sp-12) 0 var(--sp-20); }
  .help-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-12); align-items: start; }

  /* Sidebar */
  .help-nav { position: sticky; top: var(--sp-5); }
  .help-nav .group { margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--ink-100); }
  .help-nav .group:last-child { border: 0; }
  .help-nav h4 {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brass-500); margin: 0 0 var(--sp-3);
  }
  .help-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .help-nav a {
    display: block;
    padding: 8px var(--sp-3);
    border-radius: var(--r-md);
    color: var(--ink-700);
    font-size: 14px;
  }
  .help-nav a.active { background: var(--brass-500); color: white; font-weight: 500; }
  .help-nav a:not(.active):hover { background: var(--cream-100); color: var(--forest-900); }

  /* Content sections */
  .help-content { max-width: 760px; }
  .help-section { margin-bottom: var(--sp-16); scroll-margin-top: var(--sp-6); }
  .help-section h2 {
    font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px);
    font-weight: 600; letter-spacing: -0.025em;
    color: var(--forest-900); margin: 0 0 var(--sp-2);
  }
  .help-section h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .help-section .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--brass-500); text-transform: uppercase; margin-bottom: var(--sp-3); }
  .help-section p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 var(--sp-4); }
  .help-section p strong { color: var(--forest-900); font-weight: 600; }
  .help-section a { color: var(--brass-500); text-decoration: underline; text-underline-offset: 2px; }

  /* Delivery options table */
  .delivery-table {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    overflow: hidden;
    margin: var(--sp-6) 0;
  }
  .delivery-table-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 80px;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    align-items: center;
    border-bottom: 1px solid var(--ink-100);
  }
  .delivery-table-row:last-child { border-bottom: 0; }
  .delivery-table-row.head {
    background: var(--cream-100);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .delivery-table-row .name { font-weight: 600; color: var(--forest-900); font-size: 14px; }
  .delivery-table-row .carrier { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
  .delivery-table-row .lead { font-size: 13px; color: var(--ink-700); }
  .delivery-table-row .price { font-family: var(--font-mono); font-size: 13px; color: var(--forest-900); font-weight: 500; }
  .delivery-table-row .price.free { color: var(--brass-500); font-weight: 600; letter-spacing: 0.04em; }

  /* FAQ accordion */
  .faq-item {
    border-bottom: 1px solid var(--ink-100);
  }
  .faq-q {
    padding: var(--sp-5) 0;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.015em;
    gap: var(--sp-4);
  }
  .faq-q .toggle {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cream-100);
    display: grid; place-items: center;
    flex-shrink: 0;
    color: var(--brass-500);
    transition: transform 0.2s;
  }
  .faq-item.open .toggle { transform: rotate(45deg); background: var(--brass-500); color: white; }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: var(--ink-700);
    font-size: 15px;
    line-height: 1.65;
  }
  .faq-a-inner { padding: 0 0 var(--sp-5); max-width: 640px; }
  .faq-item.open .faq-a { max-height: 600px; }

  /* Contact card */
  .contact-card {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    margin-top: var(--sp-12);
    text-align: center;
  }
  .contact-card h3 {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-3);
  }
  .contact-card h3 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .contact-card p { font-size: 14px; color: var(--ink-700); margin: 0 0 var(--sp-5); }
  .contact-card .channels { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
  .contact-card .channel {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    display: flex; align-items: center; gap: var(--sp-3);
    text-decoration: none; color: inherit;
    border: 1px solid var(--ink-100);
    transition: border-color 0.15s;
  }
  .contact-card .channel:hover { border-color: var(--brass-500); }
  .contact-card .channel .ic {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brass-500); color: white;
    display: grid; place-items: center;
  }
  .contact-card .channel .info .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-500); text-transform: uppercase; margin-bottom: 2px; }
  .contact-card .channel .info .v { font-size: 14px; font-weight: 600; color: var(--forest-900); }

  /* Mobile */
  @media (max-width: 1024px) { .help-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .help-nav { position: static; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); } .help-nav .group { padding-bottom: 0; } }
  @media (max-width: 768px) {
    .help-hero { padding: var(--sp-10) 0 var(--sp-6); }
    .help-hero h1 { font-size: clamp(32px, 9vw, 44px); }
    .help-hero .strap { font-size: 17px; }
    .help-nav { grid-template-columns: 1fr; }
    .delivery-table-row { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .delivery-table-row.head { display: none; }
    .delivery-table-row .price { grid-column: 2; text-align: right; }
    .delivery-table-row .carrier { display: block; }
    .help-section h2 { font-size: 26px; }
    .faq-q { font-size: 16px; }
    .contact-card { padding: var(--sp-5); }
    .contact-card .channels { flex-direction: column; }
  }

/* ----- legal.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }
  .legal-hero { padding: var(--sp-12) 0 var(--sp-8); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .legal-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.025em; font-weight: 600; color: var(--forest-900); margin: 0 0 var(--sp-3); }
  .legal-hero h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .legal-hero .strap { color: var(--ink-500); font-size: 14px; margin: 0; }
  .legal-tabs { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
  .legal-tabs button {
    padding: 10px var(--sp-5);
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    color: var(--ink-700);
  }
  .legal-tabs button.active {
    background: var(--brass-500); border-color: var(--brass-500); color: white;
  }

  .legal-main { padding: var(--sp-12) 0 var(--sp-20); }
  .legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-10); align-items: start; }
  .legal-toc { position: sticky; top: var(--sp-5); }
  .legal-toc h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--brass-500); text-transform: uppercase; margin: 0 0 var(--sp-3); }
  .legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
  .legal-toc li a { display: block; padding: 8px var(--sp-3); font-size: 13px; color: var(--ink-700); border-radius: var(--r-md); }
  .legal-toc li a:hover { background: var(--cream-100); color: var(--forest-900); }
  .legal-toc li a.active { background: var(--brass-500); color: white; font-weight: 500; }

  .legal-body { max-width: 720px; font-size: 15px; line-height: 1.7; color: var(--ink-700); }
  .legal-body .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--ink-200); }
  .legal-body .meta strong { color: var(--forest-900); font-weight: 600; }
  .legal-body h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-900); margin: var(--sp-12) 0 var(--sp-3); scroll-margin-top: var(--sp-5); }
  .legal-body h2:first-child { margin-top: 0; }
  .legal-body h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .legal-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--forest-900); letter-spacing: -0.015em; margin: var(--sp-8) 0 var(--sp-3); }
  .legal-body p { margin: 0 0 var(--sp-4); }
  .legal-body strong { color: var(--forest-900); font-weight: 600; }
  .legal-body a { color: var(--brass-500); text-decoration: underline; text-underline-offset: 2px; }
  .legal-body ul, .legal-body ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
  .legal-body li { margin-bottom: var(--sp-2); }
  .legal-body .callout { background: var(--cream-100); border-left: 3px solid var(--brass-500); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 14px; }
  .legal-body table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 13px; }
  .legal-body th { text-align: left; padding: 10px; background: var(--cream-100); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
  .legal-body td { padding: 10px; border-bottom: 1px solid var(--ink-100); }

  @media (max-width: 1024px) { .legal-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .legal-toc { position: static; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); } .legal-toc ul { display: flex; flex-wrap: wrap; gap: 4px; } }
  @media (max-width: 768px) {
    .legal-tabs { overflow-x: auto; scrollbar-width: none; }
    .legal-tabs button { white-space: nowrap; }
    .legal-toc { grid-template-columns: 1fr; }
    .legal-body h2 { font-size: 22px; }
  }

/* ----- journal-article.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  .article-hero { padding: var(--sp-16) 0 var(--sp-10); text-align: center; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .article-meta-top { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--brass-500); text-transform: uppercase; margin-bottom: var(--sp-6); }
  .article-meta-top .dot { width: 4px; height: 4px; background: var(--ink-300); border-radius: 50%; }
  .article-hero h1 { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.03em; font-weight: 600; color: var(--forest-900); margin: 0 auto var(--sp-6); max-width: 880px; }
  .article-hero h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .article-hero .lede { font-family: var(--font-italic); font-style: italic; font-size: 22px; color: var(--ink-700); max-width: 640px; margin: 0 auto var(--sp-8); line-height: 1.45; }
  .author-row { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--ink-500); }
  .author-row .av { width: 36px; height: 36px; border-radius: 50%; background: var(--brass-500); color: white; display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
  .author-row strong { color: var(--forest-900); font-weight: 600; }

  .hero-image { aspect-ratio: 16/8; background: radial-gradient(circle at 30% 40%, var(--cream-300), transparent 60%), var(--cream-200); margin: var(--sp-10) auto 0; max-width: 1080px; border-radius: var(--r-md); position: relative; overflow: hidden; }
  .hero-image .lbl { position: absolute; bottom: var(--sp-4); left: var(--sp-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-500); background: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: var(--r-sm); text-transform: uppercase; }

  /* Article body */
  .article-body { padding: var(--sp-16) 0; }
  .article-grid { display: grid; grid-template-columns: 200px 1fr 200px; gap: var(--sp-10); max-width: 1080px; margin: 0 auto; }
  .sidebar-left, .sidebar-right { position: sticky; top: var(--sp-5); align-self: start; }
  .sidebar-left .lbl, .sidebar-right .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-500); text-transform: uppercase; margin-bottom: var(--sp-3); }
  .toc { display: grid; gap: var(--sp-2); }
  .toc a { font-size: 13px; color: var(--ink-700); padding: 6px 0; border-left: 2px solid var(--ink-100); padding-left: var(--sp-3); transition: color 0.12s, border-color 0.12s; }
  .toc a:hover, .toc a.active { color: var(--brass-500); border-color: var(--brass-500); font-weight: 500; }
  .share { display: grid; gap: var(--sp-2); }
  .share a { width: 36px; height: 36px; border-radius: 50%; background: var(--cream-100); display: grid; place-items: center; color: var(--ink-700); transition: background 0.12s, color 0.12s; }
  .share a:hover { background: var(--brass-500); color: white; }

  .article-content { font-size: 18px; line-height: 1.75; color: var(--ink-700); max-width: 680px; }
  .article-content > p:first-of-type::first-letter { font-family: var(--font-display); font-size: 72px; line-height: 0.9; float: left; padding: 8px 14px 0 0; color: var(--brass-500); font-weight: 600; }
  .article-content p { margin: 0 0 var(--sp-5); }
  .article-content h2 { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-900); margin: var(--sp-12) 0 var(--sp-5); }
  .article-content h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .article-content blockquote { font-family: var(--font-italic); font-style: italic; font-size: 28px; line-height: 1.4; color: var(--brass-500); border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); padding: var(--sp-6) 0; margin: var(--sp-8) 0; text-align: center; }
  .article-content blockquote cite { display: block; font-style: normal; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-top: var(--sp-3); font-weight: 500; }
  .article-content .figure { aspect-ratio: 16/10; background: var(--cream-100); margin: var(--sp-8) 0 var(--sp-4); border-radius: var(--r-md); position: relative; }
  .article-content .figcap { font-family: var(--font-italic); font-style: italic; font-size: 14px; color: var(--ink-500); margin-bottom: var(--sp-8); padding-left: var(--sp-3); border-left: 2px solid var(--brass-500); }
  .article-content ul { margin: var(--sp-4) 0 var(--sp-6); padding-left: var(--sp-6); }
  .article-content li { margin-bottom: var(--sp-2); }
  .article-content a { color: var(--brass-500); text-decoration: underline; text-underline-offset: 3px; }

  .callout { background: var(--cream-100); padding: var(--sp-6); border-radius: var(--r-md); margin: var(--sp-6) 0; font-size: 16px; line-height: 1.65; color: var(--ink-700); border-left: 3px solid var(--brass-500); }
  .callout strong { color: var(--brass-500); font-weight: 600; }

  /* Author bio + next articles */
  .article-foot { background: var(--cream-50); padding: var(--sp-16) 0; border-top: 1px solid var(--ink-100); }
  .author-bio { max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-5); align-items: center; padding-bottom: var(--sp-10); border-bottom: 1px solid var(--ink-200); margin-bottom: var(--sp-10); }
  .author-bio .av { width: 80px; height: 80px; border-radius: 50%; background: var(--brass-500); color: white; display: grid; place-items: center; font-family: var(--font-display); font-size: 32px; font-weight: 600; }
  .author-bio h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--forest-900); margin-bottom: 4px; }
  .author-bio .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--brass-500); text-transform: uppercase; margin-bottom: var(--sp-3); }
  .author-bio p { font-size: 14px; color: var(--ink-500); line-height: 1.55; margin: 0; }

  .next-articles h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--forest-900); margin: 0 0 var(--sp-6); text-align: center; }
  .next-articles-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-6); max-width: 1080px; margin: 0 auto; }
  .next-article { text-decoration: none; color: inherit; }
  .next-article .img { aspect-ratio: 4/3; background: var(--cream-200); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
  .next-article .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--brass-500); text-transform: uppercase; margin-bottom: 6px; }
  .next-article h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--forest-900); margin-bottom: 4px; line-height: 1.25; }
  .next-article .meta { font-size: 12px; color: var(--ink-500); }

  @media (max-width: 1024px) { .article-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .sidebar-left, .sidebar-right { position: static; } .share { display: flex; } .next-articles-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 768px) {
    .article-hero { padding: var(--sp-10) 0 var(--sp-6); }
    .article-hero h1 { font-size: clamp(32px, 9vw, 48px); }
    .article-hero .lede { font-size: 18px; }
    .article-content { font-size: 16px; }
    .article-content > p:first-of-type::first-letter { font-size: 52px; }
    .article-content h2 { font-size: 24px; }
    .article-content blockquote { font-size: 22px; }
    .next-articles-grid { grid-template-columns: 1fr; }
    .author-bio { grid-template-columns: 1fr; text-align: center; }
    .author-bio .av { margin: 0 auto; }
  }

/* ----- shop.html ----- */
/* ——— Breadcrumb ——— */
  .breadcrumb {
    padding: var(--sp-6) 0;
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
    color: var(--ink-500);
  }
  .breadcrumb a:hover { color: var(--forest-700); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  /* ——— Page header ——— */
  .page-hero {
    background: var(--cream-100);
    padding: var(--sp-16) 0 var(--sp-12);
  }
  .page-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-12);
    align-items: end;
  }
  .page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: var(--forest-900);
    margin: var(--sp-3) 0 var(--sp-5);
  }
  .page-hero h1 em { font-style: italic; }
  .page-hero p {
    font-size: 16px;
    color: var(--ink-700);
    max-width: 540px;
    line-height: 1.6;
    margin: 0;
  }
  .page-hero-counts {
    display: flex;
    gap: var(--sp-10);
    border-top: 1px solid var(--ink-200);
    padding-top: var(--sp-6);
  }
  .page-hero-counts > div { display: flex; flex-direction: column; gap: 2px; }
  .page-hero-counts strong {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--forest-700);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .page-hero-counts span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-500);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* ——— Quick filter chips ——— */
  .quick-filters {
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
    padding: var(--sp-5) 0;
  }
  .quick-filters .row {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quick-filters .row::-webkit-scrollbar { display: none; }
  .chip {
    flex-shrink: 0;
    height: 36px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-full);
    background: var(--paper);
    border: 1px solid var(--ink-200);
    font-size: 13px;
    color: var(--ink-700);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .chip:hover { border-color: var(--forest-300); color: var(--forest-700); }
  .chip.active {
    background: var(--forest-700);
    color: var(--cream-50);
    border-color: var(--forest-700);
  }
  .chip .x {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    font-size: 11px;
    line-height: 1;
    display: grid; place-items: center;
  }

  /* ——— Listing layout ——— */
  .listing {
    padding: var(--sp-12) 0 var(--sp-24);
  }
  .listing-grid {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: var(--sp-12);
    align-items: start;
  }

  /* — Sidebar filters — */
  .sidebar {
    position: sticky;
    top: var(--sp-5);
  }
  .filter-block {
    border-bottom: 1px solid var(--ink-100);
    padding: var(--sp-5) 0;
  }
  .filter-block:first-child { padding-top: 0; }
  .filter-block h4 {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--forest-900);
  }
  .filter-block h4 .caret {
    width: 8px; height: 8px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
  }
  .filter-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .filter-block li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 14px;
    cursor: pointer;
    color: var(--ink-700);
  }
  .filter-block li:hover { color: var(--forest-900); }
  .filter-block li .cb {
    width: 16px; height: 16px;
    border: 1.4px solid var(--ink-300);
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--paper);
    position: relative;
  }
  .filter-block li.checked .cb {
    background: var(--forest-700);
    border-color: var(--forest-700);
  }
  .filter-block li.checked .cb::after {
    content: "";
    position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid var(--cream-50);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }
  .filter-block li .ct {
    margin-left: auto;
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .filter-block .swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .filter-block .swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 2px solid var(--paper);
    box-shadow: inset 0 0 0 1px var(--ink-200);
  }
  .filter-block .swatch.active { box-shadow: inset 0 0 0 1.5px var(--forest-700); }
  .filter-block .price-range {
    margin-top: var(--sp-3);
  }
  .filter-block .price-range .track {
    height: 4px;
    background: var(--ink-100);
    border-radius: 2px;
    position: relative;
    margin-bottom: var(--sp-3);
  }
  .filter-block .price-range .fill {
    position: absolute;
    left: 20%; right: 30%;
    top: 0; bottom: 0;
    background: var(--forest-700);
    border-radius: 2px;
  }
  .filter-block .price-range .knob {
    position: absolute;
    width: 16px; height: 16px;
    background: var(--paper);
    border: 2px solid var(--forest-700);
    border-radius: 50%;
    top: -6px;
  }
  .filter-block .price-range .knob.left { left: calc(20% - 8px); }
  .filter-block .price-range .knob.right { right: calc(30% - 8px); }
  .filter-block .price-range .vals {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-700);
  }

  /* — Toolbar — */
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink-100);
  }
  .toolbar-left { display: flex; gap: var(--sp-4); align-items: center; font-size: 13px; color: var(--ink-500); }
  .toolbar-right { display: flex; gap: var(--sp-4); align-items: center; }
  .sort {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-md);
    font-size: 13px;
    cursor: pointer;
  }
  .sort:hover { border-color: var(--forest-300); }
  .view-toggle {
    display: flex;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
  }
  .view-toggle button {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    color: var(--ink-500);
  }
  .view-toggle button.active {
    background: var(--forest-700);
    color: var(--cream-50);
  }

  /* — Product grid — */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-10) var(--sp-6);
  }
  .product-card .pc-image {
    background: var(--cream-100);
  }
  .product-card .pc-image .pf-frame {
    width: 60%;
    aspect-ratio: 3/4;
  }
  .product-card .quick-actions {
    position: absolute;
    bottom: var(--sp-4);
    left: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    gap: var(--sp-2);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
  }
  .product-card:hover .quick-actions {
    opacity: 1;
    transform: translateY(0);
  }
  .quick-actions .btn { flex: 1; height: 40px; font-size: 13px; padding: 0 var(--sp-4); }
  .quick-actions .icon-wrap {
    width: 40px; height: 40px;
    background: var(--paper);
    border-radius: var(--r-md);
    display: grid; place-items: center;
    color: var(--forest-700);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .pc-swatches {
    display: flex;
    gap: 4px;
    margin-top: var(--sp-2);
  }
  .pc-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  }

  /* — Banner break in middle of listing — */
  .grid-banner {
    grid-column: span 3;
    background: var(--forest-700);
    color: var(--cream-50);
    padding: var(--sp-12) var(--sp-16);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    margin: var(--sp-4) 0;
  }
  .grid-banner h3 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-3);
  }
  .grid-banner h3 em { font-style: italic; color: var(--brass-300); }
  .grid-banner p {
    color: var(--cream-200);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 var(--sp-5);
  }
  .grid-banner .btn-primary {
    background: var(--cream-50);
    color: var(--forest-800);
  }
  .grid-banner .art {
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
  }
  .grid-banner .pf-frame {
    width: 70%;
    aspect-ratio: 3/4;
    --mat-w: 30px;
  }

  /* — Pagination — */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-16);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--ink-100);
  }
  .pagination button, .pagination .pg {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-700);
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .pagination .pg:hover { background: var(--forest-50); color: var(--forest-700); cursor: pointer; }
  .pagination .pg.active { background: var(--forest-700); color: var(--cream-50); }
  .pagination .gap { color: var(--ink-400); padding: 0 var(--sp-2); }
  .pagination .nav { font-family: var(--font-sans); }

  /* ═══════ MOBILE — shop.html ═══════ */
  @media (max-width: 1024px) {
    .page-hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .listing-grid { grid-template-columns: 220px 1fr; gap: var(--sp-6); }
    .product-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 768px) {
    /* Page hero */
    .page-hero { padding: var(--sp-10) 0 var(--sp-8); }
    .page-hero h1 { font-size: clamp(36px, 9vw, 48px); }
    .page-hero p { font-size: 14px; }
    .page-hero-counts {
      gap: var(--sp-6);
      padding-top: var(--sp-4);
    }
    .page-hero-counts strong { font-size: 24px; }
    .page-hero-counts span { font-size: 10px; }

    /* Quick filters scroll horizontally */
    .quick-filters .row { padding-bottom: 4px; }
    .chip { font-size: 12px; height: 32px; padding: 0 var(--sp-3); }

    /* Listing — sidebar becomes off-canvas drawer */
    .listing { padding: var(--sp-6) 0 var(--sp-16); }
    .listing-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .sidebar {
      position: fixed;
      top: 0; bottom: 0; left: 0;
      width: 92%;
      max-width: 360px;
      background: var(--paper);
      z-index: 9999;
      transform: translateX(-100%);
      transition: transform 0.28s cubic-bezier(.4,.0,.2,1);
      padding: var(--sp-6) var(--sp-5);
      overflow-y: auto;
      box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    }
    .sidebar.open { transform: translateX(0); }
    /* close button for the drawer (added via JS) */
    .sidebar-close {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      padding-bottom: var(--sp-5);
      margin-bottom: var(--sp-5);
      border-bottom: 1px solid var(--ink-100);
    }
    .sidebar-close h3 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
    }
    .sidebar-close button {
      width: 32px; height: 32px;
      border-radius: var(--r-md);
      background: var(--cream-100);
      display: grid; place-items: center;
      font-size: 20px;
    }

    /* Backdrop for the drawer */
    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 9998;
    }
    .sidebar-backdrop.open { display: block; }

    /* Filter button replaces sidebar inline */
    .mobile-filter-bar {
      display: flex !important;
      gap: var(--sp-2);
      margin-bottom: var(--sp-5);
    }
    .mobile-filter-bar button {
      flex: 1;
      height: 44px;
      border: 1px solid var(--ink-200);
      background: var(--paper);
      border-radius: var(--r-md);
      font-size: 13px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
    }
    .mobile-filter-bar .badge {
      background: var(--brass-500);
      color: white;
      font-size: 11px;
      padding: 1px 6px;
      border-radius: var(--r-full);
    }

    /* Toolbar */
    .toolbar {
      flex-wrap: wrap;
      gap: var(--sp-3);
      margin-bottom: var(--sp-5);
    }
    .toolbar-left { font-size: 12px; }
    .sort { height: 32px; padding: 0 var(--sp-3); font-size: 12px; }
    .view-toggle { display: none; }

    /* Product grid */
    .product-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-6) var(--sp-3);
    }
    .product-card .pc-image { padding: var(--sp-3); }
    .product-card .pc-name { font-size: 15px; }
    .product-card .pc-meta { font-size: 11px; }
    .product-card .quick-actions { display: none; }
    .grid-banner {
      grid-template-columns: 1fr;
      padding: var(--sp-8) var(--sp-6);
      gap: var(--sp-6);
    }
    .grid-banner h3 { font-size: 26px; }
    .grid-banner .art { max-width: 240px; margin: 0 auto; }

    /* Pagination */
    .pagination {
      flex-wrap: wrap;
      gap: 4px;
    }
    .pagination button, .pagination .pg { min-width: 32px; height: 36px; padding: 0 var(--sp-2); font-size: 12px; }
  }

  @media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-2); }
    .pc-swatches { display: none; }
  }

  /* Hide the mobile filter bar on desktop */
  .mobile-filter-bar { display: none; }
  .sidebar-close { display: none; }

/* ----- shop-filtered.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  .page-hero { background: var(--cream-100); padding: var(--sp-12) 0 var(--sp-10); }
  .page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1; letter-spacing: -0.025em;
    font-weight: 600; color: var(--forest-900);
    margin: var(--sp-3) 0;
  }
  .page-hero h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic; font-weight: 400;
  }
  .page-hero p {
    font-size: 15px; color: var(--ink-700);
    max-width: 540px; line-height: 1.6;
    margin: 0;
  }

  /* — Active filters strip — */
  .active-filters {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-100);
    padding: var(--sp-4) 0;
  }
  .active-filters-row {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap;
  }
  .active-filters .lbl {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-500);
  }
  .active-filters .chip {
    height: 32px; padding: 0 var(--sp-3);
    background: var(--brass-500); color: white;
    border-radius: var(--r-full);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    border: 0;
  }
  .active-filters .chip .x {
    width: 18px; height: 18px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12px; line-height: 1;
  }
  .active-filters .clear-all {
    font-size: 13px;
    color: var(--brass-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: auto;
    background: none; border: 0;
    cursor: pointer;
  }
  .active-filters .clear-all:hover { color: var(--forest-900); }

  /* Listing */
  .listing { padding: var(--sp-8) 0 var(--sp-24); }
  .listing-grid { display: grid; grid-template-columns: 256px 1fr; gap: var(--sp-12); align-items: start; }
  .sidebar { position: sticky; top: var(--sp-5); }
  .filter-block { border-bottom: 1px solid var(--ink-100); padding: var(--sp-5) 0; }
  .filter-block:first-child { padding-top: 0; }
  .filter-block h4 {
    font-family: var(--font-sans); font-size: 12px;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: var(--sp-4);
    color: var(--forest-900);
  }
  .filter-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .filter-block li {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: 14px; color: var(--ink-700); cursor: pointer;
  }
  .filter-block li .cb {
    width: 16px; height: 16px;
    border: 1.4px solid var(--ink-300);
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--paper);
    position: relative;
  }
  .filter-block li.checked .cb {
    background: var(--brass-500); border-color: var(--brass-500);
  }
  .filter-block li.checked .cb::after {
    content: ""; position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid white;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }
  .filter-block li .ct { margin-left: auto; color: var(--ink-400); font-family: var(--font-mono); font-size: 11px; }
  .filter-block li.checked { color: var(--brass-500); font-weight: 500; }

  /* Toolbar */
  .toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px; color: var(--ink-500);
  }
  .toolbar-left strong { color: var(--forest-900); font-weight: 500; }
  .toolbar-left mark {
    background: rgba(45,89,97,0.15);
    color: var(--brass-500);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
  }
  .sort {
    background: var(--paper); border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 8px 14px;
    font-size: 13px; color: var(--forest-900); font-weight: 500;
    cursor: pointer;
  }

  /* Grid */
  .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10) var(--sp-6); }
  .product-card .pc-image {
    background: var(--cream-100);
    aspect-ratio: 1;
    display: grid; place-items: center;
    padding: var(--sp-5);
    position: relative;
  }
  .product-card .pc-image .pf-frame { width: 65%; aspect-ratio: 3/4; }

  /* Empty state for over-filtered */
  .no-results {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-10);
    text-align: center;
    margin-bottom: var(--sp-8);
  }
  .no-results h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-2);
  }
  .no-results p { font-size: 14px; color: var(--ink-500); margin: 0 0 var(--sp-4); }
  .no-results button {
    background: var(--brass-500); color: white;
    height: 40px; padding: 0 var(--sp-5);
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
  }

  /* Mobile */
  @media (max-width: 1024px) {
    .listing-grid { grid-template-columns: 220px 1fr; }
    .product-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .listing-grid { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-3); }
    .active-filters .lbl { display: none; }
    .active-filters-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  }

/* ----- product.html ----- */
.breadcrumb {
    padding: var(--sp-5) 0;
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
    color: var(--ink-500);
  }
  .breadcrumb a:hover { color: var(--forest-700); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  /* ——— Product page main ——— */
  .pdp {
    padding: var(--sp-10) 0 var(--sp-20);
  }
  .pdp-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--sp-12);
    align-items: start;
  }

  /* — Gallery — */
  .gallery {
    position: sticky;
    top: var(--sp-4);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-4);
  }
  .gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .gallery-thumbs .thumb {
    width: 80px;
    aspect-ratio: 1;
    background: var(--cream-100);
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 10px;
  }
  .gallery-thumbs .thumb .pf-frame { width: 70%; aspect-ratio: 3/4; --mat-w: 6px; --frame-bevel: 3px; }
  .gallery-thumbs .thumb.active { border-color: var(--forest-700); }
  .gallery-thumbs .thumb.lifestyle { background: var(--cream-200); position: relative; }
  .gallery-thumbs .thumb.lifestyle::after {
    content: "Room"; position: absolute;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; color: var(--ink-500);
  }
  .gallery-thumbs .thumb.video { background: var(--forest-700); }
  .gallery-thumbs .thumb.video::after {
    content: "▶"; color: var(--cream-50); font-size: 16px;
  }

  .gallery-main {
    aspect-ratio: 1;
    background: var(--cream-100);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: var(--sp-10);
  }
  .gallery-main .pf-frame {
    width: 65%;
    aspect-ratio: 3/4;
    --mat-w: 36px;
    --frame-bevel: 16px;
  }
  .gallery-main .badge-row {
    position: absolute;
    top: var(--sp-5);
    left: var(--sp-5);
    display: flex;
    gap: var(--sp-2);
  }
  .gallery-main .badge {
    background: var(--paper);
    color: var(--forest-700);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 4px 10px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .gallery-main .badge.dark {
    background: var(--forest-700);
    color: var(--cream-50);
  }
  .gallery-main .nav-arrows {
    position: absolute;
    inset: 50% var(--sp-4) auto;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  .gallery-main .nav-arrows button {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--forest-700);
    display: grid; place-items: center;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .gallery-main .nav-arrows button:hover { background: var(--forest-700); color: var(--cream-50); }
  .gallery-main .zoom {
    position: absolute;
    bottom: var(--sp-5); right: var(--sp-5);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-500);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .gallery-main .pagination-dots {
    position: absolute;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
  }
  .gallery-main .pagination-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-200); }
  .gallery-main .pagination-dots .dot.active { background: var(--forest-700); width: 18px; border-radius: 3px; }

  /* — Info column — */
  .pdp-info { padding-top: var(--sp-3); }
  .pdp-info .kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-600);
    margin-bottom: var(--sp-3);
  }
  .pdp-info h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: var(--forest-900);
    margin-bottom: var(--sp-3);
  }
  .pdp-info h1 em { font-style: italic; }
  .pdp-info .lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-500);
    margin: 0;
    line-height: 1.4;
  }
  .review-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
    color: var(--ink-500);
  }
  .review-bar .stars { color: #d8a847; font-size: 14px; letter-spacing: 1px; }
  .review-bar a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 2px; }

  /* Price */
  .price-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .price {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--forest-900);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .price-old {
    color: var(--ink-400);
    text-decoration: line-through;
    font-size: 18px;
  }
  .price-save {
    background: var(--red-500);
    color: var(--cream-50);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r-sm);
  }
  .price-note {
    font-size: 13px;
    color: var(--ink-500);
    margin-bottom: var(--sp-8);
  }
  .price-note strong { color: var(--forest-700); font-weight: 600; }

  /* Configurator options */
  .config-block {
    margin-bottom: var(--sp-6);
  }
  .config-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: var(--sp-3);
  }
  .config-label .key {
    font-weight: 600;
    color: var(--forest-900);
    letter-spacing: 0.02em;
  }
  .config-label .val {
    color: var(--ink-700);
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .config-label .help {
    color: var(--forest-700);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Moulding picker — frame swatches */
  .moulding-pick {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-2);
  }
  .moulding-opt {
    aspect-ratio: 1;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    background: var(--cream-100);
    padding: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
  }
  .moulding-opt .pf-frame {
    width: 100%;
    height: 100%;
    --mat-w: 5px;
    --frame-bevel: 2px;
  }
  .moulding-opt.active {
    border-color: var(--forest-700);
    background: var(--paper);
  }
  .moulding-opt::after {
    content: attr(data-name);
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .moulding-opt:hover::after { opacity: 1; }

  /* Size picker */
  .size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
  }
  .size-opt {
    padding: var(--sp-3) var(--sp-3);
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }
  .size-opt:hover { border-color: var(--forest-300); }
  .size-opt.active {
    border-color: var(--forest-700);
    background: var(--forest-50);
  }
  .size-opt.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
  }
  .size-opt.disabled::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-400) 50%, transparent calc(50% + 1px));
    border-radius: var(--r-sm);
  }
  .size-opt .nm {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--forest-900);
    line-height: 1;
  }
  .size-opt .dm {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-500);
    text-transform: uppercase;
    margin-top: 4px;
  }
  .size-opt.custom {
    border-style: dashed;
    border-color: var(--forest-300);
    color: var(--forest-700);
  }
  .size-opt.custom .nm { font-style: italic; }

  /* Mount swatches */
  .mount-pick {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
  }
  .mount-opt {
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--paper);
    box-shadow: inset 0 0 0 1px var(--ink-200);
    position: relative;
  }
  .mount-opt.active {
    box-shadow: inset 0 0 0 1.5px var(--forest-700), 0 0 0 2px var(--paper);
    transform: scale(1.05);
  }

  /* Pill toggles */
  .pill-pick {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  .pill-opt {
    padding: var(--sp-3) var(--sp-5);
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-full);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .pill-opt:hover { border-color: var(--forest-300); }
  .pill-opt.active {
    border-color: var(--forest-700);
    background: var(--forest-50);
    color: var(--forest-900);
  }
  .pill-opt .price-add {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-500);
  }
  .pill-opt.active .price-add { color: var(--forest-700); }

  /* Add to basket */
  .atb-row {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ink-100);
  }
  .qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    height: 56px;
    background: var(--paper);
  }
  .qty button {
    width: 44px;
    height: 100%;
    font-size: 16px;
    color: var(--forest-700);
  }
  .qty .num {
    width: 36px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--forest-900);
  }
  .atb-row .btn {
    flex: 1;
    height: 56px;
  }
  .atb-row .wishlist {
    width: 56px; height: 56px;
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-md);
    display: grid; place-items: center;
    color: var(--forest-700);
  }
  .atb-row .wishlist:hover { background: var(--forest-50); border-color: var(--forest-300); }

  .delivery-est {
    background: var(--forest-50);
    border: 1px solid var(--forest-100);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    font-size: 13px;
    color: var(--forest-800);
  }
  .delivery-est .ic {
    width: 32px; height: 32px;
    background: var(--forest-700);
    color: var(--cream-50);
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .delivery-est strong { font-weight: 600; }

  /* Trust row */
  .trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--ink-100);
    border-bottom: 1px solid var(--ink-100);
  }
  .trust-row > div {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    color: var(--ink-700);
    line-height: 1.3;
  }
  .trust-row .ic { color: var(--forest-700); flex-shrink: 0; }

  /* ——— Tab block ——— */
  .tabs {
    margin-top: var(--sp-20);
    border-top: 1px solid var(--ink-100);
    padding-top: var(--sp-12);
  }
  .tab-nav {
    display: flex;
    gap: var(--sp-8);
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: var(--sp-8);
  }
  .tab-nav button {
    padding: var(--sp-3) 0 var(--sp-4);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    letter-spacing: 0.02em;
  }
  .tab-nav button.active {
    color: var(--forest-900);
    border-color: var(--forest-700);
  }
  .tab-nav button .ct {
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 11px;
    margin-left: 4px;
  }
  .tab-body { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-16); max-width: 1100px; }
  .tab-body p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-700);
    margin: 0 0 var(--sp-4);
  }
  .tab-body p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 0.95;
    float: left;
    padding: 6px 8px 0 0;
    color: var(--forest-700);
  }
  .spec-table {
    background: var(--cream-50);
    border-radius: var(--r-md);
    padding: var(--sp-5);
  }
  .spec-table h4 {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--forest-900);
    margin-bottom: var(--sp-4);
  }
  .spec-table dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3) var(--sp-5);
    font-size: 13px;
  }
  .spec-table dt {
    color: var(--ink-500);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .spec-table dd {
    margin: 0;
    color: var(--forest-900);
    font-weight: 500;
  }

  /* ——— Related products ——— */
  .related {
    background: var(--cream-50);
    padding: var(--sp-24) 0;
    margin-top: var(--sp-16);
  }
  .related h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    margin-bottom: var(--sp-12);
  }
  .related h2 em { font-style: italic; color: var(--forest-700); }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
  .related .pc-image .pf-frame { width: 65%; aspect-ratio: 3/4; }

  /* ═══════ MOBILE — product.html ═══════ */
  @media (max-width: 1024px) {
    .pdp-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .gallery { position: static; grid-template-columns: 1fr; }
    .gallery-thumbs { flex-direction: row; }
    .gallery-thumbs .thumb { width: 64px; }
    .related-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 768px) {
    .pdp { padding: var(--sp-6) 0 var(--sp-12); }
    .pdp-grid { gap: var(--sp-8); }
    .gallery-main { padding: var(--sp-5); }
    .gallery-main .pf-frame { width: 75%; }
    .gallery-thumbs { gap: var(--sp-2); overflow-x: auto; }
    .gallery-thumbs .thumb { width: 56px; flex-shrink: 0; }
    .pdp-info h1 { font-size: clamp(32px, 8vw, 44px); }
    .pdp-info .lede { font-size: 15px; }
    .price { font-size: 28px; }
    .review-bar { flex-wrap: wrap; font-size: 12px; }
    .size-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .moulding-pick { grid-template-columns: repeat(4, 1fr); }
    .mount-pick { grid-template-columns: repeat(6, 1fr); }
    .atb-row {
      flex-wrap: wrap;
      gap: var(--sp-2);
    }
    .atb-row .qty { order: 1; }
    .atb-row .btn { order: 2; flex: 1 1 100%; }
    .atb-row .wishlist { order: 3; }
    .trust-row { grid-template-columns: 1fr; gap: var(--sp-3); }
    .tabs { margin-top: var(--sp-10); padding-top: var(--sp-8); }
    .tab-nav {
      gap: var(--sp-5);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-nav button { white-space: nowrap; font-size: 13px; }
    .tab-body { grid-template-columns: 1fr; gap: var(--sp-8); }
    .tab-body p { font-size: 15px; }
    .related-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  }

  @media (max-width: 480px) {
    .moulding-pick { grid-template-columns: repeat(3, 1fr); }
    .mount-pick { grid-template-columns: repeat(5, 1fr); }
    .pill-pick .pill-opt { font-size: 12px; padding: 8px 10px; }
  }

  /* ═══════ Mobile sticky add-to-basket bar ═══════ */
  .pdp-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--paper);
    border-top: 1px solid var(--ink-100);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
    align-items: center;
    gap: var(--sp-3);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(.4,.0,.2,1);
  }
  .pdp-sticky.show { transform: translateY(0); }
  .pdp-sticky .info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .pdp-sticky .nm {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pdp-sticky .meta { font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
  .pdp-sticky .pr { font-family: var(--font-mono); font-size: 16px; color: var(--forest-900); font-weight: 600; }
  .pdp-sticky .btn-add {
    height: 44px; padding: 0 var(--sp-5);
    background: var(--brass-500); color: white;
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    border: 0;
    flex-shrink: 0;
  }
  @media (max-width: 768px) {
    .pdp-sticky { display: flex; }
    body { padding-bottom: 72px; }
  }

/* ----- cart.html ----- */
.cart-head {
    padding: var(--sp-12) 0 var(--sp-6);
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
  }
  .cart-head h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4.4vw, 56px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: var(--forest-900);
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
  }
  .cart-head h1 em { font-style: italic; }
  .cart-head h1 .count {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--ink-500);
    letter-spacing: 0.06em;
  }

  /* Step indicator */
  .steps-bar {
    display: flex;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    font-size: 13px;
  }
  .steps-bar .step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-400);
  }
  .steps-bar .step.active { color: var(--forest-900); font-weight: 500; }
  .steps-bar .step.done { color: var(--forest-700); }
  .steps-bar .step .n {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ink-200);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 11px;
    display: grid; place-items: center;
  }
  .steps-bar .step.active .n { background: var(--forest-700); color: var(--cream-50); }
  .steps-bar .step.done .n { background: var(--forest-700); color: var(--cream-50); }
  .steps-bar .sep {
    flex: 1;
    height: 1px;
    background: var(--ink-200);
    align-self: center;
    max-width: 60px;
  }

  /* Layout */
  .cart-main {
    padding: var(--sp-12) 0 var(--sp-20);
  }
  .cart-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--sp-12);
    align-items: start;
  }

  /* Item */
  .item-list {
    display: grid;
    gap: var(--sp-4);
  }
  .item {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    align-items: center;
  }
  .item-img {
    width: 140px;
    aspect-ratio: 1;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    padding: 16px;
  }
  .item-img .pf-frame {
    width: 80%;
    aspect-ratio: 3/4;
    --mat-w: 14px;
    --frame-bevel: 6px;
  }
  .item-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .item-info h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--forest-900);
    margin: 0;
  }
  .item-info h3 em { font-style: italic; }
  .item-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: 12px;
    color: var(--ink-500);
  }
  .item-attrs .attr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .item-attrs .attr strong {
    color: var(--ink-700);
    font-weight: 500;
  }
  .item-attrs .sw {
    width: 12px; height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    display: inline-block;
  }
  .item-link {
    font-size: 12px;
    color: var(--forest-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: var(--sp-2);
  }
  .item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    text-align: right;
  }
  .item-price {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--forest-900);
    letter-spacing: -0.01em;
  }
  .item-price-old {
    font-size: 12px;
    color: var(--ink-400);
    text-decoration: line-through;
  }
  .qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    height: 36px;
    background: var(--paper);
  }
  .qty button {
    width: 32px;
    height: 100%;
    font-size: 14px;
    color: var(--forest-700);
  }
  .qty .num {
    width: 28px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--forest-900);
  }
  .item-remove {
    font-size: 12px;
    color: var(--ink-400);
  }
  .item-remove:hover { color: var(--red-500); text-decoration: underline; }

  /* Upsell row */
  .upsell {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    margin-top: var(--sp-4);
  }
  .upsell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
  }
  .upsell-head h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--forest-900);
  }
  .upsell-head h3 em { font-style: italic; }
  .upsell-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  .upsell-card {
    background: var(--paper);
    border-radius: var(--r-sm);
    padding: var(--sp-4);
    display: flex;
    gap: var(--sp-3);
    align-items: center;
  }
  .upsell-card .ic {
    width: 56px; height: 56px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    flex-shrink: 0;
    padding: 8px;
  }
  .upsell-card .ic .pf-frame { width: 100%; height: 100%; --mat-w: 4px; --frame-bevel: 2px; }
  .upsell-card .info { flex: 1; }
  .upsell-card .nm {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--forest-900);
    line-height: 1.2;
  }
  .upsell-card .pr {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 2px;
  }
  .upsell-card .add {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--forest-700);
    color: var(--cream-50);
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
  }

  /* Order summary sidebar */
  .summary {
    position: sticky;
    top: var(--sp-5);
    background: var(--paper-warm);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-6);
  }
  .summary h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--forest-900);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
  }
  .summary-rows {
    display: grid;
    gap: var(--sp-3);
    font-size: 14px;
    margin-bottom: var(--sp-5);
  }
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .summary-row .lbl { color: var(--ink-700); }
  .summary-row .lbl span { color: var(--ink-400); font-size: 12px; display: block; }
  .summary-row .v { font-family: var(--font-mono); color: var(--forest-900); }
  .summary-row.discount .v { color: var(--forest-700); }
  .summary-row.discount .lbl strong { color: var(--forest-700); }

  /* Promo code */
  .promo {
    background: var(--paper);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .promo h4 {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--forest-900);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .promo h4 .ic { color: var(--brass-600); }
  .promo .form {
    display: flex;
    gap: var(--sp-2);
  }
  .promo input {
    flex: 1;
    height: 40px;
    background: var(--cream-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    padding: 0 var(--sp-3);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--forest-900);
    letter-spacing: 0.04em;
  }
  .promo button {
    height: 40px;
    padding: 0 var(--sp-4);
    background: var(--forest-700);
    color: var(--cream-50);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
  }
  .promo .applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--forest-50);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--forest-800);
  }
  .promo .applied .code {
    font-family: var(--font-mono);
    background: var(--forest-700);
    color: var(--cream-50);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.06em;
  }
  .promo .applied .x { color: var(--ink-500); cursor: pointer; }

  /* Delivery progress bar (free shipping) */
  .delivery-prog {
    background: var(--forest-50);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    font-size: 13px;
    color: var(--forest-800);
  }
  .delivery-prog .msg {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .delivery-prog .msg strong { color: var(--forest-700); }
  .delivery-prog .bar {
    height: 6px;
    background: var(--forest-100);
    border-radius: 3px;
    overflow: hidden;
  }
  .delivery-prog .fill {
    height: 100%;
    width: 100%;
    background: var(--forest-700);
    border-radius: 3px;
  }

  /* Total */
  .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--ink-200);
    margin-bottom: var(--sp-5);
  }
  .summary-total .l {
    font-size: 16px;
    font-weight: 500;
    color: var(--forest-900);
  }
  .summary-total .l small {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 400;
  }
  .summary-total .v {
    font-family: var(--font-display);
    font-size: 40px;
    color: var(--forest-900);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .checkout-btn {
    width: 100%;
    height: 56px;
    background: var(--forest-700);
    color: var(--cream-50);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .checkout-btn:hover { background: var(--forest-800); }
  .checkout-alt {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
  }
  .checkout-alt button {
    flex: 1;
    height: 44px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    color: white;
  }
  .checkout-alt .paypal { background: #ffc439; color: #003087; }
  .checkout-alt .apple { background: #000; }
  .checkout-alt .klarna { background: #ffa8cd; color: #17120f; }

  .trust-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-100);
    font-size: 12px;
    color: var(--ink-500);
    line-height: 1.4;
  }
  .trust-mini .item { display: flex; align-items: center; gap: var(--sp-2); }
  .trust-mini .item svg { color: var(--forest-700); flex-shrink: 0; }
  .trust-mini .item strong { color: var(--ink-700); font-weight: 500; }

  /* Bottom continue + craft */
  .below {
    margin-top: var(--sp-10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ink-100);
    font-size: 13px;
  }
  .below .left {
    color: var(--ink-500);
  }
  .below .left a {
    color: var(--forest-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: var(--sp-2);
  }

  /* ═══════ MOBILE — cart.html ═══════ */
  @media (max-width: 1024px) {
    .cart-grid { grid-template-columns: 1fr 360px; gap: var(--sp-6); }
  }

  @media (max-width: 768px) {
    .cart-head { padding: var(--sp-8) 0 var(--sp-5); }
    .cart-head h1 { font-size: clamp(32px, 8vw, 44px); flex-wrap: wrap; gap: var(--sp-2); }
    .cart-head h1 .count { font-size: 13px; }
    .steps-bar {
      flex-wrap: wrap;
      gap: var(--sp-3);
      margin-top: var(--sp-4);
      font-size: 12px;
    }
    .steps-bar .sep { display: none; }
    .steps-bar .step { gap: 6px; }
    .steps-bar .step span:last-child {
      display: none;
    }
    .steps-bar .step.active span:last-child { display: inline; }

    .cart-main { padding: var(--sp-6) 0 var(--sp-12); }
    .cart-grid { grid-template-columns: 1fr; gap: var(--sp-6); }

    /* Cart item — restack */
    .item {
      grid-template-columns: 80px 1fr;
      grid-template-areas: "img info" "img info" "actions actions";
      gap: var(--sp-4);
      padding: var(--sp-4);
    }
    .item-img { width: 80px; padding: 8px; grid-area: img; }
    .item-info { grid-area: info; }
    .item-info h3 { font-size: 18px; }
    .item-attrs { font-size: 11px; gap: var(--sp-3); }
    .item-actions {
      grid-area: actions;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--ink-100);
      padding-top: var(--sp-3);
      margin-top: 0;
    }

    /* Upsell */
    .upsell { padding: var(--sp-5); }
    .upsell-head { flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
    .upsell-grid { grid-template-columns: 1fr; gap: var(--sp-2); }

    /* Summary stacks above items via DOM but visually appears at bottom — order with grid */
    .summary { position: static; padding: var(--sp-5); }
    .summary h2 { font-size: 20px; }
    .summary-total .v { font-size: 32px; }
    .checkout-alt { flex-wrap: wrap; }
    .checkout-alt button { flex: 1 1 30%; }

    .below {
      flex-direction: column;
      align-items: stretch;
      gap: var(--sp-4);
      text-align: center;
    }
    .below .left a { display: block; margin-left: 0; margin-top: 6px; }
  }

  @media (max-width: 480px) {
    .item-attrs { flex-direction: column; gap: 6px; align-items: flex-start; }
    .item-actions { flex-wrap: wrap; }
    .trust-mini { grid-template-columns: 1fr 1fr; }
  }

/* ----- cart-empty.html ----- */
.cart-head { padding: var(--sp-10) 0 var(--sp-6); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .cart-head h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.025em; font-weight: 600; color: var(--forest-900); margin: 0 0 var(--sp-2); }
  .cart-head h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .cart-head .lede { color: var(--ink-500); font-size: 14px; margin: 0; }

  .empty { padding: var(--sp-16) 0 var(--sp-24); text-align: center; }
  .empty-art {
    width: 200px; height: 200px;
    background: var(--cream-100);
    border-radius: 50%;
    margin: 0 auto var(--sp-8);
    display: grid; place-items: center;
    position: relative;
  }
  .empty-art .pf-frame {
    width: 60%; aspect-ratio: 3/4;
    transform: rotate(-4deg);
    --mat-w: 16px; --frame-bevel: 8px;
  }
  .empty-art .pf-frame .pf-art { background: transparent !important; }
  .empty-art .pf-frame .pf-mat::before { border-color: var(--ink-200); }
  .empty-art::after {
    content: "empty";
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--brass-500);
    font-size: 22px;
  }

  .empty h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-3);
    max-width: 480px;
    margin-inline: auto;
  }
  .empty h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .empty p { color: var(--ink-500); font-size: 17px; max-width: 440px; margin: 0 auto var(--sp-8); line-height: 1.55; }

  .empty-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-16); }
  .empty-cta .btn-primary { background: var(--brass-500); color: white; height: 52px; padding: 0 var(--sp-8); border-radius: var(--r-md); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: var(--sp-2); }
  .empty-cta .btn-primary:hover { background: var(--brass-600); }
  .empty-cta .btn-secondary { background: transparent; color: var(--forest-900); box-shadow: inset 0 0 0 1.5px var(--ink-200); height: 52px; padding: 0 var(--sp-8); border-radius: var(--r-md); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; }
  .empty-cta .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--brass-500); color: var(--brass-500); }

  /* Suggested */
  .suggested { padding-top: var(--sp-10); border-top: 1px solid var(--ink-100); }
  .suggested h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-900); margin-bottom: var(--sp-8); text-align: center; }
  .suggested h3 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .suggested-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); max-width: 1080px; margin: 0 auto; text-align: left; }
  .suggested .pc-image .pf-frame { width: 65%; aspect-ratio: 3/4; }

  /* Recently viewed */
  .recent { padding: var(--sp-12) 0; background: var(--cream-100); border-top: 1px solid var(--ink-100); }
  .recent h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--forest-900); margin-bottom: var(--sp-6); text-align: center; }
  .recent-rail { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
  .recent-item {
    width: 96px; aspect-ratio: 3/4;
    background: var(--paper); border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 10px;
    border: 1px solid var(--ink-100);
    transition: border-color 0.12s, transform 0.12s;
  }
  .recent-item:hover { border-color: var(--brass-500); transform: translateY(-2px); }
  .recent-item .pf-frame { width: 78%; aspect-ratio: 3/4; --mat-w: 5px; --frame-bevel: 3px; }

  @media (max-width: 768px) {
    .suggested-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .empty-cta .btn-primary, .empty-cta .btn-secondary { width: 100%; justify-content: center; }
  }

/* ----- checkout-address.html ----- */
/* — Top steps bar (same pattern as cart) — */
  .checkout-head {
    padding: var(--sp-10) 0 var(--sp-6);
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
  }
  .checkout-head h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--forest-900);
    margin: 0 0 var(--sp-2);
  }
  .checkout-head h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .checkout-head .lede {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0;
  }
  .steps-bar {
    display: flex;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    font-size: 13px;
  }
  .steps-bar .step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-400);
  }
  .steps-bar .step.active { color: var(--forest-900); font-weight: 500; }
  .steps-bar .step.done { color: var(--brass-500); }
  .steps-bar .step .n {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ink-200);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 11px;
    display: grid; place-items: center;
  }
  .steps-bar .step.active .n { background: var(--brass-500); color: white; }
  .steps-bar .step.done .n { background: var(--brass-500); color: white; }
  .steps-bar .sep {
    flex: 1;
    height: 1px;
    background: var(--ink-200);
    align-self: center;
    max-width: 60px;
  }

  /* — Main layout — */
  .checkout-main {
    padding: var(--sp-10) 0 var(--sp-20);
  }
  .checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--sp-12);
    align-items: start;
  }

  /* — Form block — */
  .block {
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--ink-100);
  }
  .block:last-child { border-bottom: 0; }
  .block-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-5);
  }
  .block-head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .block-head h2 .num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--forest-900);
    color: var(--cream-50);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    display: grid; place-items: center;
  }
  .block-head .hint {
    font-size: 12px;
    color: var(--ink-500);
  }
  .block-head .hint a {
    color: var(--brass-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: var(--sp-2);
  }

  /* — Express checkout — */
  .express {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-8);
  }
  .express-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-2);
  }
  .express-buttons button {
    height: 48px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .express-buttons .apple { background: #000; }
  .express-buttons .paypal { background: #ffc439; color: #003087; }
  .express-buttons .klarna { background: #ffa8cd; color: #17120f; }
  .express-help {
    text-align: center;
    font-size: 12px;
    color: var(--ink-500);
    margin-top: var(--sp-3);
  }

  .divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ink-200);
  }

  /* — Form fields — */
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .field-row.full { grid-template-columns: 1fr; }
  .field-row.three { grid-template-columns: 1fr 1fr 1fr; }

  .field {
    position: relative;
  }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    height: 56px;
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 20px var(--sp-4) 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--forest-900);
    transition: border-color 0.12s;
  }
  .field textarea {
    height: auto;
    min-height: 96px;
    padding-top: 24px;
    resize: vertical;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: 0;
    border-color: var(--brass-500);
  }
  .field label {
    position: absolute;
    top: 8px;
    left: 17px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-500);
    pointer-events: none;
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .field.required label::after {
    content: " *";
    color: var(--brass-500);
  }
  .field .hint {
    font-size: 11px;
    color: var(--ink-500);
    margin-top: 4px;
    padding-left: 4px;
  }
  .field .icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
  }

  /* — Postcode finder — */
  .postcode-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .postcode-row .field input {
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }
  .postcode-row button {
    height: 56px;
    background: var(--forest-900);
    color: var(--cream-50);
    border-radius: var(--r-md);
    padding: 0 var(--sp-5);
    font-size: 14px;
    font-weight: 500;
  }
  .saved-address {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  .saved-address .addr {
    color: var(--ink-700);
    font-family: var(--font-mono);
  }
  .saved-address .change {
    color: var(--brass-500);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* — Checkbox — */
  .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-700);
  }
  .checkbox-row .cb {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ink-300);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    background: var(--paper);
  }
  .checkbox-row.checked .cb {
    background: var(--brass-500);
    border-color: var(--brass-500);
  }
  .checkbox-row.checked .cb::after {
    content: "";
    position: absolute;
    top: 2px; left: 5px;
    width: 5px; height: 9px;
    border: solid white;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }

  /* — Delivery methods — */
  .delivery-list {
    display: grid;
    gap: var(--sp-2);
  }
  .delivery-opt {
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .delivery-opt:hover { border-color: var(--brass-500); }
  .delivery-opt.active {
    border-color: var(--brass-500);
    background: rgba(45,89,97,0.04);
  }
  .delivery-opt .radio {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ink-300);
    border-radius: 50%;
    position: relative;
  }
  .delivery-opt.active .radio {
    border-color: var(--brass-500);
  }
  .delivery-opt.active .radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--brass-500);
    border-radius: 50%;
  }
  .delivery-opt .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .delivery-opt .nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--forest-900);
  }
  .delivery-opt .meta {
    font-size: 12px;
    color: var(--ink-500);
  }
  .delivery-opt .price {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--forest-900);
    font-weight: 500;
  }
  .delivery-opt .price.free {
    background: var(--brass-500);
    color: white;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* — Bottom actions — */
  .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ink-100);
  }
  .actions a.back {
    font-size: 13px;
    color: var(--ink-700);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .actions a.back:hover { color: var(--brass-500); }
  .actions .btn-continue {
    height: 56px;
    background: var(--brass-500);
    color: white;
    padding: 0 var(--sp-8);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .actions .btn-continue:hover { background: var(--brass-600); }

  /* — Order summary sidebar (reused from cart) — */
  .summary {
    position: sticky;
    top: var(--sp-5);
    background: var(--paper-warm);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-6);
  }
  .summary h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--forest-900);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .summary h2 .ct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 400;
  }

  /* Mini cart items */
  .mini-items {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink-100);
  }
  .mini-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    font-size: 13px;
  }
  .mini-item .img {
    width: 56px; height: 56px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 8px;
    position: relative;
  }
  .mini-item .img .pf-frame {
    width: 80%;
    aspect-ratio: 3/4;
    --mat-w: 4px;
    --frame-bevel: 2px;
  }
  .mini-item .img .qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--forest-900);
    color: white;
    font-family: var(--font-mono);
    font-size: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 600;
  }
  .mini-item .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mini-item .nm {
    font-weight: 600;
    color: var(--forest-900);
    font-size: 13px;
  }
  .mini-item .opts {
    font-size: 11px;
    color: var(--ink-500);
    line-height: 1.3;
  }
  .mini-item .pr {
    font-family: var(--font-mono);
    color: var(--forest-900);
    font-weight: 500;
  }

  /* Summary rows */
  .summary-rows {
    display: grid;
    gap: var(--sp-3);
    font-size: 14px;
  }
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .summary-row .lbl { color: var(--ink-700); }
  .summary-row .v { font-family: var(--font-mono); color: var(--forest-900); }
  .summary-row.discount .v,
  .summary-row.discount .lbl { color: var(--brass-500); }

  .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--ink-200);
    margin-top: var(--sp-4);
  }
  .summary-total .l {
    font-size: 14px;
    font-weight: 600;
    color: var(--forest-900);
  }
  .summary-total .l small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 400;
  }
  .summary-total .v {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--forest-900);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  /* — Trust mini — */
  .trust-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ink-100);
    font-size: 11px;
    color: var(--ink-500);
    line-height: 1.4;
  }
  .trust-mini .item { display: flex; align-items: center; gap: var(--sp-2); }
  .trust-mini svg { color: var(--brass-500); flex-shrink: 0; }

  /* — Help footer below summary — */
  .help-foot {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--cream-100);
    border-radius: var(--r-md);
    font-size: 12px;
    text-align: center;
    color: var(--ink-700);
  }
  .help-foot strong { color: var(--brass-500); font-weight: 500; }

  /* ═══════ MOBILE ═══════ */
  @media (max-width: 1024px) {
    .checkout-grid { grid-template-columns: 1fr 360px; gap: var(--sp-6); }
  }
  @media (max-width: 768px) {
    .checkout-head { padding: var(--sp-6) 0 var(--sp-4); }
    .checkout-head h1 { font-size: clamp(28px, 7vw, 36px); }
    .steps-bar { flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; }
    .steps-bar .sep { display: none; }
    .steps-bar .step span:last-child { display: none; }
    .steps-bar .step.active span:last-child { display: inline; }
    .checkout-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .summary { position: static; padding: var(--sp-5); }
    .summary-total .v { font-size: 26px; }
    .field-row { grid-template-columns: 1fr; }
    .field-row.three { grid-template-columns: 1fr; }
    .express-buttons { grid-template-columns: 1fr; }
    .actions { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-3); }
    .actions .btn-continue { width: 100%; justify-content: center; }
    .actions a.back { text-align: center; }
  }

/* ----- checkout-payment.html ----- */
/* Reuse checkout-address.html's styles — same structure */
  .checkout-head {
    padding: var(--sp-10) 0 var(--sp-6);
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
  }
  .checkout-head h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--forest-900);
    margin: 0 0 var(--sp-2);
  }
  .checkout-head h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .checkout-head .lede { color: var(--ink-500); font-size: 14px; margin: 0; }
  .steps-bar { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); font-size: 13px; }
  .steps-bar .step { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-400); }
  .steps-bar .step.active { color: var(--forest-900); font-weight: 500; }
  .steps-bar .step.done { color: var(--brass-500); }
  .steps-bar .step .n {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ink-200); color: var(--paper);
    font-family: var(--font-mono); font-size: 11px;
    display: grid; place-items: center;
  }
  .steps-bar .step.active .n { background: var(--brass-500); color: white; }
  .steps-bar .step.done .n { background: var(--brass-500); color: white; }
  .steps-bar .sep { flex: 1; height: 1px; background: var(--ink-200); align-self: center; max-width: 60px; }

  .checkout-main { padding: var(--sp-10) 0 var(--sp-20); }
  .checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--sp-12);
    align-items: start;
  }

  /* — Review blocks (compact summaries of step 2) — */
  .review-block {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--sp-3);
    align-items: flex-start;
  }
  .review-block .lbl {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-500);
    margin-bottom: 4px;
  }
  .review-block .val {
    grid-column: 2;
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.5;
  }
  .review-block .val strong {
    color: var(--forest-900);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
  }
  .review-block .ic {
    width: 28px; height: 28px;
    background: var(--brass-500);
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
  }
  .review-block a.edit {
    color: var(--brass-500);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: center;
  }

  /* — Payment method blocks — */
  .block {
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-8);
  }
  .block-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-5);
  }
  .block-head h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .block-head h2 .num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--forest-900);
    color: var(--cream-50);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    display: grid; place-items: center;
  }
  .block-head .hint {
    font-size: 12px;
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .block-head .hint svg { color: var(--brass-500); }

  /* — Payment method tabs — */
  .pay-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
  .pay-tab {
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    transition: border-color 0.12s, background 0.12s;
  }
  .pay-tab:hover { border-color: var(--brass-500); }
  .pay-tab.active {
    border-color: var(--brass-500);
    background: rgba(45,89,97,0.04);
  }
  .pay-tab .ic {
    height: 24px;
    display: grid; place-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--forest-900);
  }
  .pay-tab .nm {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-700);
  }
  .pay-tab.active .nm { color: var(--forest-900); font-weight: 600; }
  .pay-tab .br {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .pay-tab.paypal .br { color: #003087; }
  .pay-tab.apple .br { color: #000; }
  .pay-tab.klarna .br { color: #ff8fb1; }

  /* — Card form — */
  .card-panel {
    border: 1.5px solid var(--brass-500);
    border-radius: var(--r-md);
    background: var(--paper);
    padding: var(--sp-6);
  }
  .card-preview {
    background: linear-gradient(135deg, #1a2c30 0%, #2d5961 60%, #1d4148 100%);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    color: white;
    margin-bottom: var(--sp-5);
    aspect-ratio: 1.6 / 1;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3);
  }
  .card-preview::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
    transform: rotate(-20deg);
    pointer-events: none;
  }
  .card-preview .chip {
    width: 36px; height: 28px;
    background: linear-gradient(135deg, #c8d4d0, #8fa0a4);
    border-radius: 4px;
    margin-bottom: var(--sp-3);
    position: relative;
    z-index: 1;
  }
  .card-preview .num {
    font-family: var(--font-mono);
    font-size: 18px;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
    position: relative;
    z-index: 1;
  }
  .card-preview .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }
  .card-preview .row .name {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .card-preview .row .exp { color: rgba(255,255,255,0.7); }
  .card-preview .brand {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    z-index: 2;
  }

  /* Field components (same as address page) */
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
  .field-row.full { grid-template-columns: 1fr; }
  .field-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .field { position: relative; }
  .field input, .field select {
    width: 100%;
    height: 56px;
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 20px var(--sp-4) 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--forest-900);
    transition: border-color 0.12s;
  }
  .field input.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
  .field input:focus, .field select:focus { outline: 0; border-color: var(--brass-500); }
  .field label {
    position: absolute;
    top: 8px;
    left: 17px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-500);
    pointer-events: none;
    font-weight: 500;
  }
  .field.required label::after { content: " *"; color: var(--brass-500); }
  .field .icon-r {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    pointer-events: none;
  }
  .field .icon-r .pay-logo {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    background: var(--cream-200);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--forest-700);
    letter-spacing: 0.04em;
  }

  /* — Saved card option — */
  .saved-cards {
    margin-bottom: var(--sp-4);
  }
  .saved-card {
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    cursor: pointer;
    margin-bottom: var(--sp-2);
  }
  .saved-card:hover { border-color: var(--brass-500); }
  .saved-card.active {
    border-color: var(--brass-500);
    background: rgba(45,89,97,0.04);
  }
  .saved-card .radio {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ink-300);
    border-radius: 50%;
    position: relative;
  }
  .saved-card.active .radio { border-color: var(--brass-500); }
  .saved-card.active .radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--brass-500);
    border-radius: 50%;
  }
  .saved-card .card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .saved-card .card-num {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--forest-900);
    letter-spacing: 0.04em;
  }
  .saved-card .card-meta {
    font-size: 12px;
    color: var(--ink-500);
  }
  .saved-card .badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    background: var(--cream-200);
    padding: 3px 6px;
    border-radius: 3px;
    color: var(--forest-700);
    letter-spacing: 0.04em;
  }

  /* — Billing same as shipping — */
  .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-700);
  }
  .checkbox-row .cb {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ink-300);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    background: var(--paper);
  }
  .checkbox-row.checked .cb {
    background: var(--brass-500);
    border-color: var(--brass-500);
  }
  .checkbox-row.checked .cb::after {
    content: "";
    position: absolute;
    top: 2px; left: 5px;
    width: 5px; height: 9px;
    border: solid white;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }
  .checkbox-row a {
    color: var(--brass-500);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* — Actions — */
  .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ink-100);
  }
  .actions a.back {
    font-size: 13px;
    color: var(--ink-700);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .actions a.back:hover { color: var(--brass-500); }
  .actions .btn-pay {
    height: 60px;
    background: var(--brass-500);
    color: white;
    padding: 0 var(--sp-10);
    border-radius: var(--r-md);
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .actions .btn-pay:hover { background: var(--brass-600); }
  .actions .btn-pay .lock {
    width: 20px; height: 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: grid; place-items: center;
  }

  /* — Summary sidebar — */
  .summary {
    position: sticky;
    top: var(--sp-5);
    background: var(--paper-warm);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-6);
  }
  .summary h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--forest-900);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .summary h2 .ct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-500);
    font-weight: 400;
  }
  .mini-items {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink-100);
  }
  .mini-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    font-size: 13px;
  }
  .mini-item .img {
    width: 56px; height: 56px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 8px;
    position: relative;
  }
  .mini-item .img .pf-frame {
    width: 80%; aspect-ratio: 3/4;
    --mat-w: 4px; --frame-bevel: 2px;
  }
  .mini-item .img .qty {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--forest-900); color: white;
    font-family: var(--font-mono); font-size: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 600;
  }
  .mini-item .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mini-item .nm { font-weight: 600; color: var(--forest-900); font-size: 13px; }
  .mini-item .opts { font-size: 11px; color: var(--ink-500); line-height: 1.3; }
  .mini-item .pr { font-family: var(--font-mono); color: var(--forest-900); font-weight: 500; }

  .summary-rows { display: grid; gap: var(--sp-3); font-size: 14px; }
  .summary-row { display: flex; justify-content: space-between; align-items: baseline; }
  .summary-row .lbl { color: var(--ink-700); }
  .summary-row .v { font-family: var(--font-mono); color: var(--forest-900); }
  .summary-row.discount .v, .summary-row.discount .lbl { color: var(--brass-500); }

  .summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--ink-200);
    margin-top: var(--sp-4);
  }
  .summary-total .l { font-size: 14px; font-weight: 600; color: var(--forest-900); }
  .summary-total .l small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 400;
  }
  .summary-total .v {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--forest-900);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .trust-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ink-100);
    font-size: 11px;
    color: var(--ink-500);
    line-height: 1.4;
  }
  .trust-mini .item { display: flex; align-items: center; gap: var(--sp-2); }
  .trust-mini svg { color: var(--brass-500); flex-shrink: 0; }

  /* — Klarna promo strip — */
  .klarna-strip {
    background: #ffe8f1;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: 12px;
    color: #1a0a14;
    margin-bottom: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .klarna-strip strong { font-weight: 700; }

  /* ═══════ MOBILE ═══════ */
  @media (max-width: 1024px) {
    .checkout-grid { grid-template-columns: 1fr 360px; gap: var(--sp-6); }
  }
  @media (max-width: 768px) {
    .checkout-head { padding: var(--sp-6) 0 var(--sp-4); }
    .checkout-head h1 { font-size: clamp(28px, 7vw, 36px); }
    .steps-bar { flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; }
    .steps-bar .sep { display: none; }
    .steps-bar .step span:last-child { display: none; }
    .steps-bar .step.active span:last-child { display: inline; }
    .checkout-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .summary { position: static; padding: var(--sp-5); }
    .summary-total .v { font-size: 26px; }
    .field-row { grid-template-columns: 1fr; }
    .field-row.three { grid-template-columns: 1fr; }
    .pay-tabs { grid-template-columns: 1fr 1fr; }
    .card-preview { max-width: 100%; }
    .actions { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-3); }
    .actions .btn-pay { width: 100%; justify-content: center; height: 56px; font-size: 15px; }
    .actions a.back { text-align: center; }
  }

/* ----- checkout-confirmation.html ----- */
/* — Steps bar — */
  .conf-head {
    padding: var(--sp-6) 0;
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
  }
  .steps-bar {
    display: flex;
    gap: var(--sp-6);
    font-size: 13px;
    justify-content: center;
  }
  .steps-bar .step { display: flex; align-items: center; gap: var(--sp-2); color: var(--brass-500); }
  .steps-bar .step.active { color: var(--forest-900); font-weight: 600; }
  .steps-bar .step .n {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brass-500); color: white;
    font-family: var(--font-mono); font-size: 11px;
    display: grid; place-items: center;
  }
  .steps-bar .step.active .n { background: var(--forest-900); color: var(--cream-50); }
  .steps-bar .sep { flex: 0 0 auto; width: 40px; height: 1px; background: var(--brass-500); align-self: center; }

  /* — Success hero — */
  .success-hero {
    text-align: center;
    padding: var(--sp-20) 0 var(--sp-16);
    background: var(--cream-50);
  }
  .success-icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--brass-500);
    color: white;
    margin: 0 auto var(--sp-8);
    display: grid;
    place-items: center;
    box-shadow: 0 16px 40px -16px rgba(45,89,97,0.5);
    animation: pop 0.5s cubic-bezier(.2,.7,.3,1.4) both;
  }
  @keyframes pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .success-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--forest-900);
    margin: 0 0 var(--sp-5);
  }
  .success-hero h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .success-hero .strap {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 22px;
    color: var(--ink-700);
    max-width: 580px;
    margin: 0 auto var(--sp-8);
    line-height: 1.45;
  }
  .order-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-full);
    padding: var(--sp-3) var(--sp-6);
    font-size: 13px;
    color: var(--ink-700);
  }
  .order-meta strong {
    font-family: var(--font-mono);
    color: var(--forest-900);
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .order-meta .dot { width: 4px; height: 4px; background: var(--ink-300); border-radius: 50%; }

  /* — Section block — */
  .conf-main { padding: var(--sp-16) 0; }
  .container.narrow { max-width: 880px; }

  .section { margin-bottom: var(--sp-16); }
  .section-head { margin-bottom: var(--sp-8); }
  .section-head .kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--brass-500);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    margin: 0;
  }
  .section-head h2 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }

  /* — Timeline of next steps — */
  .timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    position: relative;
  }
  .timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--ink-100);
    z-index: 0;
  }
  .timeline-step {
    text-align: center;
    position: relative;
    z-index: 1;
    background: var(--cream-50);
    padding: 0 var(--sp-3);
  }
  .timeline-step .dot {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--ink-200);
    display: grid;
    place-items: center;
    margin: 0 auto var(--sp-4);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-500);
    font-weight: 600;
  }
  .timeline-step.current .dot {
    background: var(--brass-500);
    border-color: var(--brass-500);
    color: white;
    box-shadow: 0 0 0 6px rgba(45,89,97,0.12);
  }
  .timeline-step.done .dot {
    background: var(--brass-500);
    border-color: var(--brass-500);
    color: white;
  }
  .timeline-step h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--forest-900);
    margin-bottom: 6px;
  }
  .timeline-step p {
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.5;
    margin: 0;
  }
  .timeline-step .when {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--brass-500);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .timeline-step.current .when { color: var(--brass-500); }

  /* — Order details — */
  .details {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .details-head {
    padding: var(--sp-5) var(--sp-6);
    background: var(--cream-100);
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .details-head .l {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-500);
    text-transform: uppercase;
  }
  .details-head .v {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.02em;
  }
  .details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
  }
  .details-items {
    padding: var(--sp-5) var(--sp-6);
    border-right: 1px solid var(--ink-100);
  }
  .details-side {
    padding: var(--sp-5) var(--sp-6);
    background: var(--cream-50);
  }

  .order-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: 14px;
  }
  .order-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .order-item .img {
    width: 64px; height: 64px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 8px;
    position: relative;
  }
  .order-item .img .pf-frame {
    width: 80%;
    aspect-ratio: 3/4;
    --mat-w: 4px;
    --frame-bevel: 2px;
  }
  .order-item .info {
    min-width: 0;
  }
  .order-item .info .nm {
    font-weight: 600;
    color: var(--forest-900);
    margin-bottom: 2px;
    font-size: 15px;
  }
  .order-item .info .opts {
    font-size: 12px;
    color: var(--ink-500);
    line-height: 1.4;
  }
  .order-item .pr {
    font-family: var(--font-mono);
    color: var(--forest-900);
    font-weight: 500;
  }

  .info-block {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink-100);
  }
  .info-block:last-child { border: 0; padding: 0; margin: 0; }
  .info-block .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-500);
    margin-bottom: var(--sp-2);
  }
  .info-block .val {
    font-size: 13px;
    color: var(--ink-700);
    line-height: 1.5;
  }
  .info-block .val strong {
    color: var(--forest-900);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
  }

  .totals {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ink-100);
    display: grid;
    gap: var(--sp-2);
    font-size: 13px;
  }
  .totals .row {
    display: flex;
    justify-content: space-between;
  }
  .totals .row .l { color: var(--ink-500); }
  .totals .row .v { font-family: var(--font-mono); color: var(--forest-900); }
  .totals .row.discount .v { color: var(--brass-500); }
  .totals .row.total {
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--ink-100);
    font-size: 16px;
    font-weight: 600;
    color: var(--forest-900);
  }
  .totals .row.total .v {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: -0.015em;
    font-weight: 600;
  }

  /* — Bottom actions — */
  .conf-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-12) 0 var(--sp-8);
  }
  .conf-actions .btn {
    height: 52px;
    padding: 0 var(--sp-8);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .conf-actions .btn-primary {
    background: var(--brass-500);
    color: white;
  }
  .conf-actions .btn-primary:hover { background: var(--brass-600); }
  .conf-actions .btn-secondary {
    background: transparent;
    color: var(--forest-900);
    box-shadow: inset 0 0 0 1.5px var(--ink-200);
  }
  .conf-actions .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--brass-500); color: var(--brass-500); }

  /* — Workshop note (handwritten card) — */
  .workshop-note {
    background:
      linear-gradient(180deg, var(--paper-warm) 0%, var(--cream-100) 100%);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-10);
    text-align: center;
    margin-bottom: var(--sp-16);
    position: relative;
  }
  .workshop-note .seal {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--brass-500);
    color: white;
    margin: 0 auto var(--sp-5);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    transform: rotate(-6deg);
    box-shadow: 0 8px 20px -8px rgba(45,89,97,0.4);
  }
  .workshop-note .quote {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: var(--ink-700);
    max-width: 560px;
    margin: 0 auto var(--sp-6);
  }
  .workshop-note .by {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 18px;
    color: var(--brass-500);
  }

  /* — Suggested products — */
  .suggested {
    margin-top: var(--sp-16);
  }
  .suggested-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .suggested .pc-image .pf-frame {
    width: 65%;
    aspect-ratio: 3/4;
  }

  /* ═══════ MOBILE ═══════ */
  @media (max-width: 1024px) {
    .timeline { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .timeline::before { display: none; }
    .details-grid { grid-template-columns: 1fr; }
    .details-items { border-right: 0; border-bottom: 1px solid var(--ink-100); }
    .suggested-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .conf-head { padding: var(--sp-4) 0; }
    .steps-bar { flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; }
    .steps-bar .sep { display: none; }
    .steps-bar .step span:last-child { display: none; }
    .steps-bar .step.active span:last-child { display: inline; }
    .success-hero { padding: var(--sp-12) 0 var(--sp-8); }
    .success-icon { width: 72px; height: 72px; }
    .success-hero h1 { font-size: clamp(36px, 9vw, 56px); }
    .success-hero .strap { font-size: 17px; }
    .order-meta { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: 12px; }
    .order-meta .dot { display: none; }
    .timeline { grid-template-columns: 1fr; gap: var(--sp-5); }
    .timeline-step .dot { width: 40px; height: 40px; }
    .workshop-note { padding: var(--sp-6); }
    .workshop-note .quote { font-size: 18px; }
    .conf-actions { flex-direction: column; }
    .conf-actions .btn { width: 100%; justify-content: center; }
    .suggested-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  }

/* ----- account.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  /* Account hero */
  .acc-hero { padding: var(--sp-10) 0 var(--sp-8); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .acc-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1; letter-spacing: -0.025em;
    font-weight: 600; color: var(--forest-900);
    margin: 0 0 var(--sp-2);
  }
  .acc-hero h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic; font-weight: 400;
  }
  .acc-hero .strap { color: var(--ink-500); font-size: 14px; margin: 0; }
  .acc-hero .strap strong { color: var(--brass-500); font-weight: 500; }

  /* Layout */
  .acc-main { padding: var(--sp-10) 0 var(--sp-20); }
  .acc-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-10); align-items: start; }

  /* Sidebar nav */
  .acc-nav {
    position: sticky; top: var(--sp-5);
    background: var(--paper); border: 1px solid var(--ink-100);
    border-radius: var(--r-md); padding: var(--sp-2); overflow: hidden;
  }
  .acc-nav-user {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: var(--sp-2);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .acc-nav-user .av {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brass-500);
    color: white;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.02em;
  }
  .acc-nav-user .name { font-weight: 600; font-size: 14px; color: var(--forest-900); }
  .acc-nav-user .email { font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
  .acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .acc-nav li a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px var(--sp-4);
    font-size: 14px;
    color: var(--ink-700);
    border-radius: var(--r-md);
    transition: background 0.12s, color 0.12s;
  }
  .acc-nav li a:hover { background: var(--cream-100); color: var(--forest-900); }
  .acc-nav li a.active {
    background: var(--brass-500);
    color: white;
    font-weight: 500;
  }
  .acc-nav li a .ct {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(0,0,0,0.06);
    padding: 2px 7px;
    border-radius: var(--r-full);
    color: var(--ink-500);
  }
  .acc-nav li a.active .ct { background: rgba(255,255,255,0.2); color: white; }
  .acc-nav .signout {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--ink-100);
  }
  .acc-nav .signout a { color: var(--ink-500); font-size: 13px; }

  /* Content area */
  .acc-content h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-6);
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .acc-content h2 .count {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-500);
    font-weight: 400;
  }

  /* Filter chips */
  .order-filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
  .order-filters .chip {
    height: 34px; padding: 0 var(--sp-4);
    background: var(--paper); border: 1px solid var(--ink-200);
    border-radius: var(--r-full);
    font-size: 13px; color: var(--ink-700);
    cursor: pointer;
  }
  .order-filters .chip.active {
    background: var(--forest-900); color: white; border-color: var(--forest-900);
  }

  /* Order card */
  .order {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-4);
    overflow: hidden;
  }
  .order-head {
    background: var(--cream-100);
    padding: var(--sp-4) var(--sp-5);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid var(--ink-100);
  }
  .order-head .field { display: flex; flex-direction: column; gap: 2px; }
  .order-head .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .order-head .val {
    color: var(--forest-900);
    font-weight: 500;
  }
  .order-head .val.num {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .order-head .val.total {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .order-head .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-full);
    width: fit-content;
  }
  .order-head .status .dot {
    width: 6px; height: 6px; border-radius: 50%;
  }
  .order-head .status.delivered { background: rgba(45,89,97,0.1); color: var(--brass-500); }
  .order-head .status.delivered .dot { background: var(--brass-500); }
  .order-head .status.shipping { background: rgba(216,168,71,0.15); color: #b88300; }
  .order-head .status.shipping .dot { background: #d8a847; animation: pulse 2s infinite; }
  .order-head .status.making { background: rgba(196,82,74,0.1); color: var(--red-500); }
  .order-head .status.making .dot { background: var(--red-500); animation: pulse 2s infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .order-body {
    padding: var(--sp-5);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-6);
    align-items: center;
  }
  .order-items {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
  }
  .order-thumb {
    width: 64px; height: 64px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 8px;
    position: relative;
  }
  .order-thumb .pf-frame {
    width: 80%; aspect-ratio: 3/4;
    --mat-w: 4px; --frame-bevel: 2px;
  }
  .order-thumb .qty {
    position: absolute; top: -6px; right: -6px;
    background: var(--forest-900); color: white;
    font-family: var(--font-mono); font-size: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 600;
  }
  .order-items .more {
    width: 64px; height: 64px;
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 18px;
    color: var(--ink-500); font-weight: 600;
  }
  .order-actions {
    display: flex;
    gap: var(--sp-2);
  }
  .order-actions a {
    height: 40px; padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center;
    text-decoration: none;
  }
  .order-actions .primary { background: var(--brass-500); color: white; }
  .order-actions .primary:hover { background: var(--brass-600); }
  .order-actions .secondary {
    background: transparent; color: var(--forest-900);
    box-shadow: inset 0 0 0 1.5px var(--ink-200);
  }
  .order-actions .secondary:hover { box-shadow: inset 0 0 0 1.5px var(--brass-500); color: var(--brass-500); }

  .order-progress {
    background: var(--cream-50);
    padding: var(--sp-3) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 12px;
    color: var(--ink-700);
    border-top: 1px solid var(--ink-100);
  }
  .order-progress .bar {
    flex: 1; height: 6px;
    background: var(--ink-100);
    border-radius: 3px;
    overflow: hidden;
  }
  .order-progress .bar .fill {
    height: 100%;
    background: var(--brass-500);
    border-radius: 3px;
  }
  .order-progress .step-list {
    display: flex; gap: var(--sp-4);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-400);
  }
  .order-progress .step-list .step.done { color: var(--brass-500); font-weight: 600; }
  .order-progress .step-list .step.current { color: var(--forest-900); font-weight: 600; }

  /* Stats row */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-10);
  }
  .stat {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-5);
  }
  .stat .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--brass-500);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .stat .v {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .stat .sub { font-size: 12px; color: var(--ink-500); }

  /* Mobile */
  @media (max-width: 1024px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .acc-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .acc-nav { position: static; }
    .acc-nav-user { padding: var(--sp-4); }
    .stats-row { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .order-head {
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-3) var(--sp-4);
      padding: var(--sp-4);
    }
    .order-head .status { grid-column: 1 / -1; justify-self: start; }
    .order-body { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
    .order-actions { width: 100%; }
    .order-actions a { flex: 1; justify-content: center; }
    .order-progress {
      flex-direction: column; align-items: stretch;
      gap: var(--sp-2);
    }
    .order-progress .step-list { font-size: 10px; gap: var(--sp-2); }
  }

/* ----- account-login.html ----- */
.breadcrumb {
    padding: var(--sp-5) 0;
    background: var(--cream-50);
    border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
    color: var(--ink-500);
  }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  .auth-wrap { padding: var(--sp-16) 0 var(--sp-20); background: var(--cream-50); min-height: 70vh; }
  .auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    max-width: 1080px;
    margin: 0 auto;
  }
  .auth-card {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-10);
    border: 1px solid var(--ink-100);
  }
  .auth-card h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-2);
  }
  .auth-card h1 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .auth-card .lede {
    color: var(--ink-500);
    font-size: 14px;
    margin: 0 0 var(--sp-8);
  }
  .field { position: relative; margin-bottom: var(--sp-3); }
  .field input {
    width: 100%;
    height: 56px;
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 20px var(--sp-4) 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--forest-900);
  }
  .field input:focus { outline: 0; border-color: var(--brass-500); }
  .field label {
    position: absolute; top: 8px; left: 17px;
    font-size: 11px; letter-spacing: 0.04em;
    color: var(--ink-500); pointer-events: none; font-weight: 500;
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
  .checkbox-row {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    cursor: pointer; font-size: 13px; line-height: 1.5;
    color: var(--ink-700); margin: var(--sp-3) 0;
  }
  .checkbox-row .cb {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ink-300);
    border-radius: 4px; flex-shrink: 0; margin-top: 1px;
    position: relative; background: var(--paper);
  }
  .checkbox-row.checked .cb { background: var(--brass-500); border-color: var(--brass-500); }
  .checkbox-row.checked .cb::after {
    content: ""; position: absolute; top: 2px; left: 5px;
    width: 5px; height: 9px;
    border: solid white; border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }
  .auth-card .row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; margin-bottom: var(--sp-5);
  }
  .auth-card .row a { color: var(--brass-500); text-decoration: underline; text-underline-offset: 2px; }
  .auth-card .btn-primary {
    width: 100%; height: 56px;
    background: var(--brass-500); color: white;
    border-radius: var(--r-md);
    font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  }
  .auth-card .btn-primary:hover { background: var(--brass-600); }
  .auth-divider {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: var(--sp-6) 0;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400);
  }
  .auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--ink-200);
  }
  .social-btns { display: grid; gap: var(--sp-2); }
  .social-btn {
    height: 48px;
    border: 1.5px solid var(--ink-200);
    background: var(--paper);
    border-radius: var(--r-md);
    font-size: 14px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
    color: var(--forest-900);
    cursor: pointer;
  }
  .social-btn:hover { border-color: var(--brass-500); }
  .social-btn .ic { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }

  /* Register side */
  .auth-card.register .strength {
    display: flex; gap: 4px; margin: 6px 0 4px;
  }
  .auth-card.register .strength .bar {
    flex: 1; height: 3px; background: var(--ink-100); border-radius: 2px;
  }
  .auth-card.register .strength .bar.active { background: var(--brass-500); }
  .auth-card.register .strength-label {
    font-size: 11px; color: var(--ink-500);
    font-family: var(--font-mono); letter-spacing: 0.06em;
  }
  .auth-card.register .strength-label strong { color: var(--brass-500); font-weight: 600; }

  /* Benefits side panel — replaces register when ?login */
  .benefits {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .benefits h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-3);
  }
  .benefits h2 em {
    color: var(--brass-500) !important;
    font-family: var(--font-italic) !important;
    font-style: italic;
    font-weight: 400;
  }
  .benefits .strap {
    color: var(--ink-500);
    margin: 0 0 var(--sp-6);
  }
  .benefits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
  .benefits li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: 14px; color: var(--ink-700); line-height: 1.5;
  }
  .benefits li .ic {
    width: 32px; height: 32px;
    border-radius: 50%; background: var(--brass-500);
    color: white;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .benefits li strong { display: block; color: var(--forest-900); margin-bottom: 2px; }

  @media (max-width: 1024px) { .auth-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
  @media (max-width: 768px) {
    .auth-wrap { padding: var(--sp-8) 0 var(--sp-12); }
    .auth-card, .benefits { padding: var(--sp-6); }
    .field-row { grid-template-columns: 1fr; }
  }

/* ----- account-wishlist.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }

  .acc-hero { padding: var(--sp-10) 0 var(--sp-8); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .acc-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.025em; font-weight: 600; color: var(--forest-900); margin: 0 0 var(--sp-2); }
  .acc-hero h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .acc-hero .strap { color: var(--ink-500); font-size: 14px; margin: 0; }
  .acc-hero .strap strong { color: var(--brass-500); font-weight: 500; }

  .acc-main { padding: var(--sp-10) 0 var(--sp-20); }
  .acc-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-10); align-items: start; }

  /* Sidebar nav (shared pattern) */
  .acc-nav { position: sticky; top: var(--sp-5); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: var(--sp-2); overflow: hidden; }
  .acc-nav-user { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--ink-100); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); }
  .acc-nav-user .av { width: 44px; height: 44px; border-radius: 50%; background: var(--brass-500); color: white; display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .acc-nav-user .name { font-weight: 600; font-size: 14px; color: var(--forest-900); }
  .acc-nav-user .email { font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
  .acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .acc-nav li a { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); font-size: 14px; color: var(--ink-700); border-radius: var(--r-md); transition: background 0.12s, color 0.12s; }
  .acc-nav li a:hover { background: var(--cream-100); color: var(--forest-900); }
  .acc-nav li a.active { background: var(--brass-500); color: white; font-weight: 500; }
  .acc-nav li a .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: rgba(0,0,0,0.06); padding: 2px 7px; border-radius: var(--r-full); color: var(--ink-500); }
  .acc-nav li a.active .ct { background: rgba(255,255,255,0.2); color: white; }
  .acc-nav .signout { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink-100); }
  .acc-nav .signout a { color: var(--ink-500); font-size: 13px; }

  .acc-content h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-6);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .acc-content h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .acc-content h2 .count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); font-weight: 400; }

  /* Top bar */
  .wishlist-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: var(--cream-100);
    border-radius: var(--r-md);
  }
  .wishlist-toolbar .l { font-size: 13px; color: var(--ink-700); }
  .wishlist-toolbar .r { display: flex; gap: var(--sp-2); }
  .wishlist-toolbar button {
    height: 36px; padding: 0 var(--sp-4);
    background: var(--paper); border: 1px solid var(--ink-200);
    border-radius: var(--r-md); font-size: 13px; font-weight: 500;
    color: var(--forest-900); cursor: pointer;
  }
  .wishlist-toolbar button.primary { background: var(--brass-500); color: white; border-color: var(--brass-500); }

  /* Wishlist grid */
  .wishlist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-4); }
  .wish-card {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
  }
  .wish-card:hover { border-color: var(--brass-500); transform: translateY(-2px); }
  .wish-card .img {
    aspect-ratio: 1;
    background: var(--cream-100);
    display: grid; place-items: center;
    padding: var(--sp-5);
    position: relative;
  }
  .wish-card .img .pf-frame { width: 70%; aspect-ratio: 3/4; }
  .wish-card .remove {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    width: 32px; height: 32px;
    background: var(--paper);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-700);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: color 0.15s;
  }
  .wish-card .remove:hover { color: var(--red-500); }
  .wish-card .tag {
    position: absolute; top: var(--sp-3); left: var(--sp-3);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--brass-500); color: white;
    padding: 4px 8px; border-radius: var(--r-sm);
  }
  .wish-card .tag.sale { background: var(--red-500); }
  .wish-card .tag.outofstock { background: var(--ink-400); }
  .wish-card .info {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-2);
    flex: 1;
  }
  .wish-card .nm {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--forest-900);
  }
  .wish-card .meta {
    font-size: 12px; color: var(--ink-500);
    line-height: 1.5;
  }
  .wish-card .price-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: var(--sp-3);
    margin-top: auto;
    border-top: 1px solid var(--ink-100);
  }
  .wish-card .price {
    font-family: var(--font-mono); font-size: 15px;
    color: var(--forest-900); font-weight: 500;
  }
  .wish-card .price .strike {
    color: var(--ink-400); text-decoration: line-through; margin-right: 4px; font-size: 12px;
  }
  .wish-card .saved {
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--ink-500);
  }
  .wish-card .actions {
    display: flex; gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-4);
  }
  .wish-card .actions .btn {
    flex: 1; height: 38px;
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wish-card .actions .add { background: var(--brass-500); color: white; }
  .wish-card .actions .add:hover { background: var(--brass-600); }
  .wish-card .actions .add[disabled] { background: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }
  .wish-card .actions .view { background: transparent; color: var(--forest-900); box-shadow: inset 0 0 0 1.5px var(--ink-200); }

  /* Mobile */
  @media (max-width: 1024px) { .wishlist-grid { grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 768px) {
    .acc-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .acc-nav { position: static; }
    .wishlist-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
    .wishlist-toolbar { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .wishlist-toolbar .r { flex-wrap: wrap; }
  }
  @media (max-width: 480px) {
    .wish-card .nm { font-size: 16px; }
    .wish-card .info { padding: var(--sp-3) var(--sp-4); }
  }

/* ----- account-addresses.html ----- */
.breadcrumb { padding: var(--sp-5) 0; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); font-size: 13px; color: var(--ink-500); }
  .breadcrumb a:hover { color: var(--brass-500); }
  .breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
  .breadcrumb .current { color: var(--forest-900); }
  .acc-hero { padding: var(--sp-10) 0 var(--sp-8); background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
  .acc-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.025em; font-weight: 600; color: var(--forest-900); margin: 0 0 var(--sp-2); }
  .acc-hero h1 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .acc-hero .strap { color: var(--ink-500); font-size: 14px; margin: 0; }
  .acc-main { padding: var(--sp-10) 0 var(--sp-20); }
  .acc-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-10); align-items: start; }
  .acc-nav { position: sticky; top: var(--sp-5); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: var(--sp-2); }
  .acc-nav-user { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--ink-100); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); }
  .acc-nav-user .av { width: 44px; height: 44px; border-radius: 50%; background: var(--brass-500); color: white; display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
  .acc-nav-user .name { font-weight: 600; font-size: 14px; color: var(--forest-900); }
  .acc-nav-user .email { font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
  .acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .acc-nav li a { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); font-size: 14px; color: var(--ink-700); border-radius: var(--r-md); }
  .acc-nav li a:hover { background: var(--cream-100); color: var(--forest-900); }
  .acc-nav li a.active { background: var(--brass-500); color: white; font-weight: 500; }
  .acc-nav li a .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: rgba(0,0,0,0.06); padding: 2px 7px; border-radius: var(--r-full); color: var(--ink-500); }
  .acc-nav li a.active .ct { background: rgba(255,255,255,0.2); color: white; }
  .acc-nav .signout { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink-100); }
  .acc-nav .signout a { color: var(--ink-500); font-size: 13px; }

  .acc-content h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-900); margin: 0 0 var(--sp-6); display: flex; align-items: baseline; justify-content: space-between; }
  .acc-content h2 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }

  .add-new {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--cream-100); border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
  }
  .add-new .l { font-size: 13px; color: var(--ink-700); }
  .add-new .btn-add {
    height: 40px; padding: 0 var(--sp-4);
    background: var(--brass-500); color: white;
    border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
  }

  .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .addr-card {
    background: var(--paper);
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    position: relative;
    transition: border-color 0.15s;
  }
  .addr-card:hover { border-color: var(--brass-500); }
  .addr-card.default {
    border-color: var(--brass-500);
    background: rgba(45,89,97,0.02);
  }
  .addr-card.default::before {
    content: "★ DEFAULT";
    position: absolute;
    top: -10px;
    left: var(--sp-5);
    background: var(--brass-500);
    color: white;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-weight: 600;
  }
  .addr-card .head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
  }
  .addr-card .nm {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 600;
    color: var(--forest-900);
    letter-spacing: -0.015em;
  }
  .addr-card .label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-top: 4px;
  }
  .addr-card .icon-pill {
    width: 32px; height: 32px;
    background: var(--cream-100);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--brass-500);
  }
  .addr-card .body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-700);
    margin-bottom: var(--sp-4);
  }
  .addr-card .body strong { color: var(--forest-900); }
  .addr-card .phone {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-500);
    margin-top: var(--sp-2);
  }
  .addr-card .actions {
    display: flex; gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--ink-100);
  }
  .addr-card .actions a, .addr-card .actions button {
    flex: 1;
    height: 36px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--forest-900);
    box-shadow: inset 0 0 0 1.5px var(--ink-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }
  .addr-card .actions a:hover, .addr-card .actions button:hover { box-shadow: inset 0 0 0 1.5px var(--brass-500); color: var(--brass-500); }
  .addr-card .actions .primary {
    background: var(--brass-500); color: white;
    box-shadow: none;
  }
  .addr-card .actions .danger { color: var(--red-500); }
  .addr-card .actions .danger:hover { box-shadow: inset 0 0 0 1.5px var(--red-500); }

  /* Add new card (dashed) */
  .addr-card.add-card {
    border-style: dashed;
    border-color: var(--ink-300);
    background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 280px;
    cursor: pointer;
    text-align: center;
  }
  .addr-card.add-card:hover {
    border-color: var(--brass-500);
    background: rgba(45,89,97,0.02);
  }
  .addr-card.add-card .plus {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--brass-500);
    color: white;
    display: grid; place-items: center;
    margin-bottom: var(--sp-4);
    font-size: 26px;
    line-height: 1;
  }
  .addr-card.add-card .ttl {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600;
    color: var(--forest-900);
    margin-bottom: 4px;
  }
  .addr-card.add-card .sub {
    font-size: 13px;
    color: var(--ink-500);
  }

  /* Mobile */
  @media (max-width: 768px) {
    .acc-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .acc-nav { position: static; }
    .addr-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .add-new { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  }

/* ----- search-results.html ----- */
.search-hero {
    background: var(--cream-50);
    padding: var(--sp-10) 0 var(--sp-6);
    border-bottom: 1px solid var(--ink-100);
  }
  .search-wrap {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
  }
  .search-input {
    width: 100%;
    height: 64px;
    background: var(--paper);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 0 var(--sp-12) 0 var(--sp-16);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--forest-900);
    letter-spacing: -0.015em;
  }
  .search-input:focus { outline: 0; border-color: var(--brass-500); }
  .search-icon { position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%); color: var(--brass-500); pointer-events: none; }
  .search-clear { position: absolute; right: var(--sp-5); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--cream-100); display: grid; place-items: center; color: var(--ink-700); cursor: pointer; }
  .search-meta {
    text-align: center;
    margin-top: var(--sp-5);
    font-size: 14px;
    color: var(--ink-500);
  }
  .search-meta strong { color: var(--forest-900); font-weight: 600; }

  /* Suggestions row */
  .related-searches {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-5);
  }
  .related-searches .chip {
    height: 32px; padding: 0 var(--sp-4);
    background: var(--paper); border: 1px solid var(--ink-200);
    border-radius: var(--r-full);
    font-size: 13px;
    color: var(--ink-700);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .related-searches .chip:hover { border-color: var(--brass-500); color: var(--brass-500); }
  .related-searches .chip .ic { color: var(--brass-500); }

  /* Main */
  .search-main { padding: var(--sp-10) 0 var(--sp-20); }
  .search-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-10); align-items: start; }

  /* Sidebar — facets */
  .facets {
    position: sticky; top: var(--sp-5);
  }
  .facet-block {
    border-bottom: 1px solid var(--ink-100);
    padding: var(--sp-5) 0;
  }
  .facet-block:first-child { padding-top: 0; }
  .facet-block h4 {
    font-family: var(--font-sans); font-size: 12px;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--forest-900);
    margin-bottom: var(--sp-3);
    display: flex; justify-content: space-between; align-items: center;
  }
  .facet-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .facet-block li { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; cursor: pointer; color: var(--ink-700); }
  .facet-block li .cb {
    width: 16px; height: 16px;
    border: 1.4px solid var(--ink-300);
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--paper);
    position: relative;
  }
  .facet-block li.checked .cb { background: var(--brass-500); border-color: var(--brass-500); }
  .facet-block li.checked .cb::after {
    content: ""; position: absolute; top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid white; border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
  }
  .facet-block li .ct { margin-left: auto; color: var(--ink-400); font-family: var(--font-mono); font-size: 11px; }

  /* Results */
  .results-tabs {
    display: flex; gap: var(--sp-6);
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: var(--sp-6);
  }
  .results-tabs button {
    padding: var(--sp-3) 0;
    font-size: 14px; font-weight: 500;
    color: var(--ink-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .results-tabs button.active {
    color: var(--forest-900);
    border-color: var(--brass-500);
  }
  .results-tabs button .ct {
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 11px;
    margin-left: 4px;
  }

  .results-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-6);
    font-size: 13px; color: var(--ink-500);
  }
  .results-toolbar .l strong { color: var(--forest-900); font-weight: 500; }
  .results-toolbar .l mark {
    background: rgba(45,89,97,0.15);
    color: var(--brass-500);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
  }

  /* Section header within results */
  .results-section { margin-bottom: var(--sp-12); }
  .results-section h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--forest-900);
    margin: 0 0 var(--sp-5);
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .results-section h3 em { color: var(--brass-500) !important; font-family: var(--font-italic) !important; font-style: italic; font-weight: 400; }
  .results-section h3 .ct { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); font-weight: 400; }
  .results-section .see-all { font-size: 13px; color: var(--brass-500); text-decoration: underline; text-underline-offset: 2px; }

  /* Product grid */
  .results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-4); }
  .results-grid .pc-image .pf-frame { width: 65%; aspect-ratio: 3/4; }

  /* Collection / article result */
  .collection-result {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
  }
  .collection-result:hover { border-color: var(--brass-500); }
  .collection-result .img {
    background: var(--cream-100);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    padding: 12px;
  }
  .collection-result .img .pf-frame {
    width: 80%; aspect-ratio: 3/4;
    --mat-w: 8px; --frame-bevel: 4px;
  }
  .collection-result .info { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .collection-result .kicker {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brass-500);
  }
  .collection-result h4 {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--forest-900);
  }
  .collection-result .meta { font-size: 12px; color: var(--ink-500); }

  /* "Did you mean" empty state */
  .did-you-mean {
    background: var(--cream-100);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    font-size: 14px;
    color: var(--ink-700);
  }
  .did-you-mean strong { color: var(--brass-500); font-weight: 600; }
  .did-you-mean a { color: var(--brass-500); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

  /* Mobile */
  @media (max-width: 1024px) {
    .results-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .search-hero { padding: var(--sp-6) 0 var(--sp-4); }
    .search-input { font-size: 16px; height: 56px; padding: 0 var(--sp-10) 0 var(--sp-12); }
    .search-icon { left: var(--sp-4); }
    .search-clear { right: var(--sp-4); width: 28px; height: 28px; }
    .search-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .facets { position: static; }
    .facet-block { padding: var(--sp-3) 0; }
    .results-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-3); }
    .results-tabs { overflow-x: auto; scrollbar-width: none; }
    .results-tabs::-webkit-scrollbar { display: none; }
    .results-tabs button { white-space: nowrap; }
  }