/* Below-the-fold styles. Loaded on every page, but not render-blocking. */

/* ---------- header search + cart ---------- */
.site-header__start { display: flex; align-items: center; gap: .75rem; flex: 1 1 0; min-inline-size: 0; }
.site-header__end { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; }
.site-search { display: flex; flex: 1 1 auto; max-inline-size: 320px; }
.site-search input[type="search"] {
  flex: 1;
  min-inline-size: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-inline-end: 0;
  font: inherit;
  background: var(--bg-soft);
}
.site-search .btn { padding-inline: 1rem; }

.site-cart { display: flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 700; }
.site-cart__count {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem; block-size: 1.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .8125rem;
}

/* ---------- navigation ---------- */
.nav { position: relative; }
.nav__list, .nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-block: .5rem; }
.nav__link, .nav__toggle {
  display: inline-block;
  font-size: 19px;
  padding: .5rem .25rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Ploni Medium reads better than a synthesised bold at nav sizes. */
.nav__item--d0 > .nav__link, .nav__item--d0 > .nav__toggle { font-weight: 400; }
.nav__list { justify-content: center; }
/* The chevron is the only signal that an item has a submenu, so it is sized to
   be noticed and tinted with the brand colour.
   Drawn as a mask rather than rotated borders: border-inline-end flips under
   RTL, so a rotated "L" pointed sideways instead of down. A mask rotates the
   same way in both directions. */
.nav__toggle::after {
  content: "";
  display: inline-block;
  inline-size: .7em;
  block-size: .7em;
  margin-inline-start: .4em;
  vertical-align: -.08em;
  background: var(--brand);
  -webkit-mask: var(--mh-chevron) center / contain no-repeat;
  mask: var(--mh-chevron) center / contain no-repeat;
  transition: transform .2s ease;
}
.nav__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* A parent that also links somewhere keeps its own arrow button clickable. */
.nav__toggle--adjacent { padding-inline: .35rem; }

.nav__item { position: relative; }
.nav__sub {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  min-inline-size: 15rem;
  padding: .5rem 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgb(0 0 0 / .1);
  z-index: 40;
}
.nav__sub .nav__sub { inset-block-start: 0; inset-inline-start: 100%; }
.nav__item.has-children:focus-within > .nav__sub,
.nav__toggle[aria-expanded="true"] + .nav__sub,
.nav__toggle[aria-expanded="true"] ~ .nav__sub { display: block; }
.nav__sub .nav__link { display: block; padding: .5rem 1rem; }
.nav__sub .nav__link:hover { background: var(--bg-soft); text-decoration: none; }

.nav__burger { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; }

/* Panel-only chrome: hidden while the nav is a desktop bar. */
.nav__panelhead, .nav__search, .nav__panelclose { display: none; }

@media (max-width: 899px) {
  .nav__burger { display: block; }

  /* The nav becomes a sliding overlay rather than a strip under the icon:
     with 52 items across three levels, an inline dropdown pushed the whole
     page down and left no room for the search. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgb(0 0 0 / .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; }

  .nav__inner {
    position: absolute;
    inset-block: 0;
    /* Opens from the right, the same side as the burger that summons it. */
    right: 0; /* rtl-exempt: fixed edge, independent of text direction */
    inline-size: min(360px, 88vw);
    max-inline-size: none;
    background: #fff;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22, .68, .32, 1);
  }
  body.nav-open .nav__inner { transform: translateX(0); }

  .nav__panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--line);
  }
  .site-logo--panel { margin: 0; }
  .site-logo--panel img { max-block-size: 44px; inline-size: auto; }
  .nav__panelclose {
    display: block;
    background: none;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
  }

  .nav__search { display: block; margin-block: 1rem; }
  .nav__search .site-search { max-inline-size: none; }
  .nav__search .ac { position: static; box-shadow: none; margin-block-start: .5rem; }

  .nav__list { flex-direction: column; gap: 0; justify-content: flex-start; }
  .nav__item--d0 { border-block-end: 1px solid var(--line); }
  .nav__item--d0 > .nav__link, .nav__item--d0 > .nav__toggle { padding-block: .85rem; }
  .nav__link, .nav__toggle { text-align: start; }
  /* A toggle that is the whole row, i.e. a parent with no link of its own.
     :only-of-type would be wrong here: it matches on element type, and the
     adjacent chevron is also the single <button> in its item, so it took the
     full width and wrapped onto its own line. */
  .nav__item > .nav__toggle:not(.nav__toggle--adjacent) { inline-size: 100%; }

  /* A parent that also links somewhere renders as link + separate toggle.
     Floating the toggle dropped it onto its own line, so the pair sits on one
     row with the link taking the slack. */
  .nav__item.has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item.has-children > .nav__link { flex: 1; }
  .nav__item.has-children > .nav__toggle--adjacent {
    float: none;
    flex: 0 0 auto;
    padding-block: .85rem;
    padding-inline: .75rem;
  }
  .nav__item.has-children > .nav__sub { flex-basis: 100%; }

  .nav__sub {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    padding: 0 1rem .5rem;
    min-inline-size: 0;
  }
  /* Only the toggle opens a submenu here; :focus-within would spring them all
     as soon as anything inside the panel took focus.
     The open rule has to out-specify that reset: clicking the toggle focuses
     it, which makes :focus-within true, and at equal weight the reset was
     winning and the submenu never appeared. */
  .nav__item.has-children:focus-within > .nav__sub { display: none; }
  .nav__item.has-children > .nav__toggle[aria-expanded="true"] + .nav__sub,
  .nav__item.has-children > .nav__toggle[aria-expanded="true"] ~ .nav__sub { display: block; }

  /* The bar keeps only burger, logo and cart; search lives in the panel. */
  .site-search--bar { display: none; }
  .site-header__start, .site-header__end { flex: 0 0 auto; }
  .site-header__bar { justify-content: space-between; }
  .site-logo img { max-block-size: 54px; }
}

