/* KBK storefront styles. Ported from docs/design-preview (approved 2026-10-27). Colour and font tokens come from theme.json. */
:root {
  --ink: var(--wp--preset--color--ink);
  --paper: var(--wp--preset--color--paper);
  --white: var(--wp--preset--color--white);
  --grey: var(--wp--preset--color--grey);
  --orange: var(--wp--preset--color--orange);
  --yellow: var(--wp--preset--color--yellow);
  --grey-on-ink: var(--wp--preset--color--grey-on-ink);
  --ink-raised: var(--wp--preset--color--ink-raised);
  --line: var(--wp--preset--color--line);
  --line-strong: var(--wp--preset--color--line-strong);
  --placeholder: var(--wp--preset--color--placeholder);
  --success: var(--wp--preset--color--success);
  --error: var(--wp--preset--color--error);
  --wa-green: var(--wp--preset--color--wa-green);

  --font-display: var(--wp--preset--font-family--display);
  --font-text: var(--wp--preset--font-family--text);

  --fs-display: clamp(52px, 22.2px + 7.64vw, 120px);
  --fs-h1: clamp(36px, 23.7px + 3.15vw, 64px);
  --fs-h2: clamp(28px, 21px + 1.8vw, 44px);
  --fs-h3: clamp(20px, 18.25px + .45vw, 24px);
  --fs-pt: clamp(30px, 23.9px + 1.57vw, 44px);
  --fs-price-lg: clamp(32px, 28.5px + .9vw, 40px);
  --fs-lead: clamp(18px, 17.1px + .225vw, 20px);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: 16px;
  --maxw: 1280px;
  --sec: 48px;

  --r0: 0; --r1: 2px; --rp: 999px;
  --shadow-hard: 3px 3px 0 var(--ink);

  --dur-fast: 120ms; --dur-base: 200ms; --dur-drawer: 280ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --gutter: 32px; --sec: 96px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.55 var(--font-text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.on-ink :focus-visible { outline-color: var(--white); }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--white); padding: 10px 14px; font-weight: 700; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--grey); }
.on-ink .muted { color: var(--grey-on-ink); }
.tbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82em; letter-spacing: 0; text-transform: none; font-weight: 500; border-bottom: 1px dashed currentColor; white-space: normal; }

