:root {
  --green: #2c4530;
  --gold: #d6a419;
  /* Same hue as --gold, darkened for text use — --gold itself is ~2.2:1
     against --card/--cream (fails WCAG AA's 4.5:1 even at large text sizes).
     This clears 4.5:1 against both with margin (5.58:1 / 5.09:1). Decorative
     uses (borders, backgrounds, hover states) keep --gold unchanged. */
  --gold-text: #80620f;
  --cream: #f1f3e4;
  --card: #fffcf5;
  --border: #ddceac;
  --border-light: #ece2c9;
  --text-dark: #22301d;
  --text-body: #3a4433;
  /* Darkened from #8a8163 — original was ~3.5:1 against cream/card, below
     WCAG AA's 4.5:1 for normal text. This clears 4.5:1 against both with
     margin (4.66:1 / 5.11:1), same approach as --gold-text above. */
  --text-muted: #746c53;
  --text-olive: #5c6b52;
  --about-light: #dde5d5;
  --hero-text: #28331f;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Frank Ruhl Libre', serif;
}

html[dir="rtl"] {
  --font-display: 'Frank Ruhl Libre', serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
  padding-top: 60px;
}

a {
  color: var(--green);
}
a:hover {
  color: var(--gold);
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Nav bar ---------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 40px;
  background: rgba(241, 243, 228, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  font-family: var(--font-body);
}
.navbar .wordmark {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--text-dark);
}
.navbar .season {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--green);
  font-weight: 600;
}
.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.navbar .nav-link {
  color: var(--text-body);
  text-decoration: none;
  padding: 4px 2px;
}
.navbar .nav-link:hover {
  color: var(--gold);
}
.navbar .nav-link.active {
  color: var(--gold);
}
.navbar .cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--green);
  padding: 8px 14px;
  color: var(--green);
}
.navbar .cart-badge {
  background: var(--gold);
  color: var(--card);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text-muted);
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--border);
}
.lang-switch .lang-link {
  color: var(--text-body);
  text-decoration: none;
}
.lang-switch .lang-link:hover {
  color: var(--gold);
}
.lang-switch .lang-link.active {
  color: var(--gold);
  font-weight: 600;
}

/* ---------- Home page fixed background ---------- */
body.home-bg {
  background-color: var(--cream);
  background-image: url('../images/hero-daled-minim.jpg');
  background-size: cover;
  background-position: center -110px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* ---------- Hero ---------- */
.hero {
  height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 40px 12px 40px;
}
.hero-inner {
  width: fit-content;
  margin: 0 auto;
  padding: 34px 60px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(241, 243, 228, 0.65) 0%, rgba(241, 243, 228, 0.32) 55%, rgba(241, 243, 228, 0) 78%);
}
.hero-inner h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 22px rgba(241, 243, 228, 1), 0 1px 4px rgba(241, 243, 228, 1), 0 0 30px rgba(241, 243, 228, 0.9);
}
.hero-inner p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--hero-text);
  margin: 0 auto;
  text-shadow: 0 2px 14px rgba(241, 243, 228, 1), 0 1px 6px rgba(241, 243, 228, 1), 0 0 24px rgba(241, 243, 228, 0.95);
}