@media (min-width: 900px) {
  .nav__inner { display: contents; }
}

/* ---------- home ---------- */
.home-intro { text-align: center; padding-block: 1.5rem 1rem; }
.home-intro__lead { font-size: 1.125rem; color: var(--muted); margin-block: .5rem 1rem; }
.home-intro__coupon {
  display: inline-block;
  padding: .6rem 1.25rem;
  border: 1px dashed var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.home-cats { padding-block: 1rem 2rem; }
.home-best { padding-block: 2rem; }
.home-best h2 { text-align: center; margin-block-end: 1.5rem; }

/* ---------- generic page + posts ---------- */
.page, .post { padding-block: 1.5rem 3rem; }
.page__content, .post__content { max-inline-size: 70ch; }
.page__content img, .post__content img { margin-block: 1.5rem; }
.post__meta { color: var(--muted); font-size: .875rem; }
.post__thumb { margin-block: 1.5rem; }

.faq { max-inline-size: 70ch; }
.faq__item { border-block-end: 1px solid var(--line); padding-block: .25rem; }
.faq__item summary {
  padding-block: .9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::marker, .faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; float: inline-end; color: var(--brand); }
.faq__item[open] summary::after { content: "–"; }
.faq__a { padding-block-end: 1rem; color: var(--muted); }

/* ---------- forms ---------- */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: block; font-weight: 700; margin-block-end: .25rem; }
.contact-form input, .contact-form textarea {
  inline-size: 100%;
  padding: .7rem;
  border: 1px solid var(--line);
  font: inherit;
  border-radius: var(--radius);
}
.contact-form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.notice { padding: .9rem 1rem; border-inline-start: 4px solid var(--brand); background: var(--bg-soft); }
.notice--err { border-color: #C0392B; }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: center; padding-block: 2rem; }
.pagination .page-numbers {
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  margin-inline: .15rem;
}
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-soft); margin-block-start: 2rem; padding-block: 2.5rem 1rem; }
.site-footer__cols { display: grid; gap: 2rem; }
@media (min-width: 700px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.site-footer__title { font-size: 1.0625rem; margin-block-end: .75rem; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer__list a:hover { color: var(--brand); }
.site-footer__social { list-style: none; display: flex; gap: .75rem; margin-block-start: 1rem; padding: 0; }
.site-footer__legal {
  margin-block-start: 2rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
}

/* ---------- floating WhatsApp ---------- */
.wa-fab {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  z-index: 45;
  display: grid;
  place-items: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);
}
.wa-fab:hover { text-decoration: none; }

/* ---------- search autocomplete ---------- */
.site-search { position: relative; }
.ac {
  position: absolute;
  inset-inline-start: 0;
  min-inline-size: 320px;
  inset-block-start: calc(100% + 2px);
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
  max-block-size: 70vh;
  overflow-y: auto;
}
.ac ul { list-style: none; margin: 0; padding: 0; }
.ac__row + .ac__row { border-block-start: 1px solid var(--line); }
.ac__row a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
}
.ac__row a:hover, .ac__row a.is-active, .ac__row a:focus {
  background: var(--bg-soft);
  text-decoration: none;
}
.ac__row img, .ac__ph {
  inline-size: 40px; block-size: 40px;
  object-fit: cover;
  flex: 0 0 40px;
  background: var(--bg-soft);
}
.ac__name { flex: 1; font-size: .9375rem; line-height: 1.3; }
.ac__price, .ac__meta { color: var(--brand); font-weight: 700; font-size: .875rem; white-space: nowrap; }
.ac__meta { color: var(--muted); font-weight: 400; }
.ac__row--cat a { background: var(--bg-soft); font-weight: 700; }
.ac__row--cat .ac__name::before { content: "קטגוריה: "; color: var(--muted); font-weight: 400; }
.ac__empty { padding: 1rem; margin: 0; color: var(--muted); text-align: center; }

