/* Project21 — shared design layer.
   Colors, font families and grid values come from /assets/brand/p21-tokens.css
   (the single source); load it before this file. */

/* ---------- Fonts ----------
   p21-tokens.css declares the families as TTF. The same families are declared
   again here with the converted WOFF2 files (SIL OFL 1.1, licences next to the
   fonts). The later rule wins, so only the WOFF2 files are downloaded. */
@font-face { font-family: 'Plex Hebrew'; src: url(/assets/brand/fonts/IBMPlexSansHebrew-Light.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Plex Hebrew'; src: url(/assets/brand/fonts/IBMPlexSansHebrew-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Hebrew'; src: url(/assets/brand/fonts/IBMPlexSansHebrew-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jost'; src: url(/assets/brand/fonts/Jost-Variable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(/assets/brand/fonts/IBMPlexMono-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
/* The 3D viewer's CSS asks for these names first; point them at the same files. */
@font-face { font-family: 'IBM Plex Sans Hebrew'; src: url(/assets/brand/fonts/IBMPlexSansHebrew-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Hebrew'; src: url(/assets/brand/fonts/IBMPlexSansHebrew-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/assets/brand/fonts/IBMPlexMono-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --tap: 44px;
  /* Side margin: 20px on mobile, the brand token from tablet up */
  --site-margin: 20px;
}
@media (min-width: 768px) { :root { --site-margin: var(--p21-margin); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--p21-mist);
  color: var(--p21-charcoal);
  font-family: var(--p21-font-he);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; border-radius: 0; }
[hidden] { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, h3 { margin: 0 0 0.5em; color: var(--p21-charcoal); }
h1 { font-weight: 300; font-size: 34px; line-height: 1.15; }
h2 { font-weight: 300; font-size: 24px; line-height: 1.25; }
h3 { font-weight: 500; font-size: 17px; line-height: 1.35; }
p { margin: 0 0 1em; }
.prose, p { max-width: 75ch; }

/* English: product names and full English headings only */
.en, [lang="en"] { font-family: var(--p21-font-lat); font-weight: 300; }
.product-name { font-family: var(--p21-font-lat); font-weight: 300; line-height: 1.2; }

/* SKUs and specs */
.mono { font-family: var(--p21-font-mono); font-weight: 400; }
.sku { font-family: var(--p21-font-mono); font-size: 14px; color: var(--p21-graphite); }

/* Isolated LTR runs inside RTL text: SKUs, sizes, request IDs, email, phone */
.ltr, .sku { direction: ltr; unicode-bidi: isolate; }
/* As a block, keep it on the RTL side of the page */
.sku, .ltr-block { text-align: right; }
.ltr-block { direction: ltr; unicode-bidi: isolate; }

.text-secondary { color: var(--p21-graphite); }
.nowrap { white-space: nowrap; }
.small { font-size: 14px; }

/* ---------- Links and focus ---------- */
a { color: var(--p21-charcoal); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--p21-walnut); }
:focus-visible { outline: 2px solid var(--p21-charcoal); outline-offset: 2px; }
/* Main is focused only as the skip-link target; no ring around the whole page */
main:focus { outline: none; }

/* Skip link: first focusable element, visible only on keyboard focus */
.skip-link {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  padding: 10px 16px; min-height: var(--tap);
  background: var(--p21-charcoal); color: var(--p21-mist); text-decoration: none;
  font-family: var(--p21-font-he); font-weight: 500; font-size: 15px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--p21-mist); }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--p21-max) + 2 * var(--site-margin)); margin-inline: auto; padding-inline: var(--site-margin); }

/* 12-column grid (gutter from the tokens); one column on mobile */
.grid-12 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--p21-gutter); }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 24px;
}
@media (min-width: 768px) { .site-header { padding-block: 32px; } }

/* Horizontal logo: symbol height 26–30px mobile, 32–40px desktop.
   The SVG's symbol fills its full height, so height = symbol height.
   Never mirrored in RTL. Clear space ≥ half the symbol height. */
