/* The vitrine (the redesign of 2026-10-29): the home page's first screen. A jeweller's case at night: velvet in the company's
   deepest tone (--cat-dark), one warm light, a hairline in its second colour (--s, brass when it is gold), the piece on show
   named large, a tag hanging from it, and the tray of slabs under the case. It stays a night vitrine for light companies too:
   the rest of their page keeps their own pale ground. Every colour is the company's token; no colour is fixed here except the
   warm white of the light. */
.vitrine { position: relative; isolation: isolate; background: var(--cat-dark); color: var(--cat-light); padding-top: 76px; overflow: hidden; }
.vitrine::before { content: ""; position: absolute; z-index: -1; inset: -10% -5% auto; height: 90%; pointer-events: none;
  background: radial-gradient(48% 55% at 38% 30%, rgb(255 240 214 / .16), transparent 70%); }
html[dir="ltr"] .vitrine::before { background: radial-gradient(48% 55% at 62% 30%, rgb(255 240 214 / .16), transparent 70%); }
.vitrine ::selection { background: var(--s-fill); color: var(--on-s); }

.v-in { max-width: 1440px; margin-inline: auto; min-height: calc(100svh - 76px); display: grid; align-content: center;
  grid-template-columns: minmax(300px, 34fr) 66fr; grid-template-areas: "copy case" "copy tray" "copy find"; gap: 28px clamp(32px, 4vw, 64px);
  padding: 28px clamp(20px, 4vw, 64px) 44px; }

/* the case: the live kitchen (or the whole slab) under the light, framed by a brass hairline */
.v-case { grid-area: case; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--cat-dark) 70%, #000);
  outline: 1px solid color-mix(in srgb, var(--s) 45%, transparent); outline-offset: 9px; box-shadow: 0 46px 90px -34px rgb(0 0 0 / .85); }
.v-case img, .v-case canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: none; }
.v-poster { object-fit: cover; filter: saturate(.92); }
.v-canvas { opacity: 0; transition: opacity .6s cubic-bezier(.2, .7, .2, 1); }
.v-case.ready .v-canvas { opacity: 1; }
.v-case.ready .v-poster { visibility: hidden; transition: visibility 0s .6s; }   /* the waiting picture leaves once the live kitchen is drawn over it */
.v-slabs .v-case { background: transparent; }
.v-slab { object-fit: contain; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)); }
/* the light that passes over the case when the piece changes (the one motion of the vitrine) */
.v-sweep { position: absolute; inset: -10% 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 246 228 / .5) 50%, transparent 70%); transform: translateX(120%); }
.sweeping .v-sweep { animation: v-sweep .75s cubic-bezier(.2, .7, .2, 1); }
@keyframes v-sweep { 0% { opacity: 1; transform: translateX(120%); } 100% { opacity: 1; transform: translateX(-120%); } }
html[dir="ltr"] .sweeping .v-sweep { animation-name: v-sweep-ltr; }
@keyframes v-sweep-ltr { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 1; transform: translateX(120%); } }

/* the words: the piece's name at display size, its tag, the three ways to act */
.v-copy { grid-area: copy; align-self: center; }
.v-name { font-size: clamp(2.6rem, 4.4vw, 4.6rem); line-height: 1.12; font-weight: 700; text-wrap: balance; margin-bottom: 26px; }
.v-tag { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 11px 18px 11px 20px; font-size: 1rem;
  border: 1px solid color-mix(in srgb, var(--s) 55%, transparent); color: color-mix(in srgb, var(--cat-light) 86%, var(--s)); }
.v-tag::before { content: ""; position: absolute; inset-inline-start: -6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%;
  border: 1px solid var(--s); background: var(--cat-dark); }   /* the tag's eyelet */
