/*
Theme Name: Haverbook
Theme URI: https://haverbook.com
Author: Haverbook
Description: Bespoke Hebrew/RTL theme for Haverbook — illustrated children's friendship books. Classic PHP templates, no page builder, minimal JavaScript. Colour character is taken directly from the printed cover artwork.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary — all rights reserved
Text Domain: haverbook
Tags: rtl-language-support, e-commerce, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens
   The five accent colours are sampled from the printed covers (Master Prompt §8).
   ========================================================================== */

:root {
  /* Brand */
  --hb-navy: #253f8e;
  --hb-sky: #40a2d0;
  --hb-green: #3eb489;
  --hb-coral: #ff8a65;
  --hb-pink: #e589ba;

  /* Ground & ink — warm paper, not corporate white */
  --hb-paper: #fdf9f3;
  --hb-paper-deep: #f6efe4;
  --hb-card: #ffffff;
  --hb-ink: #1a2340;
  --hb-ink-soft: #4a5470;
  --hb-ink-faint: #7a839b;
  --hb-rule: #e6ddcd;

  /* Semantic */
  --hb-accent: var(--hb-navy);
  --hb-focus: #b8552a;
  --hb-ok: #1f7a52;
  --hb-warn: #8a4b12;
  --hb-error: #a32020;

  /* Type — system-first so there is no third-party request and no FOUT.
     Assistant/Heebo are used when present on the device.
     See docs/DESIGN_NOTES.md for the self-hosting upgrade path. */
  --hb-font: "Assistant", "Heebo", "Segoe UI", "Arial Hebrew", Arial,
    system-ui, -apple-system, sans-serif;
  --hb-font-display: var(--hb-font);

  /* Fluid type scale */
  --hb-t-xs: 0.8125rem;
  --hb-t-sm: 0.9375rem;
  --hb-t-base: 1.0625rem;
  --hb-t-md: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --hb-t-lg: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --hb-t-xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --hb-t-2xl: clamp(2.125rem, 3.4vw + 1.2rem, 3.5rem);

  /* Spacing */
  --hb-s1: 0.25rem;
  --hb-s2: 0.5rem;
  --hb-s3: 0.75rem;
  --hb-s4: 1rem;
  --hb-s5: 1.5rem;
  --hb-s6: 2rem;
  --hb-s7: 3rem;
  --hb-s8: 4rem;
  --hb-s9: 6rem;

  --hb-radius: 14px;
  --hb-radius-lg: 22px;
  --hb-container: 1180px;
  --hb-shadow: 0 1px 2px rgba(26, 35, 64, 0.05), 0 8px 24px rgba(26, 35, 64, 0.06);
  --hb-shadow-lift: 0 2px 4px rgba(26, 35, 64, 0.06), 0 18px 44px rgba(26, 35, 64, 0.12);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--hb-paper);
  color: var(--hb-ink);
  font-family: var(--hb-font);
  font-size: var(--hb-t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--hb-font-display);
  line-height: 1.2;
  margin: 0 0 var(--hb-s4);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--hb-t-2xl);
}
h2 {
  font-size: var(--hb-t-xl);
}
h3 {
  font-size: var(--hb-t-lg);
}

p {
  margin: 0 0 var(--hb-s4);
  text-wrap: pretty;
}

a {
  color: var(--hb-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--hb-focus);
}

ul,
ol {
  padding-inline-start: 1.35em;
}

