/* Keramikos ABC concept 2. The home page opens on one stage, "Kur klosite plyteles?" (v31): a real surface, its size
   in giant figures, the picks with both prices and what to check there; then the 3D tiles, the sample wall and the
   way to the showroom. Real supplier photos, prices per m² and per pack, throughout. */
:root {
  --caramel: #C4956A;
  --caramel-deep: #B5845C;
  --caramel-pale: #F5EDE5;
  --ink: #1E1B18;
  --ink-2: #6B6560;
  --paper: #FAFAF7;
  --linen: #F3F0EB;
  --white: #FFFFFF;
  --espresso: #2D2926;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --surface: var(--white);
  --surface-2: var(--linen);
  --line: rgba(30, 27, 24, 0.14);
  --line-strong: rgba(30, 27, 24, 0.32);
  --grout: #DDD4C7;
  --stage-3d: #F1ECE5;
  --dim: rgba(30, 27, 24, 0.55);
  --field: var(--caramel);
  --on-field: var(--ink);
  --field-line: rgba(30, 27, 24, 0.5);
  --frame: var(--espresso);
  --on-frame: #F4EFE8;
  --on-frame-2: #D2C8BC;
  --frame-line: rgba(244, 239, 232, 0.16);
  --btn: var(--ink);
  --on-btn: var(--paper);
  --mark: var(--caramel);
  --open: #2E7D4F;
  --open-on-field: #1E5E3A;
  --err: #B3261E;
  --buy: var(--caramel);
  --on-buy: #1E1B18;
  --buy-hover: #D3A57B;
  --shadow: 30, 27, 24;
  --focus: var(--ink);
  --ring-on-btn: var(--caramel); --ring-on-buy: var(--ink);
  --veil: rgba(221, 212, 199, 0.86); --open-on-frame: #7FD9A3;
  --map-ink: 30, 27, 24; --map-accent: #8C6239; --map-on-accent: #FFFFFF; --map-door: #FFFFFF;
  --room-band: var(--espresso); --on-room-band: #F4EFE8;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.45rem, 1.1rem + 1.1vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem);
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --top-h: 69px;
  --bar-h: 66px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161311; --fg: #F3EEE7; --fg-2: #C2B8AC; --surface: #201C19; --surface-2: #1B1815;
    --line: rgba(243, 238, 231, 0.14); --line-strong: rgba(243, 238, 231, 0.34); --grout: #3A332D; --stage-3d: #2A2521; --dim: rgba(243, 238, 231, 0.55);
    --field: #3A2D22; --on-field: #F6EFE6; --field-line: rgba(246, 239, 230, 0.55);
    --frame: #241F1B; --on-frame: #F4EFE8; --on-frame-2: #CFC5B9; --frame-line: rgba(244, 239, 232, 0.14);
    --btn: var(--caramel); --on-btn: #1E1B18; --mark: var(--caramel); --open: #6FCF97; --open-on-field: #7FD9A3; --shadow: 0, 0, 0; --focus: #F3EEE7; --ring-on-btn: #F3EEE7; --ring-on-buy: var(--caramel);
    --err: #FF8A80; --buy: #F3EEE7; --on-buy: #1E1B18; --buy-hover: #FFFFFF;
    --veil: rgba(22, 19, 17, 0.84); --map-ink: 244, 239, 232; --map-accent: #C4956A; --map-on-accent: #1E1B18; --map-door: #F4EFE8; --room-band: #F4EFE8; --on-room-band: #1E1B18;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161311; --fg: #F3EEE7; --fg-2: #C2B8AC; --surface: #201C19; --surface-2: #1B1815;
  --line: rgba(243, 238, 231, 0.14); --line-strong: rgba(243, 238, 231, 0.34); --grout: #3A332D; --stage-3d: #2A2521; --dim: rgba(243, 238, 231, 0.55);
  --field: #3A2D22; --on-field: #F6EFE6; --field-line: rgba(246, 239, 230, 0.55);
  --frame: #241F1B; --on-frame: #F4EFE8; --on-frame-2: #CFC5B9; --frame-line: rgba(244, 239, 232, 0.14);
  --btn: var(--caramel); --on-btn: #1E1B18; --mark: var(--caramel); --open: #6FCF97; --open-on-field: #7FD9A3; --shadow: 0, 0, 0; --focus: #F3EEE7; --ring-on-btn: #F3EEE7; --ring-on-buy: var(--caramel);
  --err: #FF8A80; --buy: #F3EEE7; --on-buy: #1E1B18; --buy-hover: #FFFFFF;
  --veil: rgba(22, 19, 17, 0.84); --map-ink: 244, 239, 232; --map-accent: #C4956A; --map-on-accent: #1E1B18; --map-door: #F4EFE8; --room-band: #F4EFE8; --on-room-band: #1E1B18;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--caramel); color: #1E1B18; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--mark); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.icon { font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; width: 1em; overflow: hidden; 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; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px;
  border-radius: var(--radius); border: 1.5px solid transparent; font: 600 0.9375rem/1.2 var(--font-ui);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--btn); color: var(--on-btn); }
.btn--solid:hover { background: color-mix(in srgb, var(--btn) 86%, var(--caramel)); }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.btn--line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn .num { font-weight: 500; opacity: 0.92; }
.btn--gold { background: var(--caramel); color: #1E1B18; }
.btn--gold:hover { background: #D3A67C; }
.btn--ghost { border-color: rgba(246, 239, 230, 0.6); color: #F6EFE6; background: transparent; }
.btn--ghost:hover { background: rgba(246, 239, 230, 0.1); }

/* Header */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: block; width: 168px; flex: none; }
.logo img { width: 100%; height: auto; }
.logo .logo--light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .logo--dark { display: none; } :root:not([data-theme="light"]) .logo .logo--light { display: block; } }
:root[data-theme="dark"] .logo .logo--dark { display: none; }
:root[data-theme="dark"] .logo .logo--light { display: block; }
.top[data-over="true"] .logo .logo--dark { display: none; }
.top[data-over="true"] .logo .logo--light { display: block; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; border-radius: var(--radius); }
.nav a:hover { background: var(--surface-2); }
.top__call { font-size: 0.9375rem; min-height: 44px; padding: 10px 16px; }
.top {
  --hdr: 0; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.top[data-over="true"] {
  background: rgba(16, 12, 9, calc(var(--hdr) * 0.78)); border-bottom-color: rgba(246, 239, 230, calc(0.1 + var(--hdr) * 0.06));
  -webkit-backdrop-filter: blur(calc(var(--hdr) * 18px)); backdrop-filter: blur(calc(var(--hdr) * 18px));
  color: #F6EFE6; --focus: #F6EFE6;
}
.top[data-over="true"] .nav a:hover { background: rgba(246, 239, 230, 0.1); }
.top[data-over="true"] .top__call { background: transparent; color: #F6EFE6; border-color: rgba(246, 239, 230, 0.55); }
.top[data-over="true"] .top__call:hover { background: rgba(246, 239, 230, 0.1); }
.top[data-over="true"] .menu-btn { color: #F6EFE6; border-color: rgba(246, 239, 230, 0.5); }
.menu-btn { display: none; margin-left: auto; min-height: 44px; min-width: 44px; padding: 10px 12px; background: transparent; color: var(--fg); border: 1.5px solid var(--line-strong); border-radius: var(--radius); font: 600 0.9375rem var(--font-ui); align-items: center; gap: 8px; cursor: pointer; }
.drawer { display: none; color: var(--fg); }
.top__tools { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: -12px; }
.search-btn, .cart-btn, .picks-btn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  background: transparent; color: inherit; border: 0; border-radius: var(--radius); cursor: pointer;
}
.search-btn .icon, .cart-btn .icon, .picks-btn .icon { font-size: 22px; }
.search-btn:hover, .search-btn[aria-expanded="true"], .cart-btn:hover, .picks-btn:hover { background: var(--surface-2); }
.top[data-over="true"] .search-btn:hover, .top[data-over="true"] .cart-btn:hover, .top[data-over="true"] .picks-btn:hover { background: rgba(246, 239, 230, 0.1); }
/* the cart's count: packs in the cart (and the list's: surfaces to see in the showroom) */
.cart-btn__n, .picks-btn__n {
  position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--caramel); color: #1E1B18; font: 700 0.6875rem/19px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center;
}
.search { color: var(--fg); background: var(--bg); border-top: 1px solid var(--line); }
.search[hidden] { display: none; }
.search__form { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.search__icon { font-size: 24px; color: var(--fg-2); }
.search__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 2px; border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--fg); font: 500 1.125rem var(--font-ui); -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: var(--fg-2); opacity: 1; }
.search__input:focus { outline: none; border-bottom-color: var(--caramel); }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__go { min-height: 44px; padding: 10px 18px; }
.search__close { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--fg); border-radius: var(--radius); cursor: pointer; }
.search__close:hover { background: var(--surface-2); }
/* live suggestions under the search field */
.sq { display: grid; gap: 12px; padding-bottom: 18px; max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.sq[hidden] { display: none; }
.sq__fix, .sq__msg { margin: 0; font-size: 0.9375rem; color: var(--fg-2); }
.sq__fix a { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--caramel); text-underline-offset: 3px; }
.sq__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: var(--fg-2); }
.sq__cats .chip { min-height: 34px; padding: 6px 12px; text-decoration: none; }
@media (pointer: coarse) { .sq__cats .chip { min-height: 44px; } }
@media (min-width: 1024px) { .sq__list, .sq__fix, .sq__cats, .sq__msg { max-width: 52rem; } }
.sq__n, .sq-cats__n { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sq__item, .sq__all { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.sq__item img, .sq__ph { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sq__t { display: grid; gap: 2px; min-width: 0; }
.sq__t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq__t span { font-size: 0.875rem; color: var(--fg-2); }
.sq__p { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sq__p s { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--fg-2); }
.sq__all { grid-template-columns: 1fr auto; font-weight: 600; padding-block: 12px; }
.sq__all .icon { font-size: 20px; }
.sq [role="option"][aria-selected="true"], .sq__item:hover, .sq__all:hover { background: var(--surface-2); }
.sq [role="option"][aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--focus); }
.sq[aria-busy="true"] .sq__list { opacity: 0.45; transition: opacity 0.15s 0.15s; }
.sq-fix { margin: 4px 0 0; color: var(--fg-2); }
.sq-fix a { color: var(--fg); font-weight: 600; }
.sq-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--fg-2); font-size: 0.9375rem; }
.sq-cats .chip { text-decoration: none; }
@media (max-width: 640px) {
  .sq__item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 6px 4px; }
  .sq__item img, .sq__ph { width: 48px; height: 48px; }
  .sq__t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.9375rem; }
  .sq__t span { font-size: 0.8125rem; }
  .sq__p { font-size: 0.875rem; }
  .sq__p s { font-size: 0.75rem; }
}
@media (max-width: 1023px) {
  .nav, .top__call { display: none; }
  .top__in { gap: 8px; }
  .menu-btn { display: inline-flex; margin-left: 0; }
  .top__tools { margin-left: auto; }
  .search__go { display: none; }
  .drawer:not([hidden]) { display: block; border-top: 1px solid var(--line); background: var(--bg); }
  .drawer nav { display: grid; padding-block: 8px 16px; }
  .drawer a { padding: 14px 0; font-weight: 600; font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--line); }
  .logo { width: 150px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .top__in { gap: 18px; }
  .nav a { padding-inline: 9px; }
  .top__call { padding-inline: 14px; }
}
/* small phones: the menu button keeps its name for screen readers, shows only its icon */
@media (max-width: 389px) {
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .menu-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Shared bits: live status, segmented buttons, the 3D stage (product page) */
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: none; }
.status[data-open="true"] .status__dot { background: var(--open); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--open) 22%, transparent); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius); border: 1.5px solid currentColor; background: transparent; color: inherit;
  font: 600 0.875rem var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
}
.stage { position: relative; aspect-ratio: 24 / 9; min-width: 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage:active { cursor: grabbing; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage svg.dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dims line { stroke: var(--field-line); stroke-width: 1.25; }
.dims text { fill: var(--on-field); font: 600 13px var(--font-ui); font-variant-numeric: tabular-nums; }
.dims .bg { fill: var(--field); }
.stage__fallback { position: absolute; inset: 12% 8%; display: grid; place-items: center; }
.stage__fallback img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; box-shadow: 0 18px 40px -18px rgba(var(--shadow), 0.55); transform: perspective(900px) rotateX(38deg) rotateZ(-6deg); }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section__head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section h2 { font: 600 var(--step-3)/1.08 var(--font-display); letter-spacing: -0.015em; }
.section--linen { background: var(--surface-2); }
.lede { font-size: var(--step-1); color: var(--fg-2); max-width: 52ch; }

/* Product board: the 3D tiles by default, each tile's surface ("Tekstūra") on request */
.board__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.board__head .section__head { margin-bottom: 0; }
.seg--plain button { border-color: var(--line-strong); color: var(--fg); }
.seg--plain button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.board-wrap { position: relative; }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.board b, .board s { white-space: nowrap; }
.board__item { display: grid; gap: 3px; align-content: start; min-width: 0; }
.board__link { display: grid; gap: 12px; text-decoration: none; margin-bottom: 2px; }
.board__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--stage-3d); border-radius: 2px; }
/* catalogue thumbnails: "3D" shows the 3D tile, built from its exact size, thickness and finish, and hovering (or
   keyboard focus) shows the supplier's photo; "Tekstūra" shows the photo filling the card, and hovering shows the 3D tile.
   One picture at a time. */