.v-tag b { color: var(--cat-light); font-weight: 700; }
.v-acts { display: grid; gap: 12px; max-width: 390px; margin-top: 44px; }
.v-wa, .v-visit { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 24px; text-align: center; text-decoration: none;
  border-radius: var(--r); font-weight: 700; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.v-wa { background: var(--s-fill); color: var(--on-s); font-size: 1.1rem; }
.v-wa:hover { background: color-mix(in srgb, var(--s-fill) 86%, #fff); }
.v-visit { border: 1px solid color-mix(in srgb, var(--cat-light) 38%, transparent); color: var(--cat-light); font-size: 1rem; font-weight: 600; }
.v-visit:hover { border-color: var(--s); }
.v-open { justify-self: start; margin-top: 6px; color: var(--s-text); font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.vitrine :focus-visible, .v-bar :focus-visible { outline: 2px solid var(--s-text); outline-offset: 3px; }
.v-bar .v-visit { color: var(--cat-light); }

/* the tray: the company's slabs as cut pieces on velvet; the one on show lifted and ringed in brass */
.v-tray { grid-area: tray; min-width: 0; }
.v-tray-t { font-size: .95rem; color: color-mix(in srgb, var(--cat-light) 72%, var(--cat-dark)); margin-bottom: 12px; }
.v-pieces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 18px 18px 14px;
  background: color-mix(in srgb, var(--cat-dark) 78%, #000); border-top: 1px solid color-mix(in srgb, var(--s) 28%, transparent); }
.v-piece { display: block; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.v-piece img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 1px; box-shadow: 0 12px 18px -10px rgb(0 0 0 / .75);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), outline-color .3s ease; outline: 1px solid transparent; outline-offset: 5px; }
.v-piece span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font-size: .9rem; line-height: 1.4;
  color: color-mix(in srgb, var(--cat-light) 78%, var(--cat-dark)); }
.v-piece span b { color: var(--s-text); font-weight: 600; }
.v-piece:hover img { transform: translateY(-4px); }
.v-piece[aria-pressed="true"] img { transform: translateY(-9px); outline-color: var(--s-text); }
.v-piece[aria-pressed="true"] span { color: var(--cat-light); }
.v-find { grid-area: find; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: -10px; font-size: .95rem; color: color-mix(in srgb, var(--cat-light) 78%, var(--cat-dark)); }
.v-find input, .v-find button { min-height: 44px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--cat-light) 32%, transparent); border-radius: var(--r);
  background: transparent; color: var(--cat-light); font: inherit; }
.v-find input { width: 9ch; caret-color: var(--s-text); }
.v-find button { cursor: pointer; }
.v-find button:hover { border-color: var(--s); }
.v-bar { display: none; }

/* the phone: the case first, the tray as one swipe row, the words under it, and WhatsApp with the visit always at the thumb */
@media (max-width: 900px) {
  .v-in { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "case" "tray" "copy" "find"; gap: 18px; padding: 14px 16px 28px; }
  .v-find { margin-top: 8px; }
  .v-case { outline-offset: 5px; }
  .v-pieces { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 14px 12px 10px; scrollbar-width: none; }
  .v-pieces::-webkit-scrollbar { display: none; }
  .v-piece { flex: 0 0 38%; scroll-snap-align: start; }
  .v-name { font-size: clamp(2rem, 8.5vw, 2.7rem); margin-bottom: 18px; }
  .v-copy .v-wa, .v-copy .v-visit { display: none; }
  .v-acts { margin-top: 18px; }
  .v-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; position: fixed; z-index: 30; inset-inline: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--cat-dark) 96%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--s) 30%, transparent); }
  .v-bar a { min-height: 50px; padding: 10px 12px; }
  .v-bar .v-wa { font-size: 1rem; white-space: nowrap; }
  .pg-home { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-canvas, .v-piece img { transition: none; }
  .sweeping .v-sweep { animation: none; }
}

/* ------------------------------------------------------------------ the rest of the home page, in the vitrine's world
   The shop around the case: the company's own ground (--bg / --ink) for the racks and the drawer, its paper (--cat-light) for
   the company and the booklet, and the velvet again at the end, where the visit is asked for. A brass line drops into every
   heading, so the eye is led from the vitrine down to the visit. */