/* Type */
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; font-stretch: 70%; line-height: .88; letter-spacing: -.01em; text-transform: uppercase; }
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 850; font-stretch: 72%; line-height: .95; text-transform: uppercase; letter-spacing: -.005em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; font-stretch: 72%; line-height: 1; text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 750; font-stretch: 80%; line-height: 1.15; }
.label { font-family: var(--font-display); font-size: 12px; font-weight: 700; font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.lead { font-size: var(--fs-lead); line-height: 1.45; }
.hl { background: var(--yellow); color: var(--ink); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.price { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 18px; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.price .rs { font-size: .7em; margin-right: 2px; }
.price .sale, .sale-text { color: var(--orange); }
.price .was { color: var(--grey); font-size: 14px; font-weight: 600; text-decoration: line-through; }
@media (min-width: 960px) { .price { font-size: 20px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: var(--r1); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; line-height: 1; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn-primary:hover, .btn-primary.is-hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.on-ink .btn-primary:hover { box-shadow: 3px 3px 0 var(--white); }
.btn-primary:active { transform: none; box-shadow: none; }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-wa { background: var(--wa-green); border-color: var(--ink); color: var(--ink); }
.btn-wa:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.btn-wa:active { transform: none; box-shadow: none; }
.wa-hours { font-size: 14px; color: var(--grey); margin-top: -8px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; min-height: 44px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r1); flex: none; }

/* Placeholder image */
.ph { background: var(--placeholder); color: var(--grey); display: grid; place-items: center; text-align: center; padding: 12px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }

/* Announcement bar */
.announce { background: var(--ink); color: var(--white); font-size: 13px; font-weight: 500; }
.announce .wrap { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.announce .more { display: none; gap: 24px; color: var(--grey-on-ink); }
@media (min-width: 960px) { .announce .wrap { justify-content: space-between; } .announce .more { display: flex; } }

/* Header */
.hdr { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hdr-row { display: flex; align-items: center; gap: 4px; height: 64px; }
.logo { display: block; padding: 4px; margin-left: 4px; }
.logo img { height: 30px; width: auto; }
.hdr-nav { display: none; }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cart-btn { position: relative; }
.cart-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--rp); background: var(--orange); color: var(--white); font: 700 11px/19px var(--font-text); text-align: center; }
.btn-cart { display: none; }
.search.hdr-search { display: none; }
.search-row { padding-bottom: 12px; }
.search { display: flex; align-items: center; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r1); height: 48px; padding-left: 14px; }
.search:focus-within { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 2px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; outline: none; }
.page-product .search-row { display: none; }
.page-home .search-toggle { display: none; }
@media (min-width: 960px) {
  .hdr-row { height: 76px; gap: 0; }
  .menu-btn, .search-toggle, .cart-btn, .search-row { display: none !important; }
  .logo { margin-left: -4px; }
  .logo img { height: 38px; }
  .hdr-nav { display: flex; align-items: center; gap: 22px; margin-left: 32px; }
  .hdr-nav > a, .nav-cats summary { text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .hdr-nav > a:hover, .nav-cats summary:hover { border-color: var(--ink); }
  .nav-cats { position: relative; }
  .nav-cats summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; }
  .nav-cats summary::-webkit-details-marker { display: none; }
  .nav-cats summary .icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
  .nav-cats[open] summary .icon { transform: rotate(45deg); }
  .nav-panel { position: absolute; top: calc(100% + 18px); left: -24px; z-index: 25; width: 640px; background: var(--white); border: 2px solid var(--ink); padding: 16px 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 0 24px; }
  .nav-panel a { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--line); }
  .nav-panel a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
  .nav-panel .n { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 13px; color: var(--grey); min-width: 18px; }
  .search.hdr-search { display: flex; width: 300px; height: 44px; margin-left: auto; }
  .hdr-actions { margin-left: 16px; }
  .btn-cart { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: var(--r1); background: transparent; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
  .btn-cart:hover { background: var(--ink); color: var(--white); }
  .btn-cart b { background: var(--orange); color: var(--white); border-radius: var(--rp); min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
}

/* Hero: the black poster */
.hero { background: var(--ink); color: var(--white); position: relative; }
.hero-grid { display: grid; grid-template-areas: "head" "pin" "info" "trust"; gap: 24px; padding-block: 32px 28px; }
.hero h1 { grid-area: head; }
.hero h1 .o { color: var(--orange); }
.pin { grid-area: pin; justify-self: end; width: 74%; max-width: 360px; background: var(--white); padding: 6px; transform: rotate(-1.5deg); margin-top: -4px; }
.pin .ph, .pin .sample { aspect-ratio: 4 / 5; }
.pin .sample { position: relative; display: block; background: #ECE9E2; }
.pin .sample svg { display: block; width: 100%; height: 100%; }
.sample-tag { position: absolute; left: 8px; bottom: 8px; background: var(--ink); color: var(--white); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; }
.hero-info { grid-area: info; display: grid; gap: 8px; justify-items: start; }
.hero-name { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 28px; line-height: 1.05; }
.price-hero { font-size: 36px; color: var(--white); margin: 4px 0 8px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.trust { grid-area: trust; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid #2E2E2E; padding-top: 20px; margin-top: 8px; }
.trust li { display: grid; gap: 4px; font-size: 13px; line-height: 1.35; }
.trust .icon { width: 28px; height: 28px; margin-bottom: 4px; }
.trust strong { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.trust span { color: var(--grey-on-ink); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 7fr 5fr; grid-template-areas: "head pin" "info pin" "trust pin"; column-gap: 48px; row-gap: 28px; padding-block: 64px 48px; }
  .pin { align-self: end; justify-self: stretch; width: auto; max-width: none; margin: 0 0 -112px; position: relative; z-index: 2; transform: rotate(-1deg); padding: 8px; }
  .hero-info { grid-template-columns: auto auto; column-gap: 32px; align-items: end; justify-content: start; }
  .hero-info > .label, .hero-info > .hero-name, .hero-info > p.muted { grid-column: 1 / -1; }
  .hero-name { font-size: 34px; }
  .price-hero { font-size: 44px; margin: 0; }
  .trust { max-width: 640px; }
  .trust li { font-size: 14px; }
  .sec-after-hero { padding-top: 160px; }
}

/* Sections */
.sec { padding-block: var(--sec); }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.sec-head .idx { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 14px; color: var(--grey); }
.sec-head .rule { flex: 1; height: 1px; background: var(--ink); align-self: center; min-width: 16px; }
.sec-head a { white-space: nowrap; }
@media (min-width: 960px) { .sec-head { margin-bottom: 36px; gap: 16px; } .sec-head .idx { font-size: 16px; } }

/* Category mosaic */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat { position: relative; display: grid; grid-template-rows: auto 1fr auto; padding: 14px; background: var(--placeholder); text-decoration: none; overflow: hidden; border-radius: var(--r0); }
.cat .num { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: 40px; line-height: .9; }
.cat .ph-note { align-self: center; justify-self: center; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.cat .name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 22px; line-height: 1; text-transform: uppercase; }
.cat .name .icon { transition: transform var(--dur-fast) var(--ease); }
.cat:hover .name .icon { transform: translateX(4px); }
.cat:hover .name span { text-decoration: underline; text-underline-offset: 4px; }
.cat-1 { grid-column: span 2; aspect-ratio: 16 / 11; }
.cat-1 .num { font-size: 56px; }
.cat-2, .cat-3 { aspect-ratio: 1; }
.cat-4 { grid-column: span 2; aspect-ratio: 21 / 9; }
.cat-all { grid-column: span 2; background: var(--ink); color: var(--white); grid-template-rows: auto; min-height: 76px; align-items: center; }
.cat-all .name { font-size: 24px; }
.cat-list { grid-column: 1 / -1; border-top: 2px solid var(--ink); display: grid; }
.cat-list a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: 17px; }
.cat-list .n { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 15px; color: var(--grey); }
.cat-list .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.cat-list a:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; }
.cat-list a:hover .icon { transform: translateX(4px); }
@media (min-width: 960px) {
  .cats { grid-template-columns: repeat(12, 1fr); grid-template-rows: 250px 250px; gap: 16px; }
  .cat { aspect-ratio: auto; padding: 20px; }
  .cat-1 { grid-column: 1 / 7; grid-row: 1 / 3; }
  .cat-1 .num { font-size: 96px; }
  .cat-1 .name { font-size: 40px; }
  .cat-2 { grid-column: 7 / 10; grid-row: 1; }
  .cat-3 { grid-column: 10 / 13; grid-row: 1; }
  .cat-4 { grid-column: 7 / 10; grid-row: 2; }
  .cat-all { grid-column: 10 / 13; grid-row: 2; align-items: end; }
  .cat-list { grid-row: 3; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 16px; }
  .cat-list a { min-height: 60px; font-size: 19px; }
  .cat-all .name { font-size: 32px; }
}

/* Product card */
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); transition: border-color var(--dur-fast) var(--ease); }
.card:hover { border-color: var(--ink); }
.card .media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.card .ph { position: absolute; inset: 0; transition: opacity var(--dur-fast) var(--ease); }
.card .ph-b { opacity: 0; background: #DEDAD2; }
.card:hover .ph-b { opacity: 1; }
.card.is-out .ph-a { opacity: .6; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--rp); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card .badge { position: absolute; top: 8px; left: 8px; z-index: 1; }
.badge-sale { background: var(--orange); color: var(--white); }
.badge-out { background: var(--ink); color: var(--white); }
.badge-new { background: var(--yellow); color: var(--ink); }
.card .body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .name { font-size: 15px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .name a { text-decoration: none; }
.card .name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card .name a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.card .quick { display: none; }
.card.feature .name { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 24px; line-height: 1.05; }
.card.feature .price { font-size: 24px; }
.card.feature .body { padding: 14px 16px 18px; gap: 10px; }
@media (hover: hover) and (min-width: 960px) {
  .card .quick { display: flex; position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; height: 44px; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--white); border: 0; border-radius: var(--r1); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .card:hover .quick, .card:focus-within .quick { opacity: 1; transform: none; }
  .card.feature .name { font-size: 32px; }
  .card.feature .price { font-size: 30px; }
}

.grid-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-feat .feature { grid-column: span 2; }
@media (min-width: 960px) {
  .grid-feat { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .grid-feat .feature { grid-column: span 2; grid-row: span 2; }
  .grid-feat .feature .media { flex: 1; aspect-ratio: auto; min-height: 400px; }
  .grid-feat .feature .body { flex: none; }
}
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.row-scroll > * { scroll-snap-align: start; }
@media (min-width: 640px) { .row-scroll { grid-auto-columns: 38%; } }
@media (min-width: 960px) { .row-scroll { grid-auto-columns: calc((100% - 2 * var(--gutter) - 48px) / 4); gap: 16px; } }

/* Value props */
.props { border-top: 2px solid var(--ink); display: grid; }
.prop { display: grid; grid-template-columns: 32px 1fr; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.prop .icon { width: 28px; height: 28px; grid-row: span 2; }
.prop h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.prop p { font-size: 15px; color: var(--grey); }
@media (min-width: 960px) {
  .props { grid-template-columns: repeat(5, 1fr); }
  .prop { grid-template-columns: 1fr; padding: 28px 28px 28px 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .prop + .prop { padding-left: 28px; }
  .prop:last-child { border-right: 0; }
  .prop .icon { grid-row: auto; margin-bottom: 12px; }
}

/* Brand story */
.story { border-top: 1px solid var(--line); }
.story-grid { display: grid; gap: 32px; }
.story-text { display: grid; gap: 16px; justify-items: start; }
.story .display { font-size: clamp(48px, 30px + 4.6vw, 96px); }
.story-logo { width: 260px; justify-self: start; }
@media (min-width: 960px) {
  .story-grid { grid-template-columns: 7fr 5fr; align-items: center; gap: 64px; }
  .story-logo { width: 320px; justify-self: center; }
}
.preview-note { border: 1.5px dashed var(--line-strong); padding: 20px; color: var(--grey); font-size: 14px; }
.preview-note b { color: var(--ink); }

/* Footer */
.ftr { background: var(--ink); color: var(--white); padding-block: 48px 24px; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr-grid { display: grid; gap: 0; }
.ftr-brand { display: grid; gap: 12px; padding-bottom: 28px; }
.ftr-logo { width: 240px; }
.ftr-acc { border-top: 1px solid #2E2E2E; }
.ftr-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.ftr-acc summary::-webkit-details-marker { display: none; }
.ftr-acc summary .icon { transition: transform var(--dur-base) var(--ease); }
.ftr-acc[open] summary .icon { transform: rotate(45deg); }
.ftr-acc ul { display: grid; gap: 4px; padding-bottom: 16px; }
.ftr-acc ul.ftr-cats { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.ftr-contact address { font-style: normal; }
.ftr-acc li a { display: inline-block; padding: 6px 0; color: #E4E4E4; }
.ftr-contact { border-top: 1px solid #2E2E2E; padding-top: 24px; display: grid; gap: 6px; font-size: 15px; }
.social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.social a { text-decoration: underline; text-underline-offset: 3px; }
.ftr-bottom { border-top: 1px solid #2E2E2E; margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--grey-on-ink); }
@media (min-width: 960px) {
  .ftr { padding-block: 72px 28px; }
  .ftr-grid { grid-template-columns: 3fr 4fr 2fr 2fr 3fr; gap: 32px; }
  .ftr-acc, .ftr-contact { border-top: 0; padding-top: 0; }
  .ftr-acc summary { pointer-events: none; min-height: 0; margin-bottom: 14px; font-size: 14px; color: var(--grey-on-ink); }
  .ftr-acc summary .icon { display: none; }
  .ftr-logo { width: 280px; }
}

/* WhatsApp float */
.wa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; width: 56px; height: 56px; border-radius: var(--rp); background: var(--wa-green); color: var(--ink); border: 2px solid var(--ink); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.wa { color: #fff; }
.wa .icon { width: 30px; height: 30px; }
.sticky-on .wa { transform: translateY(-84px); }
.drawer-open .wa { opacity: 0; pointer-events: none; }
@media (min-width: 960px) { .wa { right: 28px; bottom: 28px; } .sticky-on .wa { transform: none; } }

/* Cart drawer */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(14,14,14,.55); opacity: 0; pointer-events: none; transition: opacity var(--dur-drawer) var(--ease); }
.drawer { position: fixed; top: 0; right: 0; z-index: 50; height: 100%; width: 100%; max-width: 420px; background: var(--white); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-drawer) var(--ease), visibility 0s linear var(--dur-drawer); }
.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--s4); border-bottom: 1px solid var(--line); min-height: 64px; }
.dr-head h2 { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 22px; text-transform: uppercase; }
.dr-body { flex: 1; overflow-y: auto; padding: 0 var(--s4); }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line .ph { aspect-ratio: 4 / 5; padding: 0; font-size: 9px; }
.line-name { font-weight: 500; font-size: 15px; line-height: 1.3; }
.line-var { font-size: 13px; color: var(--grey); margin-bottom: 8px; }
.line-row { display: flex; align-items: center; gap: 14px; }
.link-btn { border: 0; background: none; padding: 0; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--grey); }
.dr-foot { border-top: 1px solid var(--line); padding: 16px var(--s4) calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.dr-foot .sub { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.dr-foot .sub .price { font-size: 22px; }
.help { font-size: 14px; color: var(--grey); }
.dr-foot .link-arrow { justify-self: center; }
.preview-toggle { justify-self: center; border: 1px dashed var(--line-strong); background: none; padding: 6px 10px; font-size: 12px; color: var(--grey); }
.dr-empty { display: none; padding: 40px 0; gap: 12px; justify-items: start; }
.dr-empty .h1 { font-size: 40px; }
.dr-empty ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.drawer.is-empty .lines, .drawer.is-empty .sub, .drawer.is-empty .dr-foot .help, .drawer.is-empty .dr-foot .btn, .drawer.is-empty .dr-foot .link-arrow { display: none; }
.drawer.is-empty .dr-empty { display: grid; }

/* Qty stepper */
.qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--line-strong); border-radius: var(--rp); background: var(--white); }
.qty button { width: 44px; height: 100%; border: 0; background: none; display: grid; place-items: center; border-radius: var(--rp); }
.qty .icon { width: 18px; height: 18px; }
.qty output { min-width: 24px; text-align: center; font-weight: 700; }
.qty.sm { height: 44px; }

/* Product page */
.crumbs { font-size: 13px; color: var(--grey); padding-block: 12px; }
.crumbs a { color: var(--grey); }
.pdp { display: grid; gap: 24px; }
.gallery { display: flex; flex-direction: column; margin-inline: calc(var(--gutter) * -1); }
.g-stage { position: relative; }
.g-main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; }
.g-main::-webkit-scrollbar { display: none; }
.g-main .ph { flex: 0 0 100%; scroll-snap-align: start; }
.g-main .ph:nth-child(even) { background: #DEDAD2; }
.g-count { position: absolute; right: 12px; bottom: 12px; background: var(--white); border-radius: var(--rp); padding: 4px 10px; font-size: 12px; font-weight: 700; }
.g-zoom { position: absolute; right: 10px; top: 10px; background: var(--white); border-radius: var(--rp); }
.g-thumbs { display: flex; gap: 8px; padding: 12px var(--gutter) 0; order: 2; }
.thumb { width: 56px; aspect-ratio: 4 / 5; border: 2px solid transparent; padding: 2px; background: none; border-radius: var(--r1); }
.thumb span { display: block; width: 100%; height: 100%; background: var(--placeholder); }
.thumb[aria-current="true"] { border-color: var(--ink); }
.pdp-info { display: grid; gap: 16px; align-content: start; }
.pdp-title { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: var(--fs-pt); line-height: 1; letter-spacing: -.01em; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pdp-price .price { font-size: var(--fs-price-lg); }
.pdp-price .was { font-family: var(--font-display); font-weight: 600; font-stretch: 85%; font-size: 18px; color: var(--grey); text-decoration: line-through; }
.stock { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.cod { justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r1); padding: 6px 12px; box-shadow: var(--shadow-hard); transform: rotate(-1.5deg); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.cod .icon { width: 20px; height: 20px; }
.specs { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }
.specs li::marker { color: var(--orange); }
.opts { border: 0; padding: 0; display: grid; gap: 10px; }
.opts legend { font-size: 14px; font-weight: 500; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--rp); font-weight: 500; font-size: 15px; }
.chip[aria-pressed="true"] { border: 2px solid var(--ink); font-weight: 700; }
.chip[disabled] { color: var(--grey); text-decoration: line-through; cursor: not-allowed; background: var(--paper); }
.buy { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.dbox { background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); padding: 4px 16px; }
.drow { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; font-size: 14px; }
.drow + .drow { border-top: 1px solid var(--line); }
.drow strong { display: block; font-size: 15px; }
.drow span { color: var(--grey); }
.acc { border-top: 1px solid var(--line); }
.acc:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { transition: transform var(--dur-base) var(--ease); }
.acc[open] summary .icon { transform: rotate(45deg); }
.acc > div { padding-bottom: 18px; font-size: 15px; color: #333; }
@media (min-width: 960px) {
  .pdp { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
  .gallery { margin: 0; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; }
  .g-thumbs { flex-direction: column; padding: 0; order: 0; }
  /* One photo means no thumbnail column: the photo takes the full width instead of the 76px thumb track. */
  .gallery > .g-stage:only-child { grid-column: 1 / -1; }
  .thumb { width: 76px; }
  .pdp-info { position: sticky; top: 100px; }
}

/* Sticky mobile add-to-cart */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--white); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; transform: translateY(110%); visibility: hidden; transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); }
.sticky-on .sticky-atc { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease), visibility 0s; }
.sticky-atc .sa-text { display: grid; gap: 2px; min-width: 0; }
.sticky-atc .sa-text .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sticky-atc .price { font-size: 22px; }
.sticky-atc .btn { flex: 1; min-height: 50px; }
@media (min-width: 960px) { .sticky-atc { display: none; } }

/* Forms (checkout components) */
.field { display: grid; gap: 6px; }
.field > label { font-weight: 700; font-size: 14px; }
.input { width: 100%; height: 52px; padding: 0 14px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r1); font: inherit; font-size: 16px; color: var(--ink); }
.input:focus-visible, .input.is-focus { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.field.err .input { border-color: var(--error); }
.err-msg { display: flex; align-items: center; gap: 6px; color: var(--error); font-size: 14px; font-weight: 500; }
.err-msg .icon { width: 18px; height: 18px; }
.pay { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r1); padding: 16px; }
.pay input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); }
.pay strong { font-size: 16px; }
.pay p { grid-column: 2; font-size: 14px; color: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---- WordPress integration (Phase 2) ---- */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(> main) { flex: 1; }
.sec-tight { padding-top: 0; }
.dev-note { margin-top: 12px; font-size: 13px; color: var(--grey); border-left: 3px dashed var(--line-strong); padding-left: 10px; }
.page-body { padding-block: 32px 64px; }
.page-title { margin-bottom: 24px; }
.prose > * + * { margin-top: 1em; }
.prose { max-width: 70ch; }

/* Mobile search row: shown on Home, toggled elsewhere */
body:not(.home) .search-row { display: none; }
body:not(.home) .search-row.is-open { display: block; }
.home .search-toggle { display: none; }

/* Prices from WooCommerce (del/ins markup) */
.price del { color: var(--grey); font-size: 14px; font-weight: 600; text-decoration: line-through; margin-left: 6px; order: 2; }
.price ins { color: var(--orange); text-decoration: none; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.price-hero ins { color: var(--white); }
.card .media img.ph { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.card .quick { text-decoration: none; }

/* Category tiles with a real photo */
.cat.has-img { color: var(--white); }
.cat .cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cat.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(14,14,14,.6)); z-index: 0; }
.cat > span { position: relative; z-index: 1; }
.pin .sample img, .pin .pin-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Generic drawers (menu now, cart in the next milestone) */
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-drawer) var(--ease), visibility 0s; }
.drawer-left { left: 0; right: auto; transform: translateX(-100%); }
.menu-list { display: grid; padding-top: 4px; }
.menu-list a { display: grid; grid-template-columns: 34px 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 17px; font-weight: 500; }
.menu-list .n { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 14px; color: var(--grey); }
.menu-help { padding: 20px 0; color: var(--grey); font-size: 14px; }

/* 404 */
.nf { background: var(--ink); color: var(--white); flex: 1; }
.nf-inner { padding-block: 64px 96px; display: grid; gap: 20px; justify-items: start; }
.nf-inner > img { width: 240px; }
.nf-inner .search { width: min(100%, 420px); }

/* ---- Shop / category archive (milestone 2.2) ---- */
.shop-head { display: grid; gap: 6px; padding-block: 4px 20px; }
.shop-count { font-size: 14px; }
.shop-intro { max-width: 60ch; }
.shop-bar { position: sticky; top: 0; z-index: 15; background: var(--paper); border-block: 1px solid var(--line); }
.shop-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.btn-tool { min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: var(--r1); background: var(--white); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sort label { font-weight: 700; }
.sort select { min-height: 44px; padding: 0 32px 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r1); background: var(--white); font: inherit; font-size: 15px; }
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 12px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--rp); background: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; }
.fchip .icon { width: 16px; height: 16px; }
.clear-all { font-size: 14px; color: var(--grey); text-underline-offset: 3px; }
.shop-body { padding-block: 20px 64px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.load-more { display: flex; justify-content: center; margin-top: 32px; }
.empty { display: grid; gap: 12px; justify-items: start; padding: 32px 0; }

/* Filters: drawer on mobile, static column from 960px */
.filters .dr-body { padding-bottom: 16px; }
.filters-form { display: flex; flex-direction: column; height: 100%; }
.filters-foot { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.f-cats { display: grid; }
.f-cats a { display: flex; justify-content: space-between; min-height: 44px; align-items: center; text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--line); }
.f-cats a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.f-cats .muted { font-size: 13px; }
.f-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.f-price .input { height: 48px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
@media (min-width: 640px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) {
  .shop-bar { position: static; border: 0; }
  .shop-bar [data-open="filters"] { display: none; }
  .shop-bar-row { justify-content: flex-end; min-height: 0; padding-bottom: 8px; }
  .shop-body { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
  .filters.drawer { position: sticky; top: 24px; z-index: 1; height: auto; max-width: none; width: auto; transform: none; visibility: visible; background: transparent; transition: none; }
  .filters .dr-head { border-bottom: 2px solid var(--ink); padding: 0 0 8px; min-height: 0; }
  .filters .drawer-close { display: none; }
  .filters .dr-body { padding: 0; overflow: visible; }
  .filters .dr-foot { padding: 16px 0 0; border: 0; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1200px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Product page (milestone 2.2) ---- */
.product-main { padding-bottom: 48px; }
.g-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; background: var(--placeholder); }
.g-slide img { width: 100%; height: 100%; object-fit: cover; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info > .label { text-decoration: none; justify-self: start; }
.pdp-price .price del { font-size: 18px; }
.stock.is-out .dot { background: var(--grey); }
.specs-wrap ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }
.specs-wrap li::marker { color: var(--orange); }
.sold-out-note { font-weight: 500; }
.btn-wa.is-disabled { opacity: .6; cursor: not-allowed; }
.btn-wa.is-disabled .tbd { font-size: 12px; }

/* WooCommerce add-to-cart form, restyled */
.buybox form.cart:not(.variations_form), .buybox .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: stretch; }
.buybox .quantity { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--line-strong); border-radius: var(--rp); background: var(--white); }
.buybox .quantity input.qty { width: 40px; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.buybox .quantity input.qty::-webkit-outer-spin-button, .buybox .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buybox .quantity button { width: 44px; height: 100%; border: 0; background: none; display: grid; place-items: center; border-radius: var(--rp); }
.buybox .quantity .icon { width: 18px; height: 18px; }
.buybox .single_add_to_cart_button { min-height: 52px; border: 2px solid var(--orange); border-radius: var(--r1); background: var(--orange); color: var(--white); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.buybox .single_add_to_cart_button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.buybox .single_add_to_cart_button.disabled, .buybox .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.buybox .variations { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.buybox .variations th, .buybox .variations td { display: block; text-align: left; padding: 0; }
.buybox .variations label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 6px; }
.buybox .variations select { width: 100%; height: 52px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r1); background: var(--white); font: inherit; }
.buybox .reset_variations { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--grey); }
.buybox .woocommerce-variation-price, .buybox .woocommerce-variation-availability { margin-bottom: 10px; }
.buybox .stock.out-of-stock { color: var(--error); }

/* WooCommerce notices and breadcrumbs */
.notices:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 14px 16px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r1); font-weight: 500; }
.woocommerce-error { border-color: var(--error); color: var(--error); }
.woocommerce-message .button, .woocommerce-info .button { order: 2; font-weight: 700; text-underline-offset: 3px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Footer columns: content sits at the top of each grid cell */
.ftr-brand, .ftr-contact, .ftr-acc ul { align-content: start; }
.buybox .variations, .buybox .variations tbody, .buybox .variations tr { display: block; }
.buybox .reset_variations[style*="hidden"] { display: none; }

/* ---- Classic cart and checkout (milestone 2.3) ---- */
.woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 18px; }
.woocommerce form .form-row label { font-weight: 700; font-size: 14px; }
.woocommerce form .form-row .required { color: var(--error); text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { font-weight: 500; color: var(--grey); }
.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r1); font: inherit; font-size: 16px; color: var(--ink); }
.woocommerce form textarea { min-height: 84px; resize: vertical; }
.woocommerce form .input-text:focus-visible, .woocommerce form select:focus-visible, .woocommerce form textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.woocommerce form .form-row .description { font-size: 14px; color: var(--grey); }
.woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--error); }
.woocommerce form .form-row.woocommerce-invalid label { color: var(--error); }
.kbk-hidden, #billing_country_field { display: none !important; }
.kbk-city-other { display: grid; gap: 6px; margin-top: 10px; }
.kbk-city-other[hidden] { display: none; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading, .cart_totals h2 { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.woocommerce-additional-fields h3 { display: none; }
.woocommerce-shipping-fields:empty { display: none; }

/* Checkout page shell */
.hdr-checkout { position: static; }
.hdr-checkout .hdr-row { gap: 16px; }
.hdr-checkout .secure { margin-left: auto; color: var(--grey); }
.hdr-checkout .back-cart { font-size: 14px; text-underline-offset: 3px; }
.checkout-main { padding-block: 20px 64px; }
.checkout-main .wp-block-post-content > * + * { margin-top: 0; }
.ftr-slim { border-top: 1px solid var(--line); padding-block: 20px; font-size: 13px; color: var(--grey); }
.ftr-slim .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ftr-slim a { color: var(--grey); }

.m-summary { margin-bottom: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); }
.m-summary summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; cursor: pointer; font-weight: 700; }
.m-summary summary::-webkit-details-marker { display: none; }
.m-summary summary span { text-decoration: underline; text-underline-offset: 3px; }
.m-summary ul { padding: 0 16px 12px; display: grid; gap: 8px; font-size: 14px; }
.m-summary li { display: flex; justify-content: space-between; gap: 12px; }