.board__3d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.board__tile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
.board-wrap[data-view="texture"] .board__tile { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .board-wrap[data-view="3d"] .board__link:hover .board__tile { opacity: 1; }
  .board-wrap[data-view="texture"] .board__link:hover .board__tile { opacity: 0; }
}
.board-wrap[data-view="3d"] .board__link:focus-visible .board__tile { opacity: 1; }
.board-wrap[data-view="texture"] .board__link:focus-visible .board__tile { opacity: 0; }
.hover-only { display: none; }
@media (hover: hover) and (pointer: fine) { .hover-only { display: inline; } }
.board__name { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.board__link:hover .board__name { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.board__meta { font-size: 0.875rem; color: var(--fg-2); }
.board__price { font-size: 0.9375rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.board__pack { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.board__pack b { color: var(--fg); font-weight: 600; }
.board s { color: var(--fg-2); font-size: 0.8125rem; margin-left: 2px; }
/* a picture card's focus ring sits on the picture's edge, as in the catalogue */
.board__link:focus-visible { outline: none; }
.board__link:focus-visible .board__media { outline: 2px solid var(--focus); outline-offset: 0; }
.board__note { margin-top: 18px; font-size: 0.875rem; color: var(--fg-2); }
.board__note[hidden] { display: none; }
@media (max-width: 760px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
}

/* Visit */
.hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.hours li[data-today="true"] { font-weight: 700; }
.hours li[data-today="true"] span:first-child::after { content: " (šiandien)"; font-weight: 500; color: var(--fg-2); }
.delivery { margin-top: 22px; font-size: 0.9375rem; color: var(--fg-2); }

/* Footer */
.foot { padding-block: 56px 120px; border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot h2 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__brand p { margin-top: 14px; color: var(--fg-2); max-width: 36ch; }
.foot__legal { margin-top: 40px; font-size: 0.875rem; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__legal button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--mark); cursor: pointer; }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* Mobile action bar */
.bar { display: none; }
@media (max-width: 1023px) {
  .bar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg); border-top: 1px solid var(--line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px;
  }
  .bar a { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius); text-decoration: none; font-size: 0.8125rem; font-weight: 700; }
  .bar a.call { background: var(--btn); color: var(--on-btn); }
  .bar .icon { font-size: 22px; }
}

/* Product view */
.crumbs { font-size: 0.875rem; color: var(--fg-2); padding-block: 18px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { text-decoration: none; }
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); padding-block: 20px clamp(48px, 7vw, 96px); align-items: start; }
.pdp__media { display: grid; gap: clamp(40px, 4.5vw, 64px); min-width: 0; }
/* price, calculator and buttons stay beside the photos and the 3D view as the page scrolls; a panel taller
   than the screen sticks by its foot instead, so its buttons never leave the screen */
.panel { display: grid; gap: 22px; position: sticky; top: var(--panel-top, 88px); }

/* photos first: the face as the supplier photographed it, all of its faces, then the supplier's interiors */
.gal { display: grid; gap: 10px; min-width: 0; }
.gal__main { display: block; width: 100%; aspect-ratio: var(--gal-ar, 2); padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--stage-3d); cursor: zoom-in; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
.gal__main img { width: 100%; height: 100%; object-fit: contain; }
.gal__main[data-kind="viz"] img { object-fit: cover; }
/* ---------- the lupa on the product photo (v35; Ernest, 10 October 2026: "Include lupa in product page?") ----------
   The lens from the ideas page with its liquid glass (v37; Ernest: "Wheres liquid glass effect?"): the outer rim bends
   and catches the light, the centre is an unfiltered layer showing the supplier's photo at its own pixels.
   It may hang over the photo's edges on a computer; on phones and tablets, where the photo runs edge to edge, the
   screen's sides cut it (no sideways scroll). */
.gal__stage { position: relative; min-width: 0; }
.gal__main { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.gal__main img { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) { .gal__stage.has-lens .gal__main { cursor: none; } }
.lens { position: absolute; left: 0; top: 0; z-index: 3; width: var(--d, 180px); height: var(--d, 180px); border-radius: 50%; pointer-events: none; will-change: translate;
  opacity: 0; scale: 0.82; transition: opacity 0.16s ease, scale 0.22s cubic-bezier(.2, .9, .3, 1.15);
  box-shadow: 0 16px 30px -8px rgba(var(--shadow), 0.5), 0 3px 8px rgba(var(--shadow), 0.22); }
.lens.is-on { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .lens { transition: none; } }
.lens__glass { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
/* the glass's rim: the same photo through the bending filter, shown only in the outer ring (where the filter bends
   anything at all), so the centre never passes through a filter */
.lens__ring { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; filter: url(#pdpLensFilter);
  -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 80%); mask: radial-gradient(closest-side, transparent 77%, #000 80%); }
.lens__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lens__copy { position: absolute; inset: 0; background-color: var(--stage-3d); background-repeat: no-repeat; }
.lens__rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(var(--shadow), 0.18); }
.lens__mag { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 0.75rem; font-weight: 600; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gal .gal__bar { flex-wrap: wrap; row-gap: 0; }
.gal__hint { flex: 1 0 100%; order: 3; margin-top: -6px; padding-bottom: 2px; font-size: var(--step--1); color: var(--fg-2); }
@media (forced-colors: active) { .lens__rim { box-shadow: none; border: 2px solid CanvasText; } .lens__mag { border: 1px solid CanvasText; } }
@media (max-width: 1023px) {
  .gal__stage { margin-inline: calc(var(--gutter) * -1); overflow-x: clip; }
  .gal__stage .gal__main { width: 100%; margin-inline: 0; }
}
.gal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.gal__cap { font-size: 0.9375rem; color: var(--fg-2); }
.gal__cap b { color: var(--fg); font-weight: 600; }
.gal__zoom { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--fg); font: 600 0.9375rem var(--font-ui); cursor: pointer; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
.gal__zoom:hover { text-decoration-thickness: 2.5px; }
.gal__zoom .icon { font-size: 18px; }
.gal__thumbs { display: grid; gap: 8px; }
.gal__set { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: start; gap: 8px; }
.gal__k { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); line-height: 42px; }
.gal__row { display: flex; flex-wrap: wrap; gap: 8px; }
.gal__t { height: 42px; aspect-ratio: var(--t-ar, 2); padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: var(--grout); cursor: pointer; flex: none; }
.gal__t img { width: 100%; height: 100%; object-fit: cover; }
.gal__t:hover { border-color: var(--line-strong); }
.gal__t[aria-pressed="true"] { border-color: var(--fg); }

/* 3D: the tile at its exact size, or a floor (wall) laid with it */
.v3d { display: grid; gap: 12px; min-width: 0; }
.v3d__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.v3d__head h2 { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.v3d__stage { position: relative; background: var(--stage-3d); color: var(--fg); border-radius: 2px; }
.v3d .stage { aspect-ratio: 16 / 11; }
.v3d .stage:focus-visible { outline-offset: -3px; }
.v3d .stage svg.dims { overflow: hidden; }
.v3d__stage .dims line { stroke: var(--dim); }
.v3d__stage .dims text { fill: var(--fg); }
.v3d__stage .dims .bg { fill: var(--stage-3d); }
.v3d__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3d__tools > button, .step button {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); cursor: pointer;
}
.v3d__tools > button:hover, .step button:hover { border-color: var(--fg); }
.v3d__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 44px; }
.v3d__note { font-size: 0.875rem; color: var(--fg-2); max-width: 54ch; flex: 1 1 18rem; }
.step { display: inline-flex; align-items: center; gap: 6px; }
.step__k { min-width: 7.2em; text-align: center; font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.panel h1 { font: 600 var(--step-3)/1.06 var(--font-display); letter-spacing: -0.015em; }
.panel__sub { margin-top: 8px; color: var(--fg-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price__now { font: 700 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--font-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price__unit { font-size: 1.125rem; font-weight: 600; }
.price__was { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.price__tag { font-size: 0.875rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: var(--caramel-pale); color: #1E1B18; }
.prices { display: grid; gap: 12px; }
.pack { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 12px 14px; border: 1.5px solid var(--fg); border-radius: 3px; font-variant-numeric: tabular-nums; }
.pack__k { font-weight: 600; }
.pack__v b { font-size: 1.25rem; }
.pack__v s { color: var(--fg-2); margin-left: 6px; }
.calc { border: 0; margin: 0; padding: 20px; background: var(--surface-2); border-radius: 3px; display: grid; gap: 14px; min-width: 0; }
.calc legend { font: 600 1.25rem/1.2 var(--font-display); padding: 0; float: left; width: 100%; }
.calc .seg button { border-color: var(--line-strong); color: var(--fg); }
.calc .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--waste { grid-column: 1 / -1; }
.calc__pcs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc__pcs label { font-weight: 600; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field input, .field select {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--fg); font: 600 1rem var(--font-ui); font-variant-numeric: tabular-nums;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.field input[aria-invalid="true"]:focus-visible, .field textarea[aria-invalid="true"]:focus-visible { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
@media (forced-colors: active) { .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .qty:has(input:focus-visible) { outline: 2px solid CanvasText; } }
.result { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.result__main { font: 700 1.6rem/1.15 var(--font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.result[data-empty="true"] .result__main { font-size: 1.25rem; }
.result[data-empty="true"] .result__sub { font-weight: 500; color: var(--fg-2); }
.result__sub { font-weight: 600; font-variant-numeric: tabular-nums; }
.result__hint { font-size: 0.875rem; color: var(--fg-2); }
.panel__actions { display: grid; gap: 6px; }
.panel__actions .btn { justify-content: center; }
.panel__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.panel__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.panel__links .icon { font-size: 19px; }
@media (max-width: 1023px) {
  .pdp { grid-template-columns: 1fr; padding-top: 12px; }
  .panel { position: static; }
  /* phones and tablets: the photo runs edge to edge, the thumbnails scroll sideways */
  .gal__main { width: auto; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .gal__thumbs { display: flex; gap: 20px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gal__thumbs::-webkit-scrollbar { display: none; }
  .gal__set { display: flex; align-items: center; gap: 8px; flex: none; }
  .gal__k { line-height: 1.2; margin-right: 2px; }
  .gal__row { flex-wrap: nowrap; }
  .gal__t { height: 42px; }
  .v3d { margin-block: 8px; }
  .v3d .stage { aspect-ratio: 4 / 3; }
}

/* the full-size photo viewer */
html:has(dialog.lb[open]) { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0F0C0A; color: #F4EFE8; overflow: hidden; }
.lb::backdrop { background: #0F0C0A; }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px max(20px, env(safe-area-inset-left, 0px)); }
.lb__cap { font-size: 0.9375rem; color: #D2C8BC; font-variant-numeric: tabular-nums; }
.lb__acts { display: flex; gap: 8px; }
.lb__btn { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(244, 239, 232, 0.2); background: rgba(30, 26, 23, 0.78); color: #F4EFE8; cursor: pointer; flex: none; }
.lb__btn:hover { background: rgba(58, 52, 47, 0.9); }
.lb__btn[aria-pressed="true"] { background: #F4EFE8; color: #1E1B18; }
.lb__btn:focus-visible { outline-color: #F4EFE8; }
.lb__btn .icon { font-size: 26px; }
.lb__stage { position: relative; overflow: hidden; display: grid; place-items: center; padding: 0 80px 28px; touch-action: pan-y pinch-zoom; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.lb__stage.is-zoomed { touch-action: none; }
.lb__stage.is-zoomed img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; cursor: zoom-out; }
.lb__nav { position: absolute; top: 50%; translate: 0 -24px; }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }
@media (max-width: 760px) {
  .lb__stage { padding: 0 0 84px; }
  .lb__nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: none; }
  .lb__nav--prev { left: calc(50% - 64px); }
  .lb__nav--next { right: calc(50% - 64px); }
}

.floor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 980px; }
.floor img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.floor canvas { display: block; grid-column: 1 / -1; }
.floor.is-drawn img { display: none; }
.floor-cap { margin-top: 14px; color: var(--fg-2); max-width: 62ch; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.specs h3 { font: 600 1.25rem/1.2 var(--font-display); padding-bottom: 10px; border-bottom: 1.5px solid var(--fg); }
.specs dl { margin: 0; display: grid; }
.specs dl > div { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.specs dt { font-size: 0.875rem; color: var(--fg-2); font-weight: 600; }
.specs dd { margin: 0; font-weight: 600; }
.specs dd small { display: block; font-weight: 400; color: var(--fg-2); font-size: 0.875rem; margin-top: 2px; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } .floor { grid-template-columns: 1fr 1fr; } }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related a { display: grid; gap: 10px; text-decoration: none; }
.related .cat-card__media img { box-shadow: none; }
.related strong { font-size: 1rem; }
.related span { color: var(--fg-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .related { grid-template-columns: 1fr; } }

/* the concept's placeholders: example data, and facts the shop still has to confirm */
.demo {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border: 1px dashed var(--line-strong); border-radius: 3px;
  color: var(--fg-2); font: 600 0.75rem/1.2 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle;
}

/* Certificates: each product picks them from the shop's own list (name, code, issuer, PDF); a tag opens its details */
.certs { display: grid; gap: 10px; margin-top: 14px; }
.certs__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cert {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 11px 3px 8px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--fg);
  font: 600 0.8125rem/1.2 var(--font-ui); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cert .icon { font-size: 17px; color: var(--caramel-deep); }
.cert:hover { border-color: var(--fg); }
.cert[aria-expanded="true"] { border-color: var(--fg); background: var(--surface-2); }
.cert-info { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 3px; background: var(--surface-2); font-size: 0.9375rem; }
.cert-info .cert-info__h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); }
.cert-info__h .icon { color: var(--caramel-deep); }
.cert-info dl { margin: 0; display: grid; gap: 4px; }
.cert-info dl > div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 12px; }
.cert-info dt { color: var(--fg-2); font-size: 0.875rem; font-weight: 600; }
.cert-info dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cert-info p { color: var(--fg-2); max-width: 62ch; }
.cert-info__pdf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; justify-self: start; }
.cert-info__pdf.is-off { color: var(--fg-2); }

/* buy: the calculator's answer goes straight into the cart */
.buy__btn { width: 100%; justify-content: center; min-height: 52px; background: var(--buy); color: var(--on-buy); font-size: 1rem; flex-wrap: wrap; row-gap: 2px; }
.buy__btn:hover { background: var(--buy-hover); }
.buy__btn .icon { font-size: 21px; }
.buy__n { padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--on-buy) 35%, transparent); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .buy__btn { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 10px; row-gap: 0; padding-block: 8px; }
  .buy__btn .icon { grid-row: 1 / span 2; }
  .buy__n { padding-left: 0; border-left: 0; font-size: 0.875rem; }
}
.buy { display: grid; gap: 8px; }
.buy__note { font-size: 0.875rem; color: var(--fg-2); text-align: center; text-wrap: balance; }
.buy__note .icon { font-size: 18px; vertical-align: -4px; margin-right: 2px; }
.fly { position: fixed; z-index: 100; object-fit: cover; border-radius: 2px; pointer-events: none; box-shadow: 0 10px 22px -8px rgba(var(--shadow), 0.6); }

/* Cart: a sheet from the right (full width on phones) */
html:has(dialog.cart[open]) { overflow: hidden; }
.cart {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--fg); overflow: hidden;
  box-shadow: -18px 0 44px -26px rgba(var(--shadow), 0.55);
}
.cart[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cart::backdrop { background: rgba(16, 12, 9, 0.46); }
@media (prefers-reduced-motion: no-preference) {
  .cart[open] { animation: sheet-in 0.46s cubic-bezier(.16, 1, .3, 1); }
  .cart[open]::backdrop { animation: fade-in 0.3s ease-out; }
}
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--line); }
.cart__head h2 { font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.cart__head h2:focus { outline: none; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.cart__body { overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; display: grid; gap: 20px; align-content: start; }
.cart__foot { display: grid; gap: 12px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.cart__foot .btn { justify-content: center; }
.cart__help { padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--fg-2); }
.cart__help a { color: var(--fg); font-weight: 600; }
.cart__empty { display: grid; gap: 10px; justify-items: start; padding-top: 8px; }
.cart__empty-t { font: 600 1.25rem/1.3 var(--font-display); }
.cart__empty p { color: var(--fg-2); }
.cart__empty .btn { margin-top: 8px; }
@media (max-width: 480px) {
  .cart__head { padding-left: 16px; } .cart__body { padding-inline: 16px; gap: 16px; } .cart__foot { padding-inline: 16px; gap: 10px; }
  .cart .stack .stack__stage { --stk-h: 150px; }
  .lines .line { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; }
  .lines .line__img { width: 64px; height: 32px; }
}

/* the order as it arrives: its tiles stacked flat, at their real size and thickness, a real face on top */
.stack { display: grid; gap: 8px; }
.stack__stage { background: var(--stage-3d); border-radius: 2px; overflow: hidden; }
.stack__stage { --stk-h: 230px; }
.stack__stage svg { display: block; width: 100%; height: auto; max-height: var(--stk-h); }
.cart .stack__stage { --stk-h: 190px; }
.stack__cap { font-size: 0.875rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; }
.line__img { width: 84px; height: 42px; object-fit: cover; border-radius: 2px; background: var(--grout); }
.line__name { font-weight: 700; line-height: 1.3; }
.line__sub, .line__meta { font-size: 0.875rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.line__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 8px; }
.line__price { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.3; }
.line__price b { font-size: 1.0625rem; }
.line__price s { display: block; font-size: 0.8125rem; color: var(--fg-2); }
.line__x { margin: -10px -10px 0 0; color: var(--fg-2); }
.line__x:hover { color: var(--fg); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.qty button { width: 44px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--fg); cursor: pointer; }
.qty button:hover { background: var(--surface-2); }
.qty button:disabled { color: var(--line-strong); cursor: default; background: none; }
.qty input { width: 3ch; min-width: 2.6rem; height: 42px; padding: 0; border: 0; background: none; color: var(--fg); text-align: center; font: 700 1rem var(--font-ui); font-variant-numeric: tabular-nums; }
.qty input:focus-visible { outline: none; }
.qty:has(input:focus-visible) { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* will it be enough: the cart compares what is bought with the room typed into the calculator */
.cover { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.cover h3 { font: 700 1.0625rem/1.3 var(--font-ui); }
.cover__need { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.cover__need b { color: var(--fg); font-weight: 600; }
.cover__bar { position: relative; height: 16px; margin-top: 6px; border-radius: 2px; background: var(--line); }
.cover__have { position: absolute; inset: 0 auto 0 0; display: flex; gap: 2px; }
.cover__have i { flex: 1; min-width: 1px; background: var(--fg); border-radius: 1px; }
.cover__have.is-solid { background: var(--fg); border-radius: 2px; }
.cover__short { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--caramel-deep) 0 2px, transparent 2px 6px); }
.cover__mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--caramel-deep); }
.cover__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cover__legend span { display: inline-flex; align-items: center; gap: 7px; }
.cover__legend i { width: 12px; height: 12px; border-radius: 2px; background: var(--fg); }
.cover__legend i.k-need { width: 3px; height: 14px; background: var(--caramel-deep); }
.cover__res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; }
.cover__res .icon { color: var(--open); }
.cover__add {
  min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--fg); border-radius: var(--radius); background: transparent; color: var(--fg);
  font: 600 0.875rem var(--font-ui); cursor: pointer;
}
.cover__add:hover { background: var(--fg); color: var(--bg); }

/* free delivery from 500 € */
.ship { display: grid; gap: 8px; font-size: 0.9375rem; }
.ship p { display: flex; align-items: center; gap: 8px; }
.ship b { font-variant-numeric: tabular-nums; }
.ship__track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ship__track span { display: block; height: 100%; background: var(--fg); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 0.5s cubic-bezier(.16, 1, .3, 1); }
.ship[data-free="true"] .icon { color: var(--open); }
.ship[data-free="true"] .ship__track span { background: var(--open); }

.tot { margin: 0; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.tot > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tot dt { color: var(--fg-2); }
.tot dd { margin: 0; font-weight: 600; text-align: right; }
.tot dd small { font-size: 0.875rem; font-weight: 500; color: var(--fg-2); }
.tot__sum { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line-strong); }
.cart .tot__sum { padding-top: 0; margin-top: 0; border-top: 0; }
.tot__sum dt { color: var(--fg); font-weight: 700; display: grid; }
.tot__sum dd { font: 700 1.375rem/1.2 var(--font-ui); letter-spacing: -0.01em; display: grid; justify-items: end; }
.tot__sum small { font: 600 0.875rem/1.4 var(--font-ui); letter-spacing: 0; color: var(--fg-2); }
.tot__sum dt small { color: var(--open-on-field); }

/* Checkout: three short steps beside the order */
.co { padding-block: 12px clamp(56px, 8vw, 104px); }
.co__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.co__back:hover { text-decoration: underline; }
.co__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin: 6px 0 clamp(22px, 3vw, 36px); }
.co__head h1 { font: 600 var(--step-3)/1.06 var(--font-display); letter-spacing: -0.015em; }
.co__head h1:focus { outline: none; }
.co__concept { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--fg-2); font-size: 0.9375rem; }
.co__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.co__sum { position: sticky; top: 88px; display: grid; }
.co-sum__toggle { display: none; }
.co-sum__body { display: grid; gap: 18px; padding: 22px 24px 24px; border-radius: 3px; background: var(--surface-2); }
.co-sum__h { font: 600 1.375rem/1.2 var(--font-display); }
.co-sum__body .stack__stage { background: color-mix(in srgb, var(--stage-3d) 55%, var(--bg)); }
.co-sum__edit { justify-self: start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--fg); font: 600 0.9375rem var(--font-ui); cursor: pointer; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
.co-sum__edit:hover { text-decoration-thickness: 2.5px; }
.lines--sum .line { grid-template-columns: 84px minmax(0, 1fr) auto; }
.line__price--side { margin: 0; }

.co-step { border-top: 1.5px solid var(--fg); scroll-margin-top: calc(var(--top-h) + 16px); }
.co-step:last-of-type { border-bottom: 1px solid var(--line); }
.co-step__h { font: inherit; }
.co-step__toggle {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 18px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.co-step__toggle:disabled { cursor: default; color: var(--fg-2); }
.co-step[data-state="open"] .co-step__toggle { cursor: default; }
.co-step__n { grid-row: 1; align-self: center; width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 700 0.9375rem var(--font-ui); }
.co-step__n .icon { display: none; font-size: 20px; }
.co-step[data-state="done"] .co-step__n { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.co-step[data-state="done"] .co-step__k { display: none; }
.co-step[data-state="done"] .co-step__n .icon { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .co-step[data-state="done"] .co-step__n .icon { animation: pop 0.4s cubic-bezier(.16, 1, .3, 1); } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
.co-step__t { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.co-step__sum { grid-column: 2; font-size: 0.9375rem; color: var(--fg-2); overflow-wrap: anywhere; }
.co-step__sum:empty { display: none; }
.co-step__edit { display: none; grid-column: 3; grid-row: 1; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
.co-step[data-state="done"] .co-step__edit { display: block; }
.co-step__b { display: grid; gap: 18px; padding: 2px 0 30px; }
.co-step__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.co-step__go .btn { min-width: 11rem; justify-content: center; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.co-fields .field--wide { grid-column: 1 / -1; }
.field__opt { color: var(--fg-2); font-weight: 500; }
.field textarea {
  width: 100%; min-height: 84px; padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--fg); font: 500 1rem/1.5 var(--font-ui); resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-2); opacity: 1; font-weight: 500; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.field__err { color: var(--err); font-size: 0.875rem; font-weight: 600; }
.field__fix { font-size: 0.875rem; color: var(--fg-2); }
.field__fix button { padding: 0; border: 0; background: none; color: var(--fg); font: 600 0.875rem var(--font-ui); cursor: pointer; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fg); cursor: pointer; }
.check .field__err { grid-column: 2; }
.check a[aria-disabled="true"] { text-decoration-style: dotted; cursor: default; }
.co-opts { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.co-opts--one { grid-template-columns: 1fr; }
.co-opt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-content: start; padding: 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.co-opt:hover { border-color: var(--fg); }
.co-opt:has(input:checked) { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.co-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.co-opt__i { grid-row: 1 / span 3; font-size: 24px; margin-top: 1px; }
.co-opt__t { font-weight: 700; }
.co-opt__d { font-size: 0.875rem; color: var(--fg-2); }
.co-opt__p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-weight: 600; font-size: 0.9375rem; }
.co-opt::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface);
}
.co-opt:has(input:checked)::after { border-color: var(--fg); background: radial-gradient(circle, var(--fg) 0 4.5px, var(--surface) 5px); }
.co-pickup { display: grid; gap: 6px; padding: 16px; border-radius: 3px; background: var(--surface-2); }
.co-pickup .status { margin-top: 4px; }
.co-pickup__h { font-size: 0.9375rem; color: var(--fg-2); }
.co-submit { min-height: 54px; font-size: 1rem; }
.co-submit .num { padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--on-btn) 35%, transparent); font-weight: 600; opacity: 1; }
.co-submit__n { font-size: 0.875rem; color: var(--fg-2); }
.co-empty { display: grid; gap: 14px; justify-items: start; padding-block: 8px 40px; }
.co-empty p { font: 600 1.375rem/1.3 var(--font-display); }

/* placed: the one moment of the checkout */
.co-done { display: grid; gap: 18px; justify-items: start; padding-top: 6px; }
.co-done:focus { outline: none; }
.co-done h2 { font: 600 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; }
.co-done h2:focus { outline: none; }
.co-done__check { width: 64px; height: 64px; }
.co-done__check circle { fill: none; stroke: var(--open); stroke-width: 2.5; }
.co-done__check path { fill: none; stroke: var(--open); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .co-done__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.7s cubic-bezier(.65, 0, .35, 1) forwards; }
  .co-done__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.4s 0.55s cubic-bezier(.65, 0, .35, 1) forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.co-done__lede { max-width: 56ch; color: var(--fg-2); }
.co-done__lede strong { color: var(--fg); }
.co-done__dl { margin: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--line); }
.co-done__dl > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-done__dl dt { color: var(--fg-2); font-weight: 600; font-size: 0.9375rem; }
.co-done__dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.co-done__next { display: grid; gap: 8px; width: 100%; }
.co-done__next h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 1.25rem/1.3 var(--font-display); }
.co-done__next ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.co-done__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.co-note { font-size: 0.875rem; color: var(--fg-2); }
.co-note a { color: var(--fg); }
.co-ship-note { display: grid; gap: 4px; padding: 14px 16px; border-radius: 3px; background: var(--surface-2); font-size: 0.9375rem; color: var(--fg-2); }
.field__hint { font-size: 0.875rem; color: var(--fg-2); }
/* a button that reads as a link: opens the terms summary without leaving the page */
.linkish {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px;
}
.linkish:hover { text-decoration-thickness: 2.5px; }
.foot .linkish { text-decoration: none; text-align: left; }
.foot .linkish:hover { text-decoration: underline; }

/* withdrawal: "Atsisakyti pirkimo sutarties", a form, a check, a receipt with date and time */
.wd__body { display: grid; gap: 22px; max-width: 46rem; }
.wd__form { display: grid; gap: 18px; }
.wd__lede { color: var(--fg-2); max-width: 60ch; }
.wd__group { display: grid; gap: 8px; }
.wd__k { font-size: 0.875rem; font-weight: 600; }
.wd__check { display: grid; gap: 18px; justify-items: start; }
.wd__check h2 { font: 600 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; }
.wd__check h2:focus { outline: none; }

/* the terms summary opens as a sheet, like the cart */
.sheet__body { gap: 16px; }
.sheet__lede { color: var(--fg-2); }
.sheet__list { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.sheet__list li::marker { color: var(--caramel-deep); }
.sheet__foot { padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--fg-2); }

body[data-view="checkout"] .bar, body[data-view="withdraw"] .bar { display: none; }
@media (max-width: 1023px) {
  .co__grid { grid-template-columns: 1fr; }
  .co__sum { position: static; order: -1; }
  /* phones: the order folds into one line above the form */
  .co-sum__toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-radius: 3px;
    background: var(--surface-2); color: var(--fg); font: 600 0.9375rem var(--font-ui); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
  }
  .co-sum__toggle b { margin-left: auto; font-weight: 700; }
  .co-sum__chev { transition: transform 0.25s ease; }
  .co__sum[data-open="true"] .co-sum__toggle { border-radius: 3px 3px 0 0; }
  .co__sum[data-open="true"] .co-sum__chev { transform: rotate(180deg); }
  .co__sum[data-open="false"] .co-sum__body { display: none; }
  .co-sum__body { border-radius: 0 0 3px 3px; padding-top: 6px; }
  .co-sum__h { display: none; }
}
@media (max-width: 560px) {
  .co-fields, .co-opts { grid-template-columns: 1fr; }
  .co-done__dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Category page (v20): Vonios plytelės ---------- */
.cat-head { padding-block: clamp(14px, 2.4vw, 26px) clamp(22px, 3.4vw, 40px); display: grid; gap: 12px; }
.cat-head__title { font: 600 var(--step-4)/1.02 var(--font-display); letter-spacing: -0.02em; }
.cat-head__lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 46ch; margin: 0; }
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; padding-bottom: clamp(48px, 7vw, 96px); }
@media (min-width: 1024px) { .cat-layout { grid-template-columns: 236px minmax(0, 1fr); } }

/* filters */
.cat-filters { display: none; }
@media (min-width: 1024px) {
  /* no scroll of its own: it moves with the page and holds at the window's top or foot (js/page-catalog.js) */
  .cat-filters { display: block; position: sticky; top: calc(var(--top-h) + 20px); align-self: start; padding-bottom: 8px; }
}
.cat-form { display: grid; gap: 26px; }
.cat-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 4px; }
.cat-group legend { font-weight: 700; font-size: 0.9375rem; padding: 0; margin-bottom: 8px; }
.cat-common { display: grid; gap: 4px; font-size: 0.9375rem; }
.cat-common p { margin: 0; }
.cat-common p + p { color: var(--fg-2); }
.cat-common__k { font-weight: 700; }
.cat-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 0; font-size: 0.9375rem; cursor: pointer; border-radius: 4px; }
.cat-opt input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 3px; display: grid; place-content: center; flex: none; background: var(--surface); transition: background 0.15s ease, border-color 0.15s ease; }
.cat-opt input::before { content: ""; width: 10px; height: 6px; border: solid var(--on-btn); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.15s ease; }
.cat-opt input:checked { background: var(--btn); border-color: var(--btn); }
.cat-opt input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.cat-opt__n { margin-left: auto; color: var(--fg-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.cat-opt[data-zero="true"] { color: var(--fg-2); cursor: default; }
.cat-opt[data-zero="true"] input { opacity: 0.45; }
.cat-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(30, 27, 24, 0.22); }
.cat-more-opts { justify-self: start; margin-top: 2px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; cursor: pointer; }

/* results bar */
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cat-count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: auto; }
.cat-filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.cat-filter-btn__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--btn); color: var(--on-btn); font-size: 0.75rem; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .cat-filter-btn { display: none; } }
.cat-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--fg-2); }
.cat-sort select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--fg); cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6560' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
@media (max-width: 560px) {
  .cat-bar { gap: 10px; }
  .cat-count { order: 3; flex: 1 1 auto; font-size: 0.9375rem; }
  .cat-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cat-sort { flex: 1 1 auto; } .cat-sort select { width: 100%; }
}