.w-sec { padding-block: clamp(72px, 9vw, 128px); }
.w-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.w-h { font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.w-h::before { content: ""; display: block; width: 1px; height: clamp(36px, 4vw, 56px); margin-bottom: 22px; background: var(--s); }
.w-head .w-h { margin: 0; }
.w-more { color: var(--p-text); font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; white-space: nowrap; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 26px; border-radius: var(--r); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); color: inherit; transition: background-color .25s ease, border-color .25s ease; }
.w-btn:hover { border-color: var(--s); }
.w-btn-p { background: var(--s-fill); color: var(--on-s); border-color: transparent; }
.w-btn-p:hover { background: color-mix(in srgb, var(--s-fill) 86%, #fff); }
.w-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* the categories: each a long strip of its own slab, like slabs racked in the yard, its name on a hanging tag */
.racks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rack { position: relative; display: block; height: clamp(150px, 17vw, 236px); overflow: hidden; color: var(--cat-light); text-decoration: none; border-radius: 1px; }
.rack-slab { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.rack:hover .rack-tag { border-color: var(--s); }
.rack-tag { position: absolute; inset-inline-start: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; max-width: min(70%, 440px);
  padding: 14px 22px 14px 24px; background: var(--cat-dark); border: 1px solid color-mix(in srgb, var(--s) 55%, transparent); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .7); }
.rack-tag::before { content: ""; position: absolute; inset-inline-start: -6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; border: 1px solid var(--s); background: var(--cat-dark); }
.rack-tag b { font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.2; }
.rack-tag span { color: var(--s-text); font-size: .95rem; }
.rack-tag small { font-size: .95rem; color: color-mix(in srgb, var(--cat-light) 80%, var(--cat-dark)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the drawer: the colours beyond the vitrine, whole slabs at their own proportion with their tags */
.w-drawer { background: var(--cat-light); color: var(--cat-ink); }
.w-drawer .w-more { color: var(--cat-accent); }
.drawer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.piece { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.piece img { width: 100%; aspect-ratio: 2 / 1; border-radius: 1px; box-shadow: 0 16px 26px -18px rgb(0 0 0 / .55); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.piece:hover img { transform: translateY(-5px); }
.piece-tag { display: grid; gap: 4px; }
.piece-tag b { font-size: 1.15rem; line-height: 1.35; }
.piece-tag > span { font-size: .95rem; color: color-mix(in srgb, var(--cat-ink) 72%, var(--cat-light)); }
.nw { white-space: nowrap; }
.piece:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* the ways in after the colours: the showroom (the company's slabs standing in a row under the light, on their ledge, as on
   its walls) and "design your kitchen" (a kitchen in the case) */
.w-tool-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.w-tool-t { display: grid; gap: 18px; justify-items: start; }
.w-tool-t .w-h { margin: 0; }
.w-tool-t p { font-size: 1.12rem; max-width: 46ch; }
.w-hall { position: relative; isolation: isolate; overflow: hidden; background: var(--cat-dark); color: var(--cat-light); }
.w-hall::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(40% 70% at 70% 20%, rgb(255 240 214 / .13), transparent 72%); }
html[dir="ltr"] .w-hall::before { background: radial-gradient(40% 70% at 30% 20%, rgb(255 240 214 / .13), transparent 72%); }
.w-hall .w-tool-t p { color: color-mix(in srgb, var(--cat-light) 84%, var(--cat-dark)); }
.hall { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.4vw, 18px); padding: 26px 5% 0;
  border-bottom: 12px solid color-mix(in srgb, var(--cat-dark) 55%, #000); }
.hall-slab { position: relative; flex: 1 1 0; max-width: 128px; aspect-ratio: 1 / 2.3; box-shadow: 0 26px 30px -20px rgb(0 0 0 / .85); }
.hall-slab::before { content: ""; position: absolute; top: -16px; inset-inline: 12%; height: 3px; border-radius: 2px; background: rgb(255 246 228 / .9);
  box-shadow: 0 8px 20px rgb(255 240 214 / .45); }
.hall-slab img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.kit-case { display: block; order: 2; outline: 1px solid color-mix(in srgb, var(--s) 45%, transparent); outline-offset: 9px; box-shadow: 0 40px 70px -40px rgb(0 0 0 / .6); }
.kit-case img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1px; }

/* the company: its words beside its picture; the facts said plainly, not counted up */
.w-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.w-about-pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 1px; }
.w-about-t { display: grid; gap: 20px; justify-items: start; }
.w-about-t .w-h { margin-bottom: 4px; }
.w-about-t p { font-size: 1.12rem; max-width: 56ch; color: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 1.05rem; }
.facts b { color: var(--p-text); font-size: 1.25rem; }

/* the booklet (the catalogue's band) */
.w-book { background: var(--cat-light); color: var(--cat-ink); }
.w-book .band-t { gap: 18px; }
.w-book .band-t p { font-size: 1.1rem; opacity: 1; color: color-mix(in srgb, var(--cat-ink) 82%, var(--cat-light)); }

/* finished work and what customers said, on the velvet again */
.w-work, .w-said, .w-end { background: var(--cat-dark); color: var(--cat-light); }
.w-work + .w-said { padding-top: 0; }
.w-work .w-more, .w-end .w-more { color: var(--s-text); }
.work { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.work figure { display: grid; gap: 12px; }
.work img { width: 100%; aspect-ratio: 4 / 3; border-radius: 1px; }
.work figcaption { font-size: 1rem; color: color-mix(in srgb, var(--cat-light) 80%, var(--cat-dark)); }
.said { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.said figure { margin: 0; display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--s) 40%, transparent); }
.said blockquote { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; }
.said figcaption { color: var(--s-text); font-weight: 600; }

/* the visit: the line of light ends here */
.w-end { border-top: 1px solid color-mix(in srgb, var(--s) 22%, transparent); }
.w-end-in { max-width: 820px; }
.w-end .w-h { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
.w-end p { margin-top: 18px; font-size: 1.12rem; color: color-mix(in srgb, var(--cat-light) 84%, var(--cat-dark)); }

@media (max-width: 900px) {
  .drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .piece-tag b { font-size: 1.02rem; }
  .w-about-in, .work, .said, .w-tool-in { grid-template-columns: minmax(0, 1fr); }
  .kit-case { order: 0; }
  .hall-slab:nth-child(n+5) { display: none; }
  .rack { height: 150px; }
  .rack-tag { padding: 12px 16px 12px 18px; max-width: 80%; }
  .w-acts .w-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .piece img { transition: none; } }

/* ------------------------------------------------------------------ one product: the piece in the vitrine */
.v-page { padding-top: 0; }
.v-page .v-in { min-height: 0; padding-block: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 64px); align-content: start; }
.v-page .crumbs { padding: 0 0 22px; color: color-mix(in srgb, var(--cat-light) 72%, var(--cat-dark)); font-size: .95rem; }
.v-page .crumbs a { color: inherit; padding-block: 10px; }
.v-page .v-name { font-size: clamp(2.3rem, 4vw, 4rem); }
.v-avail { margin-top: 16px; font-size: 1rem; color: var(--s-text); font-weight: 600; }
.v-avail.no { color: color-mix(in srgb, var(--cat-light) 70%, var(--cat-dark)); }
.v-page .v-acts { margin-top: 30px; }
.v-keep { justify-self: start; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--cat-light); font: inherit; font-size: 1rem; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.v-keep[aria-pressed="true"] { color: var(--s-text); text-decoration-style: solid; }
.v-page .v-case { background: color-mix(in srgb, var(--cat-dark) 70%, #000); }
.v-page .v-case img { inset: 7% 5%; width: 90%; height: 86%; object-fit: contain; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)); }   /* the slab stands in the case with room around it */
.v-piece[aria-current] img { transform: translateY(-9px); outline-color: var(--s-text); }
.v-page .v-pieces { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); }
.p-more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.p-text { display: grid; gap: 16px; font-size: 1.1rem; max-width: 62ch; }
.p-specs { display: grid; gap: 16px; }
.p-specs .specs th, .p-specs .specs td { padding: 13px 0; }
@media (max-width: 900px) {
  .p-more { grid-template-columns: minmax(0, 1fr); }
  .v-page .v-in { grid-template-areas: "case" "tray" "copy"; }
  .v-page .crumbs { padding-bottom: 12px; }
  .pg-product { padding-bottom: 76px; }
}

/* ------------------------------------------------------------------ the visitor's list (site.js): two or three colours in one message */
.keep-chip { position: fixed; z-index: 31; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 10px 18px;
  border: 1px solid var(--s); border-radius: var(--r); background: var(--cat-dark); color: var(--cat-light); font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 16px 30px -14px rgb(0 0 0 / .6); }
.keep-chip b { color: var(--s-text); margin-inline-start: 6px; }
@media (max-width: 900px) { .pg-home .keep-chip, .pg-product .keep-chip { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
.keep-box { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid color-mix(in srgb, var(--s) 50%, transparent); border-radius: var(--r);
  background: var(--cat-dark); color: var(--cat-light); }
.keep-box::backdrop { background: rgb(0 0 0 / .55); }
.keep-in { display: grid; gap: 16px; padding: 24px; }
.keep-in h2 { font-size: 1.6rem; }
.keep-in p { color: color-mix(in srgb, var(--cat-light) 78%, var(--cat-dark)); }
.keep-list { list-style: none; margin: 0; padding: 0; display: grid; }
.keep-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px solid color-mix(in srgb, var(--cat-light) 14%, transparent); }
.keep-list a { color: inherit; }
.keep-list button, .keep-foot button { min-height: 44px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--cat-light) 32%, transparent); border-radius: var(--r);
  background: none; color: inherit; font: inherit; cursor: pointer; }
.keep-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.keep-foot .v-wa { flex: 1 1 auto; }

/* ------------------------------------------------------------------ the products: whole slabs, counted choices, a page at a time */
details.filters > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--ink); list-style: none; }
details.filters > summary::-webkit-details-marker { display: none; }
details.filters > summary::after { content: ''; width: 7px; height: 7px; margin: -4px 4px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
details.filters[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
details.filters > summary .num { min-width: 1.6em; padding: 0 6px; border-radius: var(--r); background: var(--s-fill); color: var(--on-s); text-align: center; }
.chip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r); }
.chip .num { opacity: .72; font-size: .88em; }
.prods.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 22px; }
.prod-t b { font-size: 1.1rem; }
.prod-t .spec { font-size: .95rem; }
.prod-t small { font-weight: 400; color: var(--mut); }
.count { margin-bottom: 18px; font-size: .95rem; }
.more-btn { display: flex; width: fit-content; margin: 40px auto 0; color: var(--ink); }
@media (max-width: 900px) {
  .prods.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .prod-t b { font-size: 1rem; } .prod-t .spec { font-size: .85rem; }
  details.filters > summary { width: fit-content; padding: 0 16px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--sf); }   /* a control to tap, not a title */
  details.filters[open] > summary { margin-bottom: 6px; }
}