/* ---------- Sets section ---------- */
.sets-section {
  padding: 4px 0 90px 0;
  scroll-margin-top: 80px;
}
.sets-section .wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
}
.sets-heading {
  text-align: center;
  margin: 0 auto 16px auto;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 12px 20px;
  width: fit-content;
}
.sets-heading .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25.5px;
  color: var(--text-dark);
}
.sets-heading .subtitle {
  font-size: 15px;
  color: var(--text-olive);
  font-style: italic;
  margin-top: 6px;
}
.sets-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Set card ---------- */
.set-card {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 0 var(--border) inset;
  font-family: var(--font-body);
}
.set-card .accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold) 55%, var(--border) 85%, transparent);
}
.set-card .row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
}
.set-card .info {
  flex: 1;
  min-width: 0;
}
.set-card .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-dark);
  line-height: 1.15;
}
.set-card .tagline {
  font-style: italic;
  font-size: 14px;
  color: var(--text-olive);
  margin-top: 2px;
}
.set-card .price {
  text-align: end;
  flex: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-text);
}
.set-card .chevron {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  color: var(--green);
}
.set-card .expanded-panel {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 22px 20px;
  border-top: 1px solid var(--border-light);
}
.set-card .expanded-panel[hidden] {
  display: none;
}
.set-card .expanded-content {
  flex: 1;
  min-width: 0;
}
.set-card .expanded-image {
  width: 220px;
  height: 200px;
  flex: none;
}
.set-card .highlights {
  margin: 0 0 16px 0;
  padding-left: 20px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.7;
}
.set-card .actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .set-card .expanded-panel {
    flex-direction: column;
  }
  .set-card .expanded-image {
    width: 100%;
    height: 220px;
  }
  .set-card .actions {
    flex-direction: column;
  }
  /* On desktop, body.home-bg's background-attachment:fixed sizes `cover`
     against the *viewport* (a special case for fixed backgrounds), which is
     why the photo frames nicely there. `fixed` has known bugs on mobile
     Safari, so this already switched to `scroll` below — but `scroll`
     sizes `cover` against the element's own box instead, and body's own
     box is the full scrollable page (often 2000px+), not the viewport. On
     a narrow phone that turned "cover" into an extreme crop: nearly the
     entire photo (just a sliver of stone wall) instead of the three people.
     Moving the photo onto .hero itself — a normal, bounded-height box —
     sizes `cover` against that instead, back to sane hero-sized framing;
     body keeps only its solid background-color on mobile. */
  body.home-bg {
    background-image: none;
  }
  /* The heading was full desktop size (56px) with no mobile scaling, so at
     phone widths "Arba Minim Mehudar – Delivered!" wrapped to 3 lines and,
     together with the 3-line subtitle below it, the text block grew taller
     than the hero box itself — overflowing past it entirely and covering
     the photo (including the people's heads) rather than just sitting over
     the bottom of it. Shrinking the text (and the padding boxing it in)
     keeps the whole block well inside a slightly taller hero, so the top
     of the photo stays visible above it. */
  .hero {
    height: 380px;
    padding: 0 20px 12px 20px;
    background-image: url('../images/hero-daled-minim.jpg');
    background-size: cover;
    background-position: center -70px;
    background-repeat: no-repeat;
  }
  .hero-inner {
    padding: 18px 22px;
  }
  .hero-inner h1 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .hero-inner p {
    font-size: 14px;
  }
}
.btn-solid {
  text-decoration: none;
  padding: 11px 20px;
  background: var(--green);
  color: #f7f1e3;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid var(--green);
  cursor: pointer;
}
.btn-outline {
  padding: 11px 20px;
  background: transparent;
  color: var(--green);
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid var(--green);
  cursor: pointer;
}

/* ---------- Image placeholders ---------- */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #e4dcc0, #e4dcc0 8px, #eee6cb 8px, #eee6cb 16px);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
}
.img-placeholder.rounded {
  border-radius: 6px;
  overflow: hidden;
}
.img-placeholder span {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 252, 245, 0.8);
  padding: 2px 6px;
  line-height: 1.4;
}
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  z-index: 500;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
}
.whatsapp-float svg {
  width: 42px;
  height: 42px;
  fill: var(--cream);
}
.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
}
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 22px;
}
html[dir="rtl"] .whatsapp-tooltip {
  right: auto;
  left: calc(100% + 10px);
}
.image-zoom-preview {
  position: fixed;
  width: 340px;
  height: 340px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  background: var(--card);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.image-zoom-preview.visible {
  opacity: 1;
}
.media-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card);
  border-radius: 6px;
  display: block;
  border: 1px solid var(--border);
  cursor: zoom-in;
}

/* ---------- Option cards (build-your-own picker) ---------- */
.option-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
}
.option-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.option-card input {
  flex: none;
}
.option-card .option-thumb {
  width: 48px;
  height: 48px;
  flex: none;
}
.option-card .option-label {
  flex: 1;
  font-size: 14.5px;
  color: var(--text-body);
}
.custom-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 600;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.item-card {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.item-card-header .option-thumb {
  width: 48px;
  height: 48px;
  flex: none;
}
.item-card-header .option-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-body);
}
.item-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.item-card-price {
  flex: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  color: var(--gold-text);
}
.item-card-subrows {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-subrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 4px 0;
}
.item-subrow-label {
  font-size: 14.5px;
  color: var(--text-body);
}
.custom-empty-note {
  flex-basis: 100%;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- About ---------- */
.about-section {
  background: rgba(44, 69, 48, 0.82);
  color: var(--cream);
  scroll-margin-top: 80px;
  padding: 70px 40px;
}
.about-section .grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.about-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 16px 0;
}
.about-section p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--about-light);
  margin: 0;
}
.who-we-are {
  max-width: 900px;
  margin: 0 auto 50px auto;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(241, 243, 228, 0.25);
  display: flex;
  align-items: center;
  gap: 44px;
}
.who-we-are .who-photo {
  flex: none;
  width: 230px;
  height: 325px;
  border: 1px solid var(--gold);
  overflow: hidden;
}
.who-we-are .who-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.who-we-are .who-text {
  flex: 1;
}