/* ---------- autocomplete polish ---------- */
.ac { border-radius: 2px; padding-block: .25rem; }
.ac__row a { padding: .7rem .9rem; align-items: center; }
.ac__row img, .ac__ph { border: 1px solid var(--line); background: var(--bg-soft); }
.ac__name { font-weight: 400; color: var(--ink); }
.ac__price { font-weight: 700; }
.ac__row--cat a { background: transparent; font-weight: 400; padding-block: .55rem; }
.ac__row--cat .ac__name { font-weight: 700; }
.ac__row--cat .ac__name::before { content: ""; }
.ac__row--cat .ac__meta::after { content: " מוצרים"; }
.ac__row--cat + .ac__row:not(.ac__row--cat) { border-block-start: 2px solid var(--line); }

/* ---------- credit ---------- */
.site-credit { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-block-start: .5rem; }
.site-credit img { block-size: 18px; inline-size: auto; opacity: .75; }
.site-credit a:hover img { opacity: 1; }

/* ---------- hero slider ----------
   Same scroll-snap approach as the product carousel: no library, and without
   JS it stays a swipeable strip. */
.hero { position: relative; background: var(--bg-soft); overflow: hidden; }
.hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { scroll-snap-align: center; }
.hero__img { inline-size: 100%; block-size: auto; }

.hero__dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: .75rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
}
.hero__dot {
  inline-size: .55rem;
  block-size: .55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .6);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .15);
  cursor: pointer;
}
.hero__dot[aria-selected="true"] { background: var(--brand); }

/* ---------- google reviews ---------- */
.grev__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-block: .5rem 2rem;
  padding: .6rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
}
.grev__badge:hover { border-color: var(--brand); text-decoration: none; }
.grev__score { font-size: 1.5rem; font-weight: 700; }
.grev__stars { color: #F4B400; letter-spacing: .05em; }
.grev__count { color: var(--muted); font-size: .875rem; }

.review { display: flex; flex-direction: column; gap: .5rem; text-align: start; }
.review__stars { color: #F4B400; margin: 0; letter-spacing: .05em; }
.review__text { margin: 0; font-size: .9375rem; line-height: 1.6; }
.review__name { margin: 0; font-weight: 700; font-size: .875rem; color: var(--muted); }
.home-reviews { text-align: center; }

/* ---------- breadcrumbs ---------- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding-block: 1rem;
  font-size: .875rem;
  color: var(--muted);
}
.crumbs li + li::before { content: "‹"; margin-inline-end: .4rem; }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }


/* ---------- mini cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0; /* rtl-exempt: the panel stays on the same edge in both directions */
  inline-size: min(420px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgb(0 0 0 / .2);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22, .68, .32, 1);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--line);
}
.drawer__title { margin: 0; font-size: 1.125rem; }
.drawer__close { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--muted); }
.drawer__close:hover { color: var(--ink); }

.drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.drawer__empty { color: var(--muted); text-align: center; padding-block: 3rem; }