/* Visible, high-contrast focus for keyboard users (Master Prompt §25) */
:focus-visible {
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */

.hb-container {
  width: min(100% - 2.5rem, var(--hb-container));
  margin-inline: auto;
}

.hb-container--narrow {
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
}

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

/* Hidden by clipping rather than a large negative offset: in RTL a
   `-9999px` inline-start pushes the element thousands of pixels past the
   right edge, which some browsers count as overflow. Clipping cannot. */
.hb-skip-link {
  /* fixed, not absolute: an absolutely positioned skip link is placed against
     the document, so focusing it partway down the page renders it far above
     the viewport where a keyboard user can never see it. */
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--hb-s4);
  z-index: 999;
  background: var(--hb-navy);
  color: #fff;
  padding: var(--hb-s3) var(--hb-s5);
  border-radius: 0 0 var(--hb-radius) var(--hb-radius);
  font-weight: 600;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hb-skip-link:focus {
  clip-path: none;
  color: #fff;
}

.hb-section {
  padding-block: var(--hb-s9);
}

.hb-section--tight {
  padding-block: var(--hb-s7);
}

.hb-section--paper {
  background: var(--hb-paper-deep);
}

.hb-section__head {
  max-width: 62ch;
  margin-block-end: var(--hb-s6);
}

.hb-section__head p {
  color: var(--hb-ink-soft);
  font-size: var(--hb-t-md);
  margin-block-end: 0;
}

.hb-eyebrow {
  display: inline-block;
  font-size: var(--hb-t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-ink-faint);
  margin-block-end: var(--hb-s3);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.hb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-s2);
  min-height: 48px; /* comfortable touch target */
  padding: 0.75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--hb-navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.hb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #1b2f6d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--hb-shadow);
}

.hb-btn--ghost {
  background: transparent;
  color: var(--hb-navy);
  border-color: currentColor;
}

.hb-btn--ghost:hover {
  background: rgba(37, 63, 142, 0.07);
  color: var(--hb-navy);
}

.hb-btn--block {
  width: 100%;
}

.hb-btn[disabled],
.hb-btn[aria-disabled="true"] {
  background: var(--hb-ink-faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.hb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 249, 243, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid var(--hb-rule);
}

.hb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--hb-s5);
  min-height: 74px;
}

.hb-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--hb-font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--hb-navy);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.hb-logo__mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  align-self: center;
}

.hb-nav {
  margin-inline-start: auto;
}

.hb-nav ul {
  display: flex;
  align-items: center;
  gap: var(--hb-s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-nav a {
  color: var(--hb-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--hb-t-sm);
  padding-block: var(--hb-s2);
  border-block-end: 2px solid transparent;
}

.hb-nav a:hover,
.hb-nav .current-menu-item > a {
  color: var(--hb-navy);
  border-block-end-color: var(--hb-navy);
}

.hb-header__actions {
  display: flex;
  align-items: center;
  gap: var(--hb-s3);
}

.hb-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--hb-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.hb-cart-link:hover {
  background: var(--hb-paper-deep);
  color: var(--hb-navy);
}

/* The badge is always in the DOM so cart fragments can replace it; an empty
   cart simply hides it. */
.hb-cart-link__count.is-empty {
  display: none;
}

.hb-cart-link__count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--hb-coral);
  color: #43210f;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.hb-burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--hb-ink);
}

@media (max-width: 900px) {
  .hb-burger {
    display: inline-flex;
  }
  .hb-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--hb-paper);
    border-block-end: 1px solid var(--hb-rule);
    padding: var(--hb-s4) 1.25rem var(--hb-s5);
    box-shadow: var(--hb-shadow);
  }
  .hb-nav.is-open {
    display: block;
  }
  .hb-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hb-nav li + li {
    border-block-start: 1px solid var(--hb-rule);
  }
  .hb-nav a {
    display: block;
    padding: var(--hb-s3) 0;
    font-size: var(--hb-t-base);
    border: 0;
  }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hb-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hb-paper) 0%, var(--hb-paper-deep) 100%);
  padding-block: var(--hb-s9) var(--hb-s8);
}

.hb-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--hb-s8);
  align-items: center;
}

.hb-hero__title {
  margin-block-end: var(--hb-s5);
}

.hb-hero__lead {
  font-size: var(--hb-t-md);
  color: var(--hb-ink-soft);
  max-width: 46ch;
  margin-block-end: var(--hb-s6);
}

.hb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-s3);
}

.hb-hero__media {
  position: relative;
}

.hb-hero__stack {
  position: relative;
  aspect-ratio: 1 / 1;
}

/* Target the direct child, whatever it is. WordPress emits a bare <img>, but a
   WebP-rewriting cache (LiteSpeed's, which is active on this host) may wrap it
   in <picture> — and an `img:nth-child()` selector would then match every image
   as "the first child of its own <picture>", collapsing the fan into one pile. */