form.checkout { display: grid; gap: 8px; }
#order_review { background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); padding: 16px; }
#order_review_heading { margin-top: 16px; }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table th:last-child { text-align: right; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table .product-quantity { font-weight: 400; color: var(--grey); }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 22px; border-bottom: 0; }
.woocommerce-shipping-methods { list-style: none; }
.woocommerce-shipping-methods input { display: none; }
#payment { margin-top: 16px; }
#payment .payment_methods { list-style: none; display: grid; gap: 10px; }
#payment .wc_payment_method { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; border: 2px solid var(--ink); border-radius: var(--r1); padding: 14px 16px; }
#payment .wc_payment_method input { width: 22px; height: 22px; accent-color: var(--ink); }
#payment .wc_payment_method label { font-weight: 700; }
#payment .payment_box { grid-column: 2; font-size: 14px; color: var(--grey); }
#payment .place-order { margin-top: 16px; display: grid; gap: 12px; }
#payment .woocommerce-privacy-policy-text, #payment .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--grey); }
#place_order { width: 100%; min-height: 56px; border: 2px solid var(--orange); border-radius: var(--r1); background: var(--orange); color: var(--white); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
#place_order:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
#place_order:disabled { opacity: .5; }
.checkout-help { text-align: center; }
.blockUI.blockOverlay { background: rgba(246,245,242,.6) !important; }
.woocommerce-NoticeGroup { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .m-summary { display: none; }
  form.checkout { grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: start; }
  form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
  #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 8px; }
  #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
}

