/* Noord & Nest
   Layout: a printed catalogue. Extra-wide Archivo for headings, condensed Archivo for
   article numbers and specs, plain Archivo for reading: one family, three widths.
   Products sit on flat colour tiles; the bold move is the lamp configurator as the hero. */
:root {
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --ink: #151515;
  --muted: #63635E;
  --line: #E0E0DA;
  --pine: #2F6B55;      /* actions */
  --on-pine: #FFFFFF;
  --t1: #E3E8E1;        /* product tiles */
  --t2: #ECE5D7;
  --t3: #E0E5EA;
  --t4: #EBDCD8;
  --stage: #E3E8E1;
  --glow: rgba(255, 196, 120, .55);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2rem, 0.9rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.5rem, 0.8rem + 3.2vw, 3.6rem);
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121312; --surface: #1B1C1B; --ink: #EDEDEA; --muted: #A3A39D; --line: #2E2F2D;
    --pine: #66B596; --on-pine: #0F1A15; --t1: #1F2520; --t2: #27231C; --t3: #1E2329; --t4: #2A1F1F; --stage: #1A1F1B;
    --glow: rgba(255, 186, 100, .42); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121312; --surface: #1B1C1B; --ink: #EDEDEA; --muted: #A3A39D; --line: #2E2F2D;
  --pine: #66B596; --on-pine: #0F1A15; --t1: #1F2520; --t2: #27231C; --t3: #1E2329; --t4: #2A1F1F; --stage: #1A1F1B;
  --glow: rgba(255, 186, 100, .42); color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; }
h1, h2 { font-stretch: 125%; font-weight: 800; letter-spacing: -0.035em; line-height: .98; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.nn-btn { border: 0; background: var(--ink); color: var(--bg); font-weight: 700; padding: 15px 24px; border-radius: var(--r); letter-spacing: .02em; transition: background .2s; }
.nn-btn:hover { background: var(--pine); color: var(--on-pine); }
.nn-btn-block { width: 100%; }

/* Free-shipping strip */
.nn-ship { background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 600; }
.nn-ship-in { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 8px; flex-wrap: wrap; }
.nn-ship-bar { width: 120px; height: 4px; border-radius: 99px; background: rgba(127, 127, 127, .35); overflow: hidden; }
.nn-ship-bar span { display: block; height: 100%; width: 0; background: var(--pine); transition: width .6s var(--ease-out); }

/* Header */
.nn-head { display: flex; align-items: center; gap: 28px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.nn-logo { font-stretch: 125%; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nn-nav { display: flex; gap: 22px; font-weight: 600; font-size: 15px; }
.nn-nav a { text-decoration: none; color: var(--muted); }
.nn-nav a:hover { color: var(--ink); }
.nn-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nn-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; background: var(--surface); color: var(--muted); }
.nn-search input { border: 0; background: none; outline: none; width: 150px; color: var(--ink); }
.nn-cart-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); background: none; border-radius: 99px; padding: 7px 8px 7px 16px; font-weight: 700; }
.nn-cart-count { min-width: 24px; height: 24px; border-radius: 99px; display: inline-grid; place-items: center; padding-inline: 6px; background: var(--ink); color: var(--bg); font-size: 12px; font-variant-numeric: tabular-nums; }
.nn-cart-btn.bump .nn-cart-count { animation: nn-bump .45s var(--ease-out); }
@keyframes nn-bump { 40% { transform: scale(1.4); background: var(--pine); } }
@media (max-width: 960px) { .nn-nav { display: none; } }
@media (max-width: 600px) { .nn-search input { width: 90px; } .nn-logo { font-size: 1.05rem; } .nn-head { gap: 12px; } .nn-search { padding: 7px 10px; } }
@media (max-width: 420px) { .nn-search { display: none; } }