/* A pile: three covers layered one on top of another, each one behind stepped
   up and across so its edge shows. The first product sits on top.

   Positioning is a single `transform` on the direct child rather than
   `inset` + `nth-child` on the <img>: WordPress emits a bare <img>, but a
   WebP-rewriting cache (LiteSpeed's, active on this host) may wrap it in
   <picture>, and an `img:nth-child()` selector would then match every image as
   "the first child of its own <picture>" — collapsing the pile into one card. */
.hb-hero__stack > * {
  position: absolute;
  /* Physical top/left, not logical: this is a decorative pile, and centring it
     the same way in both directions is more predictable than having
     inset-inline-start flip the whole composition under RTL. */
  top: 50%;
  left: 50%;
  width: 62%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--hb-shadow-lift);
  transform-origin: center center;
}

/* Only the image INSIDE a wrapper fills its parent. A bare <img> that is
   itself the layer must keep the 62% above — a `> img` rule here would be
   more specific than `> *` and silently blow every cover up to full width. */
.hb-hero__stack > picture > img {
  width: 100%;
}

.hb-hero__stack > * > img,
.hb-hero__stack > img {
  height: auto;
  display: block;
}

/* --hb-x/--hb-y offset each layer from the centred base; the shared
   translate(-50%, -50%) does the centring itself. */
.hb-hero__stack > *:nth-child(1) {
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.hb-hero__stack > *:nth-child(2) {
  z-index: 2;
  transform: translate(-50%, -50%) translate(7%, -8%) rotate(4deg);
}

.hb-hero__stack > *:nth-child(3) {
  z-index: 1;
  transform: translate(-50%, -50%) translate(14%, -16%) rotate(9deg);
}

@media (max-width: 860px) {
  .hb-hero {
    padding-block: var(--hb-s7) var(--hb-s6);
  }
  .hb-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--hb-s6);
  }
  .hb-hero__media {
    order: -1;
  }
  .hb-hero__stack {
    aspect-ratio: 4 / 3;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   7. Product cards
   ========================================================================== */

.hb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--hb-s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hb-card);
  border: 1px solid var(--hb-rule);
  border-radius: var(--hb-radius-lg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hb-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hb-shadow-lift);
}

.hb-card__media {
  position: relative;
  background: var(--hb-accent, var(--hb-navy));
  aspect-ratio: 1 / 1;
}

.hb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--hb-s2);
  padding: var(--hb-s5);
}

.hb-card__title {
  font-size: var(--hb-t-md);
  margin: 0;
}

.hb-card__title a {
  color: inherit;
  text-decoration: none;
}

/* The whole card is clickable, but the link text stays the accessible name. */
.hb-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hb-card__price {
  font-weight: 700;
  color: var(--hb-ink);
  margin: 0;
}

.hb-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--hb-s3);
}

.hb-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: var(--hb-t-xs);
  font-weight: 700;
}

.hb-badge--out {
  background: #f3e3e3;
  color: var(--hb-error);
}

.hb-badge--in {
  background: #e2f1e9;
  color: var(--hb-ok);
}

/* ==========================================================================
   8. Steps / occasions
   ========================================================================== */

.hb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--hb-s6);
  counter-reset: hb-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-step {
  counter-increment: hb-step;
}

.hb-step::before {
  content: counter(hb-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-block-end: var(--hb-s4);
  border-radius: 50%;
  background: var(--hb-navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}

.hb-step h3 {
  font-size: var(--hb-t-md);
  margin-block-end: var(--hb-s2);
}

.hb-step p {
  color: var(--hb-ink-soft);
  margin: 0;
}

.hb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-s3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-chip {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--hb-card);
  border: 1px solid var(--hb-rule);
  font-weight: 600;
  font-size: var(--hb-t-sm);
}

/* ==========================================================================
   9. Look Inside gallery
   ========================================================================== */

.hb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--hb-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-gallery__item {
  margin: 0;
}

.hb-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hb-rule);
  border-radius: var(--hb-radius);
  overflow: hidden;
  background: var(--hb-card);
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hb-gallery__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--hb-shadow-lift);
}

.hb-gallery__note {
  margin-block-start: var(--hb-s4);
  font-size: var(--hb-t-sm);
  color: var(--hb-ink-faint);
}

/* Lightbox — plain <dialog>, keyboard and screen-reader friendly */
.hb-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  overflow: visible;
}