/* Order received */
.woocommerce-order { display: grid; gap: 20px; max-width: 760px; }
.woocommerce-thankyou-order-received { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: var(--fs-h2); line-height: 1; text-transform: uppercase; }
.woocommerce-order-overview { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: var(--white); border: 1px solid var(--line); padding: 16px; }
.woocommerce-order-overview li { font-size: 13px; color: var(--grey); }
.woocommerce-order-overview strong { display: block; font-size: 16px; color: var(--ink); }
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; background: var(--white); }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.woocommerce-order-details__title, .woocommerce-column__title { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }
.woocommerce-customer-details address { font-style: normal; background: var(--white); border: 1px solid var(--line); padding: 16px; }

/* Cart page */
.cart-main { padding-block: 24px 64px; }
.cart-main .wp-block-post-content > .woocommerce { display: grid; gap: 24px; }
table.shop_table.cart { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
table.shop_table.cart thead { display: none; }
table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb name remove" "thumb qty sub"; gap: 6px 14px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
table.shop_table.cart td { display: block; padding: 0; border: 0; }
table.shop_table.cart .product-thumbnail { grid-area: thumb; align-self: start; }
table.shop_table.cart .product-thumbnail img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; }
table.shop_table.cart .product-name { grid-area: name; font-weight: 500; }
table.shop_table.cart .product-name a { text-decoration: none; }
table.shop_table.cart .product-price { display: none; }
table.shop_table.cart .product-quantity { grid-area: qty; }
table.shop_table.cart .product-subtotal { grid-area: sub; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 18px; text-align: right; }
table.shop_table.cart .product-remove { grid-area: remove; text-align: right; }
table.shop_table.cart .product-remove a { display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: 22px; text-decoration: none; color: var(--grey); }
table.shop_table.cart td::before { display: none; }
table.shop_table.cart .quantity input.qty { width: 72px; min-height: 44px; padding: 0 8px; text-align: center; }
table.shop_table.cart td.actions { display: flex; justify-content: flex-end; padding: 12px 16px; }
table.shop_table.cart td.actions .coupon { display: none; }
table.shop_table.cart td.actions .button { min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); background: var(--white); border-radius: var(--r1); font-weight: 700; }
table.shop_table.cart td.actions .button:disabled { opacity: .45; }
table.shop_table.cart tr:has(td.actions) { display: block; }
.cart_totals { background: var(--white); border: 1px solid var(--line); padding: 16px; display: grid; gap: 8px; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cart_totals td { text-align: right; }
.cart_totals .order-total th, .cart_totals .order-total td { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 22px; border-bottom: 0; }
.cart_totals .woocommerce-shipping-destination, .cart_totals .shipping-calculator-button, .cart_totals .woocommerce-shipping-calculator { display: none; }
.wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--orange); color: var(--white); border-radius: var(--r1); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 18px; text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.wc-proceed-to-checkout .checkout-button:hover { box-shadow: var(--shadow-hard); transform: translate(-2px, -2px); }
.cart-empty.woocommerce-info { font-size: 18px; }
.return-to-shop .button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--orange); color: var(--white); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; text-transform: uppercase; border-radius: var(--r1); }
@media (min-width: 960px) {
  .cart-main .wp-block-post-content > .woocommerce { grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: start; }
  .cart-main .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .cart-collaterals { position: sticky; top: 24px; }
}