/* Hero: configurator */
.nn-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px); align-items: center; }
.nn-stage { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--stage); border-radius: var(--r); display: grid; place-items: end center; overflow: hidden; transition: background .6s; }
.nn-stage.is-off { background: color-mix(in srgb, var(--stage) 70%, #000 30%); }
.nn-stage-glow { position: absolute; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, var(--glow), transparent 55%); transition: opacity .6s; }
.nn-stage.is-off .nn-stage-glow { opacity: 0; }
.nn-lamp { position: relative; width: 44%; height: 76%; display: grid; justify-items: center; margin-bottom: 10%; --shade: #2F6B55; --metal: #B9875A; }
.nn-shade {
  position: absolute; top: 0; width: 100%; height: 42%; border-radius: 50% 50% 6% 6% / 92% 92% 8% 8%;
  background: linear-gradient(105deg, rgba(255,255,255,.42) 0 14%, transparent 34%), var(--shade);
  box-shadow: inset 0 -14px 24px -10px rgba(0,0,0,.28); transition: background .5s, filter .6s; z-index: 2;
}
.nn-stage:not(.is-off) .nn-shade { filter: drop-shadow(0 18px 40px var(--glow)) brightness(1.08); }
.nn-bulb { position: absolute; top: 37%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #FFE7B8; z-index: 1; box-shadow: 0 0 40px 18px rgba(255, 210, 140, .7); transition: opacity .5s, box-shadow .5s; }
.nn-stage.is-off .nn-bulb { opacity: .25; box-shadow: none; }
.nn-stem { position: absolute; top: 40%; bottom: 7%; width: 4.5%; background: var(--metal); border-radius: 4px; transition: background .5s; }
.nn-base { position: absolute; bottom: 0; width: 52%; height: 9%; border-radius: 50%; background: var(--metal); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); transition: background .5s; }
.nn-stage-tag { position: absolute; left: 16px; bottom: 14px; font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--muted); }

.nn-config { display: grid; gap: 18px; }
.nn-artnr { font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.nn-config h1 { font-size: var(--fs-h1); }
.nn-desc { color: var(--muted); max-width: 46ch; }
.nn-opt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.nn-opt legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 10px; }
.nn-opt legend span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.nn-swatches { display: flex; gap: 10px; }
.nn-swatches button { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.nn-swatches button:hover { transform: scale(1.08); }
.nn-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.nn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: fit-content; max-width: 100%; }
.nn-seg button { border: 0; background: var(--surface); padding: 10px 18px; font-weight: 600; }
.nn-seg button + button { border-left: 1px solid var(--line); }
.nn-seg button small { color: var(--muted); font-weight: 500; }
.nn-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.nn-seg button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.nn-light { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14.5px; }
.nn-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.nn-toggle input { appearance: none; width: 40px; height: 22px; border-radius: 99px; background: var(--line); position: relative; margin: 0; cursor: pointer; transition: background .2s; }
.nn-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .2s; }
.nn-toggle input:checked { background: #E0A43A; }
.nn-toggle input:checked::after { transform: translateX(18px); }
.nn-stock { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.nn-stock i { width: 8px; height: 8px; border-radius: 50%; background: #2E9B5B; }
.nn-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.nn-price { font-stretch: 112%; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: auto; }
.nn-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.nn-qty button { width: 40px; height: 46px; border: 0; background: none; font-size: 1.2rem; }
.nn-qty output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .nn-hero { grid-template-columns: minmax(0, 1fr); } .nn-stage { aspect-ratio: 4 / 3; } }

/* USPs */
.nn-usp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.nn-usp li { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 14.5px; }
.nn-usp li + li { border-left: 1px solid var(--line); }
.nn-usp b { color: var(--ink); }
@media (max-width: 640px) { .nn-usp { grid-template-columns: minmax(0, 1fr); } .nn-usp li + li { border-left: 0; border-top: 1px solid var(--line); } }

/* Shop grid */
.nn-shop { padding-block: clamp(56px, 8vw, 104px); }
.nn-shop-head { display: grid; gap: 18px; margin-bottom: 28px; }
.nn-shop-head h2 { font-size: var(--fs-h2); }
.nn-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.nn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nn-chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 7px 16px; font-weight: 600; font-size: 14.5px; }
.nn-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.nn-sort select { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 8px 12px; font-weight: 600; }
.nn-count { font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
@media (max-width: 1000px) { .nn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .nn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }
.nn-card { display: grid; gap: 4px; animation: nn-in .45s var(--ease-out) both; }
@keyframes nn-in { from { opacity: 0; transform: translateY(10px); } }
.nn-art { position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--r); background: var(--tile); display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
.nn-art > span { transition: transform .5s var(--ease-out); }
.nn-card:hover .nn-art > span { transform: scale(1.06) rotate(-2deg); }
.nn-badge { position: absolute; top: 10px; left: 10px; font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; background: var(--surface); border-radius: 2px; }
.nn-badge-low { background: #A8323E; color: #fff; }
.nn-quick { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); font-size: 1.4rem; line-height: 1; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s, background .2s; }
.nn-card:hover .nn-quick, .nn-quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .nn-quick { opacity: 1; transform: none; } }
.nn-quick:hover { background: var(--pine); color: var(--on-pine); }
.nn-card h3 { font-size: 15.5px; font-weight: 700; }
.nn-card .nn-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
.nn-card .nn-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.nn-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--muted); }