.hb-lightbox::backdrop {
  background: rgba(16, 20, 36, 0.82);
}

.hb-lightbox img {
  width: 100%;
  height: auto;
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow-lift);
}

.hb-lightbox__close {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: -14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--hb-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--hb-shadow);
}

.hb-lightbox__caption {
  margin-block-start: var(--hb-s3);
  color: #fff;
  text-align: center;
  font-size: var(--hb-t-sm);
}

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.hb-faq {
  border-block-start: 1px solid var(--hb-rule);
}

.hb-faq__item {
  border-block-end: 1px solid var(--hb-rule);
}

.hb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-s4);
  padding: var(--hb-s5) 0;
  font-weight: 700;
  font-size: var(--hb-t-md);
  cursor: pointer;
  list-style: none;
}

.hb-faq__item summary::-webkit-details-marker {
  display: none;
}

.hb-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hb-paper-deep);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.hb-faq__item[open] summary::after {
  content: "–";
}

.hb-faq__answer {
  padding-block-end: var(--hb-s5);
  color: var(--hb-ink-soft);
  max-width: 68ch;
}

.hb-faq__answer p:last-child {
  margin-block-end: 0;
}

/* ==========================================================================
   11. Forms
   ========================================================================== */

.hb-field {
  margin-block-end: var(--hb-s4);
}

.hb-field label,
.hb-label {
  display: block;
  font-weight: 600;
  font-size: var(--hb-t-sm);
  margin-block-end: var(--hb-s2);
}

.hb-field .hb-required {
  color: var(--hb-error);
}

.hb-input,
.hb-field input[type="text"],
.hb-field input[type="email"],
.hb-field input[type="tel"],
.hb-field select,
.hb-field textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--hb-rule);
  border-radius: 10px;
  background: #fff;
  color: var(--hb-ink);
  font: inherit;
  min-height: 48px;
}

.hb-input:focus,
.hb-field input:focus,
.hb-field select:focus,
.hb-field textarea:focus {
  border-color: var(--hb-navy);
  outline: 3px solid rgba(37, 63, 142, 0.22);
  outline-offset: 1px;
}

.hb-field textarea {
  min-height: 150px;
  resize: vertical;
}

.hb-help {
  font-size: var(--hb-t-xs);
  color: var(--hb-ink-faint);
  margin-block-start: var(--hb-s1);
}

.hb-error-text {
  color: var(--hb-error);
  font-size: var(--hb-t-sm);
  font-weight: 600;
  margin-block-start: var(--hb-s1);
}

.hb-notice {
  padding: var(--hb-s4) var(--hb-s5);
  border-radius: var(--hb-radius);
  border-inline-start: 4px solid var(--hb-navy);
  background: var(--hb-paper-deep);
  margin-block-end: var(--hb-s5);
}

.hb-notice--ok {
  border-inline-start-color: var(--hb-ok);
  background: #e9f4ee;
}

.hb-notice--error {
  border-inline-start-color: var(--hb-error);
  background: #f8ecec;
}

/* Honeypot — hidden from sighted users and from assistive tech */
.hb-hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.hb-footer {
  background: var(--hb-ink);
  color: #d7dced;
  padding-block: var(--hb-s8) var(--hb-s6);
  margin-block-start: var(--hb-s9);
}

.hb-footer a {
  color: #d7dced;
  text-decoration: none;
}

.hb-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.hb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--hb-s6);
}

@media (max-width: 820px) {
  .hb-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .hb-footer__grid {
    grid-template-columns: 1fr;
  }
}

.hb-footer h2 {
  font-size: var(--hb-t-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa4c4;
  margin-block-end: var(--hb-s4);
}

.hb-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hb-s2);
}

.hb-footer__brand p {
  color: #9aa4c4;
  max-width: 34ch;
  font-size: var(--hb-t-sm);
}

.hb-footer__bottom {
  margin-block-start: var(--hb-s7);
  padding-block-start: var(--hb-s5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-s4);
  justify-content: space-between;
  font-size: var(--hb-t-xs);
  color: #8e98b8;
}

/* ==========================================================================
   13. Page / prose
   ========================================================================== */