.logo { display: block; height: 28px; width: auto; }
.logo-link { display: inline-block; padding: 14px; margin: -14px; }
@media (min-width: 768px) {
  .logo { height: 36px; }
  .logo-link { padding: 18px; margin: -18px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--p21-control-h); padding: 0 24px;
  font-family: var(--p21-font-he); font-weight: 500; font-size: 15px; line-height: 1.2;
  border: 1px solid var(--p21-charcoal); border-radius: var(--p21-radius-ui);
  text-decoration: none; cursor: pointer;
}
/* One primary button per screen */
.btn-primary { background: var(--p21-charcoal); color: var(--p21-mist); }
.btn-primary:hover { background: var(--p21-graphite); border-color: var(--p21-graphite); color: var(--p21-mist); }
.btn-secondary { background: transparent; color: var(--p21-charcoal); }
.btn-secondary:hover { background: var(--p21-paper); color: var(--p21-charcoal); }
.btn-small { min-height: var(--tap); padding: 0 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 8px; margin-bottom: 24px; max-width: 480px; }
.field > label { font-weight: 400; font-size: 15px; color: var(--p21-charcoal); }

.input, .textarea, .select {
  width: 100%; min-height: var(--p21-control-h); padding: 10px 12px;
  font: inherit; font-size: 16px; /* ≥16px avoids iOS zoom */
  color: var(--p21-charcoal);
  background: var(--p21-paper);
  border: 1px solid var(--p21-silver); border-radius: var(--p21-radius-ui);
  appearance: none;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--p21-charcoal); outline: 1px solid var(--p21-charcoal); outline-offset: 0; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--p21-charcoal); }
.input[dir="ltr"] { text-align: left; }

/* Checkbox row with a ≥44px hit area */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding-block: 10px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--p21-charcoal); cursor: pointer; }

/* Error: short graphite text with an icon, under the field */
.error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; font-size: 14px; color: var(--p21-graphite);
}
.error[hidden], .error:empty { display: none; }
.error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px;
  background: var(--p21-graphite);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13ZM7.25 4h1.5v5h-1.5V4Zm0 6.5h1.5V12h-1.5v-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13ZM7.25 4h1.5v5h-1.5V4Zm0 6.5h1.5V12h-1.5v-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Catalog ---------- */
.page-head { padding-block: 24px 16px; }
@media (min-width: 768px) { .page-head { padding-block: 48px 24px; } }
.page-head p { color: var(--p21-graphite); margin: 0; }

/* Category tabs: text only. Scrolls inside itself on narrow screens. */
.tabs {
  display: flex; gap: 24px; margin: 0 calc(var(--site-margin) * -1) 24px; padding-inline: var(--site-margin);
  border-bottom: 1px solid var(--p21-silver);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; position: relative; min-height: var(--tap); padding: 8px 0; margin-bottom: -1px;
  font: 400 16px/1.6 var(--p21-font-he); color: var(--p21-graphite);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--p21-charcoal); }
.tab[aria-selected="true"] { color: var(--p21-charcoal); border-bottom-color: var(--p21-charcoal); }
.tab:focus-visible { outline-offset: -2px; }

/* Layout filter (secondary): one line, scrolls inside itself on narrow screens */
.filters {
  display: flex; gap: 8px; margin: 0 calc(var(--site-margin) * -1) 24px; padding: 0 var(--site-margin);
  overflow-x: auto; scrollbar-width: none; list-style: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters li { flex: none; }
.chip {
  min-height: var(--tap); padding: 0 16px;
  font: inherit; font-size: 15px; color: var(--p21-charcoal);
  background: transparent; border: 1px solid var(--p21-silver); border-radius: var(--p21-radius-ui);
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--p21-charcoal); }
.chip[aria-pressed="true"] { border-color: var(--p21-charcoal); background: var(--p21-charcoal); color: var(--p21-mist); }

/* Product grid: 2 / 3 / 4 cards */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; list-style: none; margin: 0; padding: 0 0 64px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--p21-gutter); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Card: front render, 4:5, on the off-white page tone; no 3D in cards */
.card-link { display: block; color: inherit; text-decoration: none; }
.card-media { aspect-ratio: 4 / 5; background: var(--p21-mist); border: 1px solid var(--p21-silver); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-name { margin: 16px 0 0; font-size: 18px; text-align: right; }
.card-link:hover .card-name { color: var(--p21-walnut); }
.card-price { margin: 0; font-size: 14px; color: var(--p21-graphite); }

/* ---------- Header cart ---------- */
.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); color: var(--p21-charcoal); text-decoration: none;
}
.cart-link:hover { color: var(--p21-walnut); }
.cart-icon { width: 26px; height: 26px; }
.cart-count {
  position: absolute; top: 4px; left: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-family: var(--p21-font-mono); font-size: 11px; line-height: 18px; text-align: center;
  background: var(--p21-charcoal); color: var(--p21-mist);
}
.cart-count[hidden] { display: none; }

