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

body {
  margin: 0;
  font-family: var(--roots-font-family);
  background: var(--roots-bg-page);
  color: var(--roots-text-body);
  direction: rtl;
}

/* —— Page shell (mobile Figma 375) —— */
.roots-menu {
  background: var(--roots-bg-page);
  min-height: 100dvh;
}

.roots-menu__inner {
  width: 100%;
  max-width: var(--roots-content-max);
  margin-inline: auto;
  padding: 0 var(--roots-space-16) var(--roots-space-32);
}

/* —— Sticky category nav (mobile) —— */
.roots-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--roots-space-16));
  padding: var(--roots-space-12) var(--roots-space-16);
  background: rgba(232, 231, 223, 0.94);
  backdrop-filter: blur(6px);
}

.roots-nav__chips {
  display: grid;
  grid-template-columns: repeat(3, var(--roots-chip-width));
  justify-content: center;
  gap: var(--roots-space-8);
}

.roots-chip {
  width: var(--roots-chip-width);
  height: var(--roots-chip-height);
  margin: 0;
  padding: 0 var(--roots-space-8);
  border: none;
  border-radius: var(--roots-radius-md);
  font: var(--roots-font-chip);
  color: var(--roots-text-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.roots-chip:hover {
  transform: translateY(-1px);
}

/* —— Hero —— */
.roots-hero {
  position: relative;
  margin: 0 0 var(--roots-space-16);
  border-radius: var(--roots-radius-lg);
  overflow: hidden;
}

.roots-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 678 / 444;
  object-fit: cover;
  object-position: center center;
}

.roots-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--roots-hero-overlay-gap);
  padding: var(--roots-hero-overlay-pad);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.roots-hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--roots-hero-overlay-gap);
  width: min(92%, 320px);
  max-width: 100%;
}

.roots-hero__logo {
  width: var(--roots-hero-logo-w);
  max-width: 100%;
  max-height: var(--roots-hero-logo-h);
  height: auto;
  object-fit: contain;
}

.roots-hero__rule {
  display: none;
  flex-shrink: 0;
  width: var(--roots-hero-rule-w);
  height: 1px;
  background: #fff;
}

.roots-hero__tagline {
  width: var(--roots-hero-tagline-w);
  max-width: 100%;
  max-height: var(--roots-hero-tagline-h);
  height: auto;
  object-fit: contain;
}

/* Tablet: show divider, slightly roomier hero */
@media (min-width: 560px) {
  .roots-hero__img {
    min-height: clamp(200px, 42vw, 320px);
  }

  .roots-hero__rule {
    display: block;
  }
}

@media (min-width: 768px) {
  .roots-hero {
    border-radius: clamp(var(--roots-radius-lg), 2vw, var(--roots-radius-hero-desktop));
  }

  .roots-hero__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.52) 100%);
  }

  .roots-hero__brand {
    width: min(85%, 400px);
  }
}

/* —— Menu sections (mobile: stacked) —— */
.roots-sections {
  display: flex;
  flex-direction: column;
  gap: var(--roots-space-24);
}

.roots-sections__row {
  display: contents;
}

.roots-section {
  padding-bottom: var(--roots-space-24);
}

.roots-sections__row .roots-section:last-child {
  padding-bottom: 0;
}

.roots-section__bar {
  height: 6px;
  border-radius: var(--roots-radius-sm);
  margin-bottom: var(--roots-space-12);
  scroll-margin-top: var(--roots-scroll-offset);
}

.roots-section__head {
  text-align: right;
  margin-bottom: var(--roots-space-16);
}

.roots-section__title {
  margin: 0 0 6px;
  font: var(--roots-font-section);
  color: var(--roots-text-primary);
}

.roots-section__subtitle {
  margin: 0;
  font: var(--roots-font-subtitle);
  color: var(--roots-text-body);
}

/* —— Menu cards —— */
.roots-cards {
  display: flex;
  flex-direction: column;
  gap: var(--roots-space-12);
}

/* Text left, image right (LTR flex); Hebrew stays RTL inside body */
.roots-card {
  display: flex;
  flex-direction: row;
  direction: ltr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--roots-surface-card);
  border-radius: var(--roots-radius-card);
  overflow: hidden;
}

.roots-card__body {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  direction: rtl;
  text-align: right;
  min-width: 0;
  padding: var(--roots-space-12);
}

.roots-card__title {
  margin: 0 0 var(--roots-space-8);
  font: var(--roots-font-section);
  color: var(--roots-text-primary);
}

.roots-card__desc {
  margin: 0;
  font: var(--roots-font-body);
  line-height: 1.45;
  color: var(--roots-text-body);
}