/* active filters */
.cat-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; }
.cat-active[hidden] { display: none; }
/* an active filter is shown inverted, one state only (reference: Nike filter chips) */
.cat-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px 0 14px; border: 0; border-radius: 18px; background: var(--btn); color: var(--on-btn); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.cat-chip .icon { font-size: 16px; opacity: 0.8; }
.cat-chip:hover .icon { opacity: 1; }
.cat-clear { border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; cursor: pointer; }

/* grid and cards: one card system with the home board */
.cat-grid { list-style: none; margin: 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; } }
.cat-item { display: grid; gap: 3px; align-content: start; min-width: 0; }
.cat-item b, .cat-item s { white-space: nowrap; }
.cat-card { display: grid; gap: 12px; text-decoration: none; margin-bottom: 2px; }
/* the card shows the 3D tile on the studio ground, the photo on hover (the home board's thumbnails; reference: Nike
   and Airbnb listing grids for the flat, chrome-free card). One image holds both: 3D left, photo right */
.cat-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--stage-3d); border-radius: 2px; }
.cat-card__media img { position: absolute; top: 0; left: 0; width: 200%; height: 100%; max-width: none; }
.cat-card__media .cat-card__3d { transition: opacity 0.3s ease; }
.cat-card__media .cat-card__photo { left: -100%; opacity: 0; transition: opacity 0.3s ease; }
/* the two pictures swap: one shows at a time */
@media (hover: hover) and (pointer: fine) { .cat-card:hover .cat-card__photo { opacity: 1; } .cat-card:hover .cat-card__3d { opacity: 0; } }
.cat-card:focus-visible .cat-card__photo { opacity: 1; }
.cat-card:focus-visible .cat-card__3d { opacity: 0; }
.cat-card__name { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.cat-card:hover .cat-card__name { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cat-card:focus-visible { outline: none; }
.cat-card:focus-visible .cat-card__media { outline: 2px solid var(--focus); outline-offset: 0; }
.cat-card__meta { font-size: 0.875rem; color: var(--fg-2); }
.cat-card__price { font-size: 0.9375rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.cat-card__pack { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.cat-card__pack b { color: var(--fg); font-weight: 600; }
.cat-item s { color: var(--fg-2); font-size: 0.8125rem; margin-left: 2px; }
@media (max-width: 420px) { .cat-card__name { font-size: 0.875rem; } .cat-card__meta, .cat-card__pack { font-size: 0.8125rem; } }

/* "Tekstūra": the photo half of the image, scaled so that the face alone covers the card (--fw and --fh: the face's share
   of its square; 1 % more, so no edge of the face shows); hovering shows the 3D tile */
.cat-grid[data-view="texture"] .cat-card__media .cat-card__photo { --k: calc(1.01 / min(var(--fw), var(--fh))); width: calc(200% * var(--k)); height: calc(100% * var(--k)); left: calc(50% - 150% * var(--k)); top: calc(50% - 50% * var(--k)); opacity: 1; }
.cat-grid[data-view="texture"] .cat-card__media .cat-card__3d { opacity: 0; }
/* while the cards turn over (page-catalog.js), each card shows the side it is on, whatever the grid's view */
.cat-grid .cat-card { perspective: 1100px; }
.cat-grid.is-flipping .cat-card__media img, .cat-grid.is-flipping .mz-media > span { transition: none; }
.cat-grid.is-flipping .cat-item[data-face="3d"] .cat-card__media .cat-card__3d { opacity: 1; }
.cat-grid.is-flipping .cat-item[data-face="3d"] .cat-card__media .cat-card__photo { width: 200%; height: 100%; left: -100%; top: 0; opacity: 0; }
.cat-grid.is-flipping .cat-item[data-face="texture"] .cat-card__media .cat-card__photo { --k: calc(1.01 / min(var(--fw), var(--fh))); width: calc(200% * var(--k)); height: calc(100% * var(--k)); left: calc(50% - 150% * var(--k)); top: calc(50% - 50% * var(--k)); opacity: 1; }
.cat-grid.is-flipping .cat-item[data-face="texture"] .cat-card__media .cat-card__3d { opacity: 0; }
.cat-grid.is-flipping .cat-item[data-face="3d"] .mz-media .mz-sheet, .cat-grid.is-flipping .cat-item[data-face="texture"] .mz-media .mz-tex { opacity: 1; }
.cat-grid.is-flipping .cat-item[data-face="3d"] .mz-media .mz-tex, .cat-grid.is-flipping .cat-item[data-face="texture"] .mz-media .mz-sheet { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .cat-grid[data-view="texture"] .cat-card:hover .cat-card__photo { opacity: 0; }
  .cat-grid[data-view="texture"] .cat-card:hover .cat-card__3d { opacity: 1; }
}
.cat-grid[data-view="texture"] .cat-card:focus-visible .cat-card__photo { opacity: 0; }
.cat-grid[data-view="texture"] .cat-card:focus-visible .cat-card__3d { opacity: 1; }
.cat-note { margin: 18px 0 0; font-size: 0.875rem; color: var(--fg-2); }
.cat-note[hidden] { display: none; }
/* mosaic cards (v28): the whole sheet on white, the cleaned supplier photo; "Tekstūra" shows the close-up from inside the
   sheet; hover (or keyboard focus) swaps them, one picture at a time. Both come from one sprite of 24 mosaics (8 x 6 cells:
   rows 1 to 3 the sheets, rows 4 to 6 the close-ups). */
.mz-media { background: #fff; }
.mz-media > span { position: absolute; inset: 0; background-size: 800% 600%; background-repeat: no-repeat; transition: opacity 0.3s ease; }
.mz-media .mz-tex, .cat-grid[data-view="texture"] .mz-media .mz-sheet { opacity: 0; }
.cat-grid[data-view="texture"] .mz-media .mz-tex { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cat-grid[data-view="3d"] .cat-card:hover .mz-tex, .cat-grid[data-view="texture"] .cat-card:hover .mz-sheet { opacity: 1; }
  .cat-grid[data-view="3d"] .cat-card:hover .mz-sheet, .cat-grid[data-view="texture"] .cat-card:hover .mz-tex { opacity: 0; }
}
.cat-grid[data-view="3d"] .cat-card:focus-visible .mz-tex, .cat-grid[data-view="texture"] .cat-card:focus-visible .mz-sheet { opacity: 1; }
.cat-grid[data-view="3d"] .cat-card:focus-visible .mz-sheet, .cat-grid[data-view="texture"] .cat-card:focus-visible .mz-tex { opacity: 0; }

/* empty state and paging */
.cat-empty { padding: 48px 0 8px; display: grid; gap: 14px; justify-items: start; }
.cat-empty[hidden] { display: none; }
.cat-empty p { margin: 0; font-size: var(--step-1); }
.cat-more { display: grid; justify-items: center; gap: 12px; padding-top: 44px; }
.cat-more[hidden] { display: none; }
.cat-more p { margin: 0; font-size: 0.875rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.cat-more__bar { width: min(240px, 60%); height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; }
.cat-more__bar span { display: block; height: 100%; background: var(--fg); transform-origin: left; transition: transform 0.4s cubic-bezier(.16, 1, .3, 1); }

/* mobile filter sheet */
.cat-sheet { width: 100%; max-width: 560px; max-height: min(88vh, 760px); margin: auto auto 0; padding: 0; border: 0; border-radius: 14px 14px 0 0; background: var(--bg); color: var(--fg); box-shadow: 0 -12px 40px rgba(var(--shadow), 0.25); }
.cat-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cat-sheet::backdrop { background: rgba(22, 19, 17, 0.5); }
.cat-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.cat-sheet__head h2 { font: 700 1.25rem/1.2 var(--font-ui); }
.cat-sheet__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fg); border-radius: 22px; cursor: pointer; }
.cat-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 24px; }
.cat-sheet .cat-opt { min-height: 44px; }
.cat-sheet__foot { display: flex; gap: 12px; align-items: center; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.cat-sheet__foot .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .cat-sheet[open] { animation: cat-sheet-in 0.32s cubic-bezier(.16, 1, .3, 1); }
  @keyframes cat-sheet-in { from { transform: translateY(24px); opacity: 0.4; } }
}

/* advice and showroom */
.cat-advice { background: var(--surface-2); }
.cat-advice h2 { font: 600 var(--step-3)/1.08 var(--font-display); letter-spacing: -0.015em; max-width: 22ch; }
.cat-facts { margin: clamp(24px, 3.5vw, 40px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.cat-facts > div { border-top: 1px solid var(--line-strong); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.cat-facts dt { font-size: 0.875rem; color: var(--fg-2); }
.cat-facts dd { margin: 0; line-height: 1.55; max-width: 38ch; }
.cat-facts dd b { display: block; font: 600 var(--step-2)/1.15 var(--font-display); font-variant-numeric: lining-nums; margin-bottom: 6px; }
.cat-advice__call { margin: clamp(24px, 3vw, 36px) 0 0; }
.cat-advice__call a { font-weight: 700; white-space: nowrap; }
@media (max-width: 860px) { .cat-facts { grid-template-columns: minmax(0, 1fr); } }
.cat-visit__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.cat-visit h2 { font: 600 var(--step-3)/1.08 var(--font-display); letter-spacing: -0.015em; }
.cat-visit p { margin: 12px 0 0; max-width: 46ch; }
.cat-visit__hours { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.cat-visit .actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* buying guide and questions (the page's search text): title left, a reading column right from 960 px */
.cat-guide__in { display: grid; gap: clamp(18px, 3vw, 28px) clamp(32px, 6vw, 96px); }
@media (min-width: 960px) {
  .cat-guide__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cat-guide__title { position: sticky; top: calc(var(--top-h) + 32px); align-self: start; }
}
.section h2.cat-guide__title { max-width: 14ch; margin: 0; }
.cat-guide__body { max-width: 64ch; }
.cat-guide__body h3 { font: 700 1.125rem/1.3 var(--font-ui); margin: 30px 0 8px; }
.cat-guide__body h3:first-child { margin-top: 0; }
.cat-guide__body p { margin: 0; line-height: 1.7; }
.cat-guide__body a { font-weight: 600; text-decoration-color: var(--mark); text-underline-offset: 3px; }
.cat-guide__body .cat-guide__more { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg-2); }
.cat-guide__more a { color: var(--fg); }
.section.cat-faq { padding-top: 0; }
.cat-faq__list { border-top: 1px solid var(--line-strong); max-width: 64ch; }
.cat-faq details { border-bottom: 1px solid var(--line); }
.cat-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; cursor: pointer; list-style: none; }
.cat-faq summary::-webkit-details-marker { display: none; }
.cat-faq summary .icon { flex: none; font-size: 22px; transition: transform 0.25s ease; }
.cat-faq details[open] summary .icon { transform: rotate(45deg); }
.cat-faq details p { margin: 0 0 20px; line-height: 1.7; max-width: 60ch; }
.cat-visit { background: var(--surface-2); }
/* Focus: one line, never a second outline around something that already has an edge (Ernest, 8 October 2026).
   Words get a ring around them; controls draw the ring on their own edge; filled controls get a ring in their own
   text colour inside the fill; option rows and cards ring the whole row or picture. */
button:focus-visible, select:focus-visible, .btn:focus-visible { outline-offset: -2px; }
/* filled controls: the ring hugs the fill, in a colour that stands out from the fill and from the page */
.btn--solid:focus-visible, .cat-chip:focus-visible { outline-color: var(--ring-on-btn); outline-offset: 0; }
.top[data-over="true"] .btn--solid:focus-visible { outline-color: #F6EFE6; outline-offset: -2px; }
.buy__btn:focus-visible { outline-color: var(--ring-on-buy); outline-offset: 0; }
.seg button[aria-pressed="true"]:focus-visible, .lb__btn[aria-pressed="true"]:focus-visible { outline-color: var(--mark); outline-offset: 0; }
.cat-clear:focus-visible, .cat-more-opts:focus-visible { outline-offset: 2px; }
.co-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--surface-2); }
.cat-opt input:focus-visible, .check input:focus-visible { outline: none; }
.cat-opt:has(input:focus-visible), .check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.cat-faq summary:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--focus); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (forced-colors: active) { .cat-faq summary:focus-visible { outline: 2px solid CanvasText; } }
@media (max-width: 560px) { .cat-bar .seg { order: 4; } .cat-bar .seg button { padding: 8px 12px; } }
.nav a[aria-current="page"] { background: var(--surface-2); }
.drawer a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ==========================================================================================================
   v30 (10 October 2026): the ideas from the "Keramikos ABC idėjos" prototype, merged into the site.
   The rooms (after React Bits' FlowingMenu), the sample wall with zoom, the "Pamatyti salone" list, the live
   opening status in the header, the way to the showroom, and the motion that explains a change (GSAP, Lenis).
   ========================================================================================================== */

/* Lenis smooths mouse-wheel scrolling (desktop only); dialogs and other scroll boxes keep their own */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
[tabindex="-1"]:focus { outline: none; }
.touch-only { display: inline; }
@media (hover: hover) and (pointer: fine) { .touch-only { display: none; } }

/* ---------- header: the live opening status and the "Pamatyti salone" list ---------- */
.nav, .top__tools, .top__call, .menu-btn { flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); opacity: 0.6; flex: none; }
[data-open="true"] > .dot, [data-open="true"] .dot { background: var(--open); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--open) 22%, transparent); }
.hstatus {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: border-color 0.2s ease;
}
.hstatus:hover { border-color: var(--line-strong); }
.hstatus:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.hstatus__short { display: none; }
.top[data-over="true"] .hstatus { border-color: rgba(246, 239, 230, 0.32); }
.top[data-over="true"] .hstatus:hover { border-color: rgba(246, 239, 230, 0.62); }
.top[data-over="true"] .hstatus .dot { background: rgba(246, 239, 230, 0.75); }
.top[data-over="true"] .hstatus[data-open="true"] .dot { background: var(--open-on-frame); opacity: 1; box-shadow: 0 0 0 3px rgba(127, 217, 163, 0.25); }
.top[data-over="true"] .hstatus:focus-visible { border-color: #F6EFE6; box-shadow: inset 0 0 0 1px #F6EFE6; }
/* the list is the cart's twin (the same button and badge rules): an icon with its count; below 1024 px it shows
   once something is in it */
.picks-btn[data-n="0"] .picks-btn__n { display: none; }
@media (max-width: 1023px) { .picks-btn[data-n="0"] { display: none; } }
/* a count that changes rolls to its new number (after React Bits' Counter) */
.cart-btn__n, .picks-btn__n, .picks-n { overflow: hidden; }
.roll { display: block; }
.roll--out { position: absolute; inset: 0; display: grid; place-items: center; }
/* The header keeps to one row at every width and with every status text (set by fitHeader): first the status
   shortens, then the menu folds into the menu button, then the status leaves the row for the menu, then the menu
   button keeps only its icon, then the logo and the buttons get a little smaller. */
.top.is-tight .hstatus__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top.is-tight .hstatus__short { display: inline; }
.top.is-tighter .nav { display: none; }
.top.is-tighter .menu-btn { display: inline-flex; margin-left: 0; }
.top.is-tighter .drawer:not([hidden]) { display: block; border-top: 1px solid var(--line); background: var(--bg); }
.top.is-tighter .drawer nav { display: grid; padding-block: 8px 16px; }
.top.is-tighter .drawer a { padding: 14px 0; font-weight: 600; font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.top.is-tighter .hstatus { margin-left: auto; }
.top.is-tightest .hstatus { display: none; }
.top.is-tightest .top__tools { margin-left: auto; }
.top.is-icons .menu-btn { width: 44px; padding: 0; justify-content: center; }
.top.is-icons .menu-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top.is-tiniest .top__in { gap: 4px; }
.top.is-tiniest .logo { width: 116px; }
.top.is-tiniest .search-btn, .top.is-tiniest .cart-btn, .top.is-tiniest .picks-btn, .top.is-tiniest .menu-btn { width: 40px; min-width: 40px; }
@media (min-width: 1200px) { .top__in { gap: 22px; } }
@media (max-width: 1023px) {
  .hstatus { margin-left: auto; }
  .hstatus + .top__tools { margin-left: 0; }
}
/* in the menu: whether the showroom is open now */
.drawer__salon { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.drawer__status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--fg-2); }

/* ---------- the segmented control: one look everywhere; its thumb travels to the new choice ----------
   (after React Bits' RubberSegment: a copy of the labels on the fill, clipped to the thumb, so the words it passes
   over turn light exactly under it) */
.seg--plain { position: relative; flex-wrap: nowrap; gap: 3px; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
.seg--plain button { min-height: 38px; padding: 9px 14px; border: 0; border-radius: 4px; color: var(--fg); line-height: 1; }
.seg--plain button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg--plain.has-thumb button[aria-pressed="true"] { background: none; color: var(--fg); }
.seg--plain button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg--plain button[aria-pressed="true"]:focus-visible { outline-color: var(--mark); outline-offset: 0; }
.seg__thumb { position: absolute; inset: 0; background: var(--fg); color: var(--bg); pointer-events: none; }
.seg__thumb > span { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; }

/* ---------- the sample wall ---------- */
.wallsec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; }
.wallsec__head .lede { margin-top: 12px; }
.wallsec__count { text-align: right; color: var(--fg-2); font-size: 0.9375rem; white-space: nowrap; }
.wallsec__count b { display: block; font: 400 var(--step-3)/1 var(--font-display); color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.wallsec__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(20px, 3vw, 32px); margin-bottom: 16px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatches__label { font-size: 0.875rem; color: var(--fg-2); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: 500 0.875rem/1 var(--font-ui); cursor: pointer; }
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.chip i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); flex: none; }
.wallsec__tools .seg--plain { order: 1; }
.wallsec__full { order: 2; margin-left: auto; min-height: 44px; padding: 10px 16px; }
.wallsec__tools .swatches { order: 3; flex-basis: 100%; }
.wallsec__full:focus-visible, .wallsec__list:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
/* in full screen the page's own list button is covered, so the wall's controls carry one */
.wallsec__list { display: none; }
.wall.is-full .wallsec__list { order: 2; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 8px 12px; }
.wall.is-full .wallsec__list + .wallsec__full { margin-left: 0; }
.picks-n { position: relative; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; transition: background-color 0.3s ease, color 0.3s ease; }
.wallsec__list[data-n]:not([data-n="0"]) .picks-n { background: var(--caramel); border-color: var(--caramel); color: #1E1B18; }
/* an empty list shows no number: the count appears with the first surface */
.wallsec__list[data-n="0"] .picks-n { display: none; }

.wall { position: relative; }
.wall__vp {
  position: relative; height: clamp(440px, 68vh, 760px); height: clamp(440px, 68svh, 760px); overflow: hidden; background: var(--grout);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.wall__vp:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.wall__vp.is-dragging { cursor: grabbing; }
.wall__layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
/* the first view: the squares wait on their bed until they are laid (motion only; see layWall) */
.wall__layer.is-laying .wc { opacity: 0; }
.wall__vp.is-entering .wall__layer { pointer-events: none; }
/* the wall in small, under the squares: all that shows when zoomed out, and the edges while a zoom runs */
.wall__map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.wall__bed { position: absolute; left: 0; top: 0; background: var(--grout); }
.wall.is-far .wall__vp { cursor: zoom-in; }
.wall.is-far .wall__vp.is-dragging { cursor: grabbing; }
.wall.is-far .wall__vp:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--focus); pointer-events: none; }
/* zoom: two round buttons in the wall's lower right corner (on touch screens only in full screen, where fingers pinch too) */
.wall__zoom { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.wall__zbtn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 0.12s ease;
}
.wall__zbtn .icon { font-size: 22px; }
.wall__zbtn:hover { border-color: var(--fg); }
.wall__zbtn:active { transform: scale(0.94); }
.wall__zbtn[aria-disabled="true"] { cursor: default; border-color: var(--line); transform: none; }
.wall__zbtn[aria-disabled="true"] .icon { opacity: 0.35; }
.wall__zbtn:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.wall.is-full .wall__zoom { right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (pointer: coarse) {
  .wall:not(.is-full) .wall__zoom { display: none; }
  .wall.is-full .wall__zoom { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .wall__zbtn { transition: none; } }
.wc {
  position: absolute; left: 0; top: 0; display: block; width: var(--s); height: var(--s); background-color: var(--h, #ccc);
  background-repeat: no-repeat; text-decoration: none; color: inherit; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(.2, .7, .2, 1), box-shadow 0.22s ease;
}
/* the veil over squares a filter leaves out; it fades only when the filter itself changes, never while the wall moves */
.wc::after { content: ""; position: absolute; inset: 0; background: var(--veil); opacity: 0; pointer-events: none; }
.wall__layer.is-fading .wc::after { transition: opacity 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .wall__layer.is-fading .wc::after { transition: none; } }
.wc.is-dim::after { opacity: 1; }
.wc.is-hl { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .wall__vp:not(.is-dragging) .wc:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px rgba(var(--shadow), 0.55); z-index: 3; }
}
.wc.is-cursor { box-shadow: 0 0 0 3px var(--focus); z-index: 4; }
.wc.is-picked::before { content: "check"; font-family: "Material Symbols Outlined"; font-size: 16px; line-height: 22px; text-align: center; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--caramel); color: #1E1B18; z-index: 1; font-feature-settings: "liga"; }
/* the showroom's own squares */
.wc--info { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; font-size: 0.75rem; line-height: 1.3; cursor: pointer; }
.wc--info b { font: 400 0.95rem/1.15 var(--font-display); }
.wc--status { background: var(--frame); color: var(--on-frame); }
.wc--status .dot { width: 9px; height: 9px; background: var(--on-frame-2); }
.wc--status[data-open="true"] .dot { background: var(--open-on-frame); box-shadow: 0 0 0 3px rgba(127, 217, 163, 0.25); }
.wc--call { background: var(--caramel); color: #1E1B18; }
.wc--route { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.wc--list { background: var(--fg); color: var(--bg); }
.wc--info .icon { font-size: 18px; }

.wtag {
  position: fixed; z-index: 65; pointer-events: none; max-width: 260px; padding: 8px 11px 9px; border-radius: 5px;
  background: var(--fg); color: var(--bg); font-size: 0.8125rem; line-height: 1.35; box-shadow: 0 8px 20px -6px rgba(var(--shadow), 0.45);
}
.wtag b { display: block; font-weight: 600; }
.wtag span { opacity: 0.86; }
.wallsec__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; color: var(--fg-2); font-size: var(--step--1); }

/* touch screens (Ernest, 10 October 2026): in the page the wall is only a view of itself, under a "Spustelėkite" button;
   swipes scroll the page past it, a tap opens it full screen, where a finger moves it every way */
.wall__open { display: none; }
@media (pointer: coarse) {
  .wall__open {
    position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; margin: 0; padding: 0; border: 0;
    background: rgba(20, 17, 15, 0.22); color: inherit; font: inherit; cursor: pointer; touch-action: pan-y;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  }
  .wall.is-full .wall__open { display: none; }
}
.wall__open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
.wall__open-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 18px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font: 600 1.0625rem/1 var(--font-ui); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease;
}
.wall__open:active .wall__open-pill { transform: scale(0.96); }
.wall__open-pill .icon { font-size: 26px; color: var(--caramel); transform-origin: 40% 30%; animation: tapHint 2.6s ease-in-out infinite; }
@keyframes tapHint { 0%, 62%, 100% { transform: translateY(0) scale(1); } 70% { transform: translateY(3px) scale(0.88); } 78% { transform: translateY(0) scale(1); } }
.wall__hint {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 6; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; margin: 0; white-space: nowrap;
  background: var(--fg); color: var(--bg); font: 600 0.9375rem/1 var(--font-ui); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
  pointer-events: none; transition: opacity 0.35s ease;
}
.wall__hint .icon { color: var(--caramel); }
.wall__hint-2 { margin-left: 8px; }
.wall__hint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wall__open-pill .icon { animation: none; } .wall__hint { transition: none; } }

/* full-screen wall: the same controls ride along at the top, the page underneath stays put */
.wall.is-full { position: fixed; inset: 0; z-index: 60; background: var(--grout); overscroll-behavior: contain; }
.wall.is-full .wall__vp { height: 100%; touch-action: none; }
.wall.is-full .wallsec__tools {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; max-width: none; margin: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); touch-action: pan-x; overscroll-behavior: contain;
}
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 400px) { .wall.is-full .seg--plain button, .wall.is-full .seg__thumb > span { padding-inline: 11px; } }
@media (max-width: 370px) { .wall.is-full .seg--plain button, .wall.is-full .seg__thumb > span { padding-inline: 8px; } }
.flytrail { position: fixed; z-index: 90; margin: 0; border-radius: 6px; background-color: var(--h, #ccc); background-repeat: no-repeat; pointer-events: none; box-shadow: 0 14px 28px -10px rgba(var(--shadow), 0.55); will-change: transform; }

/* the card of one surface, anchored to its square (a sheet on phones) */
.wfly {
  position: fixed; z-index: 70; width: min(380px, calc(100vw - 32px)); padding: 16px; border-radius: 10px;
  background: var(--surface); color: var(--fg); box-shadow: 0 22px 48px -12px rgba(var(--shadow), 0.5), 0 0 0 1px var(--line);
}
.wfly__x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); color: inherit; cursor: pointer; display: grid; place-items: center; }
.wfly__x:hover { background: color-mix(in srgb, var(--fg) 7%, var(--surface)); }
.wfly__media { display: grid; grid-template-columns: 200px; gap: 8px; margin-right: 36px; }
.wfly[data-kind="m"] .wfly__media { grid-template-columns: 1fr 1fr; margin-right: 0; margin-top: 34px; }
.wfly__img { display: block; aspect-ratio: 1; border-radius: 3px; background-color: var(--h, #ddd); background-repeat: no-repeat; }
.wfly__img--sheet { background-color: #FFFFFF; }
.wfly__caps { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; font-size: 0.75rem; color: var(--fg-2); }
.wfly[data-kind="m"] .wfly__caps { display: grid; }
.wfly__name { margin-top: 14px; font: 600 1.35rem/1.15 var(--font-display); }
.wfly__meta { margin-top: 4px; color: var(--fg-2); font-size: 0.9375rem; }
.wfly__price { margin-top: 8px; font-size: 1.05rem; }
.wfly__price b { font-weight: 700; font-variant-numeric: tabular-nums; }
.wfly__price s { color: var(--fg-2); margin-left: 6px; font-size: 0.875rem; }
.wfly__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wfly__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; padding: 10px 14px; }
.wfly__actions .btn--solid:focus-visible { outline: 2px solid var(--ring-on-btn); outline-offset: 0; }
.wfly__actions .btn--line:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
@media (max-width: 560px) {
  .wfly { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; border-radius: 14px 14px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .wfly:not([data-kind="m"]) .wfly__media { grid-template-columns: 120px; }
}

/* the "Pamatyti salone" list */
.picks { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 30px 60px -20px rgba(var(--shadow), 0.6); }
.picks::backdrop { background: rgba(20, 17, 15, 0.45); }
.picks__in { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.picks__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.picks__head h2 { font: 600 var(--step-2)/1.1 var(--font-display); }
.picks__lede { padding: 0 20px; color: var(--fg-2); font-size: 0.9375rem; }
.picks__list { list-style: none; margin: 14px 0 0; padding: 0 20px; overflow: auto; display: grid; gap: 10px; }
.picks__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.picks__item:first-child { border-top: 0; }
.picks__thumb { width: 64px; height: 64px; border-radius: 3px; background-repeat: no-repeat; }
.picks__item b { display: block; font-weight: 600; }
.picks__item span { color: var(--fg-2); font-size: 0.875rem; }
.picks__rm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.picks__rm:hover { border-color: var(--line-strong); }
.picks__rm:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.picks__empty { padding: 18px 20px 6px; color: var(--fg-2); }
.picks__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid var(--line); margin-top: 14px; }
.picks__foot .btn { flex: 1 1 auto; justify-content: center; }
.picks__foot .btn--line { color: var(--fg); }
.picks__foot .btn--line:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.picks__foot .btn--solid:focus-visible { outline: 2px solid var(--ring-on-btn); outline-offset: 0; }
.picks.is-big .picks__item b { font: 600 clamp(1.6rem, 6vw, 2.2rem)/1.1 var(--font-display); }
.picks.is-big .picks__thumb { width: 84px; height: 84px; }
.picks.is-big .picks__item { grid-template-columns: 84px minmax(0, 1fr) auto; }

.tray { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--fg); color: var(--bg); box-shadow: 0 16px 34px -12px rgba(var(--shadow), 0.6); font-size: 0.9375rem; }
.tray__thumbs { display: flex; }
.tray__thumbs i { width: 30px; height: 30px; border-radius: 3px; margin-left: -8px; box-shadow: 0 0 0 2px var(--fg); background-repeat: no-repeat; }
.tray__thumbs i:first-child { margin-left: 0; }
.tray .btn { min-height: 40px; padding: 8px 14px; background: var(--bg); color: var(--fg); }
.tray .btn:focus-visible { outline: 2px solid var(--caramel); outline-offset: 2px; }
@media (max-width: 1023px) { .tray { display: none !important; } }
body[data-view="checkout"] .tray, body[data-view="withdraw"] .tray { display: none !important; }

/* ---------- the way to the showroom: address, the way in, the map, the week ---------- */
.visit { background: var(--surface-2); }
.visit__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 901px) { .visit__copy { position: sticky; top: calc(var(--top-h) + 32px); } }
.section .visit__title { font: 600 var(--step-4)/1.02 var(--font-display); letter-spacing: -0.015em; }
.visit__addr { margin-top: 18px; font: 400 var(--step-2)/1.25 var(--font-display); }
.visit__how { margin-top: 10px; color: var(--fg-2); max-width: 46ch; }
.visit__status { margin-top: 22px; font-weight: 500; }
.pills { display: grid; gap: 12px; margin-top: 30px; }
.pill {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 2vw, 20px) clamp(20px, 3vw, 30px);
  border-radius: 999px; border: 1.5px solid var(--line-strong); text-decoration: none; color: var(--fg);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pill:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.pill__big { font: italic 400 clamp(2rem, 0.9rem + 2.9vw, 3.6rem)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.pill__sub { text-align: right; font-size: 0.9375rem; line-height: 1.35; opacity: 0.88; }
.pill__sub b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill--call { background: var(--caramel); border-color: var(--caramel); color: #1E1B18; }
.pill--call:hover { background: #D3A57B; border-color: #D3A57B; color: #1E1B18; }
.pill--call:focus-visible { border-color: var(--caramel); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }
.visit__lower { margin-top: clamp(32px, 4vw, 48px); }
.visit__h { font: 600 0.9375rem/1.3 var(--font-ui); margin-bottom: 12px; }
.vmap { margin: 0; min-width: 0; }
.vmap__frame { position: relative; border-radius: 10px; overflow: hidden; background: rgba(var(--map-ink), 0.035); box-shadow: inset 0 0 0 1px var(--line); }
.vmap svg { display: block; width: 100%; height: auto; }
.vmap figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 0.75rem; color: var(--fg-2); }
.m-park path { fill: rgba(var(--map-ink), 0.045); stroke: rgba(var(--map-ink), 0.09); stroke-width: 0.8; }
.m-bldg path { fill: rgba(var(--map-ink), 0.075); stroke: rgba(var(--map-ink), 0.15); stroke-width: 0.8; }
.m-foot path { stroke: rgba(var(--map-ink), 0.13); stroke-width: 0.8; stroke-dasharray: 2 3; }
.m-aisle path { stroke: rgba(var(--map-ink), 0.15); stroke-width: 1.6; stroke-linecap: round; }
.m-service path { stroke: rgba(var(--map-ink), 0.24); stroke-width: 2.6; stroke-linecap: round; }
.m-street path { stroke: rgba(var(--map-ink), 0.32); stroke-width: 4.5; stroke-linecap: round; }
.m-link path { stroke: rgba(var(--map-ink), 0.38); stroke-width: 5; stroke-linecap: round; }
.m-trunk path { stroke: rgba(var(--map-ink), 0.46); stroke-width: 8; stroke-linecap: butt; }
.m-big { fill: rgba(var(--map-ink), 0.14); stroke: rgba(var(--map-ink), 0.3); stroke-width: 1; }
.m-kam { fill: var(--caramel); stroke: var(--map-accent); stroke-width: 1.4; }
/* the way in (Ernest's picture, 10 October 2026): the car park between Kamanė and Ukmergės g., the passage from the
   north and the door at its end */
.m-ours { fill: rgba(196, 149, 106, 0.2); stroke: var(--map-accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.m-way { fill: none; stroke: var(--map-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 6; }
.m-way__head { fill: var(--map-accent); }
.m-door { fill: var(--map-door); stroke: var(--map-accent); stroke-width: 2.4; }
.m-l--door { font-size: 11.5px; font-weight: 600; fill: var(--fg); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.m-p rect { fill: var(--map-accent); }
.m-p text { font: 700 11px var(--font-ui); fill: var(--map-on-accent); }
.m-stop { fill: var(--surface-2); stroke: rgba(var(--map-ink), 0.85); stroke-width: 1.6; }
.m-l { fill: rgba(var(--map-ink), 0.88); font: 500 11px var(--font-ui); }
.m-l--big { font-size: 14px; font-weight: 600; fill: rgba(var(--map-ink), 0.72); letter-spacing: 0.04em; }
.m-l--street { font-size: 12px; font-weight: 600; fill: rgba(var(--map-ink), 0.8); letter-spacing: 0.02em; paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.m-l--stop { font-size: 10.5px; fill: rgba(var(--map-ink), 0.78); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.m-pin__lead { stroke: var(--map-accent); stroke-width: 1.4; fill: none; }
.m-scale path { fill: none; stroke: rgba(var(--map-ink), 0.75); stroke-width: 1.4; }
.m-scale text { fill: rgba(var(--map-ink), 0.8); font: 500 10.5px var(--font-ui); }
.m-pin__t1 { font: 600 15px var(--font-display); fill: var(--fg); paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px; }
.m-pin__t2 { font: 500 11px var(--font-ui); fill: var(--fg-2); paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px; }
.m-pulse { fill: none; stroke: var(--map-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-open="true"] .m-pulse { animation: pulse 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes pulse { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { [data-open="true"] .m-pulse { animation: none; } }
@media (max-width: 900px) { .visit__top { grid-template-columns: 1fr; } }
.visit__more { margin-top: 10px; font-size: 0.9375rem; font-weight: 600; }
/* ---------- the showroom page, /salonas/ (v38; the site map's "Salonas ir kontaktai", where /contact-us/ redirects) ----------
   Linen first, because the map is drawn for linen; then paper (hours, the list, contacts, buying), then linen (the
   form). The map is the home page's own: it moves here while this page is open. */
.salon { padding-top: 0; background: var(--surface-2); }
.salon__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(22px, 3.4vw, 44px); }
.salon__title { font: 600 var(--step-4)/1.02 var(--font-display); letter-spacing: -0.015em; }
.salon__lede { margin-top: 16px; font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 44ch; }
.salon .visit__addr { margin-top: 26px; }
.salon .salon__h { font: 600 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; margin-top: clamp(36px, 4vw, 52px); }
@media (min-width: 901px) { .salon__map { position: sticky; top: calc(var(--top-h) + 32px); } }
@media (max-width: 900px) { .salon__grid { grid-template-columns: 1fr; } }
/* "Kaip mus rasti": each line carries the map's own mark for it, so the list is the map's key */
.legend { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.legend__k { width: 22px; height: 22px; }
.lk-kam { fill: var(--caramel); stroke: var(--map-accent); stroke-width: 1.4; }
.lk-p { fill: var(--map-accent); }
.lk-p__t { font: 700 11px var(--font-ui); fill: var(--map-on-accent); }
.lk-door { fill: var(--map-door); stroke: var(--map-accent); stroke-width: 2.4; }
.lk-stop { fill: var(--surface-2); stroke: rgba(var(--map-ink), 0.85); stroke-width: 1.6; }
/* hovering a line lights its part of the map; the rest steps back */
.vmap :is(.m-kam, .m-ours, .m-p, .m-door, .m-way, .m-way__head, .m-stop, .m-l--stop, .m-l--door, .m-pin__lead, .m-pin__t1, .m-pin__t2, .m-l--big, .m-big, .m-pulse) { transition: opacity 0.2s ease; }
.vmap[data-focus] :is(.m-kam, .m-ours, .m-p, .m-door, .m-way, .m-way__head, .m-stop, .m-l--stop, .m-l--door, .m-pin__lead, .m-pin__t1, .m-pin__t2, .m-l--big, .m-big, .m-pulse) { opacity: 0.22; }
.vmap[data-focus="salonas"] :is(.m-kam, .m-pin__lead, .m-pin__t1, .m-pin__t2, .m-l--big, .m-big),
.vmap[data-focus="aikstele"] :is(.m-ours, .m-p),
.vmap[data-focus="ieejimas"] :is(.m-door, .m-way, .m-way__head, .m-l--door, .m-pulse),
.vmap[data-focus="stoteles"] :is(.m-stop, .m-l--stop) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vmap :is(.m-kam, .m-ours, .m-p, .m-door, .m-way, .m-way__head, .m-stop, .m-l--stop, .m-l--door, .m-pin__lead, .m-pin__t1, .m-pin__t2, .m-l--big, .m-big, .m-pulse) { transition: none; } }
/* paper: hours and the list on the left, contacts and buying on the right */
.salon-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); align-items: start; }
.salon-more h2, .salon-form h2 { font: 600 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; }
.salon-more h2 { margin-bottom: 16px; }
.salon-more__block + .salon-more__block { margin-top: clamp(40px, 5vw, 64px); }
.salon-more p { max-width: 50ch; }
.salon-more p + p { margin-top: 12px; }
.contacts { margin: 0; border-top: 1px solid var(--line); }
.contacts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.contacts dt { color: var(--fg-2); }
.contacts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.contacts a { text-decoration: none; }
.contacts a:hover { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.22em; }
.salon-list .btn { margin-top: 18px; }
/* linen: the form */
.salon-form { background: var(--surface-2); }
.salon-form__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.salon-form__lede { margin-top: 12px; color: var(--fg-2); max-width: 32ch; }
.salon-form__form { display: grid; gap: 18px; max-width: 620px; }
.salon-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.salon-form__privacy { font-size: 0.875rem; color: var(--fg-2); }
.salon-form__form .btn { justify-self: start; }
.salon-form__done { max-width: 620px; outline: none; }
.salon-form__ok { font: 600 var(--step-2)/1.2 var(--font-display); margin-bottom: 14px; }
@media (max-width: 760px) { .salon-more__grid, .salon-form__grid, .salon-form__row { grid-template-columns: 1fr; } }
/* one filled action per screen: here it is "Skambinti", so the header's phone button is an outline, as on the home page */
body[data-view="showroom"] .top__call { background: transparent; color: var(--fg); border-color: var(--line-strong); }
body[data-view="showroom"] .top__call:hover { border-color: var(--fg); background: transparent; }
body[data-view="showroom"] .top__call:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
/* the narrowest phones (under 360 px): the call and route pills keep inside the screen */
@media (max-width: 359px) { .pill { padding-inline: 16px; gap: 10px; } .pill__big { font-size: 1.75rem; } }

/* phones */
@media (max-width: 760px) {
  .wallsec__head { grid-template-columns: 1fr; }
  .wallsec__count { text-align: left; }
  .wallsec__count b { display: inline; font-size: var(--step-2); margin-right: 4px; }
  .wall__vp { height: clamp(320px, 58vh, 520px); height: clamp(320px, 58svh, 520px); }
  .wallsec__full { margin-left: auto; order: 2; min-height: 44px; min-width: 44px; padding: 8px 10px; }
  /* phones: the list is an icon with its count as a badge, so the choices, the list and closing share one row */
  .wall.is-full .wallsec__tools { column-gap: 8px; }
  .wall.is-full .wallsec__list { order: 2; position: relative; width: 44px; padding: 0; justify-content: center; }
  .wall.is-full .wallsec__list .picks-n { position: absolute; top: -7px; right: -7px; }
  .wallsec__full-t { display: none; }
  .wallsec__tools .seg--plain { order: 1; }
  .swatches { order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .swatches::-webkit-scrollbar { display: none; }
  .swatches__label { display: none; }
  .chip { flex: none; }
  .pill__sub { font-size: 0.875rem; }
}

/* ==========================================================================================================
   v31 (10 October 2026): the home page opens on one stage, "Kur klosite plyteles?" (Ernest: "current frontpage is
   ok"), then the 3D tiles, the sample wall and the way to the showroom, each on its own band. Every class of the
   stage carries its own prefix (hs-), so nothing of it touches the rest of the site.
   ========================================================================================================== */

/* ---------- the stage: a choice of room or mosaic changes the surface, its size, the picks with both prices and
   what to check there, in place ---------- */
.hs { position: relative; container-type: inline-size; }
.hs__h1 { font: 600 0.9375rem/1.3 var(--font-ui); letter-spacing: 0.005em; color: var(--fg-2); }
/* the tabs: one bordered strip, the choice on an ink thumb that stretches toward it and settles (the site's segmented
   control); the words under the thumb turn light as it passes */
.hs-tabs { position: relative; display: inline-flex; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: 9px; }
.hs-tab {
  position: relative; min-height: 40px; padding: 8px 14px; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg);
  font: 600 0.9375rem/1 var(--font-ui); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hs-tab:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.hs-tab:active { transform: scale(0.97); }
.hs-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.hs-tab[aria-selected="true"]:focus-visible { outline-color: var(--mark); outline-offset: 0; }
.hs-tabs__thumb { position: absolute; inset: 0; pointer-events: none; background: var(--fg); color: var(--bg); border-radius: 9px; }
.hs-tabs__thumb span { position: absolute; display: grid; place-items: center; font: 600 0.9375rem/1 var(--font-ui); white-space: nowrap; }

.hs-title { font: 600 clamp(2.6rem, 1.2rem + 3.2vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -0.018em; font-variant-numeric: lining-nums; }
.hs-meta { margin-top: 10px; max-width: 44ch; font-size: 1.0625rem; line-height: 1.5; color: var(--fg-2); }
/* the surface's size: light figures (as the v30 hero), each a reel */
.hs-fig {
  --fig-base: clamp(4.6rem, 22vw, 7.4rem); --k: 1;
  margin: 0; font: 300 calc(var(--fig-base) * var(--k))/1 var(--font-ui); letter-spacing: -0.045em; white-space: nowrap; color: var(--fg);
  font-variant-numeric: lining-nums tabular-nums; font-kerning: none;
}
.hs-fig i, .hs-fig .hs-x { font-style: normal; font-weight: 200; color: var(--fg-2); }
.hs-fig__v { display: inline-flex; margin-left: -0.05em; vertical-align: top; }
.hs-reel { position: relative; display: inline-block; height: 1em; overflow: hidden; overflow: clip; flex: none; }
.hs-reel__s { display: block; }
.hs-reel__s > span { display: block; height: 1em; text-align: center; }
.hs-reel__s > .hs-x { font-weight: 200; color: var(--fg-2); }
.hs-slot-num { display: inline-flex; }
.hs-slot-num .hs-reel { height: 1.25em; }
.hs-slot-num .hs-reel__s > span { height: 1.25em; line-height: 1.25em; }

/* the caption (v32, Ernest: the stage should not look like a product page): the surface's name, its facts and its
   price per m² (or per sheet), on one quiet line; no pack price, no list button, no spec table up here */
.hs-lb { margin: 0; min-height: 3em; }   /* two lines kept, so a longer name never moves the size or the chips */
.hs-cap { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--fg-2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.hs-cap__name { font-weight: 600; color: var(--fg); text-decoration: none; }
.hs-cap__name:hover { text-decoration: underline; text-decoration-color: var(--caramel); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hs-cap__p b { font-weight: 600; color: var(--fg); }

/* sample chips: the chosen one carries the ink ring, which stretches to the next choice */
.hs-chips { position: relative; display: flex; gap: 6px; padding: 6px; margin: -6px; }
.hs-chip {
  position: relative; flex: none; width: var(--chip, 34px); height: var(--chip, 34px); padding: 0; border: 0; border-radius: 3px; background: var(--surface-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.hs-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.hs-chip::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.hs-chip:active { transform: scale(0.96); }
.hs-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hs-chips__ring { position: absolute; left: 0; top: 0; height: calc(var(--chip, 34px) + 8px); border: 1.5px solid var(--fg); border-radius: 5px; pointer-events: none; }
.hs-chips:has(.hs-chip:focus-visible) .hs-chips__ring { opacity: 0; }
.hs-chip__tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 2; padding: 6px 10px; border-radius: var(--radius); background: var(--fg); color: var(--bg);
  font: 600 0.8125rem/1.2 var(--font-ui); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hs-chip:hover .hs-chip__tip, .hs-chip:focus-visible .hs-chip__tip { opacity: 1; transform: translate(-50%, 0); transition-duration: 0.18s; transition-delay: 0.08s; }
}

.hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hs .btn--gold:focus-visible { outline: 2px solid var(--fg); outline-offset: 0; }
.hs-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.3em; }
.hs-more .icon { font-size: 18px; transition: transform 0.2s cubic-bezier(.16, 1, .3, 1); }
.hs-more:hover .icon { transform: translateX(3px); }

/* the slab: the real surface (the supplier's photo, never altered), bleeding to the right edge */
.hs-slab { position: relative; margin: 0; display: flex; flex-direction: column; min-height: 0; }
.hs-slab__frame { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--surface-2); isolation: isolate; }
.hs-slab__layer { position: absolute; inset: 0; overflow: hidden; background: var(--surface-2); }
.hs-slab__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-slab__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 10px; font-size: 0.75rem; line-height: 1.4; color: var(--fg-2); }

/* the button that stops and restarts the surfaces' turns: a small glass disc on the slab's corner */
.hs-auto {
  position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 50%; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(30, 27, 24, 0.12); -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, transform 0.18s ease;
}
.hs-auto .icon { font-size: 22px; }
.hs-auto:hover { background: var(--bg); }
.hs-auto:active { transform: scale(0.94); }
.hs-auto::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* a 48 px touch target around the 40 px disc */
.hs-auto:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg), 0 2px 10px rgba(30, 27, 24, 0.12); }
@media (prefers-reduced-transparency: reduce) { .hs-auto { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* phones and tablets: one column; the tabs stay under the header; the slab runs edge to edge */
@media (max-width: 1023px) {
  .hs { padding-bottom: 28px; }
  .hs__h1 { padding: 18px var(--gutter) 10px; }
  .hs__tabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top-h)); z-index: 20; padding-block: 8px; background: var(--bg); }
  .hs__scroll { overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
  .hs__scroll::-webkit-scrollbar { display: none; }
  /* the strip fades at an edge where more tabs wait */
  .hs__scroll.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .hs__scroll.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
  .hs__scroll.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  .hs-tab { padding-inline: 13px; }
  .hs-panel { display: flex; flex-direction: column; padding: 14px var(--gutter) 0; }
  .hs-copy, .hs-low, .hs-field { display: contents; }
  .hs-head { order: 1; }
  .hs-slab { order: 2; margin: 20px calc(var(--gutter) * -1) 0; }
  .hs-slab__frame { flex: none; aspect-ratio: 3 / 2; }
  .hs-slab__note { order: 3; padding: 8px var(--gutter) 0; }
  .hs-fig { order: 4; margin-top: 18px; }
  .hs-lb { order: 5; margin-top: 14px; }
  .hs-chips { order: 6; margin: 14px calc(var(--gutter) * -1) 0; padding: 6px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .hs-chips::-webkit-scrollbar { display: none; }
  .hs-actions { order: 7; margin-top: 20px; }
  .hs-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hs-slab__frame { aspect-ratio: 16 / 9; }
}

/* laptops and up: a bar with the H1 and the tabs over the left column; the panel's left column holds the words, the
   right one the slab (pulled up beside the bar, flush under the header) with its note and specs. The words start on
   the header's own line (the site's 1280 px measure); the slab runs to the window's edge. */
@media (min-width: 1024px) {
  .hs {
    --hs-bar: 118px; --edge: max(var(--gutter), calc((100cqw - var(--max)) / 2 + var(--gutter)));
    display: grid; grid-template-rows: var(--hs-bar) minmax(0, 1fr);
    grid-template-columns: minmax(0, calc(max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) + clamp(460px, 31% + 60px, 620px))) minmax(0, 1fr);
    min-height: max(600px, calc(100svh - var(--top-h)));
  }
  .hs__h1 { grid-area: 1 / 1; align-self: start; padding: 26px 32px 0 var(--edge); }
  .hs__tabs { grid-area: 1 / 1; align-self: end; padding: 0 32px 0 var(--edge); }
  .hs-panel { grid-area: 2 / 1 / 3 / 3; display: grid; grid-template-columns: subgrid; min-height: 0; }
  .hs-copy { position: relative; z-index: 1; grid-column: 1; display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 4.4vh, 52px) clamp(28px, 3.6vw, 64px) clamp(28px, 4.4vh, 48px) var(--edge); }
  .hs-fig { --fig-base: min(clamp(6rem, 2rem + 8.2vw, 12rem), 22vh); margin-block: auto; padding-block: clamp(14px, 3vh, 34px) 8px; }
  .hs-low { padding-top: 16px; display: grid; gap: 18px; }
  .hs-chips { --chip: 30px; flex-wrap: wrap; }
  .hs-field { position: relative; z-index: 2; grid-column: 2; margin-top: calc(var(--hs-bar) * -1); display: flex; flex-direction: column; min-width: 0; }
  .hs-slab { flex: 1 1 auto; }
  .hs-slab__frame { min-height: 300px; }
  /* the note belongs to the slab: it runs with it to the window's edge, less the gutter */
  .hs-slab__note { padding: 10px var(--gutter) clamp(14px, 2.4vh, 24px) 0; }
}
/* narrower laptops: smaller tabs; if they still do not fit beside the slab, the bar runs across the stage */
@media (min-width: 1024px) and (max-width: 1366px) { .hs-tab { padding-inline: 11px; font-size: 0.875rem; } .hs-tabs__thumb span { font-size: 0.875rem; } }
@media (min-width: 1024px) {
  .hs.is-wide-bar { grid-template-rows: auto auto minmax(0, 1fr); }
  .hs.is-wide-bar .hs__h1 { grid-area: 1 / 1 / 2 / 3; padding-bottom: 14px; }
  .hs.is-wide-bar .hs__tabs { grid-area: 2 / 1 / 3 / 3; align-self: start; }
  .hs.is-wide-bar .hs-panel { grid-area: 3 / 1 / 4 / 3; }
  .hs.is-wide-bar .hs-field { margin-top: 0; padding-top: 22px; }
}
/* laptops with short screens (1366 × 768, 1280 × 720, 1536 × 864): the stage still ends with its action on the first
   screen; the bar and the gaps tighten, the title keeps to one line, and below 820 px the line under it steps aside */
@media (min-width: 1024px) and (max-height: 900px) {
  .hs { --hs-bar: 106px; }
  .hs__h1 { padding-top: 20px; }
  .hs-title { font-size: min(clamp(2.6rem, 1.2rem + 3.2vw, 4.6rem), 6.4vh); }
  .hs-copy { padding-top: clamp(16px, 3vh, 32px); padding-bottom: clamp(18px, 3vh, 32px); }
  .hs-low { gap: 14px; }
}
@media (min-width: 1024px) and (max-height: 760px) { .hs-meta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hs-chip__tip, .hs-more .icon { transition: none !important; }
  .hs-tab:active, .hs-chip:active { transform: none; }
}

/* on the home page the stage's "Atvykti į saloną" is the one filled action: the header's phone is an outline */
body:not([data-view]) .top__call, body[data-view="home"] .top__call { background: transparent; color: var(--fg); border-color: var(--line-strong); }
body:not([data-view]) .top__call:hover, body[data-view="home"] .top__call:hover { border-color: var(--fg); background: transparent; }
body:not([data-view]) .top__call:focus-visible, body[data-view="home"] .top__call:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }

/* ---------- the 3D tiles, on linen: the paper squares wait, and the tiles are set down in them (once, as the band
   comes into view); "3D" and "Tekstūra" turn each card over to its other side ---------- */
.boardsec { background: var(--surface-2); }
.boardsec .board__media { background: var(--bg); }
.boardsec .board__link { perspective: 1100px; }
.board-wrap.is-waiting .board__3d, .board-wrap.is-waiting .board__name, .board-wrap.is-waiting .board__meta,
.board-wrap.is-waiting .board__price, .board-wrap.is-waiting .board__pack { opacity: 0; }
.board-wrap.is-flipping .board__tile { transition: none; }
.board-wrap.is-flipping .board__item[data-face="3d"] .board__link .board__tile { opacity: 0; }
.board-wrap.is-flipping .board__item[data-face="texture"] .board__link .board__tile { opacity: 1; }
.board__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 30px; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.3em; }
.board__more .icon { font-size: 18px; transition: transform 0.2s cubic-bezier(.16, 1, .3, 1); }
.board__more:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .board__more .icon { transition: none; } }

/* ---------- articles and the blog (v40): /tinklarastis/ and the four articles ----------
   Read, not sell: the title and the picture at the page's edge, then the contents on the left and the text in a
   column of about 70 characters. The steps of a renovation are a numbered line, the questions open one by one as on
   the category pages, and the closing words carry the showroom's live status. Under the article, on linen, the tiles
   it talks about and the other articles. */
:root { --art-num: #8C6239; --toc-w: 15rem; --art-gap: clamp(40px, 5vw, 88px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-num: var(--caramel); } }
:root[data-theme="dark"] { --art-num: var(--caramel); }

.art-head { display: grid; gap: 14px; padding-block: clamp(14px, 2.4vw, 26px) clamp(24px, 3.4vw, 40px); }
.art-head__title { font: 600 clamp(2.15rem, 1.3rem + 3.1vw, 3.9rem)/1.06 var(--font-display); letter-spacing: -0.02em; max-width: 19ch; }
.art-head__lede { font-size: var(--step-1); line-height: 1.55; color: var(--fg-2); max-width: 54ch; }
.art-head__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.875rem; color: var(--fg-2); }
.art-head__meta [aria-hidden] { color: var(--line-strong); }

.art-fig { margin-block: 0; }
.art-fig__pics { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--surface-2); }
.art-fig__pics img { width: 100%; height: 100%; object-fit: cover; }
.art-fig--pair .art-fig__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--bg); }
.art-fig--pair .art-fig__pics img { min-width: 0; }
.art-fig figcaption { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.art-fig figcaption a { color: var(--fg); }
@media (min-width: 1024px) { .art-fig__pics { aspect-ratio: 2 / 1; } }
@media (max-width: 1023px) {
  .art-fig { padding-inline: 0; }
  .art-fig__pics { border-radius: 0; }
  .art-fig figcaption { padding-inline: var(--gutter); }
}

.art-grid { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 104px); }
@media (min-width: 1024px) {
  .art-grid { display: grid; grid-template-columns: var(--toc-w) minmax(0, 43rem); column-gap: var(--art-gap); align-items: start; }
}

/* contents: beside the text on wide screens, folded under the intro on narrow ones */
.art-toc ol { list-style: none; margin: 0; padding: 0; }
.art-toc--side { display: none; }
.art-toc__t { font-weight: 700; font-size: 0.9375rem; margin-bottom: 10px; }
@media (min-width: 1024px) {
  .art-toc--side { display: block; position: sticky; top: calc(var(--top-h) + 32px); max-height: calc(100vh - var(--top-h) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 2px 4px 8px 2px; font-size: 0.9375rem; }
  .art-toc--top { display: none; }
}
.art-toc--side ol { border-left: 1px solid var(--line); }
.art-toc--side a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--fg-2); line-height: 1.4; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.art-toc--side a:hover { color: var(--fg); }
.art-toc--side a[aria-current="true"] { color: var(--fg); border-left-color: var(--caramel); }
.art-toc--side a:focus-visible { outline-offset: -2px; }
.art-toc--top { border-block: 1px solid var(--line); }
.art-toc--top summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-weight: 700; cursor: pointer; list-style: none; }
.art-toc--top summary::-webkit-details-marker { display: none; }
.art-toc--top summary .icon { font-size: 22px; transition: transform 0.25s ease; }
.art-toc--top[open] summary .icon { transform: rotate(180deg); }
.art-toc--top summary:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--focus); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.art-toc--top ol { padding-bottom: 14px; }
.art-toc--top a { display: block; padding: 8px 0; line-height: 1.4; text-decoration: none; }
.art-toc--top a:hover { text-decoration: underline; }
.art-toc--top a[aria-current="true"] { font-weight: 600; }
@media (max-width: 1023px) { .art-body > .art-toc--top + h2 { margin-top: 1.6em; } }
@media (min-width: 1024px) { .art-body > .art-toc--top:first-child + h2 { margin-top: 0; } }

/* the text */
.art-body { min-width: 0; font-size: 1.0625rem; line-height: 1.72; }
@media (min-width: 1024px) { .art-body { font-size: 1.125rem; } }
.art-body > * + * { margin-top: 1.05em; }
.art-body > :first-child { margin-top: 0; }
.art-body h2 { font: 600 clamp(1.6rem, 1.2rem + 1.25vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -0.01em; margin-top: 2.3em; }
.art-body h2 + * { margin-top: 0.7em; }
.art-body h3 { font: 700 1.125rem/1.35 var(--font-ui); margin-top: 1.9em; }
.art-body h3 + * { margin-top: 0.45em; }
.art-body strong { font-weight: 700; }
.art-body a { font-weight: 600; text-underline-offset: 3px; }
.art-body ul { list-style: none; padding: 0; }
.art-body ul > li { position: relative; padding-left: 1.4em; }
.art-body ul > li + li { margin-top: 0.5em; }
/* a small tile for a bullet */
.art-body ul > li::before { content: ""; position: absolute; left: 0.12em; top: 0.66em; width: 0.42em; height: 0.42em; background: var(--caramel); }
.art-ol { list-style: none; padding: 0; counter-reset: n; }
.art-ol > li { counter-increment: n; position: relative; padding-left: 2.1em; }
.art-ol > li + li { margin-top: 0.8em; }
.art-ol > li::before { content: counter(n); position: absolute; left: 0; top: -0.06em; font: italic 400 1.45em/1 var(--font-display); color: var(--art-num); }

/* the steps of a renovation: a numbered line, each step with its duration */
.art-body .art-steps { list-style: none; padding: 0; margin-top: 1.5em; }
.art-step { position: relative; padding: 0 0 1.7em 3.4rem; }
.art-step:last-child { padding-bottom: 0; }
.art-step::before { content: ""; position: absolute; left: calc(1.15rem - 0.5px); top: 2.75rem; bottom: 0.45rem; width: 1px; background: var(--line-strong); }
.art-step:last-child::before { display: none; }
.art-body .art-step__h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-top: 0.18rem; }
.art-step__n { position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); font: italic 400 1.1875rem/1 var(--font-display); color: var(--fg); }
.art-step__d { font: 500 0.875rem/1.4 var(--font-ui); color: var(--fg-2); }
.art-step > * + * { margin-top: 0.6em; }
.art-step > ul > li + li { margin-top: 0.4em; }