/* ---------- Product page ---------- */
/* Desktop (1024+): media 7 columns, info 5 columns and sticky. Mobile: stacked. */
.product { row-gap: 32px; padding-block: 24px 64px; }
.product-media, .product-info { min-width: 0; }
@media (min-width: 1024px) {
  .product { padding-block: 48px 96px; align-items: start; }
  .product-media { grid-column: span 7; }
  .product-info { grid-column: span 5; position: sticky; top: 24px; }
}

/* Segmented control (ARIA tabs) above the stage */
.segmented { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--p21-charcoal); border-radius: var(--p21-radius-ui); overflow: hidden; }
.segmented [role="tab"] {
  min-height: var(--tap); padding: 0 16px;
  font: 400 15px/1 var(--p21-font-he); color: var(--p21-charcoal);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.segmented [role="tab"] + [role="tab"] { border-inline-start: 1px solid var(--p21-charcoal); }
.segmented [role="tab"][aria-selected="true"] { background: var(--p21-charcoal); color: var(--p21-mist); }
.segmented [role="tab"]:focus-visible { outline-offset: -4px; outline-color: var(--p21-mist); }
.segmented [role="tab"][aria-selected="false"]:focus-visible { outline-color: var(--p21-charcoal); }

/* One 4:5 stage; views are stacked layers that fade (150ms). The 3D layer is
   never removed, only hidden. Side by side: sketch right, 3D left. */
.stage { display: grid; aspect-ratio: 4 / 5; background: var(--p21-mist); border: 1px solid var(--p21-silver); }
.layer { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 0s linear 150ms; }
.layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage[data-mode="3d"] .layer-3d,
.stage[data-mode="sketch"] .layer-sketch,
.stage[data-mode="render"] .layer-render,
.stage[data-mode="side"] .layer-sketch,
.stage[data-mode="side"] .layer-3d { opacity: 1; visibility: visible; transition: opacity 150ms ease; }
.stage[data-mode="side"] { aspect-ratio: 8 / 5; grid-template-columns: 1fr 1fr; }
.stage[data-mode="side"] .layer-sketch { grid-area: 1 / 1; }
.stage[data-mode="side"] .layer-3d { grid-area: 1 / 2; }
@media (prefers-reduced-motion: reduce) { .layer { transition: none !important; } }

/* Viewer captions sit over the model; give them the page tone behind them so
   graphite text keeps its contrast whatever is rendered underneath. */
.p21-3d__hint, .p21-3d__tag { background: var(--p21-mist); padding: 2px 8px; }

/* Thumbnails: 3D, sketch, front, back */
.thumbs { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; width: 64px; padding: 0; background: var(--p21-mist); border: 1px solid var(--p21-silver); cursor: pointer; }
.thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: contain; }
.thumb[aria-pressed="true"] { border-color: var(--p21-charcoal); outline: 1px solid var(--p21-charcoal); }
@media (min-width: 768px) { .thumb { width: 80px; } }