.hb-page-header {
  padding-block: var(--hb-s8) var(--hb-s6);
  background: var(--hb-paper-deep);
  border-block-end: 1px solid var(--hb-rule);
}

.hb-breadcrumb {
  font-size: var(--hb-t-sm);
  color: var(--hb-ink-faint);
  margin-block-end: var(--hb-s3);
}

.hb-breadcrumb a {
  color: inherit;
}

.hb-prose {
  max-width: 70ch;
}

.hb-prose h2 {
  font-size: var(--hb-t-lg);
  margin-block-start: var(--hb-s7);
}

.hb-prose h3 {
  font-size: var(--hb-t-md);
  margin-block-start: var(--hb-s5);
}

.hb-prose > :first-child {
  margin-block-start: 0;
}

.hb-prose ul,
.hb-prose ol {
  margin-block-end: var(--hb-s4);
}

.hb-prose li {
  margin-block-end: var(--hb-s2);
}

/* English page — flips direction inside an otherwise RTL document */
.hb-ltr {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   14. Print — packing list / dispatch
   ========================================================================== */

@media print {
  .hb-header,
  .hb-footer,
  .hb-skip-link,
  .hb-no-print {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 11pt;
  }
}

/* ==========================================================================
   15. High contrast / forced colours
   ========================================================================== */

@media (forced-colors: active) {
  .hb-btn,
  .hb-card,
  .hb-chip {
    border: 1px solid ButtonText;
  }
}

/* ==========================================================================
   16. Use cases — infographic panels
   The artwork carries Hebrew text of its own, so every panel is mirrored by
   real text beside it. The image is never the only place the information
   exists (§25).
   ========================================================================== */

.hb-usecases {
  display: grid;
  gap: var(--hb-s8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-usecase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hb-s6);
  align-items: center;
}

.hb-usecase:nth-child(even) .hb-usecase__media {
  order: 2;
}

@media (max-width: 860px) {
  .hb-usecase {
    grid-template-columns: 1fr;
    gap: var(--hb-s5);
  }
  .hb-usecase:nth-child(even) .hb-usecase__media {
    order: 0;
  }
}

.hb-usecase__media {
  border-radius: var(--hb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--hb-rule);
  background: var(--hb-card);
}

.hb-usecase__media img {
  width: 100%;
  height: auto;
}

.hb-usecase__body h3 {
  font-size: var(--hb-t-lg);
  margin-block-end: var(--hb-s3);
}

.hb-usecase__summary {
  color: var(--hb-ink-soft);
  font-size: var(--hb-t-md);
  margin-block-end: var(--hb-s4);
}

.hb-usecase__steps {
  margin: 0;
  padding-inline-start: 1.3em;
  display: grid;
  gap: var(--hb-s2);
}

.hb-usecase__steps li {
  color: var(--hb-ink-soft);
}

/* The main how-it-works infographic, shown alongside the three text steps */
.hb-how__figure {
  margin: 0 0 var(--hb-s7);
  border-radius: var(--hb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--hb-rule);
  background: var(--hb-card);
  max-width: 720px;
  margin-inline: auto;
}

.hb-how__figure img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   17. Discounted-price hint on the product page
   ========================================================================== */

.hb-product__discount-hint {
  margin: var(--hb-s3) 0 0;
  padding: var(--hb-s3) var(--hb-s4);
  border-radius: 10px;
  background: #eef3ea;
  border-inline-start: 3px solid var(--hb-ok);
  font-size: var(--hb-t-sm);
  color: var(--hb-ink-soft);
}

.hb-product__discount-hint strong {
  color: var(--hb-ok);
  font-size: var(--hb-t-base);
}

.hb-product__discount-hint .woocommerce-Price-amount {
  color: inherit;
}

/* ==========================================================================
   18. Social links
   Shared by the footer and the newsletter block. Icons inherit currentColor
   so the same markup works on the dark footer and on the light homepage.
   ========================================================================== */

.hb-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-s2);
  list-style: none;
  margin: var(--hb-s4) 0 0;
  padding: 0;
}

.hb-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease,
    color 0.15s ease, border-color 0.15s ease;
}

.hb-social__link:hover {
  transform: translateY(-2px);
}