/* CSS-drawn products */
.s-vase { width: 30%; height: 60%; background: var(--c); border-radius: 46% 46% 38% 38% / 30% 30% 22% 22%; position: relative; }
.s-vase::before { content: ""; position: absolute; left: 32%; right: 32%; top: -16%; height: 20%; background: var(--c); border-radius: 4px 4px 0 0; filter: brightness(.9); }
.s-bowl { width: 60%; height: 22%; background: var(--c); border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: inset 0 6px 0 rgba(0,0,0,.12); }
.s-mug { width: 30%; height: 30%; background: var(--c); border-radius: 6px 6px 16px 16px; position: relative; }
.s-mug::after { content: ""; position: absolute; right: -32%; top: 22%; width: 34%; height: 46%; border: 7px solid var(--c); border-left: 0; border-radius: 0 50% 50% 0; }
.s-throw { width: 56%; height: 64%; border-radius: 4px; transform: rotate(-4deg); background: repeating-linear-gradient(90deg, var(--c) 0 18px, #F1EBDD 18px 24px, var(--c) 24px 30px, #3B3B3B 30px 34px); position: relative; }
.s-throw::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -8px; height: 10px; background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 7px); }
.s-cushion { width: 52%; aspect-ratio: 1; background: var(--c); border-radius: 24%; position: relative; box-shadow: inset 0 -10px 20px rgba(0,0,0,.08); }
.s-cushion::after { content: ""; position: absolute; inset: 12%; border: 2px dashed rgba(0,0,0,.18); border-radius: 18%; }
.s-candle { width: 10%; height: 48%; background: #F2EEE6; border-radius: 3px; position: relative; margin-bottom: 8%; }
.s-candle::before { content: ""; position: absolute; left: 50%; top: -14%; width: 60%; aspect-ratio: 1 / 1.6; translate: -50% 0; background: #F4B23E; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }
.s-candle::after { content: ""; position: absolute; left: 50%; bottom: -12%; width: 360%; height: 14%; translate: -50% 0; background: var(--c); border-radius: 50%; }
.s-pendant { width: 50%; height: 30%; background: var(--c); border-radius: 50% 50% 4% 4% / 100% 100% 4% 4%; position: relative; margin-top: 10%; }
.s-pendant::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 140%; background: var(--ink); }
.s-lamp { width: 44%; height: 66%; position: relative; }
.s-lamp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: var(--c); border-radius: 50% 50% 6% 6% / 92% 92% 8% 8%; }
.s-lamp::after { content: ""; position: absolute; left: 47%; top: 38%; bottom: 0; width: 6%; background: #B9875A; box-shadow: 0 0 0 0 transparent; border-radius: 3px; }

/* Makers */
.nn-makers { background: var(--ink); color: var(--bg); padding-block: clamp(64px, 9vw, 120px); }
.nn-makers-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.nn-makers h2 { font-size: var(--fs-h2); }
.nn-makers p { opacity: .8; max-width: 46ch; }
.nn-maker-list { margin-top: 28px; border-top: 1px solid rgba(127,127,127,.4); }
.nn-maker-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid rgba(127,127,127,.4); }
.nn-maker-list span, .nn-maker-list em { font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; font-style: normal; align-self: center; }
@media (max-width: 820px) { .nn-makers-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .nn-maker-list li { grid-template-columns: minmax(0, 1fr) auto; } .nn-maker-list li > span { grid-column: 1 / -1; } }

