/* Lean catalogue. One idea carries the look: what the seller's page hides,
   this page shows. Titles arrive under an ink bar that peels away once; the
   rest stays quiet. Cool grey paper, ink, one yellow. Sharp corners
   everywhere: labels, boxes, stamps. */

:root {
  --paper: #e8e9eb;
  --sheet: #f6f6f7;
  --ink: #18191c;
  --graphite: #565b65;
  --rule: #c8cbd1;
  --signal: #ffd21f;
  --on-signal: #18191c;
  --display: 'Secular One', 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --text: 'IBM Plex Sans Hebrew', 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --gutter: 16px;
  --wide: 1240px;
  --top-h: 56px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121316;
    --sheet: #1b1c20;
    --ink: #ecedef;
    --graphite: #a2a7b1;
    --rule: #2e3036;
    --on-signal: #121316;
  }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --top-h: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--signal);
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); margin-block-end: 0.75em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

bdi { unicode-bidi: isolate; }
code, .code { font-family: var(--mono); font-weight: 500; font-size: 0.95em; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -100px; z-index: 100;
  background: var(--signal); color: var(--on-signal); padding: 0.5em 1em; font-weight: 600;
}
.skip:focus { top: 8px; }

/* ---------------------------------------------------------- the top --- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-block-end: 1px solid var(--rule);
}
.top-in {
  max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--top-h);
  display: flex; align-items: center; gap: 24px;
}
.mark {
  font-family: var(--display); font-size: 1.7rem; line-height: 1; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.32em; white-space: nowrap;
}
/* The mark is the favicon in type: a word and the yellow strip peeled off it. */
.mark::before { content: ''; width: 0.95em; height: 0.34em; background: var(--signal); box-shadow: inset 0 0 0 1.5px var(--ink); }

.top-nav { display: none; gap: 22px; margin-inline-start: auto; }
.top-nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding-block: 6px; border-block-end: 2px solid transparent; }
.top-nav a:hover, .top-nav a[aria-current] { border-block-end-color: var(--ink); }
@media (min-width: 960px) { .top-nav { display: flex; } }

.seek-open {
  margin-inline-start: auto;
  font: 600 0.95rem var(--text);
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); padding: 0.45em 1em; cursor: pointer;
}
@media (min-width: 960px) { .seek-open { margin-inline-start: 0; } }
.seek-open:hover { background: var(--signal); color: var(--on-signal); }

/* ------------------------------------------------------------ search --- */

.seek {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
}
.seek[hidden] { display: none; }
.seek-in { max-width: 820px; margin-inline: auto; padding: 16px var(--gutter) 48px; }
.seek-form { display: flex; gap: 10px; position: sticky; top: 0; background: var(--paper); padding-block: 8px; }
.seek-form input {
  flex: 1; min-width: 0;
  font: 400 1.15rem var(--text); color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 0;
  padding: 0.65em 0.8em;
}
.seek-form input::placeholder { color: var(--graphite); opacity: 1; }
.seek-close {
  font: 600 1rem var(--text); color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); padding: 0 1em; cursor: pointer;
}
.seek-say { color: var(--graphite); margin-block: 14px; }
.seek-list { list-style: none; margin: 0; padding: 0; }
.seek-list li + li { border-block-start: 1px solid var(--rule); }
.seek-list a { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding-block: 10px; text-decoration: none; }
.seek-list img { width: 72px; height: 54px; object-fit: contain; background: var(--sheet); }
.seek-list .price { font-weight: 600; }

/* ------------------------------------------------------------ layout --- */

main { display: block; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); padding-block-end: 64px; }
.block { margin-block-start: 56px; }
@media (min-width: 960px) { .block { margin-block-start: 88px; } }

.crumbs { font-size: 0.9rem; color: var(--graphite); padding-block: 14px 4px; }
.crumbs a { color: var(--graphite); }

/* -------------------------------------------------------------- home --- */

/* minmax(0, 1fr), not 1fr: a grid track's minimum is otherwise the widest
   unbreakable content, and the chip row is one long nowrap line that would
   push the whole page sideways on a phone. */
.intro { padding-block: 28px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.intro-text { min-width: 0; }
@media (min-width: 960px) {
  .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-block: 56px 0; }
}
.intro h1 { font-size: clamp(3.1rem, 14.5vw, 8.4rem); line-height: 0.98; letter-spacing: -0.01em; }
.intro-sub { font-size: clamp(1.05rem, 2.6vw, 1.25rem); max-width: 34ch; margin-block: 18px 22px; }

/* The signature: an ink bar over each line of the title, pulled away once.
   It runs from the start of the line (right, in Hebrew) toward the end, the
   direction the line is read. Reduced motion: the bar never appears. */
.reveal > span {
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left center / 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal > span { animation: unredact 0.75s cubic-bezier(0.75, 0, 0.2, 1) 0.25s backwards; }
}
@keyframes unredact {
  from { background-size: 100% 100%; }
  to { background-size: 0% 100%; }
}

.chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 4px; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chips a {
  display: inline-flex; gap: 0.45em; align-items: baseline; white-space: nowrap;
  border: 1.5px solid var(--ink); padding: 0.5em 0.95em;
  font-weight: 600; text-decoration: none;
}
.chips a bdi { font-weight: 400; color: var(--graphite); font-size: 0.9em; }
.chips a:hover { background: var(--signal); color: var(--on-signal); }
.chips a:hover bdi { color: var(--on-signal); }

/* The contact sheet: nine cover shots in the supplier's album grid. Desktop
   only; on a phone the newest products sit right under the title instead. */
.sheet { display: none; }
@media (min-width: 960px) {
  .sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sheet a { display: block; background: var(--sheet); aspect-ratio: 1; }
  .sheet img { width: 100%; height: 100%; object-fit: cover; }
}

/* -------------------------------------------------------------- grid --- */

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 18px; } }
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Twelve fill two, three and four columns evenly; at five, two rows of ten. */
  .grid-new li:nth-child(n + 11) { display: none; }
}

.card a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
/* overflow: hidden is what makes aspect-ratio hold: without it a portrait
   photo's own height stretches its box and the row goes ragged. */
.card-img { display: block; background: var(--sheet); aspect-ratio: 4 / 3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-t {
  font-size: 0.95rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card a:hover .card-t { text-decoration: underline; text-underline-offset: 0.2em; }
.price { font-weight: 600; white-space: nowrap; }
.card .price { align-self: flex-start; }
.cur { margin-inline-end: 0.08em; }

/* ------------------------------------------------------------- tiles --- */

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile-shoes, .tile-apparel, .tile-accessories { grid-column: span 2; }
@media (min-width: 960px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 18px; }
  .tile-shoes { grid-column: span 3; grid-row: span 2; }
  .tile-apparel { grid-column: span 3; }
  .tile-accessories, .tile-watches, .tile-beauty { grid-column: span 1; }
}
.tile a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sheet); flex: 1 1 auto; min-height: 0; }
@media (min-width: 960px) {
  .tile-shoes img { aspect-ratio: auto; height: 100%; min-height: 360px; }
  .tile-apparel img { aspect-ratio: 16 / 9; }
  .tile-accessories img, .tile-watches img, .tile-beauty img { aspect-ratio: 1; }
}
.tile-t { font-family: var(--display); font-size: 1.25rem; line-height: 1.2; margin-block-start: 10px; }
.tile-shoes .tile-t { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.tile-m { color: var(--graphite); font-size: 0.9rem; }
.tile a:hover .tile-t { text-decoration: underline; text-underline-offset: 0.18em; }

/* ------------------------------------------------------- how, honest --- */

/* A real sequence, so it is numbered: the steps happen in this order. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 28px; }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display); font-size: 2.6rem; line-height: 1;
  width: 1.25em; height: 1.25em; display: grid; place-items: center;
  background: var(--signal); color: var(--on-signal);
}
.steps h3 { margin-block: 4px 6px; }
.steps p { margin: 0; color: var(--graphite); }

.honest { border-block-start: 3px solid var(--ink); padding-block-start: 22px; max-width: 72ch; }

/* ---------------------------------------------------------- category --- */

.cat-head { padding-block: 8px 20px; max-width: 72ch; }
.cat-head h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
.lede { font-size: 1.08rem; margin-block-start: 14px; }

.tools { display: flex; align-items: center; gap: 10px; margin-block-end: 22px; flex-wrap: wrap; }
.tools label { font-weight: 600; }
.tools select {
  font: 400 1rem var(--text); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--ink); border-radius: 0; padding: 0.45em 0.7em;
}
.tools-n { color: var(--graphite); margin-inline-start: auto; }

.faq { max-width: 72ch; border-block-start: 1px solid var(--rule); }
.faq details { border-block-end: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; padding-block: 14px; list-style-position: inside; }
.faq summary::marker { color: var(--graphite); }
.faq p { color: var(--graphite); margin-block: 0 16px; }

/* ----------------------------------------------------------- product --- */

.prod-top { display: grid; gap: 24px; }
@media (min-width: 960px) {
  .prod-top { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 48px; align-items: start; }
}

.gal { min-width: 0; }
.gal-strip {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--sheet);
}
.gal-strip::-webkit-scrollbar { display: none; }
/* One fixed frame for every photo. Without it the strip takes the height of
   its tallest shot and every landscape photo floats in a band of empty box. */
.gal-strip li { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; }
.gal-strip img { width: 100%; height: 100%; object-fit: contain; }
.gal-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.gal-thumbs li { flex: 0 0 auto; }
@media (min-width: 960px) { .gal-thumbs { flex-wrap: wrap; overflow: visible; } }
.thumb { padding: 0; border: 2px solid transparent; background: var(--sheet); cursor: pointer; display: block; }
.thumb img { width: 64px; height: 48px; object-fit: contain; }
.thumb[aria-current='true'] { border-color: var(--ink); }
.thumbs-more {
  margin-block-start: 8px; font: 600 0.9rem var(--text); color: var(--ink);
  background: transparent; border: 1.5px solid var(--ink); padding: 0.4em 0.9em; cursor: pointer;
}
.thumbs-more:hover { background: var(--signal); color: var(--on-signal); }