/* Footer: light marks on the dark panel.
   The selector needs the .hb-footer prefix to out-specify `.hb-footer ul`,
   which sets display:grid and would otherwise stack the icons vertically. */
.hb-footer .hb-social {
  display: flex;
  flex-direction: row;
  gap: var(--hb-s2);
}

.hb-social--footer .hb-social__link {
  border-color: rgba(255, 255, 255, 0.28);
  color: #d7dced;
}

.hb-social--footer .hb-social__link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--hb-ink);
}

/* Homepage newsletter block: navy marks on paper */
.hb-social--centred {
  justify-content: center;
  margin-block-start: var(--hb-s3);
}

.hb-social--centred .hb-social__link {
  border-color: var(--hb-rule);
  color: var(--hb-navy);
  background: var(--hb-card);
}

.hb-social--centred .hb-social__link:hover {
  background: var(--hb-navy);
  border-color: var(--hb-navy);
  color: #fff;
}

.hb-social__lead {
  margin: var(--hb-s6) 0 0;
  font-size: var(--hb-t-sm);
  font-weight: 600;
  color: var(--hb-ink-soft);
}

/* ==========================================================================
   19. Contact details block
   ========================================================================== */

.hb-contact-details {
  margin-block: var(--hb-s5) var(--hb-s6);
  padding: var(--hb-s5);
  border: 1px solid var(--hb-rule);
  border-radius: var(--hb-radius-lg);
  background: var(--hb-card);
}

.hb-contact-details__title {
  font-size: var(--hb-t-md);
  margin: 0 0 var(--hb-s4);
}

.hb-contact-details__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hb-s3);
}

.hb-contact-details__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hb-s3);
}

.hb-contact-details__label {
  flex: 0 0 4.5rem;
  font-weight: 700;
  color: var(--hb-ink-soft);
  font-size: var(--hb-t-sm);
}

/* A phone number is read left-to-right even inside an RTL sentence. */
.hb-contact-details__list a[dir="ltr"] {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.hb-contact-details__note {
  margin: var(--hb-s4) 0 0;
  font-size: var(--hb-t-sm);
  color: var(--hb-ink-faint);
}


/* ==========================================================================
   19. WooCommerce cart & checkout corrections
   These pages render through the [woocommerce_cart] / [woocommerce_checkout]
   shortcodes inside page.php, and WooCommerce's own stylesheet is written
   for a left-to-right page. Both facts need correcting here.
   ========================================================================== */

/* The shortcode lands inside .hb-prose, whose 70ch reading measure is right
   for an article and far too narrow for an order table — it squeezed the cart
   to ~580px inside a 1180px page. Commerce pages get the full width. */
.woocommerce-cart .hb-prose,
.woocommerce-checkout .hb-prose,
.woocommerce-account .hb-prose,
.woocommerce-order-received .hb-prose {
  max-width: none;
}

/* WooCommerce reserves space for the notice icon with a physical
   `padding-left` and pins the icon with `left`. Unless the RTL build of its
   stylesheet happens to be loaded, both stay on the left in an RTL page: the
   icon lands on the right, on top of the Hebrew text, which starts there.
   Logical properties give the same result in either direction.
   `body` is only for specificity — WooCommerce's rule is a bare class and its
   stylesheet may load after the theme's. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  padding-block: 1em;
  padding-inline-start: 3.5em;
  padding-inline-end: 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-s3);
  border-radius: var(--hb-radius);
  line-height: 1.5;
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  left: auto;
  right: auto;
  inset-inline-start: 1.5em;
  inset-block-start: 1em;
}

/* The notice's own button ("view cart") is a flex item, so it should sit at
   the far end of the row rather than inline with the sentence. */
body .woocommerce-message .button,
body .woocommerce-info .button {
  margin-inline-start: auto;
}

/* Order tables read better full-width with the totals column trailing. */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  text-align: start;
}

.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

@media (min-width: 900px) {
  .woocommerce-cart .cart-collaterals .cart_totals {
    max-width: 420px;
    margin-inline-start: auto;
  }
}

/* WooCommerce lays the checkout's two columns out with `float: left` and
   `float: right`. Those are physical, so in an RTL page the billing column —
   the one the customer fills in first — ends up on the LEFT, opposite the side
   Hebrew reading starts from. Grid follows the writing direction instead, so
   billing leads on the right here and on the left in an LTR context, with no
   direction-specific rules and no float clearing. */