/* ------------------------------------------------------------------ the inner pages' headings, about and contact
   The heading band is the vitrine's velvet under the same warm light, the brass line dropping into the title; the company's
   words and its ways to reach it follow on its own ground, and the visit closes the page. */
.head-band { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 0; }
.head-band::before { content: ""; position: absolute; z-index: -1; inset: -20% -5% auto; height: 120%; pointer-events: none;
  background: radial-gradient(42% 60% at 70% 0%, rgb(255 240 214 / .12), transparent 72%); }
html[dir="ltr"] .head-band::before { background: radial-gradient(42% 60% at 30% 0%, rgb(255 240 214 / .12), transparent 72%); }
.head-band ::selection { background: var(--s-fill); color: var(--on-s); }
.head-band :focus-visible { outline: 2px solid var(--s-text); outline-offset: 3px; }
.head-band .page-head h1 { letter-spacing: 0; line-height: 1.15; }
.head-band .page-head h1::before { content: ""; display: block; width: 1px; height: clamp(32px, 3.6vw, 48px); margin-bottom: 20px; background: var(--s); }
.head-band .page-head p { font-size: 1.1rem; }
.head-band .w-acts { margin-top: 22px; }
.head-band .w-btn:not(.w-btn-p) { color: var(--cat-light); }
.about-page .w-about-in { align-items: start; }
.about-page .w-about-t { gap: 18px; }
.about-page .w-about-t p { color: var(--ink); }
.contact-card { gap: 6px; padding: 20px 22px; background: none; border-color: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 1px; }
.contact-card small { font-size: .95rem; color: var(--p-text); font-weight: 600; }
.contact-card a, .contact-card span { font-size: 1.1rem; }
.contact-more { padding-bottom: clamp(48px, 6vw, 88px); }
.hours th, .hours td { padding: 11px 0; font-size: 1rem; }
@media (max-width: 900px) { .head-band .w-acts .w-btn { flex: 1 1 100%; } }
.head-band + details.filters { margin-top: 22px; }