/* ---------- FAQ ---------- */
.faq-section {
  background: rgba(241, 243, 228, 0.94);
  padding: 70px 0;
  scroll-margin-top: 80px;
}
.faq-section .wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
}
.faq-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 26px 0;
  text-align: center;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.faq-item .q {
  font-weight: 500;
  font-size: 16.5px;
  margin-bottom: 6px;
}
.faq-item .a {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}

/* ---------- Shipping ---------- */
.shipping-section {
  background: rgba(255, 252, 245, 0.94);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 70px 40px;
  scroll-margin-top: 80px;
}
.shipping-section .wrap {
  max-width: 820px;
  margin: 0 auto;
}
.shipping-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 20px 0;
  text-align: center;
}
.shipping-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  text-align: center;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}
.shipping-stats .label {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 6px;
}

/* ---------- Contact ---------- */
.contact-section {
  background: rgba(241, 243, 228, 0.94);
  padding: 40px 40px 30px 40px;
  scroll-margin-top: 80px;
}
.contact-section .wrap {
  max-width: 820px;
  margin: 0 auto;
}
.contact-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 20px 0;
  text-align: center;
}
.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  text-align: center;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}
.contact-info .label {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 6px;
}
.contact-info a {
  color: var(--text-body);
}

/* ---------- Footer ---------- */
.site-footer {
  background: rgba(241, 243, 228, 0.94);
  padding: 16px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.set-detail-footer {
  padding: 34px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* ---------- Set detail page ---------- */
.detail-page {
  background: var(--cream);
  min-height: 100vh;
  color: var(--text-dark);
}
.detail-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 50px 40px 20px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.back-link {
  color: var(--text-olive);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.back-link:hover {
  color: var(--gold);
}
.detail-left h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  margin: 14px 0 6px 0;
  line-height: 1.05;
}
.detail-left .tagline {
  font-style: italic;
  font-size: 17px;
  color: var(--text-olive);
  margin-bottom: 18px;
}
.detail-left .description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 52ch;
  margin: 0;
}
.detail-left .price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--gold-text);
  margin: 22px 0 4px 0;
}
.detail-left .price-caption {
  font-size: 13px;
  color: var(--text-muted);
}
.detail-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-images .slot {
  height: 160px;
}
.detail-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 40px;
}
.included-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 32px 36px;
}
.included-card h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
}
.included-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.included-list .item {
  display: flex;
  gap: 10px;
  font-size: 15.5px;
  color: var(--text-body);
  line-height: 1.5;
}
.included-list .bullet {
  color: var(--gold);
  flex: none;
}
.backup-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--cream);
  border-left: 2px solid var(--gold);
  font-size: 14.5px;
  color: var(--text-body);
}
.breakdown {
  margin-top: 24px;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
}
.breakdown .label {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.breakdown .row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  padding: 5px 0;
  color: var(--text-body);
}
.breakdown .row span:last-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--gold-text);
}
.pitum-group {
  margin-top: 26px;
  border-top: 1px solid var(--border-light);
  padding-top: 22px;
}
.pitum-group h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px 0;
}
.pitum-group h3.category-heading {
  font-size: 28px;
  color: var(--gold-text);
  margin: 0 0 16px 0;
}
.pitum-options {
  display: flex;
  gap: 22px;
  font-size: 14.5px;
  color: var(--text-body);
}
.pitum-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.purchase-row {
  margin-top: 30px;
  border-top: 1px solid var(--border-light);
  padding-top: 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--green);
}
.qty-stepper button {
  width: 38px;
  height: 40px;
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--green);
}
.qty-stepper .qty {
  width: 40px;
  text-align: center;
  font-size: 15px;
}
.accessory-qty-stepper button,
.item-qty-stepper button {
  width: 32px;
}
.accessory-qty-stepper .qty,
.item-qty-stepper .qty {
  width: 28px;
}
.add-to-cart-btn {
  padding: 13px 30px;
  background: var(--green);
  color: var(--cream);
  border: 1px solid var(--green);
  font-size: 14.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.add-to-cart-btn:disabled {
  background: var(--border);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.view-cart-link {
  color: var(--green);
  font-size: 14px;
  text-decoration: underline;
}

/* ---------- Cart / checkout page ---------- */
.cart-page {
  background: var(--cream);
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-dark);
}
.cart-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px 40px 90px 40px;
}
.cart-wrap h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  margin: 0 0 32px 0;
}
.payment-notice {
  background: var(--cream);
  border: 1px solid var(--gold);
  color: var(--text-body);
  padding: 14px 18px;
  font-size: 14.5px;
  margin-bottom: 24px;
}
.cart-panel {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 50px;
  text-align: center;
}
.cart-panel .headline {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 12px;
}
.cart-panel p {
  font-size: 15.5px;
  color: var(--text-body);
  line-height: 1.7;
}
.cart-panel .empty-msg {
  font-size: 16px;
  color: var(--text-body);
  margin-bottom: 18px;
}
.min-order-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.min-order-msg {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.order-summary {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 30px;
}
.order-summary h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.order-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px 0;
}
.browse-sets-link {
  color: var(--green);
  font-size: 13px;
  text-decoration: underline;
  white-space: nowrap;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.cart-item .name {
  font-size: 15px;
}
.cart-item .meta {
  font-size: 12.5px;
  color: var(--text-muted);
}
.cart-item .right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cart-item .line-total {
  font-size: 15px;
}
.cart-item .remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}
.accessories-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.order-summary > .accessories-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.accessories-section h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px 0;
}
.accessories-locked-note {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 10px 0;
}
.accessories-removed-note {
  font-size: 12.5px;
  color: var(--gold-text);
  font-weight: 600;
  margin: 0 0 10px 0;
}
.qty-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.accessory-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 16px;
}
.accessory-option .accessory-qty-stepper {
  flex: none;
}
.accessory-thumb {
  width: 40px;
  height: 40px;
  flex: none;
}
.accessory-option .accessory-name {
  flex: 1;
}
.accessory-option .accessory-price {
  color: var(--text-muted);
  font-size: 15px;
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.cart-total-row .amount {
  color: var(--gold-text);
}
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;
}
/* Visually hidden but announced by screen readers — pairs with the
   placeholder-only checkout fields below via <label for>, since the design
   relies on placeholder text visually rather than visible labels. */