.woocommerce-checkout #customer_details.col2-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--hb-s6);
}

.woocommerce-checkout #customer_details.col2-set .col-1,
.woocommerce-checkout #customer_details.col2-set .col-2 {
  float: none;
  width: auto;
}

/* WooCommerce clears its floats with the `content: " "; display: table`
   pseudo-element trick. Those pseudo-elements are invisible in a float layout
   but they are real grid items, so they claimed the first track and pushed
   billing into the second one — which is why the grid alone still left
   billing on the wrong side. Grid needs no clearfix. */
.woocommerce-checkout #customer_details.col2-set::before,
.woocommerce-checkout #customer_details.col2-set::after {
  content: none;
}


/* The cart's actions row holds the coupon field, its button and "update
   cart" all on one line. There is room for that on a desktop; on a phone
   everything is squeezed instead of wrapping — "החלת קופון" was crushed to a
   sliver and "לעדכן סל קניות" was stretched into an ellipse by the flex
   row's default stretch. Wrap, centre, and give each control a floor. */
.woocommerce-cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-s3);
}

.woocommerce-cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-s3);
  flex: 1 1 20rem;
}

.woocommerce-cart td.actions .coupon .input-text {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 48px; /* match the buttons beside it */
  margin: 0;
}

.woocommerce-cart td.actions .button,
.woocommerce-cart td.actions .coupon .button {
  flex: 0 0 auto;
  align-self: center; /* not stretch: that is what made it an ellipse */
  white-space: nowrap;
  margin: 0;
}

@media (max-width: 560px) {
  /* Below this they no longer fit honestly, so each takes its own line
     rather than all three being shrunk. */
  .woocommerce-cart td.actions .coupon,
  .woocommerce-cart td.actions .coupon .input-text,
  .woocommerce-cart td.actions .coupon .button,
  .woocommerce-cart td.actions > .button {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   20. Cookie consent banner
   Rendered in the footer with no styles of its own, it sat unstyled and
   transparent at the very bottom of the document — ten thousand pixels below
   the fold on the homepage, so in practice nobody ever saw it. It floats
   above the page instead, which is also the only honest place for it: the
   choice it asks for applies to the page being read now.
   ========================================================================== */

.hb-consent {
  position: fixed;
  z-index: 200; /* above the sticky header (100), below the skip link (999) */
  inset-block-end: var(--hb-s4);
  inset-inline: var(--hb-s4);
  margin-inline: auto;
  max-width: 46rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-s4);

  padding: var(--hb-s4) var(--hb-s5);
  background: var(--hb-card);
  color: var(--hb-ink);
  border: 1px solid var(--hb-rule);
  border-radius: var(--hb-radius-lg);
  box-shadow: var(--hb-shadow-lift);

  /* A short viewport — a landscape phone, or a laptop with a lot of browser
     chrome — would otherwise let the banner take over the screen. */
  max-height: 80vh;
  overflow-y: auto;
}

.hb-consent[hidden] {
  display: none; /* [hidden] alone loses to display:flex */
}

.hb-consent__text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: var(--hb-t-sm);
  line-height: 1.6;
  color: var(--hb-ink-soft);
}

.hb-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-s3);
  flex: 0 0 auto;
}

.hb-consent__actions .hb-btn {
  min-height: 44px;
  padding-inline: var(--hb-s5);
  font-size: var(--hb-t-sm);
}

@media (max-width: 620px) {
  /* On a phone the buttons need the full width to stay tappable, and the
     banner should not eat the whole screen. */
  .hb-consent {
    inset-inline: var(--hb-s3);
    inset-block-end: var(--hb-s3);
    padding: var(--hb-s4);
    gap: var(--hb-s3);
  }

  .hb-consent__actions,
  .hb-consent__actions .hb-btn {
    flex: 1 1 100%;
  }
}

/* Slide in rather than appear abruptly — the banner is injected after the
   page has already been read for a moment. */
@media (prefers-reduced-motion: no-preference) {
  .hb-consent {
    animation: hb-consent-in 0.28s ease-out both;
  }
}

@keyframes hb-consent-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}