/* Footer */
.nn-foot { padding-block: 44px 28px; }
.nn-foot-in { display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; align-items: start; }
.nn-foot .nn-logo { font-size: clamp(1.8rem, 5vw, 3.2rem); }
.nn-foot ul { display: grid; gap: 4px; color: var(--muted); }
.nn-foot-small { flex-basis: 100%; font-size: 13px; color: var(--muted); }

/* Cart drawer */
.nn-drawer { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(420px, 100%); max-width: 100%; border: 0; padding: 0; background: var(--surface); color: var(--ink); }
.nn-drawer[open] { animation: nn-slide .35s var(--ease-out); }
.nn-drawer::backdrop { background: rgba(10, 10, 10, .45); }
@keyframes nn-slide { from { transform: translateX(100%); } }
.nn-drawer-in { height: 100%; display: flex; flex-direction: column; padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; }
.nn-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nn-drawer-head h2 { font-size: 1.4rem; }
.nn-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: none; font-size: 1.4rem; line-height: 1; }
.nn-lines { flex: 1; overflow-y: auto; padding-block: 8px; }
.nn-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nn-line-art { width: 64px; aspect-ratio: 1; border-radius: var(--r); background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.nn-line-art > span { transform: scale(.9); }
.nn-line p { font-weight: 700; font-size: 15px; line-height: 1.3; }
.nn-line small { display: block; color: var(--muted); font-size: 13px; }
.nn-line-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.nn-line-qty button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: none; line-height: 1; }
.nn-line-qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.nn-line > b { font-variant-numeric: tabular-nums; align-self: start; }
.nn-drawer-empty { color: var(--muted); padding: 24px 0; }
.nn-drawer-foot { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.nn-drawer-ship { font-size: 14px; color: var(--muted); }
.nn-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.nn-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 70; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--r); font-weight: 600; max-width: calc(100% - 32px); animation: nn-in .3s var(--ease-out); }

/* ---------- Phase 2: shared features mapped to this brand ---------- */
:root {
  --ui-bg: var(--surface); --ui-fg: var(--ink); --ui-muted: var(--muted); --ui-line: var(--line); --ui-soft: var(--bg);
  --ui-accent: var(--pine); --ui-on-accent: var(--on-pine); --ui-radius: 4px;
  --ui-font: var(--font); --ui-font-display: var(--font); --ui-display-case: uppercase; --ui-display-weight: 800; --ui-display-stretch: 125%;
}
.nn-title-sub { display: inline; }
@media (max-width: 600px) {
  .nn-cart-label { display: none; }
  .nn-cart-btn { padding: 6px; }
  .nn-tools { gap: 4px; }
}

/* Wishlist heart on product tiles */
.nn-heart { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: transform .2s; }
.nn-heart:hover { transform: scale(1.1); }
.nn-heart svg path { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .2s; }
.nn-heart[aria-pressed="true"] { color: #A8323E; }
.nn-heart[aria-pressed="true"] svg path { fill: currentColor; }
.nn-heart.pop { animation: nn-bump .4s var(--ease-out); }

/* Makers: a giant line of materials that slides with the scroll */
.nn-marquee { overflow: hidden; white-space: nowrap; margin-bottom: clamp(32px, 5vw, 64px); }
.nn-marquee span { display: inline-block; font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; font-size: clamp(3.4rem, 2rem + 8vw, 10rem); color: transparent; -webkit-text-stroke: 1.5px var(--bg); padding-left: 4vw; }

.nn-makers h2 { font-size: clamp(1.5rem, 0.6rem + 2.8vw, 3rem); }
@media (max-width: 400px) { h1, h2 { overflow-wrap: break-word; } }

/* =================== Phase 3: 3D hero + inner pages =================== */
.nn-3d { position: absolute; inset: 0; z-index: 1; }
.nn-stage.has-3d .nn-lamp { display: none; }
.nn-stage.has-3d .nn-stage-glow { top: 55%; }
.nn-stage-tag { z-index: 2; }
.nn-more { margin-top: 32px; }
.nn-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nn-subnav { display: none; }
@media (max-width: 960px) {
  .nn-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gutter-r) 10px var(--gutter-l); border-bottom: 1px solid var(--line); }
  .nn-subnav::-webkit-scrollbar { display: none; }
  .nn-subnav a { flex: none; text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
  .nn-subnav a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}