/* tables: rows and hairlines; a table of three columns turns into blocks on phones */
.art-table { margin-top: 1.4em; overflow-x: auto; }
.art-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.art-table th, .art-table td { text-align: left; vertical-align: top; padding: 12px 20px 12px 0; border-bottom: 1px solid var(--line); }
.art-table th:last-child, .art-table td:last-child { padding-right: 0; }
.art-table thead th { padding-top: 0; font-weight: 700; border-bottom: 1.5px solid var(--fg); }
.art-table tbody th { font-weight: 600; }
@media (max-width: 639px) {
  .art-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .art-table--stack table, .art-table--stack tbody { display: block; }
  .art-table--stack tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .art-table--stack tr:first-child { border-top: 1.5px solid var(--fg); }
  .art-table--stack th, .art-table--stack td { display: block; padding: 0; border: 0; }
  .art-table--stack tbody th { margin-bottom: 6px; font-weight: 700; }
  .art-table--stack td { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 12px; padding-block: 3px; }
  .art-table--stack td::before { content: attr(data-label); color: var(--fg-2); }
}

/* questions: the category pages' accordion */
.art-body .cat-faq { margin-top: 1.2em; }
.art-body .cat-faq__list { max-width: none; }
.art-body .cat-faq details p { max-width: none; font-size: inherit; }
.art-body .cat-faq summary { font-size: 1.0625rem; }