.dline { display: flex; gap: .75rem; padding-block: .9rem; border-block-end: 1px solid var(--line); }
.dline__img { inline-size: 64px; block-size: 64px; object-fit: cover; flex: 0 0 64px; background: var(--bg-soft); }
.dline__body { flex: 1; min-inline-size: 0; }
.dline__name { display: block; font-size: .9375rem; line-height: 1.35; margin-block-end: .2rem; }
.dline__meta { font-size: .8125rem; color: var(--muted); display: block; }
.dline__foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: .35rem; }
.dline__price { font-weight: 700; }
.dline__remove { background: none; border: 0; color: var(--muted); font-size: .8125rem; cursor: pointer; text-decoration: underline; }
.dline__remove:hover { color: #C0392B; }

.drawer__foot { padding: 1rem 1.25rem 1.5rem; border-block-start: 1px solid var(--line); }
.drawer__subtotal { display: flex; justify-content: space-between; margin-block-end: .9rem; font-size: 1.0625rem; }
.drawer__checkout { display: block; inline-size: 100%; padding-block: .85rem; font-size: 1.0625rem; }
.drawer__cartlink { display: block; text-align: center; margin-block-start: .6rem; color: var(--muted); font-size: .9375rem; }

/* ---------- cart icon ---------- */
.site-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--ink);
}
.site-cart:hover { color: var(--brand); }
.site-cart__icon { inline-size: 1.75rem; block-size: 1.75rem; }
.site-cart__count {
  position: absolute;
  inset-block-start: .1rem;
  inset-inline-end: .1rem;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
}
.site-cart.is-bumped .site-cart__icon { animation: mh-bump .45s ease; }
@keyframes mh-bump {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.28) rotate(-8deg); }
  70%      { transform: scale(.94); }
}


