/* ==================================================================
   ARTORA — artora.co.il
   Built to the 2026 brand guidelines:
   70 % cream · 20 % burgundy · 10 % sand, olive and ink.
   Display: Cormorant Garamond 300. Text & labels: Jost 300 / 500.
   Arabic: Almarai + IBM Plex Sans Arabic. Hebrew: Frank Ruhl Libre + Assistant.
   ================================================================== */

@import url("../fonts/fonts.css");

/* ------------------------------------------------------------ tokens */
:root {
  --burgundy:      #6C1015;
  --burgundy-deep: #560D11;
  --cream:         #FCF6E9;
  --cream-warm:    #F6EEDC;
  --sand:          #AFA581;
  --sand-soft:     #D8D1BC;
  --olive:         #48451A;
  --ink:           #221F1C;
  --ink-soft:      #4A443E;

  --line:          rgba(34, 31, 28, 0.15);
  --line-soft:     rgba(34, 31, 28, 0.08);

  --display: "Cormorant Garamond", "Frank Ruhl Libre", Georgia, serif;
  --text:    "Jost", "Assistant", "Helvetica Neue", Arial, sans-serif;

  --w-page: 1180px;
  --w-text: 60ch;

  --pad-x: clamp(20px, 5vw, 56px);
  --sec-y: clamp(56px, 7.5vw, 108px);

  --track: 0.26em;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[lang="ar"] {
  --display: "Almarai", "Cormorant Garamond", serif;
  --text: "IBM Plex Sans Arabic", "Jost", sans-serif;
  --track: 0.1em;
}
html[lang="he"] {
  --display: "Frank Ruhl Libre", "Cormorant Garamond", serif;
  --text: "Assistant", "Jost", sans-serif;
  --track: 0.1em;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 300 17px/1.75 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--burgundy); color: var(--cream); }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

/* --------------------------------------------------------- utilities */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--warm { background: var(--cream-warm); }

.label {
  display: block;
  font: 500 11px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 16px;
}
html[lang="ar"] .label,
html[lang="he"] .label { font-size: 12.5px; text-transform: none; font-weight: 400; }

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
html[lang="ar"] .display { line-height: 1.38; letter-spacing: 0; }
html[lang="he"] .display { line-height: 1.26; letter-spacing: 0; }

.h1 { font-size: clamp(38px, 5.6vw, 66px); }
.h2 { font-size: clamp(29px, 3.7vw, 46px); }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }

.lede {
  text-wrap: pretty;
  font-size: clamp(16.5px, 1.35vw, 18.5px);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: var(--w-text);
}

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

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 200;
  background: var(--burgundy);
  color: var(--cream);
  padding: 12px 20px;
  font: 500 11px/1 var(--text);
  letter-spacing: var(--track);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ----------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px 28px;
  font: 500 12px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  border: 1px solid var(--burgundy);
  background: var(--burgundy);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
html[lang="ar"] .btn,
html[lang="he"] .btn { font-size: 14px; text-transform: none; font-weight: 400; }

.btn:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }

.btn--ghost { background: transparent; color: var(--burgundy); }
.btn--ghost:hover { background: var(--burgundy); color: var(--cream); }

.btn--light { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
.btn--light:hover { background: transparent; color: var(--cream); border-color: var(--cream); }

.btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(252, 246, 233, 0.5);
}
.btn--ghost-light:hover { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.link {
  display: inline-block;
  font: 500 11.5px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--burgundy);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--sand);
  transition: border-color 0.25s var(--ease);
  white-space: nowrap;
}
html[lang="ar"] .link,
html[lang="he"] .link { font-size: 14px; text-transform: none; font-weight: 400; }
.link:hover { border-color: var(--burgundy); }

/* ------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.brand { flex: none; }
.brand img { width: 122px; }

.nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.nav a {
  font: 500 11.5px/1 var(--text);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
html[lang="ar"] .nav a,
html[lang="he"] .nav a { font-size: 15px; text-transform: none; font-weight: 400; letter-spacing: 0; }
.nav a:hover { color: var(--burgundy); }
.nav a[aria-current="page"] { color: var(--burgundy); border-bottom-color: var(--burgundy); }

.header-tools { display: flex; align-items: center; gap: 14px; }

.lang { display: flex; align-items: center; border: 1px solid var(--line); }
.lang button {
  background: none;
  border: 0;
  padding: 7px 10px;
  font: 500 11px/1 var(--text);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang button + button { border-inline-start: 1px solid var(--line); }
.lang button:hover { color: var(--burgundy); }
.lang button[aria-pressed="true"] { background: var(--burgundy); color: var(--cream); }

.header-cta { display: inline-flex; }
.header-cta .btn { padding: 11px 20px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------- hero
   Cream ground with one burgundy block behind the photograph — the
   pale-outside / deep-inside reversal the brand book asks for, rather
   than a full-bleed image with a dark wash over it.                  */