.buy { min-width: 0; }
@media (min-width: 960px) { .buy { position: sticky; top: calc(var(--top-h) + 20px); } }
.buy h1 { font-size: clamp(1.55rem, 4.6vw, 2.2rem); line-height: 1.25; }
.honest-line { color: var(--graphite); font-size: 0.9rem; margin-block: 10px 16px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-block-end: 14px; }
.price-big { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; }
.price-note { color: var(--graphite); font-size: 0.92rem; }
.desc { font-size: 1.02rem; }

.pick { margin-block: 18px 6px; }
.pick-row { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.pick-row legend { font-weight: 600; padding: 0; margin-block-end: 8px; }
.pick-help { font-weight: 400; color: var(--graphite); margin-inline-start: 8px; font-size: 0.9rem; }
.pick-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  min-width: 48px; min-height: 44px; padding: 0 12px;
  font: 500 0.95rem var(--text); color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 0; cursor: pointer;
}
.opt-code { font-family: var(--mono); font-weight: 500; font-size: 0.9rem; }
.pick-name { font-family: var(--text); margin-inline-start: 0.35em; }
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt.is-out { opacity: 0.4; text-decoration: line-through; }
.pick-say { color: var(--graphite); font-size: 0.92rem; min-height: 1.5em; margin-block: 4px 12px; }

.btn-buy {
  display: flex; justify-content: center; align-items: center; min-height: 54px;
  background: var(--signal); color: var(--on-signal);
  border: 2px solid var(--ink); text-decoration: none;
  font: 600 1.12rem var(--text); padding: 0.6em 1.2em;
  transition: transform 0.08s ease;
}
.btn-buy:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn-buy:active { transform: translateY(1px); }
.buy-note { color: var(--graphite); font-size: 0.9rem; margin-block: 12px 10px; }
.code-row { font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.copy {
  font: 600 0.85rem var(--text); color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); padding: 0.25em 0.75em; cursor: pointer;
}
.copy:hover { background: var(--signal); color: var(--on-signal); }

.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.sheet-list img, .chart-img img { background: var(--sheet); }
.chart-img { max-width: 900px; overflow-x: auto; }
.vid-list { display: grid; gap: 14px; }
@media (min-width: 720px) { .vid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vid-list video { width: 100%; background: var(--sheet); }

.about-model { max-width: 72ch; }
.sources { padding-inline-start: 1.2em; color: var(--graphite); font-size: 0.95rem; }

.tablewrap { overflow-x: auto; max-width: 520px; }
.foot-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.foot-table th, .foot-table td { text-align: start; padding: 8px 12px; border-block-end: 1px solid var(--rule); }
.foot-table thead th { border-block-end: 2px solid var(--ink); font-weight: 600; }
.foot-table tbody tr:nth-child(even) { background: var(--sheet); }

/* The mobile buy dock: appears only after the page's own buy button has
   scrolled away, so it never doubles up with it on screen. */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-block-start: 1px solid var(--rule);
}
.dock[hidden] { display: none; }
.dock .price { font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.dock .btn-buy { flex: 1; min-height: 48px; }
@media (min-width: 960px) { .dock { display: none !important; } }
.is-prod main { padding-block-end: 110px; }

/* -------------------------------------------------------------- docs --- */

.doc article { max-width: 70ch; padding-block: 12px 0; }
.doc h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); margin-block-end: 12px; }
.doc h2 { margin-block: 40px 14px; }
.doc-date { color: var(--graphite); font-size: 0.9rem; }
.ticks { padding-inline-start: 1.2em; }
.ticks li::marker { content: '■  '; color: var(--signal); font-size: 0.8em; }
.ticks li { margin-block-end: 6px; }
.seq { padding-inline-start: 1.6em; }
.seq li { margin-block-end: 10px; padding-inline-start: 4px; }
.seq li::marker { font-family: var(--display); font-weight: 400; }
.src, .note { color: var(--graphite); font-size: 0.92rem; }

.calc { display: grid; gap: 10px; max-width: 420px; padding: 18px; background: var(--sheet); border: 1.5px solid var(--ink); }
.calc[hidden] { display: none; }
.calc label { font-weight: 600; }
.calc input {
  font: 400 1.4rem var(--text); color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0; padding: 0.4em 0.6em; width: 100%;
}
.calc-out { font-size: 1.05rem; min-height: 1.6em; }
.calc-out strong { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }

/* ------------------------------------------------------------ footer --- */

.foot { border-block-start: 3px solid var(--ink); }
.foot-in {
  max-width: var(--wide); margin-inline: auto; padding: 32px var(--gutter) 48px;
  display: grid; gap: 22px;
}
@media (min-width: 960px) { .foot-in { grid-template-columns: 1fr 1fr 1.4fr; align-items: start; } }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { text-decoration: none; padding-block: 6px; display: inline-block; }
.foot a:hover { text-decoration: underline; }
.foot-about { display: grid; gap: 12px; }
.foot-note { color: var(--graphite); font-size: 0.9rem; margin: 0; }
.foot-tg { margin: 0; font-weight: 600; }

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