/* TuftNPressStudio storefront — faithful to the wireframe deck.
   Exact tokens, spacing and components lifted from the handoff wireframe:
   black announcement strip, logo-only header with 12px nav, 360px hero with a
   translucent centered card, X-cross grey image placeholders, outlined
   "Customize" tile buttons, category blocks with corner labels, dashed crimson
   Builder band, dark footer with newsletter + columns. Sharp corners. */

/* Title/display typeface — Teko (self-hosted variable WOFF2, Fontshare FFL). */
@font-face {
  font-family: 'Teko';
  src: url('../fonts/teko/Teko-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Teko', 'Work Sans', system-ui, sans-serif;
  --hdr-h: 104px; /* announcement strip + nav header; used to centre the hero card in the viewport */
  --crimson: #720416;
  --crimson-dark: #5c0312;
  --ink: #040101;
  --surface: #f7f3f4;
  --chrome: #efe7e9;     /* browser chrome / subtle fills */
  --callout: #f3eaec;    /* tinted callout fill (builder band) */
  --border: #d8cdd0;
  --border-inner: #e0d8da;
  --divider: #ece4e6;
  --input: #ddd2d4;
  --ph-bg: #e8e2e4;      /* image placeholder fill */
  --ph-ln: #d6ccce;      /* placeholder diagonal */
  --cat-bg: #ddd4d6;     /* category block fill */
  --cat-ln: #cabfc2;     /* category block diagonal */
  --nav: #6a6164;        /* nav + mid text */
  --muted: #857a7d;      /* secondary text */
  --faint: #968b8e;      /* captions */
  --eyebrow: #564e50;
  --bar: #e0d8da;        /* grey copy bars */
  --foot-bar: #3a3133;
  --success: #3f7d57;
  --warning: #d98a3a;
  --error: #d04a3a;
  --shopify: #95bf47;
  --shadow: 0 18px 50px rgba(0,0,0,.10);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.07);
  --maxw: 1040px;
  --px: clamp(20px, 3.5vw, 56px);   /* fluid horizontal gutter (fullscreen) */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* layout — fullscreen (full-bleed white, fluid gutters) */
.frame { width: 100%; background: #fff; }
.pad { padding: 34px var(--px); }
.section { padding: 34px var(--px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 11px; }
.eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); }
.divider { height: 8px; background: var(--bar); margin: 10px 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; }

/* grey copy bars (wireframe text placeholders) */
.bar { height: 8px; background: var(--bar); margin-bottom: 7px; }
.bar.w80 { width: 80%; }
.bar.w70 { width: 70%; }
.bar.w60 { width: 60%; }

/* X-cross image placeholder (THE wireframe signature) */
.ph {
  background-color: var(--ph-bg);
  background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--ph-ln) calc(50% - .5px), var(--ph-ln) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--ph-ln) calc(50% - .5px), var(--ph-ln) calc(50% + .5px), transparent calc(50% + .5px));
  position: relative;
  overflow: hidden; /* contain the hover zoom so it never bleeds over the pager/neighbours */
}
.ph--cat {
  background-color: var(--cat-bg);
  background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--cat-ln) calc(50% - .5px), var(--cat-ln) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--cat-ln) calc(50% - .5px), var(--cat-ln) calc(50% + .5px), transparent calc(50% + .5px));
}
.ph.r45 { aspect-ratio: 4/5; }
.ph.r11 { aspect-ratio: 1/1; }
.ph.r169 { aspect-ratio: 16/9; }

/* announcement strip */
.announce { background: var(--ink); color: var(--border); font-size: 10px; text-align: center; padding: 6px; letter-spacing: .03em; }