/* Info */
.product-title { font-size: 34px; line-height: 1.15; margin: 0 0 8px; text-align: right; }
.product-info .sku { margin: 0 0 16px; }
.price-line { margin: 0 0 16px; }
.price-line--quote { font-size: 14px; color: var(--p21-graphite); }
.product-desc { margin: 0 0 16px; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.tag { display: inline-block; padding: 4px 8px; font-size: 14px; color: var(--p21-graphite); border: 1px solid var(--p21-silver); }

#add-form { padding-block: 8px 24px; border-bottom: 1px solid var(--p21-silver); }
.qty-field { max-width: 120px; }
.select {
  padding-inline: 12px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2124' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 8px; background-position: left 12px center;
}
.add-btn { width: 100%; margin-top: 8px; }
.added-note { min-height: 1.6em; margin: 16px 0 0; font-size: 15px; }

/* Accordions */
.acc { border-bottom: 1px solid var(--p21-silver); }
.acc-title {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-block: 8px;
  font-weight: 500; font-size: 17px; line-height: 1.35; cursor: pointer; list-style: none;
}
.acc-title::-webkit-details-marker { display: none; }
.acc-title::after {
  content: ""; width: 12px; height: 8px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2124' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acc[open] > .acc-title::after { transform: rotate(180deg); }
.acc-body { padding-bottom: 24px; }
.acc-body p { margin: 0; }
.plain-list { margin: 0; padding: 0; list-style: none; }

/* Hebrew units stay in the Hebrew font; only the numbers are mono. (Hebrew
   text in the mono font would make the browser look for a TTF face.) */
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec td .ltr { font-family: var(--p21-font-mono); }
.spec th, .spec td { padding: 8px 0; border-bottom: 1px solid var(--p21-silver); text-align: right; vertical-align: top; }
.spec th { font-family: var(--p21-font-he); font-weight: 400; color: var(--p21-graphite); width: 45%; padding-inline-end: 16px; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* More from the series */
.more { padding-top: 48px; border-top: 1px solid var(--p21-silver); }
.more h2 { margin-bottom: 24px; }

/* ---------- Cart page ---------- */
.cart-page { padding-bottom: 64px; }
.notice { padding: 16px; margin: 0 0 24px; background: var(--p21-paper); border: 1px solid var(--p21-silver); color: var(--p21-graphite); }
#empty .btn { margin-top: 8px; }
.cart-migrated .notice { margin: 16px 0 0; }

.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--p21-silver); }
.cart-line {
  display: grid; gap: 16px; padding-block: 24px; border-bottom: 1px solid var(--p21-silver);
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas: "thumb info" "controls controls" "gift gift";
}
.line-thumb { grid-area: thumb; display: block; aspect-ratio: 4 / 5; background: var(--p21-paper); border: 1px solid var(--p21-silver); }
.line-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.line-info { grid-area: info; min-width: 0; }
.line-name { display: block; font-size: 20px; text-decoration: none; text-align: right; }
.line-name:hover { color: var(--p21-walnut); }
.line-info .sku { margin: 4px 0 0; }
.line-controls { grid-area: controls; display: flex; align-items: flex-end; gap: 16px; }
.line-controls .field { margin: 0; }
.line-gift { grid-area: gift; }
.line-gift .field { margin: 8px 0 0; }
@media (min-width: 900px) {
  .cart-line {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    grid-template-areas: "thumb info controls" "thumb gift gift";
    gap: 8px 32px;
  }
}

.cart-summary { display: grid; gap: 8px; justify-items: start; padding-block: 24px; }
.cart-summary p { margin: 0; }
.cart-summary .btn { margin-top: 8px; width: 100%; }
@media (min-width: 900px) { .cart-summary .btn { width: auto; min-width: 240px; } }

/* ---------- Quote form ---------- */
.quote { padding-top: 32px; border-top: 1px solid var(--p21-silver); }
.quote .field { max-width: 520px; }
.quote .check { margin: 0; }
#q-submit { width: 100%; max-width: 520px; }
@media (min-width: 900px) { #q-submit { width: auto; min-width: 240px; } }
#q-submit:disabled { opacity: 0.6; cursor: progress; }
.send-failed { max-width: 520px; margin: 16px 0 0; }
.send-failed p { margin: 0; }
.send-failed p + p { margin-top: 4px; }
/* Clipped, not pushed off-screen: an off-screen box widens RTL pages */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Simple text pages ---------- */
.text-page { padding-block: 24px 64px; }
.text-page h2 { margin-top: 32px; }
.thanks-items { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--p21-silver); }
.thanks-items li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-block: 8px; border-bottom: 1px solid var(--p21-silver); }
.thanks-items .product-name { font-size: 18px; }

/* ---------- Lines and surfaces ---------- */
.rule { border: 0; border-top: 1px solid var(--p21-silver); margin: 0; }
.surface { background: var(--p21-paper); border: 1px solid var(--p21-silver); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}