.nn-card h3 a { text-decoration: none; }
.nn-card h3 a:hover { text-decoration: underline; }
.nn-card.is-out .nn-art > span { opacity: .45; filter: grayscale(.6); }
.nn-link { border: 0; background: none; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.nn-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.nn-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Page basics */
.nn-page-hero { padding-block: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 28px); }
.nn-page-hero h1 { font-size: var(--fs-h1); margin-top: 12px; }
.nn-crumbs { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.nn-crumbs a { color: inherit; }
.nn-lead { color: var(--muted); max-width: 56ch; margin-top: 12px; }
.nn-secure { display: flex; align-items: center; gap: 8px; color: var(--pine); font-weight: 600; }

/* Shop */
.nn-shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; padding-bottom: 96px; }
.nn-side { position: sticky; top: calc(var(--zd-bar-h) + 16px); display: grid; gap: 22px; }
.nn-side-head { display: flex; justify-content: space-between; align-items: center; }
.nn-side-head h2 { font-size: 1.1rem; }
.nn-side-close, .nn-side-apply { display: none; }
.nn-fset { border: 0; padding: 0 0 18px; margin: 0; min-width: 0; border-bottom: 1px solid var(--line); }
.nn-fset legend { font-stretch: 75%; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 10px; }
.nn-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; }
.nn-check input { width: 18px; height: 18px; accent-color: var(--pine); flex: none; margin: 0; }
.nn-check small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.nn-range { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 14px; }
.nn-range input { width: 100%; accent-color: var(--pine); }
.nn-range-out { grid-column: 1 / -1; font-weight: 700; font-variant-numeric: tabular-nums; }
.nn-f-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.nn-f-colors button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 10px 4px 4px; font-size: 13.5px; font-weight: 600; }
.nn-f-colors button span { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.nn-f-colors button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nn-results-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nn-results-bar .nn-count { margin-right: auto; }
.nn-filter-open { display: none; border: 1px solid var(--ink); background: var(--surface); border-radius: 99px; padding: 7px 14px; font-weight: 700; align-items: center; gap: 8px; }
.nn-filter-open span { min-width: 20px; height: 20px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--pine); color: var(--on-pine); font-size: 12px; }
.nn-sort select, #nn-r-sort { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 8px 12px; font-weight: 600; }
.nn-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; min-height: 4px; }
.nn-active button[data-v] { border: 0; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; }
.nn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .nn-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .nn-shop-layout { grid-template-columns: minmax(0, 1fr); }
  .nn-filter-open { display: inline-flex; }
  .nn-side { position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(360px, 100%); background: var(--bg); padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease-out); box-shadow: -30px 0 60px -30px rgba(0,0,0,.4); visibility: hidden; }
  .nn-side.is-open { transform: none; visibility: visible; }
  .nn-side-close, .nn-side-apply { display: inline-grid; }
  .nn-side-apply { display: block; }
}
body.nn-lock { overflow: hidden; }