/* header */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--px); border-bottom: 1px solid var(--divider); background: #fff; }
.hdr__logo img { height: 40px; width: 40px; }
.nav { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--nav); }
.nav a { color: var(--nav); }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav__icon { display: inline-flex; align-items: center; }
.nav__acct { width: 19px; height: 19px; display: block; }
.nav__cart { width: 18px; height: 18px; position: relative; }
.nav__cart img { width: 18px; height: 18px; }
/* Nav dropdown (Our Work) */
.nav__has-dd { position: relative; display: inline-flex; align-items: center; }
.nav__has-dd > a::after { content: "\25BE"; font-size: 9px; margin-left: 4px; opacity: .6; }
/* Transparent bridge across the gap so moving to the menu doesn't drop the hover */
.nav__has-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav__dd { position: absolute; top: 100%; left: 0; margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.1); padding: 6px; min-width: 156px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; z-index: 60; }
.nav__has-dd:hover .nav__dd, .nav__has-dd:focus-within .nav__dd { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dd a { padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.nav__dd a:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.cart-count { position: absolute; top: -7px; right: -8px; background: var(--crimson); color: #fff; font-size: 9px; min-width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; padding: 0 3px; }
.burger { display: none; flex-direction: column; gap: 3px; background: none; border: 0; cursor: pointer; padding: 4px; }
.burger span { width: 18px; height: 2px; background: var(--ink); display: block; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--crimson); color: #fff; font-size: 13px; padding: 12px 26px; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--crimson-dark); }
.btn--lg { font-size: 14px; padding: 14px 30px; }
.btn--block { width: 100%; }
.btn-out { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 11px; padding: 8px 14px; cursor: pointer; border-radius: 0; }
.btn-out:hover { background: var(--ink); color: #fff; }
.btn-out--block { width: 100%; }
.link-underline { font-size: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* hero */
/* Grid fills the screen below the fixed-height header. */
.hero { position: relative; min-height: calc(100vh - var(--hdr-h)); overflow: hidden; background: var(--surface); }
.hero > infinite-grid { z-index: 0; }
/* Dark overlay to darken the drifting gallery; sits above the grid, below the card. */
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; z-index: 1; }
.hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 12px; padding: 12px; }
.hero__grid .ph { width: 100%; height: 100%; }
/* Bottom inset = header height pulls the flex-centred card up to the true viewport centre. */
.hero__card { position: absolute; inset: 0 0 var(--hdr-h) 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.hero__card > div { background: rgba(255,255,255,.72); backdrop-filter: blur(3px); padding: 44px 68px; max-width: 90vw; }
.hero__card .eyebrow { font-size: 13px; }
.hero__card .btn { pointer-events: auto; font-size: 16px; padding: 15px 36px; }
.hero h1 { font-size: 50px; font-weight: 600; letter-spacing: -0.01em; margin: 12px 0 6px; }
.hero__rule { height: 10px; width: 300px; max-width: 60%; background: #cdc9c0; margin: 16px auto 26px; }

/* product tiles */
.tiles { display: grid; gap: 18px; }
.tiles.c4 { grid-template-columns: repeat(4, 1fr); }
.tiles.c3 { grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile .ph { aspect-ratio: 4/5; }
.tile__name { font-size: 12px; color: var(--ink); }
.tile__price { font-size: 11px; color: var(--muted); }
.tag { position: absolute; top: 8px; left: 8px; background: #fff; border: 1px solid var(--border-inner); padding: 3px 9px; font-size: 10px; color: var(--nav); }
.tile--design .ph { display: flex; align-items: center; justify-content: center; }
.tile--design .ph span { font-size: 12px; color: var(--crimson); font-weight: 600; background: #fff; padding: 6px 10px; border: 1.5px dashed var(--crimson); }

/* carousel arrows */
.arrows { display: flex; gap: 8px; }
.arrows span { width: 30px; height: 30px; border: 1px solid var(--input); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--nav); cursor: pointer; }

/* category blocks */
.cat-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 8px; }
.cat-block { position: relative; height: 300px; }
.cat-block--wide { height: 320px; margin: 6px 8px; }
.cat-label { position: absolute; left: 16px; bottom: 16px; background: #fff; padding: 9px 15px; font-size: 13px; font-weight: 500; }

/* builder band */
.band { margin: 6px 8px; border: 2px dashed #b3a9ac; background: var(--callout); padding: 40px; text-align: center; }
.band h2, .band h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 6px; }

/* footer */
.ftr { background: var(--ink); color: var(--border); padding: 34px var(--px) 22px; margin-top: 30px; }
.ftr__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ftr__brand { max-width: 240px; }
.ftr__brand .name { font-weight: 600; font-size: 18px; color: #fff; }
.ftr__news { display: flex; gap: 6px; margin-top: 14px; }
.ftr__news input { flex: 1; height: 34px; border: 1px solid var(--foot-bar); background: #161112; color: #fff; padding: 0 10px; font: inherit; font-size: 12px; }
.ftr__news button { width: 90px; height: 34px; background: #fff; color: var(--ink); border: 0; font-size: 12px; cursor: pointer; }
.ftr__col { min-width: 120px; }
.ftr__col h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 12px; font-weight: 600; }
.ftr__col a { display: block; font-size: 12px; color: #a39a9c; margin-bottom: 9px; }
.ftr__col a:hover { color: #fff; }
.ftr__bottom { border-top: 1px solid var(--foot-bar); margin-top: 24px; padding-top: 14px; display: flex; justify-content: space-between; font-size: 10px; color: #756c6f; }

/* breadcrumb */
.breadcrumb { font-size: 12px; color: var(--muted); padding: 16px var(--px) 0; }

/* chips / filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--input); background: #fff; padding: 7px 14px; font-size: 12px; font-family: inherit; line-height: 1.4; cursor: pointer; color: var(--nav); border-radius: 0; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5px; letter-spacing: .02em; }
.field input, .field textarea, .field select { width: 100%; padding: 10px; border: 1px solid var(--input); background: #fff; font: inherit; font-size: 13px; border-radius: 0; }
.field input:focus, .field textarea:focus { outline: 1.5px solid var(--crimson); outline-offset: -1px; }
.help { font-size: 11px; color: var(--muted); margin-top: 5px; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--input); padding: 22px; text-align: center; color: var(--muted); font-size: 12px; cursor: pointer; }

/* alerts / badges / security UX */
.alert { padding: 11px 14px; border: 1px solid var(--border); border-left: 4px solid var(--nav); background: #fff; font-size: 12px; margin: 10px 0; }
.alert--success { border-left-color: var(--success); }
.alert--warning { border-left-color: var(--warning); }
.alert--error { border-left-color: var(--error); }
.alert--info { border-left-color: var(--nav); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; margin-top: 14px; background: #fff; color: #3c4043; border: 1px solid var(--input); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn-google:hover { background: #f7f4f5; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--muted); font-size: 12px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.badge--shopify { background: rgba(149,191,71,.15); color: #5d7a2c; }
.badge--on { background: rgba(63,125,87,.15); color: var(--success); }
.badge--off { background: rgba(208,74,58,.12); color: var(--error); }
.strength { height: 6px; background: var(--input); margin-top: 6px; }
.strength > i { display: block; height: 100%; width: 0; background: var(--error); transition: width .2s, background .2s; }

/* cards */
.card { background: #fff; border: 1px solid var(--border); }
.card__body { padding: 16px; }

/* tables (admin / roles / checklist) */
.matrix { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.matrix th, .matrix td { border: 1px solid var(--border); padding: 9px 10px; text-align: left; }
.matrix th { background: var(--chrome); }
.owns { font-size: 10px; font-weight: 700; padding: 2px 6px; text-transform: uppercase; }
.owns--shopify { background: rgba(149,191,71,.2); color: #4f6a25; }
.owns--dev { background: rgba(114,4,22,.12); color: var(--crimson); }
.owns--owner { background: rgba(4,1,1,.08); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); align-items: flex-start; font-size: 13px; }

/* accordions */
.acc { border: 1px solid var(--border); background: #fff; margin-bottom: 8px; }
.acc summary { padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 13px; }
.acc .acc__body { padding: 0 14px 14px; font-size: 13px; color: var(--muted); }

/* owner mode bar */
.ownerbar { background: var(--ink); color: #fff; font-size: 12px; padding: 8px 0; }
.ownerbar .inner { padding: 0 var(--px); display: flex; align-items: center; gap: 10px; }

/* builder workspace */
.builder { display: grid; grid-template-columns: 60px 220px 1fr 280px; border: 1px solid var(--border); background: #fff; height: 660px; }
.builder__rail { background: var(--chrome); border-right: 1px solid var(--border); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; align-items: center; overflow-y: auto; }
.builder__rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; font-size: 9px; color: var(--nav); }
.builder__rail button .ti { width: 22px; height: 22px; border: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: .7; }
.builder__rail button[data-tool="select"] .ti  { background-image: url(../img/builder/select.png); }
.builder__rail button[data-tool="upload"] .ti  { background-image: url(../img/builder/upload.png); }
.builder__rail button[data-tool="text"] .ti    { background-image: url(../img/builder/text.png); }
.builder__rail button[data-tool="shapes"] .ti  { background-image: url(../img/builder/shapes.png); }
.builder__rail button[data-tool="clipart"] .ti { background-image: url(../img/builder/clipart.png); }
.builder__rail button[data-tool="color"] .ti   { background-image: url(../img/builder/color.png); }
.builder__rail button.active { color: var(--ink); background: rgba(0,0,0,.06); border-radius: 8px; }
.builder__rail button.active .ti { opacity: 1; }
.gswatch { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; display: inline-block; }
.gswatch.active { outline: 1px solid var(--ink); outline-offset: 2px; }
.handle { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--ink); }
.layer { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 5px; cursor: pointer; }
.layer.active { background: var(--surface); }
.layer .lcheck { flex: none; width: 13px; height: 11px; border: 1.5px solid var(--muted); }
.upthumb { aspect-ratio: 1; background: var(--ph-bg) center/cover no-repeat; border: 1px solid var(--border-inner); }
.upthumb.active { border: 2px solid var(--ink); }
.builder__opts { border-right: 1px solid var(--border); padding: 16px; overflow-y: auto; }
.builder__canvas { padding: 16px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.builder__stage { flex: 1; min-height: 0; border: 1px solid var(--border); background: #fff; position: relative; display: grid; place-items: center; overflow: hidden; }
.print-area { position: absolute; inset: 18% 28%; border: 1.5px dashed var(--crimson); }
.builder__panel { border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); margin-bottom: 12px; }
.tabs button { border: 0; background: none; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--ink); border-bottom-color: var(--crimson); }
.stepbar { display: flex; gap: 8px; margin-bottom: 14px; }
.step { font-size: 12px; padding: 7px 14px; border: 1px solid var(--input); background: #fff; color: var(--nav); }
.step.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pricecard { border: 1px solid var(--border); padding: 14px; background: var(--callout); }
.pricecard .row { display: flex; justify-content: space-between; margin: 6px 0; font-size: 13px; }
.pricecard .total { font-size: 18px; font-weight: 700; }
.stepper { display: inline-flex; border: 1px solid var(--input); }
.stepper button { width: 28px; border: 0; background: #fff; cursor: pointer; font-size: 15px; }
.stepper input { width: 40px; text-align: center; border: 0; border-left: 1px solid var(--input); border-right: 1px solid var(--input); font: inherit; }

/* category hero + toolbar + grid + pager */
.cat-hero { position: relative; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cat-hero .crumb { position: absolute; top: 12px; left: 16px; font-size: 11px; color: var(--nav); }
.cat-hero h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.cat-hero .rule { height: 7px; width: 280px; background: #cfc5c8; margin-top: 10px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--px); border-bottom: 1px solid var(--divider); gap: 12px; flex-wrap: wrap; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

/* Rug gallery: 1-row horizontal-scroll carousel (owner-managed, captioned) */
.rug-gallery { position: relative; }
.rug-gallery__track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.rug-gallery__track::-webkit-scrollbar { display: none; }
.rug-gallery__card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.rug-gallery__card .ph, .rug-gallery__card img { aspect-ratio: 1/1; width: 100%; display: block; object-fit: cover; }
.rug-gallery__cap { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.rug-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.94); color: var(--ink); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.14); z-index: 2; }
.rug-gallery__nav:hover { background: #fff; }
.rug-gallery__nav[hidden] { display: none; } /* [hidden] must beat display:flex */
.rug-gallery__nav--prev { left: -6px; }
.rug-gallery__nav--next { right: -6px; }
@media (max-width: 900px) { .rug-gallery__card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .rug-gallery__card { flex-basis: 80%; } }
.design-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4/5; align-self: start; border: 2px dashed var(--muted); background: var(--callout); text-align: center; padding: 18px; }
.design-tile .plus { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.design-tile .t { font-size: 14px; font-weight: 600; }
.design-tile .d { font-size: 11px; color: var(--nav); }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 28px; padding: 8px 0 40px; position: relative; z-index: 2; }
.pager span, .pager button { width: 28px; height: 28px; border: 1px solid var(--input); background: #fff; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; border-radius: 0; padding: 0; }
.pager button:hover { border-color: var(--ink); color: var(--ink); }
.pager span.active, .pager button.active { background: var(--crimson); color: #fff; border-color: var(--ink); cursor: default; }

/* PDP (exact wireframe layout) */
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 20px var(--px) 36px; }
@media (max-width: 820px) { .pdp-grid { grid-template-columns: 1fr; } }
.qbtn { border: 1px solid var(--input); background: #fff; padding: 8px 12px; font-size: 12px; cursor: pointer; color: var(--nav); }
.qbtn.active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.size-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.size-pills span { min-width: 38px; text-align: center; font-size: 11px; border: 1px solid var(--input); padding: 6px 4px; cursor: pointer; color: var(--nav); }
.size-pills span.active { border-color: var(--ink); color: var(--ink); }

/* mobile */
@media (max-width: 820px) {
  .grid3 { grid-template-columns: 1fr 1fr; }
  .cat-hero h1 { font-size: 24px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; background: #fff; padding: 14px 28px; border-bottom: 1px solid var(--border); z-index: 30; }
  .hdr { position: relative; }
  .nav.open { display: flex; }
  .nav .nav__icon { display: none; }
  /* Dropdown flattens into an indented sub-group in the mobile menu (no hover on touch) */
  .nav__has-dd { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav__has-dd > a::after { display: none; }
  .nav__dd { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 4px 14px; margin: 0; min-width: 0; }
  .burger { display: flex; }
  .tiles.c4 { grid-template-columns: repeat(2, 1fr); }
  .tiles.c3 { grid-template-columns: repeat(2, 1fr); }
  .cat-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .ftr__top { gap: 16px; }
}
@media (max-width: 520px) {
  .tiles.c4, .tiles.c3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Responsive builder (Phase 4b) ---------- */
.builder__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.builder__sheet-close-btn { display: none; }  /* only shown inside the phone bottom-sheet */
.builder__rail-panel { display: none; }  /* Layers/Product/checkout shortcut — phone only (panel is always visible on desktop) */
.builder__rail-panel .rp-ico { font-size: 18px; line-height: 22px; }

/* Tablet: 3 cols; right panel slides in over the canvas via a toggle */
@media (max-width: 1024px) {
  .builder { grid-template-columns: 60px 200px 1fr; height: 560px; position: relative; }
  .builder__panel { position: absolute; right: 0; top: 0; height: 100%; width: 280px; background: #fff; transform: translateX(100%); transition: transform .2s; z-index: 5; box-shadow: -8px 0 24px rgba(0,0,0,.08); }
  .builder.show-panel .builder__panel { transform: none; }
}

/* Phone: bottom-sheet. Canvas fills; rail = bottom tab bar; opts/panel = sheets. */
@media (max-width: 640px) {
  .builder { display: flex; flex-direction: column; height: calc(100vh - 110px); position: relative; }
  .builder__canvas { order: 1; flex: 1; min-height: 0; padding: 8px; }
  .builder__stage { min-height: 0; }
  .builder__rail { order: 2; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 2px; border-right: 0; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--chrome); z-index: 60; }
  .builder__rail button { min-width: 56px; min-height: 46px; flex: 0 0 auto; }
  .builder__rail-panel { display: flex; margin-left: auto; }  /* pin the Cart shortcut to the end of the bottom bar */
  .builder-steps { display: none !important; }  /* progress breadcrumb hidden on phone (beats inline display:flex) to avoid overflow */
  .builder__opts, .builder__panel {
    position: fixed; left: 0; right: 0; top: auto; bottom: 56px; height: auto; max-height: 68vh; overflow-y: auto !important;
    background: #fff; border: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% + 64px)); transition: transform .24s cubic-bezier(.32,.72,0,1); z-index: 50;
    box-shadow: 0 -10px 34px rgba(0,0,0,.22); padding: 26px 4px calc(14px + env(safe-area-inset-bottom));
    will-change: transform;
  }
  /* The right panel is a flex column (tabs + scroll + checkout footer); let it lay out inside the sheet. */
  .builder__panel { padding-left: 0; padding-right: 0; }
  .builder__panel > div[style*="flex:1"] { max-height: 42vh; }
  .builder__opts.sheet-open, .builder__panel.sheet-open { transform: none; }
  .builder__opts::before, .builder__panel::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: #cdc6c8;
  }
  .builder__sheet-close-btn {
    display: block; position: absolute; top: 2px; right: 6px; border: 0; background: none; font-size: 18px;
    min-width: 44px; min-height: 44px; cursor: pointer; z-index: 1; color: var(--nav);
  }
}

/* ---------- Responsive storefront (Phase 4c) ---------- */
@media (max-width: 640px) {
  .tiles.c4, .tiles.c3 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .cat-2 { grid-template-columns: 1fr; }
  .cat-block, .cat-block--wide { height: 220px; }
  .matrix { display: block; overflow-x: auto; white-space: nowrap; }
  .hero { min-height: 100vh; }
  .hero__card { inset: 0; } /* mobile: centre in the full-height hero (header offset not needed) */
  .hero__card > div { padding: 28px 30px; }
  .tabs { flex-wrap: wrap; }
}

/* ---------- Toast (Phase 4d) ---------- */
#tnp-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; }
.tnp-toast__item { background: #1c1c1c; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 1; transition: opacity .25s; max-width: 80vw; }
.tnp-toast__item--success { background: #1c7a3c; }
.tnp-toast__item--error { background: #b3261e; }
.tnp-toast__item.out { opacity: 0; }

/* ---------- Loading states (Phase 4d) ---------- */
.tnp-loading { display: flex; align-items: center; gap: 8px; color: var(--nav); font-size: 12px; padding: 12px; }
.tnp-spin { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--ink); border-radius: 50%; animation: tnp-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes tnp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tnp-spin { animation: none; } }

/* ---------- Focus-visible a11y (Phase 4d) ---------- */
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

/* ---------- Consistent control states (Phase 4d) ---------- */
.btn, .btn-out, .chip { cursor: pointer; transition: background .15s, border-color .15s, opacity .15s, transform .05s; }
.chip:hover { filter: brightness(0.97); }
.btn:active, .btn-out:active, .chip:active { transform: translateY(1px); }
.btn[disabled], .btn-out[disabled], .chip[disabled], button[disabled] { opacity: .5; cursor: not-allowed; }
.size-pills span { cursor: pointer; }
.size-pills span:hover { border-color: var(--ink); }
.gswatch { cursor: pointer; }
@media (max-width: 640px) {
  .btn, .btn-out, .chip, .builder__rail button, .size-pills span { min-height: 40px; }
}

/* ---------- Slider value readouts (builder) ---------- */
.rangewrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rangewrap input[type=range] { flex: 1; min-width: 0; }
.rangeval { min-width: 34px; text-align: right; font-size: 11px; color: var(--nav); font-variant-numeric: tabular-nums; }

/* ---------- Cart empty state ---------- */
.cart-empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.cart-empty a { color: var(--crimson); border-bottom: 1px solid var(--crimson); }
.cart-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; }
.cart-remove:hover { color: var(--error); }

/* ---------- UX polish motion (gated; reduced-motion/no-JS = static) ---------- */
html.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .42s ease, transform .42s ease; transition-delay: var(--rd, 0ms); }
html.js-motion .reveal.reveal--in { opacity: 1; transform: none; }

/* Card hover: a soft lift on the whole tile + a gentle, contained image zoom.
   Shadow lives on the image box so it frames the picture cleanly (not the text). */
html.js-motion .tile { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
html.js-motion .tile .ph, html.js-motion .tile img { transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; will-change: transform; }
html.js-motion .tile:hover { transform: translateY(-3px); }
html.js-motion .tile:hover .ph, html.js-motion .tile:hover img { transform: scale(1.045); box-shadow: 0 14px 32px rgba(0,0,0,.12); }
@media (hover: none) { html.js-motion .tile:hover { transform: none; } html.js-motion .tile:hover .ph, html.js-motion .tile:hover img { transform: none; box-shadow: none; } }

html.js-motion .cat-block { transition: transform .34s ease, box-shadow .34s ease; }
html.js-motion .cat-block:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
html.js-motion .cat-block .cat-label { transition: transform .3s ease; }
html.js-motion .cat-block:hover .cat-label { transform: translateX(4px); }

html.js-motion .hdr { transition: box-shadow .25s ease, padding .25s ease; }
html.js-motion .hdr.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); }

html.js-motion .hero__card > div { animation: tnp-rise .5s ease both; }
html.js-motion .frame { animation: tnp-fade .28s ease both; }
@keyframes tnp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tnp-fade { from { opacity: 0; } to { opacity: 1; } }

html.js-motion .cart-count.pop { animation: tnp-pop .3s ease; }
@keyframes tnp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

html.js-motion .builder__rail button { transition: color .15s ease, background .15s ease; }
html.js-motion .builder__rail button:hover { background: rgba(0,0,0,.04); }

@media (prefers-reduced-motion: reduce) { html.js-motion * { animation: none !important; transition: none !important; } }

/* ---------- Catalogue sort dropdown ---------- */
.sort-select { font-size: 11px; padding: 6px 10px; border: 1px solid var(--input); background: #fff; cursor: pointer; color: var(--nav); border-radius: 0; }
.toolbar .chips .chip { cursor: pointer; }