/* Order confirmation */
.order-done { display: grid; gap: 12px; }
.od-grid { display: grid; gap: 16px; margin-top: 16px; }
.od-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); padding: 16px; display: grid; gap: 12px; align-content: start; }
.od-h { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 20px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.od-steps { padding-left: 20px; display: grid; gap: 6px; }
.od-cod { margin-top: 4px; }
.od-items { display: grid; gap: 8px; }
.od-items li, .od-totals div { display: flex; justify-content: space-between; gap: 12px; }
.od-totals { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.od-totals dd { margin: 0; text-align: right; }
.od-totals .order_total { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 20px; }
.od-bye { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
@media (min-width: 960px) { .od-grid { grid-template-columns: repeat(3, 1fr); } }

/* WooCommerce block-style notices (used by block themes for add-to-cart messages) */
.wc-block-components-notice-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 16px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r1); font-size: 15px; }
.wc-block-components-notice-banner > svg { width: 22px; height: 22px; flex: none; fill: var(--success); }
.wc-block-components-notice-banner.is-error { border-color: var(--error); }
.wc-block-components-notice-banner.is-error > svg { fill: var(--error); }
.wc-block-components-notice-banner__content { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.wc-block-components-notice-banner__content .wc-forward { order: 2; font-weight: 700; text-underline-offset: 3px; }
table.shop_table.cart td.actions .button { color: var(--ink); font-size: 15px; }
@media (max-width: 639px) { .hdr-checkout .secure { display: none; } .hdr-checkout .back-cart { margin-left: auto; } }

/* ---- Checkout v2: stable columns, two-column fields, numbered sections, calmer errors ---- */
.checkout-main { padding-block: 8px 72px; }
.co-head { display: grid; gap: 8px; padding: 20px 0 24px; }
.co-sub { display: flex; align-items: center; gap: 10px; color: var(--grey); font-size: 15px; }
.co-sub .icon { color: var(--ink); }

/* Columns never resize while WooCommerce refreshes the summary or the browser autofills. */
form.checkout { grid-template-columns: minmax(0, 1fr); }
.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
.woocommerce-billing-fields__field-wrapper > .form-row { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .woocommerce-billing-fields__field-wrapper > .form-row-first { grid-column: 1; }
  .woocommerce-billing-fields__field-wrapper > .form-row-last { grid-column: 2; }
}
@media (min-width: 960px) {
  form.checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
}

/* Numbered section heads, like the rest of the site */
.woocommerce-billing-fields h3, #order_review_heading { display: flex; align-items: baseline; gap: 12px; }
.woocommerce-billing-fields h3::before, #order_review_heading::before { font-size: 14px; color: var(--grey); font-stretch: 85%; }
.woocommerce-billing-fields h3::before { content: "01"; }
#order_review_heading::before { content: "02"; }
#order_review_heading { margin-top: 24px; }
@media (min-width: 960px) { #order_review_heading { margin-top: 8px; } }

/* Field labels and helper text a touch quieter */
.woocommerce form .form-row { margin-bottom: 20px; }
.woocommerce form .form-row label { font-size: 14px; letter-spacing: .01em; }
.woocommerce form .form-row .description { font-size: 13px; }
.woocommerce-additional-fields { margin-top: 4px; }

/* Errors show only after the person has typed in a field or pressed Place order (not on autofill hover). */
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--line-strong); }
.woocommerce form .form-row.woocommerce-invalid label { color: inherit; }
form.checkout.kbk-tried .form-row.woocommerce-invalid .input-text,
form.checkout.kbk-tried .form-row.woocommerce-invalid select,
.woocommerce form .form-row.kbk-touched.woocommerce-invalid .input-text,
.woocommerce form .form-row.kbk-touched.woocommerce-invalid select { border-color: var(--error); }
form.checkout.kbk-tried .form-row.woocommerce-invalid label,
.woocommerce form .form-row.kbk-touched.woocommerce-invalid label { color: var(--error); }

/* Summary card */
#order_review { padding: 20px; border: 2px solid var(--ink); }
.co-item { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.co-thumb { width: 48px; height: 60px; object-fit: cover; background: var(--placeholder); }
.woocommerce-checkout-review-order-table .cart_item td { padding: 12px 0; vertical-align: middle; }
.woocommerce-checkout-review-order-table .product-name { font-weight: 500; }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--grey); }
.woocommerce-checkout-review-order-table tfoot .order-total th { color: var(--ink); }
.woocommerce-shipping-methods label { color: var(--ink); }
#payment .wc_payment_method { background: var(--paper); box-shadow: var(--shadow-hard); }
#payment .wc_payment_method > input[type="radio"]:only-of-type { accent-color: var(--ink); }
#payment .wc_payment_method label::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 10px; vertical-align: -5px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='1'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='1'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
#payment .payment_box { grid-column: 1 / -1; margin: 0; }
#payment .payment_box p { margin: 0; }
.co-trust { font-size: 13px; color: var(--grey); text-align: center; line-height: 1.5; }
.checkout-help { margin-top: 4px; }
.woocommerce form .form-row { align-content: start; }
.woocommerce-checkout-review-order-table .product-name > .product-quantity { display: none; }
.co-qty { color: var(--grey); white-space: nowrap; }