/* Product page */
.nn-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 56px); padding-block: 16px 72px; align-items: start; }
.nn-pdp-gallery { display: grid; gap: 10px; position: sticky; top: calc(var(--zd-bar-h) + 16px); }
.nn-pdp-main { --c: #A8323E; position: relative; aspect-ratio: 1; max-width: 100%; border-radius: var(--r); background: var(--t4); overflow: hidden; display: grid; }
.nn-pdp-main .v { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transition: opacity .45s; }
.nn-pdp-main[data-view="front"] .v-front, .nn-pdp-main[data-view="detail"] .v-detail, .nn-pdp-main[data-view="room"] .v-room, .nn-pdp-main[data-view="size"] .v-size { opacity: 1; }
.s-vase-xl { width: 28% !important; height: 62% !important; transition: height .45s var(--ease-out), background .4s; }
.nn-pdp-main.is-low .s-vase-xl { height: 40% !important; }
.v-detail .glaze { width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 30%), repeating-radial-gradient(circle at 60% 120%, color-mix(in srgb, var(--c) 85%, #000) 0 6px, var(--c) 6px 14px, color-mix(in srgb, var(--c) 80%, #fff) 14px 16px); }
.v-room { background: linear-gradient(var(--t3) 0 62%, var(--t2) 62%); position: relative; }
.room-window { position: absolute; left: 12%; top: 10%; width: 30%; height: 38%; border: 8px solid var(--surface); background: linear-gradient(#cfe0ea, #e8f0f4); }
.room-table { position: absolute; left: 40%; right: 6%; bottom: 30%; height: 4%; background: #B9875A; box-shadow: 0 30px 0 -12px #8a6440; }
.s-vase-room { position: absolute; left: 56%; bottom: 34%; width: 10% !important; height: 26% !important; }
.s-bowl-room { position: absolute; left: 72%; bottom: 34%; width: 16% !important; --c: #8FA0B3; }
.v-size svg { width: 70%; height: auto; }
.dim-shape { fill: var(--c); opacity: .9; }
.dim-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dim-t { font: 600 12px var(--font); fill: var(--ink); }
.nn-pdp-main .nn-badge { z-index: 2; }
.nn-pdp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nn-pdp-thumbs button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--t4); padding: 0; display: grid; place-items: center; overflow: hidden; }
.nn-pdp-thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.th { --c: #A8323E; display: block; }
.th-front { width: 22%; height: 52%; border-radius: 46% 46% 38% 38% / 30% 30% 22% 22%; background: var(--c); }
.th-detail { width: 100%; height: 100%; background: repeating-radial-gradient(circle at 60% 120%, var(--c) 0 5px, color-mix(in srgb, var(--c) 75%, #fff) 5px 7px); }
.th-room { width: 100%; height: 100%; background: linear-gradient(var(--t3) 0 60%, var(--t2) 60%); position: relative; }
.th-room::after { content: ""; position: absolute; left: 52%; bottom: 32%; width: 12%; height: 30%; border-radius: 40%; background: var(--c); }
.th-size { width: 60%; height: 60%; border: 2px dashed var(--ink); border-radius: 4px; }
.nn-pdp-info { display: grid; gap: 16px; }
.nn-rating { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.nn-rating .stars { color: #C8963E; letter-spacing: 1px; }
.nn-rating a { color: var(--muted); }
.nn-pdp-price { margin: 0; }
.nn-stock-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.nn-stock-line i { width: 9px; height: 9px; border-radius: 50%; background: #2E9B5B; }
.nn-stock-line.is-low i { background: #E0A43A; }
.nn-stock-line.is-out i { background: #A8323E; }
.nn-buy .nn-pdp-add { flex: 1; min-width: 180px; }
.nn-pdp-info .nn-buy { padding-top: 0; border-top: 0; }
.nn-heart-lg { position: static; width: 48px; height: 48px; border: 1px solid var(--line); }
.nn-eta { font-size: 14px; color: var(--muted); }
.nn-acc { border-top: 1px solid var(--line); }
.nn-acc details { border-bottom: 1px solid var(--line); }
.nn-acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 14px 0; font-weight: 700; }
.nn-acc summary::-webkit-details-marker { display: none; }
.nn-acc summary::after { content: "+"; font-size: 1.3rem; line-height: 1; transition: transform .3s; }
.nn-acc details[open] summary::after { transform: rotate(45deg); }
.nn-acc p { padding-bottom: 16px; color: var(--muted); }
@media (max-width: 860px) { .nn-pdp { grid-template-columns: minmax(0, 1fr); } .nn-pdp-gallery { position: static; } }

.nn-reviews, .nn-complete { padding-bottom: clamp(56px, 8vw, 96px); scroll-margin-top: var(--zd-bar-h); }
.nn-reviews h2, .nn-complete h2 { font-size: var(--fs-h2); margin-bottom: 24px; }
.nn-rev-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; }
.nn-rev-score b { font-stretch: 125%; font-weight: 800; font-size: 3.4rem; line-height: 1; }
.nn-rev-score span { color: var(--muted); }
.nn-bars { display: grid; gap: 6px; margin-top: 14px; }
.nn-bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.nn-bars i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--w), var(--line) var(--w)); }
.nn-bars small { color: var(--muted); text-align: right; }
.nn-rev-list { display: grid; gap: 16px; }
.nn-rev-list figure { margin: 0; padding: 18px 20px; background: var(--surface); border-radius: var(--r); display: grid; gap: 8px; }
.nn-rev-list figcaption { font-size: 14px; color: var(--muted); }
.nn-rev-list figcaption span { color: #C8963E; }
.nn-rev-list blockquote { margin: 0; font-size: 1.05rem; }
@media (max-width: 760px) { .nn-rev-grid { grid-template-columns: minmax(0, 1fr); } }
.nn-sticky { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -16px 32px -20px rgba(0,0,0,.3); transform: translateY(110%); transition: transform .35s var(--ease-out); padding-bottom: env(safe-area-inset-bottom, 0px); }
.nn-sticky.is-on { transform: none; }
.nn-sticky-in { display: flex; align-items: center; gap: 16px; padding-block: 10px; padding-right: calc(var(--gutter-r) + 72px); }
.nn-sticky-name { margin-right: auto; display: grid; line-height: 1.2; }
.nn-sticky-name span { color: var(--muted); font-size: 13.5px; }
.nn-sticky-price { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .nn-sticky-price { display: none; } }

/* Checkout */
.nn-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: start; padding-bottom: 96px; }
.nn-co-main { background: var(--surface); border-radius: var(--r); padding: clamp(18px, 3vw, 32px); display: grid; gap: 22px; }
.nn-co-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nn-co-steps li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--line); font-weight: 700; font-size: 14px; color: var(--muted); }
.nn-co-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; background: var(--bg); }
.nn-co-steps li[aria-current], .nn-co-steps li.done { color: var(--ink); border-color: var(--ink); }
.nn-co-steps li[aria-current] span { background: var(--ink); color: var(--bg); }
.nn-co-steps li.done span { background: var(--pine); color: var(--on-pine); }
.nn-co-step h2, .nn-co-empty h2, .nn-co-done h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); margin-bottom: 16px; }
.nn-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nn-fields .span-2 { grid-column: 1 / -1; }
.nn-fields label, .nn-fields-1 { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.nn-fields small { font-weight: 400; color: var(--muted); }
.nn-fields input, .nn-fields-1 select, .nn-fields-1 textarea { padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); font-weight: 400; }
.nn-fields input:focus, .nn-fields-1 select:focus, .nn-fields-1 textarea:focus { outline: none; border-color: var(--ink); }
.nn-fields input[aria-invalid="true"], .nn-fields-1 select[aria-invalid="true"] { border-color: #A8323E; }
.nn-fields-1 { margin-top: 14px; }
.nn-found { font-size: 14px; color: var(--pine); font-weight: 600; }
@media (max-width: 520px) { .nn-fields { grid-template-columns: minmax(0, 1fr); } }
.nn-radios { display: grid; gap: 8px; }
.nn-radios label { position: relative; cursor: pointer; }
.nn-radios input { position: absolute; opacity: 0; pointer-events: none; }
.nn-radios label > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.nn-radios small { grid-column: 1; color: var(--muted); font-size: 13.5px; }
.nn-radios em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.nn-radios input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
.nn-radios input:focus-visible + span { outline: 2px solid var(--pine); outline-offset: 2px; }
.nn-radios-sm label > span { padding: 10px 14px; }
.nn-co-step .nn-fset { border-bottom: 0; padding: 0; margin-top: 18px; }
.nn-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.nn-days button { display: grid; justify-items: center; padding: 8px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); line-height: 1.2; }
.nn-days small { font-size: 11.5px; color: var(--muted); text-transform: uppercase; }
.nn-days b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.nn-days button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nn-days button[aria-pressed="true"] small { color: inherit; opacity: .75; }
.nn-gift { margin-top: 16px; }
.nn-co-err { color: #A8323E; font-weight: 700; font-size: 14.5px; }
.nn-co-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.nn-co-actions .nn-btn { margin-left: auto; }
.nn-co-empty { display: grid; gap: 12px; justify-items: start; }
.nn-co-empty p { color: var(--muted); }
.nn-co-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.nn-co-done { display: grid; gap: 14px; justify-items: start; }
.nn-co-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--pine); color: var(--on-pine); font-size: 1.6rem; font-weight: 800; }
.nn-co-done > p { color: var(--muted); max-width: 60ch; }
.nn-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin-block: 8px; }
.nn-track li { padding-top: 8px; border-top: 4px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.nn-track li.done { border-color: var(--pine); color: var(--ink); }
.nn-track li.now { border-color: #E0A43A; color: var(--ink); }
.nn-co-sum { position: sticky; top: calc(var(--zd-bar-h) + 16px); background: var(--surface); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; }
.nn-co-sum h2 { font-size: 1.2rem; }
.nn-co-lines { display: grid; gap: 12px; }
.nn-co-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.nn-co-lines .nn-line-art { width: 56px; position: relative; overflow: visible; }
.nn-qty-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; padding-inline: 5px; }
.nn-co-lines p { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.nn-co-lines small { color: var(--muted); font-size: 13px; }
.nn-co-lines b { font-variant-numeric: tabular-nums; font-size: 14.5px; }
.nn-code { display: flex; gap: 6px; }
.nn-code input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); text-transform: uppercase; }
.nn-code button { border: 1px solid var(--ink); background: none; border-radius: var(--r); padding: 0 14px; font-weight: 700; }
.nn-code-msg { font-size: 13.5px; font-weight: 600; min-height: 1px; }
.nn-code-msg.is-ok { color: var(--pine); }
.nn-code-msg.is-bad { color: #A8323E; }
.nn-co-totals { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.nn-co-totals div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.nn-co-totals dt { color: var(--muted); }
.nn-co-total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; font-size: 1.15rem; }
.nn-co-total dt { color: var(--ink) !important; font-weight: 700; }
.nn-co-total dt small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.nn-co-total dd { font-weight: 800; }
.nn-co-note { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .nn-co { grid-template-columns: minmax(0, 1fr); } .nn-co-sum { position: static; order: -1; } }

.nn-co-lines li.nn-drawer-empty { display: block; padding: 0; }
.nn-co-sum.is-done .nn-code, .nn-co-sum.is-done .nn-code-msg, .nn-co-sum.is-done .nn-co-totals { display: none; }

/* Sweep fixes */
.nn-co-sum, .nn-co-main { grid-template-columns: minmax(0, 1fr); }
.nn-code input { width: 100%; }

@media (max-width: 380px) { .nn-logo { font-size: .9rem; } .nn-head { gap: 8px; } .nn-cart-btn { padding: 5px; } }
@media (max-width: 600px) { .nn-pdp-info .nn-buy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .nn-pdp-add { min-width: 0; padding-inline: 12px; } }
.nn-co-sum.is-empty .nn-code, .nn-co-sum.is-empty .nn-code-msg, .nn-co-sum.is-empty .nn-co-totals, .nn-co-sum.is-empty .nn-co-note { display: none; }
@media (max-width: 900px) { .nn-co-sum.is-empty { order: 1; } }

/* Photos (phase 7) */
.nn-photo { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; }
.nn-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.nn-photo figcaption { margin-top: 12px; font-size: 14px; opacity: .7; }
.nn-photo-band { margin-top: 24px; }
.nn-photo-band img { aspect-ratio: 4 / 1; object-position: 50% 60%; }
@media (max-width: 760px) { .nn-photo-band img { aspect-ratio: 2 / 1; } }