.hero { padding-block: clamp(44px, 6vw, 92px) clamp(52px, 7vw, 104px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.hero .lede { max-width: 46ch; }

.hero__meta {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font: 500 11px/1.6 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
html[lang="ar"] .hero__meta,
html[lang="he"] .hero__meta { font-size: 13.5px; text-transform: none; font-weight: 400; }

.hero__media {
  position: relative;
  padding-block-start: clamp(16px, 2vw, 26px);
  padding-inline-end: clamp(16px, 2vw, 26px);
}
.hero__media::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 72%;
  height: 64%;
  background: var(--burgundy);
}
.hero__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* page heading for the inner pages — no numbers, no decoration */
.page-head {
  padding-block: clamp(44px, 5.5vw, 84px) clamp(30px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.page-head .lede { margin-top: 20px; }

/* --------------------------------------------------- discipline rows
   The four fields as an index, not as four photo cards. The actual
   service list does the selling.                                     */
.disc { border-top: 1px solid var(--line); }
.disc-row {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.7fr) auto;
  gap: clamp(14px, 3.4vw, 52px);
  align-items: start;
  padding-block: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.disc-row:hover { background: rgba(175, 165, 129, 0.09); }
.disc-row h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.2;
}
html[lang="ar"] .disc-row h3 { line-height: 1.45; }
.disc-row p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.disc-row .link { margin-top: 6px; }

/* -------------------------------------------------------- statement */
.statement {
  background: var(--burgundy);
  color: var(--cream);
  padding-block: clamp(50px, 6.5vw, 92px);
}
.statement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px 48px;
}
.statement .words {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.25;
}
html[lang="ar"] .statement .words { line-height: 1.5; }
.statement p {
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(252, 246, 233, 0.78);
  max-width: 42ch;
}

/* ----------------------------------------------------- feature block */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.feature--flip .feature__media { order: 2; }
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__media--tall img { aspect-ratio: 3 / 4; }
.feature--wide { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }

/* ------------------------------------------------------ service list */
.offer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(26px, 3.6vw, 52px) clamp(26px, 4vw, 60px);
}
.offer__group h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(21px, 2vw, 26px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--burgundy);
}
.offer__group > p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 12px 0 2px;
}

.tick-list li {
  padding-block: 13px;
  font-size: 15.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--line-soft);
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list--tight { columns: 2; column-gap: 28px; }
.tick-list--tight li { padding-block: 9px; break-inside: avoid; }
.tick-list--tight li:last-child { border-bottom: 1px solid var(--line-soft); }
.tick-list li span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* workshops read as an index, two columns of plain entries */
.ws-index { columns: 2; column-gap: clamp(28px, 5vw, 72px); }
.ws-index li {
  break-inside: avoid;
  padding-block: 17px;
  border-bottom: 1px solid var(--line-soft);
}
.ws-index h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
  margin-bottom: 4px;
}
html[lang="ar"] .ws-index h3 { line-height: 1.5; }
.ws-index p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* a running list, set as prose rather than as a wall of chips */
.runlist {
  font-size: 16px;
  line-height: 2.05;
  color: var(--ink-soft);
  max-width: 64ch;
}
.runlist i { font-style: normal; color: var(--ink); }

/* --------------------------------------------------------- gift band */
.giftband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.giftband__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.giftband__body { padding: clamp(38px, 5.5vw, 78px) clamp(26px, 4.5vw, 64px); }

.terms {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(252, 246, 233, 0.24);
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(252, 246, 233, 0.76);
}

/* ------------------------------------------------------------ contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.detail-list li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding-block: 17px;
  border-bottom: 1px solid var(--line-soft);
}
.detail-list li:first-child { padding-top: 0; }
.detail-list svg { width: 19px; height: 19px; flex: none; margin-top: 4px; color: var(--burgundy); }
.detail-list dt {
  font: 500 10.5px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 6px;
}
html[lang="ar"] .detail-list dt,
html[lang="he"] .detail-list dt { font-size: 12.5px; text-transform: none; font-weight: 400; }
.detail-list dd { margin: 0; font-size: 16.5px; }
.detail-list a:hover { color: var(--burgundy); }

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.field label {
  display: block;
  font: 500 10.5px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
html[lang="ar"] .field label,
html[lang="he"] .field label { font-size: 12.5px; text-transform: none; font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: 16px;
  font-weight: 300;
  transition: border-color 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
html[dir="rtl"] .field select {
  background-position: left 13px center, left 19px center;
  background-image: linear-gradient(135deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(45deg, var(--ink-soft) 50%, transparent 50%);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--burgundy);
  outline: none;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form__note { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

.map-note {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--cream-warm);
  border: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- footer */