/* Cart drawer (milestone 2.3) */
[hidden] { display: none !important; }
.line-img img, .line-img .ph { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--placeholder); }
.line-name a { text-decoration: none; }
.line.is-busy { opacity: .5; pointer-events: none; }
.line .price { font-size: 16px; white-space: nowrap; }
.qty.sm button:disabled { opacity: .35; cursor: not-allowed; }
.dr-status { font-size: 14px; color: var(--grey); padding-top: 10px; }
.dr-status:empty { display: none; }
.drawer.is-empty .dr-foot .help, .drawer.is-empty .dr-foot .sub { display: none; }

/* ---- Checkout v3: no layout jumps, calm inline errors, error summary at the top ---- */

/* Every field reserves one line under it for its message, so nothing moves when an error appears or clears. */
.woocommerce form.checkout .form-row { position: relative; margin-bottom: 4px; padding-bottom: 24px; }
.woocommerce form.checkout .form-row .checkout-inline-error-message { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; display: none; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--error); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woocommerce form.checkout .form-row .checkout-inline-error-message::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--error); color: var(--white); font-size: 10px; font-weight: 800; }
form.checkout.kbk-tried .form-row.woocommerce-invalid .checkout-inline-error-message,
form.checkout .form-row.kbk-touched.woocommerce-invalid .checkout-inline-error-message { display: flex; }

/* Helper text always visible (WooCommerce slides it in and out on focus, which shifts the form). */
.woocommerce form .form-row .description { display: block !important; position: static; margin: 2px 0 0; padding: 0; background: none; color: var(--grey); font-size: 13px; line-height: 1.4; }
.woocommerce form .form-row .description::before { display: none; }

/* Error summary: compact, at the top of the form, links jump to the field. */
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
form.checkout > .woocommerce-NoticeGroup .wc-block-components-notice-banner { align-items: flex-start; padding: 12px 16px; border-width: 2px; font-size: 14px; }
form.checkout > .woocommerce-NoticeGroup .wc-block-components-notice-banner__content { display: block; }
form.checkout > .woocommerce-NoticeGroup .wc-block-components-notice-banner__summary { font-weight: 700; margin-bottom: 4px; }
form.checkout > .woocommerce-NoticeGroup ul { display: flex; flex-wrap: wrap; gap: 2px 16px; }
form.checkout > .woocommerce-NoticeGroup li a { color: var(--error); text-underline-offset: 3px; }
form.checkout > .woocommerce-NoticeGroup li strong { font-weight: inherit; }
@media (min-width: 960px) {
  #customer_details { grid-row: 2 / span 3; }
  #order_review_heading { grid-row: 2; }
  #order_review { grid-row: 3; top: 16px; }
}

/* Calmer focus jump: WooCommerce scrolls to the summary; leave room above it. */
form.checkout > .woocommerce-NoticeGroup, .woocommerce-billing-fields input, .woocommerce-billing-fields select, .woocommerce-billing-fields textarea { scroll-margin-top: 24px; }
form.checkout > .woocommerce-NoticeGroup .wc-block-components-notice-banner > svg { width: 20px; height: 20px; margin-top: 1px; }