/* the closing words: the showroom, its live status and the way there */
.art-body .art-visit { margin-top: 2.6em; padding: clamp(22px, 3.4vw, 36px); background: var(--surface-2); border-radius: var(--radius); }
.art-visit > * + * { margin-top: 0.75em; }
.art-body .art-visit h2 { margin-top: 0; }
.art-visit__status { font-size: 0.9375rem; }
.art-visit__go { margin-top: 1.3em !important; }

/* the reading line under the header (narrow screens, where the contents are folded) */
.art-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--caramel); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; pointer-events: none; display: none; }
@media (max-width: 1023px) { body[data-view="article"] .art-progress { display: block; } }

/* under the article: the tiles it talks about and the other articles */
.section.art-more { padding-block: clamp(48px, 7vw, 96px); }
.art-more__sec + .art-more__sec { margin-top: clamp(48px, 7vw, 88px); }
.art-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.art-more .art-more__head h2 { font: 600 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; }
.art-more__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.art-more__all:hover { text-decoration: underline; }
.art-more__all .icon { font-size: 18px; }
.art-more .board__media { background: var(--bg); }

.art-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 24px; }
.art-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-cards--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.art-card { min-width: 0; }
.art-card__link { display: grid; gap: 14px; text-decoration: none; }
.art-card__pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.art-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.art-card__pic--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: transparent; }
.art-card__pic--pair img { min-width: 0; }
.art-card__t { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.art-cards--blog .art-card__t { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
.art-card__link:hover .art-card__t { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.art-card__link:focus-visible { outline: none; }
.art-card__link:focus-visible .art-card__pic { outline: 2px solid var(--focus); outline-offset: 0; }
.art-card__lede { margin-top: 10px; color: var(--fg-2); max-width: 52ch; }
.art-card__meta { margin-top: 8px; font-size: 0.875rem; color: var(--fg-2); }
.art-blog { padding-bottom: clamp(56px, 8vw, 112px); }
@media (max-width: 900px) {
  .art-cards--3 { grid-template-columns: 1fr; gap: 32px; }
  .art-cards--3 .art-card__pic { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) { .art-cards--blog { grid-template-columns: 1fr; gap: 44px; } }
@media (prefers-reduced-motion: reduce) { .art-toc--side a, .art-toc--top summary .icon { transition: none; } }