.site-footer {
  background: var(--burgundy);
  color: rgba(252, 246, 233, 0.82);
  padding-block: clamp(48px, 6vw, 76px) 30px;
}
.site-footer a:hover { color: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 52px);
}
.site-footer .brand img { width: 160px; }
.footer-tagline {
  margin-top: 18px;
  font: 500 11px/1.9 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--sand);
}
html[lang="ar"] .footer-tagline,
html[lang="he"] .footer-tagline { font-size: 13.5px; text-transform: none; font-weight: 400; }
.footer-col h4 {
  font: 500 10.5px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 18px;
}
html[lang="ar"] .footer-col h4,
html[lang="he"] .footer-col h4 { font-size: 12.5px; text-transform: none; font-weight: 400; }
.footer-col li { margin-bottom: 10px; font-size: 15px; }
.footer-bottom {
  margin-top: clamp(36px, 4.5vw, 58px);
  padding-top: 24px;
  border-top: 1px solid rgba(252, 246, 233, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(252, 246, 233, 0.6);
}
.social { display: flex; gap: 10px; }
.social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(252, 246, 233, 0.28);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.social a:hover { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
.social svg { width: 16px; height: 16px; }

.wa-float {
  position: fixed;
  inset-inline-end: 18px;
  inset-block-end: 18px;
  z-index: 90;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: var(--burgundy);
  color: var(--cream);
  box-shadow: 0 5px 20px rgba(34, 31, 28, 0.2);
  transition: background 0.25s var(--ease);
}
.wa-float:hover { background: var(--burgundy-deep); }
.wa-float svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------ mobile */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--pad-x) 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav a {
    padding-block: 15px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
  }
  html[lang="ar"] .nav a, html[lang="he"] .nav a { font-size: 16px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line-soft); }
  .header-cta { display: none; }

  .hero__grid,
  .feature, .feature--wide,
  .contact-grid,
  .giftband { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__media { order: 0; }
  .hero__media { max-width: 460px; }
  .giftband__media img { min-height: 250px; }

  .disc-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .disc-row .link { margin-top: 4px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .ws-index { columns: 1; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.5; }
  .statement__inner { display: block; }
  .statement p { margin-top: 18px; }
}

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* -------------------------------------------------------------- print */
@media print {
  .site-header, .wa-float, .btn-row, .form { display: none; }
  body { background: #fff; color: #000; }
}

/* ==================================================================
   SHOP
   Catalogue plus a cart that composes a WhatsApp order. Same cream
   ground and hairline rules as the rest of the site — the products
   carry the colour, the furniture stays quiet.
   ================================================================== */

/* filter chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(26px, 3.5vw, 44px);
}
.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: 500 11.5px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
html[lang="ar"] .chip,
html[lang="he"] .chip { font-size: 14px; text-transform: none; font-weight: 400; }
.chip:hover { color: var(--burgundy); border-color: var(--sand); }
.chip[aria-pressed="true"] {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}

/* product grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  transition: border-color 0.25s var(--ease);
}
.product:hover { border-color: var(--sand); }
.product__media { overflow: hidden; aspect-ratio: 1 / 1; background: var(--cream-warm); }
.product__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product:hover .product__media img { transform: scale(1.03); }

.product__body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  margin-bottom: 7px;
}
html[lang="ar"] .product__name { line-height: 1.5; }
.product__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.product__foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product__price {
  font: 400 17px/1 var(--text);
  color: var(--ink);
  white-space: nowrap;
}
.product__price--ask {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: normal;
}
.product__add {
  border: 1px solid var(--burgundy);
  background: transparent;
  color: var(--burgundy);
  padding: 10px 16px;
  font: 500 11px/1 var(--text);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
html[lang="ar"] .product__add,
html[lang="he"] .product__add { font-size: 13.5px; text-transform: none; font-weight: 400; }
.product__add:hover { background: var(--burgundy); color: var(--cream); }
.product__add.is-added { background: var(--olive); border-color: var(--olive); color: var(--cream); }

/* cart button in the header */
.cart-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-btn:hover { border-color: var(--burgundy); color: var(--burgundy); }
.cart-btn svg { width: 19px; height: 19px; }
.cart-count {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--burgundy);
  color: var(--cream);
  font: 500 11px/19px var(--text);
  text-align: center;
}

/* drawer */
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(34, 31, 28, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 150;
  width: min(420px, 100%);
  background: var(--cream);
  border-inline-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(var(--cart-out, 105%));
  /* fully inert when closed: nothing to tab into, nothing to scroll to */
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0.32s var(--ease);
}
html[dir="rtl"] .cart-drawer { --cart-out: -105%; }
.cart-drawer.is-open { transform: none; visibility: visible; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.cart-head h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 24px;
}
.cart-close {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-close:hover { border-color: var(--burgundy); color: var(--burgundy); }

.cart-body { flex: 1; overflow-y: auto; padding: 4px var(--pad-x) 20px; }

.cart-empty {
  padding-block: 44px;
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-item img { width: 60px; height: 60px; object-fit: cover; flex: none; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__name { font-size: 15px; line-height: 1.4; }
.cart-item__line { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

.qty { display: flex; align-items: center; border: 1px solid var(--line); flex: none; }
.qty button {
  width: 30px; height: 30px;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.qty button:hover { color: var(--burgundy); }
.qty span { min-width: 26px; text-align: center; font-size: 14px; }

.cart-foot { border-top: 1px solid var(--line); padding: 18px var(--pad-x) 22px; }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  font-size: 15px;
}
.cart-total strong { font-weight: 400; font-size: 21px; }
.cart-mixed-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-bottom: 12px;
}
.cart-foot .field { margin-bottom: 12px; }
.cart-foot .field input,
.cart-foot .field textarea { padding: 11px 13px; font-size: 15px; }
.cart-foot .field textarea { min-height: 66px; }
.cart-foot .btn { width: 100%; justify-content: center; }
.cart-foot .form__note { margin-top: 12px; font-size: 12.5px; }

@media (max-width: 680px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .product__body { padding: 15px 15px 14px; }
  .product__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .product__add { width: 100%; }
}

.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cart-empty .link { align-self: center; }

/* the three words, mapped the way the brief maps them */
.words-map { margin-top: 26px; max-width: 62ch; }
.words-map li {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: 13px;
  border-top: 1px solid rgba(252, 246, 233, 0.2);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(252, 246, 233, 0.8);
}
.words-map i {
  font-style: normal;
  color: var(--sand);
  min-width: 5.5em;
}

/* the vision, set large and on its own */
.vision-line {
  font-size: clamp(25px, 3.4vw, 42px);
  max-width: 24ch;
  color: var(--burgundy);
}
html[lang="ar"] .vision-line { max-width: 22ch; }

/* ------------------------------------------- narrow phones (360px wide) */
@media (max-width: 400px) {
  .site-header__inner { gap: 12px; }
  .brand img { width: 104px; }
  .header-tools { gap: 8px; }
  .lang button { padding: 7px 8px; }
}

/* ------------------------------------ nine-item menu (added with learn.html)
   The header may run wider than the page column, the inline menu drops the
   "home" link (the logo already goes home), and the burger takes over
   earlier so nothing is ever squeezed. */
.site-header__inner { max-width: 1480px; }
.nav { gap: clamp(14px, 1.35vw, 24px); }
html[lang="ar"] .nav a, html[lang="he"] .nav a { font-size: 14.5px; }
@media (min-width: 1321px) {
  .nav a[href="index.html"] { display: none; }
}
@media (max-width: 1320px) {
  .burger { display: block; }
  .header-cta { display: none; }
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--pad-x) 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav a { padding-block: 15px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
  html[lang="ar"] .nav a, html[lang="he"] .nav a { font-size: 16px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line-soft); }
}

/* ------------------------------------------------ announcement bar
   Filled from the admin panel's settings; stays hidden otherwise. */
.announce {
  background: var(--burgundy);
  color: var(--cream);
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  padding: 9px var(--pad-x);
}

/* ------------------------------------------------- order received panel */
.cart-done { padding: 8px 0 20px; }
.cart-done__title { font-size: 26px; line-height: 1.3; }
.cart-done__num { margin: 10px 0 14px; color: var(--ink-soft); }
.cart-done__num b { font-weight: 500; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.cart-done .btn-row { margin-top: 20px; }