/* Help and policy pages */
.prose h2 { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; margin-top: 32px; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose li::marker { color: var(--orange); }
.prose a { text-underline-offset: 3px; }
.page-title { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }

/* Category tiles with photos: one soft shade under the name only. */
.cat.has-img::after { background: linear-gradient(180deg, rgba(14,14,14,0) 55%, rgba(14,14,14,.6) 100%); }
/* On photos the number becomes a small ink label (like the hero's sample tag), so the photo stays clean. */
.cat.has-img .num, .cat-1.has-img .num { justify-self: start; align-self: start; background: var(--ink); color: var(--white); font-size: 18px; line-height: 1; font-stretch: 85%; padding: 7px 9px 6px; letter-spacing: .02em; }
.cat.has-img .ph-note { visibility: hidden; }
.cat .name { align-self: end; }
.cat.has-img .cat-img { transition: transform var(--dur-base) var(--ease); }
@media (hover: hover) { .cat.has-img:hover .cat-img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .cat.has-img:hover .cat-img { transform: none; } }

/* Tall (portrait) photos: crop from a little above centre so faces and products near the top stay in the tile. */
.cat .cat-img { object-position: 50% 30%; }

/* ---- Mobile app feel (owner request 2026-10-28) ---- */

/* Announcement bar: slow moving line of store facts, pause button, pauses on hover/focus, static with reduced motion. */
.announce { position: relative; display: flex; align-items: stretch; min-height: 36px; overflow: hidden; }
.marquee { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.marquee-track { display: flex; width: max-content; animation: kbk-marquee 32s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; white-space: nowrap; padding-left: 36px; }
.marquee-item::after { content: ""; width: 5px; height: 5px; margin-left: 36px; background: var(--orange); transform: rotate(45deg); flex: none; }
@keyframes kbk-marquee { to { transform: translateX(-25%); } }
.announce:hover .marquee-track, .announce:focus-within .marquee-track, .announce.is-paused .marquee-track { animation-play-state: paused; }
.marquee-toggle { flex: none; width: 40px; border: 0; border-left: 1px solid #2E2E2E; background: var(--ink); color: var(--white); display: grid; place-items: center; }
.marquee-toggle span { display: block; width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.announce.is-paused .marquee-toggle span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-toggle { display: none; }
}

/* Header: compact on mobile, search field on every page, menu and search moved to the tab bar. */
@media (max-width: 959px) {
  body:not(.home) .search-row, .page-product .search-row { display: block; }
  .hdr-row { height: 56px; }
  .search-row { padding-bottom: 10px; }
  .search-row .search { height: 44px; }
  .hdr .menu-btn, .hdr .search-toggle { display: none; }
  .logo { margin-left: -4px; }
  .shop-bar { position: static; }
}

/* Bottom tab bar (below 960px). */
.tabbar { display: none; }
@media (max-width: 959px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--grey); }
  .tabbar a .icon { width: 24px; height: 24px; color: var(--ink); }
  .tabbar a[aria-current] { color: var(--ink); }
  .tabbar a[aria-current]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: var(--orange); }
  .tabbar .tab-icon { position: relative; display: block; }
  .tabbar .cart-count { top: -6px; right: -10px; }
  body:has(.tabbar) { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body:has(.tabbar) .sticky-atc { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  body:has(.tabbar) .wa { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* Category quick row on Home (mobile only). */
.cat-row { display: none; }
@media (max-width: 959px) {
  .cat-row { display: block; background: var(--paper); border-bottom: 1px solid var(--line); }
  .cat-row-track { display: grid; grid-auto-flow: column; grid-auto-columns: 68px; gap: 14px; overflow-x: auto; padding: 14px var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .cat-row-track::-webkit-scrollbar { display: none; }
  .cat-chip { display: grid; justify-items: center; gap: 6px; text-decoration: none; scroll-snap-align: start; }
  .cat-chip-img { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; background: var(--placeholder); border: 1px solid var(--line); border-radius: var(--r1); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 20px; color: var(--ink); }
  .cat-chip-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .cat-chip-name { font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Product card: price row with a "+" (add to cart) or "Choose" button. */
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.add-plus { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r1); background: var(--orange); color: var(--white); text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.add-plus::before { content: ""; position: absolute; inset: -4px; }
.add-plus .icon { width: 22px; height: 22px; stroke-width: 2.25; }
.add-plus.add-choose { width: auto; padding: 0 12px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.add-plus.is-added { background: var(--ink); }
.card .body { display: flex; flex-direction: column; }
@media (hover: hover) and (min-width: 960px) { .add-plus { display: none; } }

/* Desktop: remaining categories as product icons (replaces the numbered text list). Hidden on mobile, where the quick row covers them. */
.cat-icons { display: none; }
@media (min-width: 960px) {
  .cat-icons { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .cat-icon { display: grid; gap: 10px; text-decoration: none; }
  .cat-icon-img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r1); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 28px; transition: border-color var(--dur-fast) var(--ease); }
  .cat-icon-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease); }
  .cat-icon-name { font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; }
  .cat-icon:hover .cat-icon-img { border-color: var(--ink); }
  .cat-icon:hover .cat-icon-img img { transform: scale(1.04); }
  .cat-icon:hover .cat-icon-name { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .cat-icon:hover .cat-icon-img img { transform: none; } }

/* Brand story is text only now (the footer below carries the logo). */
@media (min-width: 960px) { .story-grid { grid-template-columns: minmax(0, 760px); } }

/* ---- Home slider + side cards (owner request 2026-10-28) ---- */
.hero-x { padding-block: 16px 8px; }
.hero-x-grid { display: grid; gap: 12px; }
.slider { position: relative; overflow: hidden; border-radius: var(--r1); background: var(--ink); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 4.2; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0) 30%, rgba(14,14,14,.78) 100%); }
.slide-copy { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start; padding: 20px 20px 64px; max-width: 560px; }
.slide-label { background: var(--orange); color: var(--white); font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px 4px; }
.slide-title { font-family: var(--font-display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(34px, 22px + 3.4vw, 64px); line-height: .92; letter-spacing: -.005em; }
.slide-text { font-size: 15px; line-height: 1.45; color: #EDEDED; max-width: 42ch; }
.slide .btn { margin-top: 4px; }

.slider-ui { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.94); border-radius: var(--rp); padding: 3px; }
.slider-btn { width: 36px; height: 36px; border: 0; background: none; border-radius: var(--rp); display: grid; place-items: center; color: var(--ink); }
.slider-btn .icon { width: 18px; height: 18px; }
.slider-btn:hover { background: var(--paper); }
.pause-glyph { display: block; width: 8px; height: 11px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.slider.is-paused .pause-glyph { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; }
.slider-dots { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.slider-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--rp); background: var(--line-strong); transition: width var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); position: relative; }
.slider-dots button::before { content: ""; position: absolute; inset: -14px -4px; }
.slider-dots button[aria-current="true"] { width: 22px; background: var(--ink); }
.slider-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); z-index: 2; }
.slider-progress span { display: block; height: 100%; width: 0; background: var(--orange); }
.slider.is-playing .slider-progress span { animation: kbk-progress var(--slide-ms, 6000ms) linear forwards; }
@keyframes kbk-progress { to { width: 100%; } }

.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-card { position: relative; display: grid; align-content: space-between; gap: 6px; min-height: 132px; padding: 16px; border-radius: var(--r1); text-decoration: none; color: var(--white); overflow: hidden; }
.hero-card .icon { width: 28px; height: 28px; margin-bottom: 18px; }
.hc-ink { background: var(--ink); }
.hc-orange { background: var(--orange); }
.hc-title { font-family: var(--font-display); font-weight: 900; font-stretch: 75%; font-size: 22px; line-height: 1; text-transform: uppercase; }
.hc-text { font-size: 13px; line-height: 1.4; opacity: .92; }
.hero-card:hover .hc-title { text-decoration: underline; text-underline-offset: 4px; }
.hc-orange .tbd { color: var(--white); }

@media (min-width: 640px) { .slide { aspect-ratio: 16 / 9; } .slide-copy { padding: 32px 32px 72px; } }
@media (min-width: 960px) {
  .hero-x { padding-block: 24px 8px; }
  .hero-x-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
  .slide { aspect-ratio: auto; height: 460px; }
  .slide::after { background: linear-gradient(90deg, rgba(14,14,14,.82) 0%, rgba(14,14,14,.45) 45%, rgba(14,14,14,0) 75%); }
  .slide-copy { align-self: center; padding: 40px 48px; }
  .slide-text { font-size: 17px; }
  .hero-cards { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hero-card { padding: 24px; }
  .hc-title { font-size: 30px; }
  .hc-text { font-size: 15px; }
  .hero-x ~ .sec-after-hero { padding-top: var(--sec); }
}
@media (prefers-reduced-motion: reduce) {
  .slider.is-playing .slider-progress span { animation: none; }
}

/* Slider v2 (campaign banners with a dark left side): lighter overlay on desktop; on mobile a taller slide
   cropped to the subject on the right, with the text on a dark band at the bottom. */
.slide-img { object-position: 88% 40%; }
.slide::after { background: linear-gradient(180deg, rgba(14,14,14,0) 38%, rgba(14,14,14,.86) 72%, rgba(14,14,14,.94) 100%); }
.slide { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .slide { aspect-ratio: 16 / 9; } .slide-img { object-position: 75% 50%; } }
@media (min-width: 960px) {
  .slide { aspect-ratio: auto; }
  .slide-img { object-position: 100% 50%; }
  .slide::after { background: linear-gradient(90deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.2) 40%, rgba(14,14,14,0) 60%); }
}

/* All products tile with a photo: taller on mobile so the image reads, name stays bottom-left. */
.cat-all.has-img { align-items: end; grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
.cat-all.has-img .cat-img { object-position: 60% 40%; }
@media (min-width: 960px) { .cat-all.has-img { aspect-ratio: auto; } }

/* ---- Home polish (owner-approved review, 2026-10-28) ---- */

/* 5. Product cards: category label, bolder price, poster-style hover lift. */
.card { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
@media (hover: hover) { .card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); border-color: var(--ink); } }
.card .media { background: var(--placeholder); }
.card-cat { font-family: var(--font-display); font-weight: 700; font-stretch: 85%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.card .body { gap: 4px; padding: 12px 12px 14px; }
.card .name { font-weight: 600; }
.card .price { font-size: 19px; }
.card-foot { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* 2. Mobile: the featured card becomes a horizontal "spotlight" card instead of a full-screen card. */
@media (max-width: 959px) {
  .grid-feat .feature { grid-column: 1 / -1; flex-direction: row; }
  .grid-feat .feature .media { flex: 0 0 46%; aspect-ratio: 4 / 5; }
  .grid-feat .feature .body { justify-content: center; padding: 16px; }
  .grid-feat .feature .name { font-size: 22px; }
  .grid-feat .feature .price { font-size: 22px; }
  .grid-feat .feature .card-foot { flex-wrap: wrap; }
}

/* 3. Search band between the two product sections. */
.search-band { background: var(--ink); color: var(--white); padding-block: 40px; margin-bottom: var(--sec); position: relative; overflow: hidden; }
.search-band::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(217,58,11,.45), rgba(217,58,11,0) 70%); pointer-events: none; }
.sb-grid { position: relative; z-index: 1; display: grid; gap: 20px; }
.sb-label { color: var(--orange); }
.sb-title { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: clamp(38px, 24px + 3.6vw, 72px); line-height: .9; margin-top: 8px; }
.sb-title .o { color: var(--orange); }
.sb-form { height: 56px; padding-left: 16px; border-color: var(--white); gap: 8px; }
.sb-form input { font-size: 17px; }
.sb-form .btn { min-height: 46px; margin-right: 4px; padding: 0 16px; }
.sb-form .btn .icon { width: 18px; height: 18px; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sb-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1.5px solid #3A3A3A; border-radius: var(--rp); text-decoration: none; font-size: 14px; font-weight: 500; color: #E6E6E6; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sb-chips a:hover { border-color: var(--orange); color: var(--white); }
@media (max-width: 639px) { .sb-form .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 960px) {
  .search-band { padding-block: 64px; }
  .sb-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 56px; }
}

/* 4. "Good to know" as a dark trust strip with orange icons. */
.trust-strip { background: var(--ink); color: var(--white); padding-block: 48px; }
.trust-strip .sec-head .idx { color: var(--grey-on-ink); }
.trust-strip .sec-head .rule { background: #3A3A3A; }
.trust-strip .props { border-top: 0; }
.trust-strip .prop { border-color: #2E2E2E; }
.trust-strip .prop .icon { color: var(--orange); width: 32px; height: 32px; }
.trust-strip .prop h3 { color: var(--white); }
.trust-strip .prop p { color: var(--grey-on-ink); }
.trust-strip .prop a { color: var(--white); }
.trust-strip .tbd { color: var(--grey-on-ink); }
@media (max-width: 959px) {
  .trust-strip .props { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .trust-strip .prop { grid-template-columns: 1fr; border-bottom: 1px solid #2E2E2E; }
  .trust-strip .prop .icon { grid-row: auto; margin-bottom: 6px; }
  .trust-strip .prop h3 { font-size: 17px; }
  .trust-strip .prop p { font-size: 14px; }
  .trust-strip .prop:last-child { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .trust-strip { padding-block: 72px; } }
.trust-strip + .story { border-top: 0; }

/* Product options: tap buttons and colour circles (assets/js/swatches.js); the dropdown stays hidden for WooCommerce */
.variations select.kbk-sw-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.variations th.label { display: flex; align-items: baseline; gap: 8px; }
.kbk-sw-chosen { font-family: var(--font-body, inherit); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--grey); }
.kbk-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.kbk-sw { min-width: 48px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong, #86837B); background: var(--white, #fff); color: var(--ink, #0E0E0E); border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.kbk-sw:hover { border-color: var(--ink, #0E0E0E); }
.kbk-sw.is-on { background: var(--ink, #0E0E0E); border-color: var(--ink, #0E0E0E); color: var(--white, #fff); }
.kbk-sw:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.kbk-sw:focus-visible { outline: 3px solid var(--orange, #D93A0B); outline-offset: 2px; }
.kbk-sw-dot { width: 44px; min-width: 44px; padding: 0; position: relative; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.kbk-sw-dot.is-on { background: var(--sw); box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 4px var(--ink, #0E0E0E); }
.kbk-sw-dot:disabled { text-decoration: none; }
.kbk-sw-dot:disabled::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; background: var(--ink, #0E0E0E); transform: rotate(45deg); }

/* Weight under cart and checkout items, and the parcel weight row in the summary */
.item-weight { display: block; font-size: .8125rem; color: var(--grey); margin-top: 2px; }
.kbk-weight th, .kbk-weight td { font-weight: 400; color: var(--grey); }

/* Track your order */
.trk { max-width: 560px; }
.trk-lead { color: var(--grey); margin-bottom: var(--s5); }
.trk-form { display: grid; gap: var(--s4); }
.trk-field label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.trk-field input { width: 100%; min-height: 52px; padding: 0 var(--s4); border: 2px solid var(--ink); border-radius: var(--r1); background: var(--white); font: inherit; font-size: 17px; color: var(--ink); }
.trk-field input::placeholder { color: var(--placeholder); }
.trk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.trk .btn { justify-self: start; }
.trk-error { margin-top: var(--s5); padding: var(--s3) var(--s4); border-left: 4px solid var(--error); background: var(--white); color: var(--error); font-weight: 600; }
.trk-card { margin-top: var(--s6); padding: var(--s5); background: var(--white); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); }
.trk-card h2 { margin: 0 0 var(--s2); font-size: 24px; }
.trk-meta { color: var(--grey); font-size: 15px; }
.trk-steps { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: 0; }
.trk-steps li { position: relative; padding: 0 0 var(--s4) 36px; color: var(--grey); }
.trk-steps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--white); }
.trk-steps li::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: 2px; width: 2px; background: var(--line-strong); }
.trk-steps li:last-child { padding-bottom: 0; }
.trk-steps li:last-child::after { display: none; }
.trk-steps li.is-done { color: var(--ink); }
.trk-steps li.is-done::before { background: var(--ink); border-color: var(--ink); }
.trk-steps li.is-done::after { background: var(--ink); }
.trk-steps li.is-now { color: var(--ink); font-weight: 800; }
.trk-steps li.is-now::before { background: var(--orange); border-color: var(--orange); }
.trk-msg { font-weight: 600; }
.trk-returned, .trk-cancelled { color: var(--error); }
.trk-cash { margin-top: var(--s2); font-weight: 700; }
.trk-courier { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); justify-items: start; }
.trk-num { font: 700 22px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; user-select: all; word-break: break-all; }
.trk-small { color: var(--grey); font-size: 14px; }
.trk-help { margin-top: var(--s5); font-size: 15px; }