.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;
}
.msh-input {
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dark);
  width: 100%;
}
.msh-input:focus {
  outline: 1px solid var(--gold);
}
/* type="tel" inputs default to LTR in most browsers regardless of page
   direction (phone digits are expected LTR content) — that also drags the
   Hebrew/Yiddish placeholder text left-aligned instead of right-aligned like
   every other field, so it's forced back to match on RTL pages. */
html[dir="rtl"] input[type="tel"].msh-input {
  direction: rtl;
  text-align: right;
}
textarea.msh-input {
  resize: vertical;
  min-height: 44px;
}
.checkout-subheading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 6px 0 -4px 0;
}
.address-detail-row {
  display: flex;
  gap: 10px;
}
.address-detail-row .msh-input {
  flex: 1;
  min-width: 0;
}
.payment-method-cards {
  flex-direction: row;
  gap: 12px;
}
.payment-method-cards .option-card {
  flex: 1;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 14px 10px;
}
.payment-method-cards .option-thumb.payment-icon {
  width: auto;
  height: 24px;
  color: var(--green);
}
.payment-method-cards .option-label {
  font-size: 13.5px;
  flex: none;
}
.date-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 4px;
}
.date-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
}
.submit-btn {
  margin-top: 10px;
  padding: 14px;
  background: var(--green);
  color: var(--cream);
  border: none;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
}
.submit-btn:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.missing-fields {
  font-size: 12.5px;
  color: #a3742a;
  text-align: center;
  background: #fbf1de;
  border: 1px solid #e6cf9e;
  padding: 8px 10px;
}
.checkout-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.checkout-error {
  font-size: 13px;
  color: #a83232;
  text-align: center;
  background: #fbeaea;
  border: 1px solid #e3b3b3;
  padding: 10px;
}

@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  body {
    padding-top: 135px;
  }
  .sets-section,
  .about-section,
  .faq-section,
  .shipping-section,
  .contact-section {
    scroll-margin-top: 150px;
  }
  .navbar .nav-links {
    flex-wrap: wrap;
    gap: 14px;
  }
  .about-section .grid,
  .detail-grid,
  .cart-grid {
    grid-template-columns: 1fr;
  }
  .shipping-stats,
  .contact-info {
    grid-template-columns: 1fr;
  }
  .who-we-are {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .who-we-are .who-photo {
    width: 200px;
    height: 282px;
  }
}

@media (max-width: 520px) {
  .address-detail-row {
    flex-direction: column;
  }
  /* The fixed navbar wraps onto more rows as it runs out of width (its own
     children — nav links, cart, language switch — wrap independently too),
     so its real height keeps growing well past what the 900px breakpoint's
     135px reserves. On a narrow phone that gap was letting the top of the
     hero (and the first word of its heading) render underneath the fixed
     nav. This is a coarse fixed value, same as the 135px it's overriding —
     not computed from the navbar's actual rendered height — so it may still
     need tuning for some widths. */
  body {
    padding-top: 175px;
  }
}