.roots-card__price {
  margin: auto 0 0;
  padding-top: var(--roots-space-12);
  font: var(--roots-font-section);
  color: var(--roots-text-primary);
}

.roots-card__media {
  flex: 0 0 var(--roots-card-image-width);
  width: var(--roots-card-image-width);
  min-width: var(--roots-card-image-min);
  max-width: var(--roots-card-image-max);
  align-self: stretch;
  margin: 0;
}

.roots-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* —— Footer —— */
.roots-footer {
  margin-top: 0;
  scroll-margin-top: var(--roots-scroll-offset);
  padding: var(--roots-space-24);
  background: var(--roots-bg-footer);
  border-radius: var(--roots-radius-lg);
  text-align: right;
}

.roots-footer__title {
  margin: 0 0 var(--roots-space-12);
  font: var(--roots-font-section);
  color: var(--roots-text-primary);
}

.roots-footer__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.roots-footer__line {
  margin: 0;
  font: var(--roots-font-body);
  line-height: 1.45;
  color: var(--roots-text-body);
}

.roots-footer__line--bold {
  font-weight: 900;
  color: var(--roots-text-primary);
}

/* —— Desktop: hero + 3-column section grid (Figma desktop) —— */
@media (min-width: 1024px) {
  body,
  .roots-menu {
    background: var(--roots-bg-warm);
  }

  .roots-menu__inner {
    padding: var(--roots-space-32) var(--roots-space-32) var(--roots-space-32);
  }

  /* Pill nav row — sticky + roomy bar (matches preview spacing intent) */
  .roots-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 0 var(--roots-space-24);
    padding: var(--roots-space-24) var(--roots-space-32);
    background: rgba(242, 238, 227, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .roots-section__bar,
  .roots-footer {
    scroll-margin-top: 96px;
  }

  .roots-nav__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--roots-space-12);
    min-height: 52px;
    padding: var(--roots-space-8) 0;
  }

  .roots-chip {
    width: auto;
    height: auto;
    min-height: 36px;
    padding: 8px 20px;
    border-radius: var(--roots-radius-pill);
  }

  /* Wide hero with large radius + overlay rule */
  .roots-hero {
    margin-bottom: var(--roots-space-32);
    border-radius: var(--roots-radius-hero-desktop);
  }

  .roots-hero__img {
    max-height: min(420px, 42vw);
  }

  .roots-hero__brand {
    width: min(75%, 480px);
  }

  /* Section rows: 3 cols top, 2 cols bottom aligned to the right (RTL) */
  .roots-sections {
    gap: var(--roots-grid-gap);
  }

  .roots-sections__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--roots-grid-gap);
    row-gap: var(--roots-grid-gap);
    align-items: start;
  }

  .roots-sections__row--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc((100% - 2 * var(--roots-grid-gap)) / 3 * 2 + var(--roots-grid-gap));
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .roots-section {
    padding-bottom: 0;
    min-width: 0;
  }

  .roots-section__bar {
    height: 2px;
    border-radius: 0;
    margin-bottom: var(--roots-space-12);
  }

  .roots-section__head {
    margin-bottom: var(--roots-space-16);
  }

  .roots-cards {
    display: flex;
    flex-direction: column;
    gap: var(--roots-space-12);
  }

  .roots-card__media {
    max-width: 128px;
  }

  .roots-card__img {
    min-height: 120px;
  }

  .roots-footer {
    max-width: 720px;
    margin-inline: auto;
    margin-top: var(--roots-space-8);
  }
}

/* —— Theme chrome (header/footer parts wrapping the .roots-menu content) —— */
.site-header.roots-bar-header,
.roots-bar-header {
  padding: var(--roots-space-12) var(--roots-space-16);
  background: var(--roots-bg-page);
  text-align: center;
}

.site-header.roots-bar-header .wp-block-site-title a,
.roots-bar-header .wp-block-site-title a {
  color: var(--roots-text-primary);
  text-decoration: none;
  font: var(--roots-font-chip);
  letter-spacing: 0.02em;
}

.site-footer.roots-bar-footer,
.roots-bar-footer {
  padding: var(--roots-space-24) var(--roots-space-16);
  background: var(--roots-bg-footer);
  color: var(--roots-text-body);
  text-align: center;
}

.roots-bar-footer__credit {
  margin: 0;
  font: var(--roots-font-body);
  letter-spacing: 0.04em;
}

.roots-bar-main {
  background: var(--roots-bg-page);
}

@media (min-width: 1024px) {
  .roots-bar-main {
    background: var(--roots-bg-warm);
  }
}