/* ---------- confetti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti i {
  position: absolute;
  inline-size: 9px;
  block-size: 14px;
  will-change: transform, opacity;
  animation: mh-fall var(--dur, 1.5s) cubic-bezier(.18, .7, .5, 1) forwards;
}
@keyframes mh-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, 80vh), 0) rotate(var(--rot, 540deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .drawer__panel, .drawer__scrim { transition: none; }
  .site-cart.is-bumped .site-cart__icon { animation: none; }
}

/* ---------- social icons ---------- */
.social { display: flex; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.social__item { margin: 0; }
.social__link {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
}
.social__link svg { inline-size: 1.1rem; block-size: 1.1rem; }
.social__link:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* ---------- contact strip ----------
   A brand-coloured band so the page has one deliberate break in the white.
   Compact by design: the footer already carries the phone and address, so
   repeating them here would only make the strip taller. */
.contact-strip {
  background: var(--brand);
  color: #fff;
  padding-block: 1.75rem;
}
.contact-strip__inner {
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .contact-strip__inner { grid-template-columns: auto 1fr; }
}
.contact-strip__intro h2 { margin: 0; font-size: 1.25rem; color: #fff; }
.contact-strip__intro p { margin: .15rem 0 0; font-size: .9375rem; opacity: .85; }

/* One row: name, email, phone, submit. */
.contact-form--row {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .contact-form--row { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
}
.contact-form--row p { margin: 0; }
.contact-form--row label {
  font-size: .8125rem;
  font-weight: 400;
  color: #fff;
  opacity: .9;
  margin-block-end: .2rem;
}
.contact-form--row input {
  padding: .6rem .7rem;
  border: 0;
  background: #fff;
  font-size: .9375rem;
}
.contact-form--row .btn {
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  padding-inline: 1.75rem;
  white-space: nowrap;
}
.contact-form--row .btn:hover { background: var(--ink); color: #fff; }
.contact-form--row .notice { grid-column: 1 / -1; background: #fff; color: var(--ink); }
.contact-strip .contact-form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* The footer follows the strip directly, so its own top gap is redundant. */
.contact-strip + .site-footer { margin-block-start: 0; }

/* ---------- inner page rhythm ---------- */
.page > h1, .archive__head h1 { margin-block: .5rem 1rem; }
.page__hero { inline-size: 100%; block-size: auto; margin-block-end: 1.5rem; }
.page--about .page__content { max-inline-size: 68ch; }

/* ---------- inner page content ----------
   Content comes from the editor, so it arrives with arbitrary floats, inline
   widths and heading levels. These rules give it a consistent rhythm without
   the client having to re-edit anything. */
.page__content, .post__content {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.page__content > *:first-child, .post__content > *:first-child { margin-block-start: 0; }
.page__content h2, .post__content h2 { margin-block: 2rem .6rem; font-size: 1.5rem; }
.page__content h3, .post__content h3 { margin-block: 1.5rem .5rem; font-size: 1.1875rem; }
.page__content ul, .page__content ol,
.post__content ul, .post__content ol { padding-inline-start: 1.25rem; margin-block: 0 1.25rem; }
.page__content li, .post__content li { margin-block-end: .4rem; }
.page__content a, .post__content a { color: var(--brand); text-decoration: underline; }

/* Editor images: centre them and drop any inline float or fixed width. */
.page__content img, .post__content img {
  float: none !important;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: auto;
  margin-block: 1.5rem;
}
.page__content figure, .post__content figure { margin-inline: 0; }
.page__content iframe, .post__content iframe { max-inline-size: 100%; }

/* Inner pages get a title band so the heading is not floating in white space. */
.page > h1 {
  padding-block-end: .75rem;
  border-block-end: 1px solid var(--line);
  margin-block-end: 1.5rem;
}
.page--about .page__hero { margin-block-end: 2rem; }

/* ---------- coupon copy chip ---------- */
.home-intro__coupon {
  position: relative;
  cursor: pointer;
  background: none;
  font: inherit;
  transition: background .2s ease, color .2s ease;
}
.home-intro__coupon:hover { background: var(--brand); color: #fff; }
.home-intro__coupon:hover strong { color: #fff; }
.coupon-copy__done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.home-intro__coupon.is-copied .coupon-copy__done { opacity: 1; }

/* ---------- cart total beside the icon ---------- */
.site-cart__total {
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  color: var(--ink);
  margin-inline-start: -.4rem;
}
.site-cart__total:hover { color: var(--brand); text-decoration: none; }
.site-cart__total .woocommerce-Price-amount { font-weight: 700; }
/* The mobile bar keeps only burger, logo and icon; the amount lives in the drawer. */
@media (max-width: 899px) { .site-cart__total { display: none; } }

/* ---------- sticky header ----------
   Shown only after the main header has left the viewport, so the two are never
   on screen together. */
.sticky-header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 70;
  background: #fff;
  border-block-end: 1px solid var(--line);
  box-shadow: 0 2px 12px rgb(0 0 0 / .08);
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.sticky-header.is-visible { transform: translateY(0); }
.sticky-header[hidden] { display: none; }

.sticky-header__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: .4rem;
  min-block-size: 56px;
}
.sticky-header__logo { margin: 0; flex: 0 0 auto; }
.sticky-header__logo img { max-block-size: 38px; inline-size: auto; }

.sticky-header .nav--sticky { flex: 1; min-inline-size: 0; }
.sticky-header .nav__list { padding-block: 0; gap: .25rem 1rem; justify-content: center; }
.sticky-header .nav__link, .sticky-header .nav__toggle { font-size: 17px; padding-block: .35rem; }
.sticky-header .nav__sub { inset-block-start: 100%; }

.sticky-header__actions { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.sticky-header__searchbtn {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.sticky-header__searchbtn svg { inline-size: 1.35rem; block-size: 1.35rem; }
.sticky-header__searchbtn:hover,
.sticky-header__searchbtn[aria-expanded="true"] { color: var(--brand); }
.site-cart--sticky { inline-size: 2.5rem; block-size: 2.5rem; }
.site-cart--sticky .site-cart__icon { inline-size: 1.5rem; block-size: 1.5rem; }

.sticky-header__search {
  border-block-start: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: .75rem;
}
.sticky-header__search[hidden] { display: none; }
.sticky-header__search .site-search { max-inline-size: none; }
.sticky-header__search .ac { inset-block-start: calc(100% + .5rem); }

.nav__burger--sticky { display: none; }

@media (max-width: 899px) {
  /* The condensed bar drops to logo, search, cart and burger; the full menu
     lives in the slide-out panel, which the burger already opens. */
  .sticky-header .nav--sticky { display: none; }
  .nav__burger--sticky { display: block; }
  .sticky-header__bar { gap: .5rem; justify-content: space-between; }
}

/* ---------- mobile menu row height ----------
   Rows were uneven because a chevron <button> and a plain <a> compute
   different content heights from the same padding. Matching them on a shared
   min-height keeps every row identical.

   The chevron stays in the flow. Taking it out with position:absolute looked
   right for items that have a link beside it, but a parent with no link of
   its own is nothing BUT the chevron — those <li> lost their only in-flow
   child, collapsed to zero height and stacked on top of each other. */
@media (max-width: 899px) {
  .nav__item--d0 > .nav__link,
  .nav__item--d0 > .nav__toggle {
    display: flex;
    align-items: center;
    min-block-size: 3rem;
    padding-block: 0;
    line-height: 1.3;
  }
}

/* Galleries recovered from the pages that were built in Elementor. */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: .75rem;
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}
.work-gallery li { margin: 0; }
.work-gallery img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
@media (max-width: 599px) {
  .work-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}

/* ---------- desktop mega menu: two columns ----------
   Level 2 opened over level 1 because each row was its own positioning
   context, so the panel hung off whichever row the pointer was on. Anchoring
   it to the level-1 panel instead puts the two side by side and top-aligned
   however far down the list you are. */
@media (min-width: 900px) {
  .nav__sub { position: absolute; }
  .nav__sub > .nav__item { position: static; }
  .nav__sub .nav__sub {
    inset-block-start: 0;
    inset-inline-start: 100%;
    inset-inline-end: auto;
    margin-inline-start: -1px;  /* the two panels share one border */
    min-inline-size: 15rem;
    min-block-size: 100%;
  }
}

/* ---------- bulk-purchase category cards ----------
   Lives in page content rather than shop.css: these are WordPress pages, so
   the shop stylesheet is not loaded on them. */
.card-grid--bulk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}
.card-grid--bulk li { margin: 0; }
.card-grid--bulk .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card-grid--bulk .card:hover { border-color: var(--brand); box-shadow: 0 2px 12px rgb(0 0 0 / .08); }
.card-grid--bulk .card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.card-grid--bulk .card__img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.card-grid--bulk .card:hover .card__img { transform: scale(1.04); }
.card-grid--bulk .card__body { padding: .875rem 1rem; text-align: center; }
.card-grid--bulk .card__title { font-size: 1rem; font-weight: 400; margin: 0; line-height: 1.35; }
@media (max-width: 599px) {
  .card-grid--bulk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .card-grid--bulk .card__title { font-size: .875rem; }
}

/* Article cards. Posts have no price or button, so the body only carries the
   title and date — without a min-height the cards jag against each other. */
.card--post { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card--post .card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.card--post .card__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card--post .card__body { padding: .875rem 1rem; }
.card--post .card__title { font-size: 1.0625rem; line-height: 1.4; margin: 0; }
.card--post .card__meta { font-size: .8125rem; color: var(--muted); margin: .5rem 0 0; }

/* ---------- card grid ----------
   Defined here and not only in shop.css. shop.css loads in WooCommerce
   context alone, so on the articles page the <ul class="card-grid"> had no
   grid at all and the cards stacked full width. Third time this file split
   has caught us — the rule belongs wherever the markup can appear. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card { display: flex; flex-direction: column; background: var(--bg); }
.card__media { display: block; overflow: hidden; background: var(--bg-soft); }
.card__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 599px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* ---------- single article ----------
   Constrained to a readable column rather than the full wrap. Long-form text
   at 100% of a desktop wrap runs past 140 characters a line, which is roughly
   twice what anyone reads comfortably. */
.post {
  max-inline-size: min(80%, 62rem);
  margin-inline: auto;
  padding-block-end: 3rem;
}
.post__head { padding-block: .5rem 1.25rem; }
.post__meta { color: var(--muted); font-size: .875rem; margin: .35rem 0 0; }

/* The image tracks the text column instead of bleeding wider than it. */
.post__thumb { margin: 0 0 1.75rem; }
.post__thumb img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.post__content { font-size: 1.0625rem; line-height: 1.8; }
.post__content > * { max-inline-size: 100%; }
.post__content :is(img, figure, iframe, video) {
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: 0;
}
.post__content figure { margin-inline: 0; }
.post__content :is(h2, h3) { margin-block: 2rem .5rem; }
.post__content :is(ul, ol) { padding-inline-start: 1.25rem; }

@media (max-width: 899px) {
  /* 80% of a phone screen leaves too little for the text itself. */
  .post { max-inline-size: 100%; }
}

/* One measure for the whole article: the featured image and the text share
   the same column, so nothing sits wider or narrower than its neighbour. */
.post__content,
.post__head,
.post__thumb { max-inline-size: 100%; margin-inline: 0; }
.post__thumb img { inline-size: 100%; }