/* Tapuz Default Theme - RTL First & Clean - WhiteNo1se style */

:root {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
  --max-width: 900px;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-primary: #0a66c2;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-light-bg: #f8fafc;
}

html {
  font-size: 17px;
  line-height: 1.7;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  padding: 0;
}

[dir="rtl"] { direction: rtl; text-align: right; }
[dir="ltr"] { direction: ltr; text-align: left; }

/* ===== Header ===== */
.site-header {
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border);
  padding: 0.9rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 1;
}

.site-logo img {
  max-height: 52px;
  width: auto;
}

.main-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 4px 0;
  transition: color 0.15s;
}

.main-nav a:hover {
  color: var(--color-primary);
}

/* ===== Menu capacity, sub-menus, drawer (v2.28) =====
   Ten Hebrew items broke the bar at EVERY desktop width: .header-inner was
   capped at --max-width (the content column), the list never wrapped above
   640px, multi-word labels split mid-label before the row overflowed, and
   nested items had no css at all (a bulleted block inside the sticky header).
   Now, with zero JavaScript and logical properties only (RTL first):
     • labels never break; the row wraps by CONTENT, not by viewport
     • the header may be wider than the content column (--header-max-width)
     • sub-menus are dropdowns on hover AND :focus-within (keyboard), open
       toward the inline end for the last items, and lie inline in the side
       rail and in the drawer
     • narrow screens get a drawer: a checkbox + label toggle (--menu-mobile)
   Theme knobs set the custom properties (src/theme.js overridesToCss);
   the defaults here are what an untouched site gets. */
.header-inner {
  max-width: max(var(--max-width), var(--header-max-width, 1140px));
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav ul {
  flex-wrap: wrap;
  row-gap: 0.35rem;
  column-gap: var(--menu-gap, 1.75rem);
  justify-content: var(--menu-align, flex-start);
  align-items: center;
}
.main-nav li { position: relative; unicode-bidi: isolate; max-width: none; }
.main-nav a { white-space: nowrap; display: inline-block; font-size: var(--menu-size, 0.95rem); }
.main-nav li.has-children > a::before { content: '▾'; font-size: 0.7em; margin-inline-end: 0.3em; opacity: 0.7; }
.main-nav .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + var(--menu-drop-gap, 0px));
  z-index: 120;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  min-width: 12rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-2, 0 10px 30px rgba(2, 8, 23, 0.12));
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu li { display: block; }
.main-nav .sub-menu a { display: block; padding: 0.45rem 0.9rem; white-space: normal; }
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: var(--color-light-bg); }
/* the last items open toward the inline end so a dropdown never leaves the page */
.main-nav > ul > li:nth-last-child(-n+2) > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
/* hover bridge: a skin that floats the dropdown away from the bar sets
   --menu-drop-gap; this invisible strip fills EXACTLY that gap so the pointer
   can travel down without the dropdown closing. Zero-height by default, so it
   never covers the parent link — a click on a hub page's link must navigate. */
.main-nav > ul > li > .sub-menu::before { content: ''; position: absolute; inset-inline: 0; top: calc(-1 * var(--menu-drop-gap, 0px)); height: var(--menu-drop-gap, 0px); }
/* the fold (chrome.menuFold): the items past the fold live in
   <li class="nav-more"><details><summary class="nav-more-sum">עוד</summary><ul class="sub-menu">…
   a native disclosure — click/tap/Enter/Space, zero JS — that stays open until
   toggled again. The summary is dressed as a menu link; li.nav-more is NOT
   has-children, so its caret comes from its own ::before here — the same
   side as a parent's ▾ (no double caret, no side flip in RTL). */
.main-nav li.nav-more > details { position: relative; }
.main-nav .nav-more-sum { list-style: none; cursor: pointer; display: inline-block; font-size: var(--menu-size, 0.95rem); font-weight: 500; color: var(--color-text); padding: 4px 0; white-space: nowrap; transition: color 0.15s; }
.main-nav .nav-more-sum::-webkit-details-marker { display: none; }
.main-nav .nav-more-sum::before { content: '▾'; font-size: 0.7em; margin-inline-end: 0.3em; opacity: 0.7; }
.main-nav .nav-more-sum:hover,
.main-nav li.nav-more.has-current > details > .nav-more-sum { color: var(--color-primary); }
.main-nav li.nav-more > details[open] > .sub-menu { display: block; }
/* the fold is always the last item, so its list opens toward the inline end
   like the last two plain items; a folded parent's own children fly out
   sideways (.sub-menu .sub-menu) — inside the fold toward the inline START,
   back over the bar, where there is room; elsewhere toward the inline end */
.main-nav li.nav-more > details > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
.main-nav .sub-menu .sub-menu { inset-inline-start: 100%; inset-inline-end: auto; top: 0; }
.main-nav li.nav-more .sub-menu .sub-menu { inset-inline-start: auto; inset-inline-end: 100%; }
/* the current page (chrome.menuCurrent): the underline above is the default;
   pill / bold / none arrive as body classes (theme.menuBodyClasses), and the
   parent of the current page (li.has-current) echoes the mark */
body.nav-current-pill .main-nav a[aria-current="page"] { background: var(--color-light-bg); background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-radius: 999px; padding-inline: 0.7em; }
body.nav-current-pill .main-nav a[aria-current="page"]::after { display: none; }
body.nav-current-bold .main-nav a[aria-current="page"] { font-weight: 700; color: var(--color-primary); }
body.nav-current-bold .main-nav a[aria-current="page"]::after { display: none; }
body.nav-current-none .main-nav a[aria-current="page"]::after { width: 0; }
body:not(.nav-current-pill):not(.nav-current-bold):not(.nav-current-none) .main-nav > ul > li.has-current > a::after { width: 100%; }
body.nav-current-pill .main-nav li.has-current > a,
body.nav-current-bold .main-nav li.has-current > a { color: var(--color-primary); }
/* horizontal scroll strip — a theme choice (--menu-overflow: scroll) */
.main-nav[data-overflow="scroll"] ul,
.menu-scroll .main-nav ul {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  /* the strip fades at BOTH inline edges — symmetric, so direction-neutral */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
/* an absolute dropdown inside an overflow container is clipped, so a strip
   has no sub-menus (the organizer warns SUBMENU_HIDDEN_IN_SCROLL). The two
   :where() wrappers keep this at (0,2,2): just above the plain hover rule
   (0,2,1) and BELOW the drawer's and the rail's static lists (≥ (0,3,1)),
   which still show every child — a bare `> .sub-menu` here would be (0,3,2)
   and hide the rail's children on hover/focus (menu-side + menu-scroll is a
   legal knob pair). The strip's overflow and edge fade are reset in both
   body.menu-side blocks, further down. */
.menu-scroll .main-nav > ul > li:where(:hover, :focus-within) > :where(.sub-menu) { display: none; }
/* the drawer toggle: a real checkbox (keyboard: tab + space), visually hidden */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger {
  display: none;
  cursor: pointer;
  width: 42px;
  height: 38px;
  padding: 9px 10px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface, #fff);
  margin-inline-start: auto;
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked + .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* the drawer itself: below the collapse breakpoint (chrome.menuCollapse —
   md = 720px default, sm = 560px, lg = 1024px, never = no drawer at all) — or
   always, when the theme says the menu is too long for a bar (body.menu-drawer).
   The three breakpoint blocks are literal copies: the md one applies when the
   body carries NONE of the collapse classes (an untouched site), sm/lg when
   it carries theirs. Every static list here — the drawer's sub-menus AND a
   fold's list under details[open] — comes from the descendant `.sub-menu`
   rule. The scroll strip's edge fade is switched off: a column list has no
   edges to fade. */
@media (max-width: 720px) {
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav { display: flex; flex-wrap: wrap; align-items: center; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .nav-burger { display: flex; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 0.25rem; -webkit-mask-image: none; mask-image: none; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .nav-toggle:checked ~ ul { display: flex; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav a { display: block; padding: 0.55rem 0.4rem; white-space: normal; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav .nav-more-sum { display: block; padding: 0.55rem 0.4rem; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.2rem; padding-inline-start: 1rem; background: transparent; min-width: 0; }
  body:not(.nav-collapse-sm):not(.nav-collapse-lg):not(.nav-collapse-never) .main-nav li.has-children > a::before { content: ''; margin: 0; }
}
@media (max-width: 560px) {
  body.nav-collapse-sm:not(.menu-drawer) .main-nav { display: flex; flex-wrap: wrap; align-items: center; }
  body.nav-collapse-sm:not(.menu-drawer) .nav-burger { display: flex; }
  body.nav-collapse-sm:not(.menu-drawer) .main-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 0.25rem; -webkit-mask-image: none; mask-image: none; }
  body.nav-collapse-sm:not(.menu-drawer) .nav-toggle:checked ~ ul { display: flex; }
  body.nav-collapse-sm:not(.menu-drawer) .main-nav a { display: block; padding: 0.55rem 0.4rem; white-space: normal; }
  body.nav-collapse-sm:not(.menu-drawer) .main-nav .nav-more-sum { display: block; padding: 0.55rem 0.4rem; }
  body.nav-collapse-sm:not(.menu-drawer) .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.2rem; padding-inline-start: 1rem; background: transparent; min-width: 0; }
  body.nav-collapse-sm:not(.menu-drawer) .main-nav li.has-children > a::before { content: ''; margin: 0; }
}
@media (max-width: 1024px) {
  body.nav-collapse-lg:not(.menu-drawer) .main-nav { display: flex; flex-wrap: wrap; align-items: center; }
  body.nav-collapse-lg:not(.menu-drawer) .nav-burger { display: flex; }
  body.nav-collapse-lg:not(.menu-drawer) .main-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 0.25rem; -webkit-mask-image: none; mask-image: none; }
  body.nav-collapse-lg:not(.menu-drawer) .nav-toggle:checked ~ ul { display: flex; }
  body.nav-collapse-lg:not(.menu-drawer) .main-nav a { display: block; padding: 0.55rem 0.4rem; white-space: normal; }
  body.nav-collapse-lg:not(.menu-drawer) .main-nav .nav-more-sum { display: block; padding: 0.55rem 0.4rem; }
  body.nav-collapse-lg:not(.menu-drawer) .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.2rem; padding-inline-start: 1rem; background: transparent; min-width: 0; }
  body.nav-collapse-lg:not(.menu-drawer) .main-nav li.has-children > a::before { content: ''; margin: 0; }
}
/* the desktop dead tab-stop: above the breakpoint the burger is gone, so the
   visually hidden checkbox would be a tab-stop that does nothing — hide it
   THERE and only there (the bare .nav-toggle rule above stays reachable, the
   drawer's keyboard path depends on it). `never` has no burger at any width,
   so both go together. */
@media (min-width: 721px) {
  body:not(.menu-drawer):not(.nav-collapse-lg) .nav-toggle { display: none; }
}
@media (min-width: 561px) {
  body.nav-collapse-sm:not(.menu-drawer) .nav-toggle { display: none; }
}
@media (min-width: 1025px) {
  body.nav-collapse-lg:not(.menu-drawer) .nav-toggle { display: none; }
}
body.nav-collapse-never:not(.menu-drawer) .nav-toggle,
body.nav-collapse-never:not(.menu-drawer) .nav-burger { display: none; }
body.menu-drawer .main-nav { display: flex; flex-wrap: wrap; align-items: center; }
body.menu-drawer .nav-burger { display: flex; }
body.menu-drawer .main-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 0.25rem; }
body.menu-drawer .nav-toggle:checked ~ ul { display: flex; }
body.menu-drawer .main-nav a { display: block; padding: 0.55rem 0.4rem; white-space: normal; }
body.menu-drawer .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.2rem; padding-inline-start: 1rem; background: transparent; min-width: 0; }
body.menu-drawer .main-nav li.has-children > a::before { content: ''; margin: 0; }
body.menu-drawer .main-nav .nav-more-sum { display: block; padding: 0.55rem 0.4rem; }

/* ===== CMS-managed header chrome (S3) ===== */
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-tagline {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.2;
}
.header-cta {
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header--nosticky {
  position: static;
}

/* ===== Main Content ===== */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.25rem 1.25rem;
}

/* ===== Typography ===== */
h1 { font-size: 2.35rem; line-height: 1.25; margin-top: 0.1rem; margin-bottom: 0.6rem; }
h2 { font-size: 1.75rem; margin-top: 2rem; }
h3 { font-size: 1.35rem; }

p { margin-bottom: 1.1rem; }

/* ===== Hero ===== */
.hero {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
  max-width: 720px;
  margin: 0 auto 2rem;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.6rem;
}

.hero .subtitle {
  font-size: 1.25rem;
  color: var(--color-muted);
  margin-bottom: 1.75rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  margin: 0.25rem 0.25rem 0.25rem 0;
  transition: all 0.15s ease;
  border: 2px solid transparent;
}

.btn-primary {
  /* --accent-bg is solid OR a primary→secondary gradient (theme builder) */
  background: var(--accent-bg, var(--color-primary));
  color: white;
  border-color: transparent;
}

.btn-primary:hover {
  /* brightness works for both solid and gradient accents */
  filter: brightness(0.9);
}

.btn-secondary {
  background: var(--color-light-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* v2.58 — the third variant the dictionary has always offered (primary |
   secondary | outline) finally has a rule: it used to render as a bare link */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-light-bg);
}

/* ===== Cards ===== */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  margin: 1.5rem 0;
  background: var(--color-surface, #fff);
}

/* ===== Columns / Services ===== */
.columns {
  display: flex;
  gap: 1.75rem;
  margin: 1.5rem 0;
}

.columns .col { flex: 1; min-width: 0; }

/* ratio'd columns (ROW ratio="2:1"…): the renderer passes the fractions as
   --cols; the stylesheet owns display so the phone stack below still wins */
.columns.cols-ratio {
  display: grid;
  grid-template-columns: var(--cols, 1fr 1fr);
  gap: var(--col-gap, 1.15rem);
}
.columns.cols-ratio > .col { min-width: 0; }

/* ── Row settings (v2.26) — gap / valign / width are the ROW's registry
   params (block-registry.js 'columns'), emitted as classes by the renderer.
   width=wide/full breaks the row out of the content column, the classic
   "stretch section": centered, never wider than the viewport. */
.columns.gap-none { gap: 0; }
.columns.gap-sm { gap: 0.75rem; --col-gap: 0.75rem; }
.columns.gap-lg { gap: 2.75rem; --col-gap: 2.75rem; }
.columns.valign-center { align-items: center; }
.columns.valign-bottom { align-items: flex-end; }
.columns.valign-stretch { align-items: stretch; }
.columns.valign-stretch > .col > .card,
.columns.valign-stretch > .col > .bent-card { height: 100%; box-sizing: border-box; }
.columns.cols-wide {
  width: min(1400px, calc(100vw - 2rem));
  margin-inline: calc(50% - min(700px, 50vw - 1rem));
}
.columns.cols-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 1rem;
  box-sizing: border-box;
}

/* ── Responsive rows (v2.26) — a row behaves like a site, not a cramped
   strip of cards: five or six cells WRAP to a 3-up grid on a tablet, four
   cells to 2-up, and every row stacks at its collapse point
   (collapse=sm 640px · md 768px, the default · lg 1024px · never). */
@media (max-width: 1024px) {
  .columns.cols-n-5:not(.cols-ratio),
  .columns.cols-n-6:not(.cols-ratio) { flex-wrap: wrap; }
  .columns.cols-n-5:not(.cols-ratio) > .col,
  .columns.cols-n-6:not(.cols-ratio) > .col { flex: 1 1 calc(33.333% - 1.75rem); }
  .columns.cols-n-4:not(.cols-ratio) { flex-wrap: wrap; }
  .columns.cols-n-4:not(.cols-ratio) > .col { flex: 1 1 calc(50% - 1.75rem); }
  .columns.collapse-lg { flex-direction: column; gap: 1.25rem; }
  .columns.collapse-lg > .col { flex: 1 1 auto; }
  .columns.collapse-lg.cols-ratio { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .columns:not(.collapse-sm):not(.collapse-never) { flex-direction: column; gap: 1.25rem; }
  .columns:not(.collapse-sm):not(.collapse-never) > .col { flex: 1 1 auto; }
  .columns.cols-ratio:not(.collapse-sm):not(.collapse-never) { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .columns.collapse-sm { flex-direction: column; gap: 1.25rem; }
  .columns.collapse-sm > .col { flex: 1 1 auto; }
  .columns.collapse-sm.cols-ratio { grid-template-columns: 1fr; }
}

/* ===== Features ===== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.feature {
  background: var(--color-light-bg);
  padding: 1.25rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border);
}

/* a feature card that IS a link (item.url) — card look, link behavior */
a.feature-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.feature-link h3 { color: inherit; }

.feature strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

/* ===== Article cubes (article-list module) ===== */
.article-cubes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.article-cubes.cols-1 { grid-template-columns: 1fr; }
.article-cubes.cols-2 { grid-template-columns: repeat(2, 1fr); }
.article-cubes.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .article-cubes,
  .article-cubes.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .article-cubes,
  .article-cubes.cols-2,
  .article-cubes.cols-4 { grid-template-columns: 1fr; }
}

.article-cube {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--color-surface, #fff);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.article-cube:hover {
  box-shadow: var(--shadow-2, 0 10px 24px rgba(15, 23, 42, 0.1));
  transform: translateY(-2px);
}

.article-cube .cube-media {
  background: var(--color-light-bg);
  aspect-ratio: 16 / 9;
}

.article-cube .cube-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.article-cube .cube-body {
  padding: 1rem 1.1rem 1.2rem;
}

.article-cube .cube-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.article-cube .cube-body p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.55;
}

/* ===== Images & Figures ===== */
figure {
  margin: 1.75rem 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
  display: block;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ===== Gallery ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
}

/* ===== Testimonial ===== */
.testimonial {
  border-right: 5px solid var(--color-primary);
  padding: 1.25rem 1.5rem;
  background: var(--color-light-bg);
  margin: 1.75rem 0;
  border-radius: var(--radius-md, 8px) 0 0 8px;
}

.testimonial p {
  font-style: italic;
  margin-bottom: 0.5rem;
}

.testimonial .author {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-light-bg);
  border-top: 1px solid var(--color-border);
  margin-top: 4rem;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.footer-inner {
  /* the footer band shares the header's cap (v2.28): a wide header over a
     narrower footer reads as a mistake */
  max-width: max(var(--max-width), var(--header-max-width, 1140px));
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* the reading-width cap on `li` (70ch) is for prose, not for a nav list */
.footer-nav li { max-width: none; }
.footer-nav a {
  color: var(--color-muted);
  text-decoration: none;
  margin: 0 0.4rem;
}

.footer-nav a:hover {
  color: var(--color-text);
}

/* ===== CMS-managed footer chrome (S3) ===== */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.footer-col-title {
  font-size: 0.98rem;
  color: var(--color-text);
  margin: 0 0 0.6rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-col a:hover { color: var(--color-primary); }

.footer-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 0.85rem; }
.footer-social a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.footer-social a:hover { color: var(--color-primary); }

.footer-text { margin: 0.4rem 0; }
.footer-credit {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ===== Misc ===== */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.25rem 0;
}

.spacer {
  display: block;
}

@media (max-width: 768px) {
  .main-content { padding: 1.5rem 1rem; }
  h1 { font-size: 2rem; }
  .hero h1 { font-size: 2.4rem; }
}


/* ===== v0.30-alpha: comfort & HTML5 polish ===== */

html { scroll-behavior: smooth; }

/* A highlight has to be SEEN. #dbeafe measured 1.22 contrast against white —
   selecting text on a light page looked like nothing happened. The site's own
   primary colour with forced white text is unmistakable, and it follows
   whatever palette the owner picked instead of a hardcoded blue. */
/* background-COLOR, not the shorthand: only the longhand is on the list of
   properties ::selection is specified to honour, and a browser that drops the
   shorthand while keeping `color:#fff` would render selected text white on a
   white page — invisible, which is the failure this rule exists to fix. */
::selection {
  background-color: var(--color-primary);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
::-moz-selection {
  background-color: var(--color-primary);
  color: #fff;
}

.skip-link {
  position: absolute;
  top: -48px;
  inset-inline-start: 12px;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 200;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 4px;
}

.hero {
  background: linear-gradient(180deg, var(--color-light-bg) 0%, #fff 100%);
  border-radius: var(--radius-lg, 16px);
}

.main-nav a {
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { width: 100%; }

.card,
.feature {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover,
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(15, 23, 42, 0.07));
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.75rem 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #0f172a;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* video (v0.62) — native self-hosted <video>; a YouTube src reuses the
   .video-embed aspect-ratio box above (same margin so both read alike). */
.bent-video { margin: 1.75rem 0; }
.bent-video video {
  display: block; width: 100%; max-width: 100%;
  border-radius: var(--radius-lg, 12px); background: #000;
}
.bent-video-caption {
  margin-top: 0.5rem; font-size: 0.9rem;
  color: var(--color-text-muted, #64748b); text-align: center;
}
.bent-video-empty {
  padding: 2rem; text-align: center; color: var(--color-text-muted, #94a3b8);
  background: #f1f5f9; border-radius: var(--radius-lg, 12px);
}

/* Map embed block (MAP) */
.map-embed {
  margin: 1.75rem 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--color-light-bg, #f1f5f9);
}
.map-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 360px;
  border: 0;
}
.map-embed.map-sm iframe { height: 220px; }
.map-embed.map-md iframe { height: 360px; }
.map-embed.map-lg iframe { height: 520px; }

/* Text container (advanced module) */
.bent-text { max-width: 100%; }
.bent-text.text-size-sm { font-size: 0.92em; }
.bent-text.text-size-lg { font-size: 1.12em; line-height: 1.75; }
.bent-text.text-lead p:first-child { font-size: 1.2em; color: var(--color-muted, #4b5563); }
.bent-text.text-dropcap p:first-child::first-letter {
  float: inline-start;
  font-size: 3.2em;
  line-height: 0.85;
  padding-inline-end: 0.12em;
  font-weight: 700;
  color: var(--color-primary, #0a66c2);
}
.bent-text.text-max-sm { max-width: 28rem; }
.bent-text.text-max-md { max-width: 36rem; }
.bent-text.text-max-lg { max-width: 48rem; }
.bent-image.img-w-sm { max-width: 240px; }
.bent-image.img-w-md { max-width: 420px; }
.bent-image.img-w-lg { max-width: 640px; }
.bent-image { margin: 1rem auto; }
.hero-sm { padding: 1.5rem 1.25rem; min-height: 8rem; }
.hero-lg { padding: 3.5rem 1.5rem; min-height: 18rem; }
.hero-full { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.hero[style*="background-image"] { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.map-embed { margin: 1rem 0; border-radius: var(--radius-lg, 12px); overflow: hidden; border: 1px solid var(--color-border, #e5e7eb); }
.map-embed iframe { width: 100%; border: 0; display: block; min-height: 220px; }
.map-embed.map-h-sm iframe { min-height: 180px; }
.map-embed.map-h-lg iframe { min-height: 420px; }
.gallery.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-md, 8px); }
.card, .bent-card {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.15rem;
  background: var(--color-surface, #f8fafc);
}

/* Enterprise modules */
.cta-strip {
  border-radius: 14px;
  padding: 2rem 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}
.cta-strip.tone-brand { background: var(--accent-bg, linear-gradient(135deg, #0a66c2, #0369a1)); color: #fff; }
.cta-strip.tone-dark { background: #0f172a; color: #f8fafc; }
.cta-strip.tone-light { background: #f1f5f9; color: var(--color-text, #0f172a); border: 1px solid var(--color-border, #e2e8f0); }
.cta-strip h2 { margin: 0 0 0.5rem; font-size: 1.6rem; }
.cta-strip p { margin: 0 0 1rem; opacity: 0.92; }
.cta-strip .btn { margin-top: 0.25rem; }

.stats-row {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: center;
}
.stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--color-primary, #0a66c2); line-height: 1.1; }
.stat-label { color: var(--color-muted, #6b7280); font-size: 0.95rem; margin-top: 0.35rem; }

.logos-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  margin: 1rem 0;
  border-block: 1px solid var(--color-border, #e5e7eb);
}
.logo-cell img {
  max-height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(0.2);
  opacity: 0.85;
}

.faq-list { margin: 1.25rem 0; }
.faq-item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 10px);
  padding: 0.65rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--color-surface, #fff);
}
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-answer { margin-top: 0.5rem; color: var(--color-muted, #6b7280); line-height: 1.6; }

.contact-info {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 1.15rem 1.25rem;
  background: var(--color-surface, #f8fafc);
}
.contact-line { margin: 0.4rem 0; }
.contact-k { font-weight: 700; margin-inline-end: 0.35rem; color: var(--color-primary, #0a66c2); }

.site-banner {
  padding: 0.75rem 1.25rem;
  text-align: center;
  border-radius: var(--radius-md, 8px);
  margin: 0.75rem 0;
}
.site-banner p { margin: 0; font-weight: 600; }
/* "brand" tone follows the THEME's brand (accent surface + white), not a
   hardcoded palette — a citrus site was getting a blue announcement strip */
.site-banner.tone-brand { background: var(--accent-bg, #1d4ed8); color: #fff; }
.site-banner.tone-dark { background: #0f172a; color: #f8fafc; }
.site-banner.tone-light { background: #f1f5f9; color: #334155; }
.site-banner.tone-warn { background: #fef3c7; color: #92400e; }

.features.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.features.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.features.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feature-icon { font-size: 1.4rem; display: block; margin-bottom: 0.35rem; }

@media (max-width: 700px) {
  .stats-row.cols-2, .stats-row.cols-3, .stats-row.cols-4,
  .features.cols-2, .features.cols-3, .features.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* WhatsApp click-to-chat floating button (site integration) */
.whatsapp-float {
  position: fixed;
  bottom: 1.25rem;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  color: #fff;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
.whatsapp-float.pos-start { inset-inline-start: 1.25rem; }
.whatsapp-float.pos-end { inset-inline-end: 1.25rem; }

/* ── Published-site search (v0.98) — floating button + overlay, JS by
   necessity (the one gap "zero-JS published pages" can't close). ── */
.tapuz-search-float {
  position: fixed;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface, #fff);
  color: var(--color-text, #334155);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tapuz-search-float:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); }
.tapuz-search-panel {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 970;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
.tapuz-search-panel.open { display: flex; }
.tapuz-search-box {
  background: var(--color-surface, #fff);
  border-radius: 14px;
  width: min(560px, 92vw);
  max-height: 70vh;
  overflow: auto;
  padding: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.tapuz-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}
.tapuz-search-results { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tapuz-search-result { display: block; padding: 0.6rem 0.75rem; border-radius: 8px; text-decoration: none; color: inherit; }
.tapuz-search-result:hover { background: #f1f5f9; }
.tapuz-search-result .t { font-weight: 700; }
.tapuz-search-result .e { font-size: 0.85rem; color: #64748b; margin-top: 0.15rem; }
.tapuz-search-empty { color: #94a3b8; font-size: 0.9rem; padding: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .tapuz-search-float { transition: none; }
}

/* ── Language switcher (v1.08) — shown only on pages with linked
   translation siblings, zero-JS. ── */
.tapuz-lang-switch {
  position: fixed;
  top: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: 960;
  display: flex;
  gap: 2px;
  background: var(--color-surface, #fff);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.tapuz-lang-switch a {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-muted, #78716c);
}
.tapuz-lang-switch a.active {
  background: var(--color-primary, #ea580c);
  color: #fff;
}

/* ── Pricing table (v1.05) — module-hunt gap, zero-JS ── */
.bent-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0;
}
.bent-plan {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-1, none);
}
.bent-plan-highlighted {
  border-color: var(--color-primary, #ea580c);
  box-shadow: 0 0 0 2px var(--color-primary, #ea580c), var(--shadow-2, 0 10px 30px rgba(2, 8, 23, 0.12));
  transform: scale(1.03);
}
.bent-plan-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.bent-plan-price { margin-bottom: 1rem; }
.bent-plan-amount { font-size: 2rem; font-weight: 800; color: var(--color-primary, #ea580c); }
.bent-plan-period { font-size: 0.85rem; color: var(--color-muted, #78716c); margin-inline-start: 0.25rem; }
.bent-plan-features { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.5rem; text-align: start; }
.bent-plan-features li { padding-inline-start: 1.25rem; position: relative; }
.bent-plan-features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--color-primary, #ea580c); font-weight: 700; }
.bent-plan-cta {
  display: inline-block;
  background: var(--accent-bg, var(--color-primary, #ea580c));
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 640px) {
  .bent-plan-highlighted { transform: none; }
}

/* ── Breadcrumbs — CSS separators, RTL logical, last crumb is the page ── */
.bent-crumbs { margin: 0.75rem 0 1.25rem; }
.bent-crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--muted, #57534e);
}
.bent-crumb { display: inline-flex; align-items: center; }
.bent-crumb + .bent-crumb::before {
  content: "/";
  margin-inline: 0.45rem 0.5rem;
  color: #a8a29e;
  pointer-events: none;
}
.bent-crumb-link { color: var(--accent, #ea580c); text-decoration: none; }
.bent-crumb-link:hover { text-decoration: underline; }
.bent-crumb-current { color: inherit; font-weight: 600; }

/* ── Social icons — labeled pills, CSS-only, page module not footer chrome ── */
.bent-social { margin: 1rem 0; }
.bent-social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bent-social-item { margin: 0; padding: 0; }
.bent-social-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
}
.bent-social-link:hover {
  border-color: var(--accent, #ea580c);
  color: var(--accent, #ea580c);
}

/* ── Page-surface modules (search, newsletter, pager, consent, related, comments, slot, auth) ── */
.bent-search {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin: 0.75rem 0;
}
.bent-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 8px;
  font: inherit;
}
.bent-search-submit {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #ea580c);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.bent-newsletter {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 12px;
  background: #fff7ed;
}
.bent-newsletter-title { margin: 0 0 0.4rem; font-size: 1.15rem; }
.bent-newsletter-text { margin: 0 0 0.85rem; color: #57534e; }
.bent-newsletter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bent-newsletter-form input {
  flex: 1;
  min-width: 12rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 8px;
  font: inherit;
}
.bent-newsletter-form button {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #ea580c);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.bent-pager { margin: 1.25rem 0; }
.bent-pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bent-pager-link, .bent-pager-current {
  display: inline-flex;
  min-width: 2rem;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border, #e7e5e4);
}
.bent-pager-current { font-weight: 700; background: #fff7ed; }
.bent-consent-wrap { position: relative; }
.bent-consent-toggle { position: absolute; opacity: 0; pointer-events: none; }
.bent-consent-toggle:checked + .bent-consent { display: none; }
.bent-consent {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 12px;
  background: #1c1917;
  color: #fafaf9;
}
.bent-consent-text { margin: 0 0 0.75rem; }
.bent-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bent-consent-accept, .bent-consent-reject {
  display: inline-flex;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.bent-consent-accept { background: var(--accent, #ea580c); color: #fff; }
.bent-consent-reject { background: transparent; color: inherit; border: 1px solid #44403c; }
.bent-consent-policy { color: #fdba74; }
.bent-related { margin: 1.5rem 0; }
.bent-related-title { margin: 0 0 0.85rem; font-size: 1.2rem; }
.bent-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.bent-related-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 12px;
  overflow: hidden;
}
.bent-related-image { width: 100%; height: auto; display: block; }
.bent-related-body { padding: 0.75rem; }
.bent-related-tag { font-size: 0.75rem; color: var(--accent, #ea580c); }
.bent-related-item-title { margin: 0.2rem 0 0.35rem; font-size: 1rem; }
.bent-related-excerpt { margin: 0; color: #57534e; font-size: 0.9rem; }
.bent-comments { margin: 1.5rem 0; }
.bent-comments-title { margin: 0 0 0.85rem; }
.bent-comment {
  margin: 0 0 0.85rem;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border, #e7e5e4);
}
.bent-comment-meta { display: flex; gap: 0.6rem; font-size: 0.85rem; color: #78716c; }
.bent-comment-text { margin: 0.4rem 0 0; }
.bent-slot {
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px dashed #d6d3d1;
  border-radius: 10px;
  background: #fafaf9;
  text-align: center;
}
.bent-slot-label { display: block; font-size: 0.75rem; color: #a8a29e; margin-bottom: 0.4rem; }
.bent-slot-image { max-width: 100%; height: auto; }
.bent-slot-placeholder { display: block; padding: 1.5rem; color: #a8a29e; }
.bent-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0.75rem 0;
}
.bent-auth-hello { margin-inline-end: auto; color: #57534e; }
.bent-auth-login, .bent-auth-register { text-decoration: none; color: inherit; }
.bent-auth-register {
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: var(--accent, #ea580c);
  color: #fff;
}

/* ── Steps (how-it-works) — CSS counters, stacks on a narrow viewport ── */
.bent-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  counter-reset: bent-step;
}
.bent-step {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0.5rem 0.75rem 0;
}
.bent-step-n,
.bent-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
  margin-block-end: 0.6rem;
  border-radius: 999px;
  background: var(--color-primary, #ea580c);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}
.bent-step-n { counter-increment: bent-step; }
.bent-step-n::before { content: counter(bent-step); }
.bent-step-icon img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.bent-step-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.bent-step-body { margin: 0; color: var(--color-muted, #57534e); }

/* ── Timeline — vertical rail, logical (RTL-safe) ── */
.bent-timeline {
  position: relative;
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  padding-inline-start: 2rem;
}
.bent-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.45rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--color-primary, #ea580c);
  opacity: 0.35;
}
.bent-event {
  position: relative;
  margin: 0;
  padding-block: 0.2rem 1.35rem;
}
.bent-event::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.68rem;
  top: 0.55rem;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-primary, #ea580c);
  box-shadow: 0 0 0 3px var(--color-surface, #fff);
}
.bent-event-time {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary, #ea580c);
  letter-spacing: 0.02em;
}
.bent-event-title { margin: 0.15rem 0 0.35rem; font-size: 1.05rem; }
.bent-event-body { margin: 0; color: var(--color-muted, #57534e); }
.bent-event-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0.6rem;
  border-radius: var(--radius-md, 8px);
}

/* ── Team — photo, name, role, bio grid (gap-audit wave 3) ── */
.bent-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
}
.bent-member { text-align: center; margin: 0; }
.bent-member-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  margin-inline: auto;
  margin-block-end: 0.7rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--color-bg-soft, #f5f5f4);
  font-size: 2.4rem;
}
img.bent-member-photo { display: block; }
.bent-member-name {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
a.bent-member-name:hover { color: var(--color-primary, #ea580c); }
.bent-member-role {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary, #ea580c);
}
.bent-member-bio { margin: 0; font-size: 0.92rem; color: var(--color-muted, #57534e); }

/* ── Countdown — timer cells; the inline script ticks them ── */
.bent-countdown { margin: 1.5rem 0; text-align: center; }
.bent-count-label { margin: 0 0 0.6rem; font-weight: 600; }
.bent-count-cells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.bent-count-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-soft, #f5f5f4);
}
.bent-count-num {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary, #ea580c);
}
.bent-count-unit { font-size: 0.8rem; color: var(--color-muted, #57534e); }
.bent-count-done { margin: 0; font-size: 1.15rem; font-weight: 700; }

/* ── Price list — name ··· dotted leader ··· price (menu shape) ── */
.bent-pricelist { margin: 1.25rem 0; }
.bent-priceitem { margin: 0 0 0.9rem; }
.bent-priceitem-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.bent-priceitem-name { font-weight: 600; }
.bent-priceitem-dots {
  flex: 1;
  border-bottom: 2px dotted var(--border, #d6d3d1);
  transform: translateY(-0.25em);
}
.bent-priceitem-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary, #ea580c);
}
.bent-priceitem-desc { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--color-muted, #57534e); }

/* ── Progress bars — inline width %, animated by CSS only ── */
.bent-progress { margin: 1.25rem 0; }
.bent-bar { margin: 0 0 0.9rem; }
.bent-bar-head {
  display: flex;
  justify-content: space-between;
  margin-block-end: 0.3rem;
  font-size: 0.92rem;
}
.bent-bar-label { font-weight: 600; }
.bent-bar-value { font-variant-numeric: tabular-nums; color: var(--color-muted, #57534e); }
.bent-bar-track {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--color-bg-soft, #f5f5f4);
  overflow: hidden;
}
.bent-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary, #ea580c);
  animation: bent-bar-grow 0.9s ease-out;
}
@keyframes bent-bar-grow { from { width: 0; } }

/* ── Rating — two star layers, the fill clipped to the score (wave 4) ── */
.bent-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; }
.bent-rating-stars {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--border, #d6d3d1);
  white-space: nowrap;
}
.bent-rating-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f59e0b;
}
.bent-rating-text { font-size: 0.92rem; color: var(--color-muted, #57534e); }

/* ── Opening hours — day ··· hours rows, closed days muted ── */
.bent-hours { margin: 1.25rem 0; max-width: 32rem; }
.bent-day { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; }
.bent-day-name { font-weight: 600; }
.bent-day-dots { flex: 1; border-bottom: 2px dotted var(--border, #d6d3d1); transform: translateY(-0.25em); }
.bent-day-hours { font-variant-numeric: tabular-nums; }
.bent-day-closed .bent-day-hours { color: var(--color-muted, #57534e); font-style: italic; }

/* ── Table of contents — anchor list ── */
.bent-toc {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--color-primary, #ea580c);
  background: var(--color-bg-soft, #f5f5f4);
  border-radius: var(--radius-md, 8px);
}
.bent-toc-title { margin: 0 0 0.5rem; font-weight: 700; }
.bent-toc-list { margin: 0; padding-inline-start: 1.25rem; }
.bent-tocitem { margin: 0.25rem 0; }
.bent-tocitem-link { color: inherit; text-decoration: none; }
.bent-tocitem-link:hover { color: var(--color-primary, #ea580c); text-decoration: underline; }

/* ── Author box — photo beside name/bio/link ── */
.bent-author {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: var(--radius-md, 8px);
}
.bent-author-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--color-bg-soft, #f5f5f4);
  font-size: 1.8rem;
}
img.bent-author-photo { display: block; }
.bent-author-body { flex: 1; min-width: 0; }
.bent-author-name { margin: 0 0 0.25rem; font-weight: 700; }
.bent-author-bio { margin: 0 0 0.5rem; color: var(--color-muted, #57534e); }
.bent-author-meta { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--color-muted, #78716c); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bent-author-link { font-size: 0.9rem; font-weight: 600; color: var(--color-primary, #ea580c); text-decoration: none; }
.bent-author-link:hover { text-decoration: underline; }

/* ── Before / after — the range input drives the clip width ── */
.bent-compare { margin: 1.5rem 0; }
.bent-compare-frame { position: relative; overflow: hidden; border-radius: var(--radius-md, 8px); container-type: inline-size; }
.bent-compare-after { display: block; width: 100%; height: auto; }
.bent-compare-clip { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; overflow: hidden; }
.bent-compare-before { display: block; width: 100cqw; max-width: none; height: 100%; object-fit: cover; }
.bent-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-inline-start: -1px;
  background: var(--color-surface, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.bent-compare-badge {
  position: absolute;
  top: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  pointer-events: none;
}
.bent-compare-badge-before { inset-inline-start: 0.6rem; }
.bent-compare-badge-after { inset-inline-end: 0.6rem; }
.bent-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* ── Flip box — CSS-only 3D flip on hover / focus ── */
.bent-flipbox { perspective: 900px; margin: 1.25rem 0; min-height: 12rem; outline: none; }
.bent-flipbox-inner {
  position: relative;
  min-height: 12rem;
  transition: transform 0.55s ease;
  transform-style: preserve-3d;
}
.bent-flipbox:hover .bent-flipbox-inner,
.bent-flipbox:focus-within .bent-flipbox-inner,
.bent-flipbox:focus .bent-flipbox-inner { transform: rotateY(180deg); }
.bent-flipbox-front,
.bent-flipbox-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem;
  text-align: center;
  border-radius: var(--radius-md, 8px);
  backface-visibility: hidden;
}
.bent-flipbox-front { background: var(--color-primary, #ea580c); color: #fff; }
.bent-flipbox-back { background: var(--color-bg-soft, #f5f5f4); transform: rotateY(180deg); }
.bent-flipbox-icon { font-size: 2rem; }
img.bent-flipbox-icon { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.bent-flipbox-title { margin: 0; font-size: 1.15rem; color: inherit; }
.bent-flipbox-text { margin: 0; }
.bent-flipbox-button {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--color-primary, #ea580c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .bent-flipbox-inner { transition: none; } }

/* ── Page chrome — header / footer bands INSIDE the page (gap-audit wave 4).
   Own class names on purpose: .site-header/.site-footer are the master
   chrome (sticky, glass, footer palette from theme.js) and must not leak. ── */
.bent-header,
.bent-footer {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md, 8px);
}
.bent-header.tone-light,
.bent-footer.tone-light {
  background: var(--color-light-bg, #f8fafc);
  border: 1px solid var(--color-border, #e5e7eb);
}
.bent-header.tone-dark,
.bent-footer.tone-dark {
  background: #0f172a;
  color: #f8fafc;
}
.bent-header.tone-brand,
.bent-footer.tone-brand {
  background: var(--accent-bg, linear-gradient(135deg, #0a66c2, #0369a1));
  color: #fff;
}
.bent-header.tone-none,
.bent-footer.tone-none { padding-inline: 0; }
.bent-header.tone-dark a,
.bent-header.tone-brand a,
.bent-footer.tone-dark a,
.bent-footer.tone-brand a { color: inherit; }
.bent-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.bent-header.layout-stack .bent-header-inner {
  flex-direction: column;
  align-items: stretch;
}
.bent-header-inner > * { margin: 0; }
.bent-header-inner > .bent-image img { max-height: 3.5rem; width: auto; }
.bent-header-inner > .bent-nav,
.bent-header-inner > nav { flex: 1 1 auto; }
.bent-footer {
  padding-block: 2rem 1.25rem;
  font-size: 0.95rem;
}
.bent-footer-inner > * + * { margin-top: 1.25rem; }
.bent-footer-inner > .columns { margin: 0; }
.bent-footer-credit {
  margin: 1.5rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  font-size: 0.82rem;
  text-align: center;
  opacity: 0.8;
}

/* ── WhatsApp click-to-chat CTA — the in-page module, not the float ── */
.bent-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.7rem 1.25rem 0.7rem 1rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bent-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}
.bent-whatsapp .bent-wa-icon { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; }
.bent-wa-body { display: flex; flex-direction: column; align-items: flex-start; }
.bent-wa-note { font-size: 0.78rem; font-weight: 400; opacity: 0.9; }

article.feature h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

blockquote.testimonial { margin-inline: 0; }

p, li { max-width: 70ch; }

@media (max-width: 640px) {
  /* the header no longer stacks here — the drawer (v2.28, ≤720px) owns narrow screens */
  .hero { padding: 2.25rem 1rem 1.75rem; }
  .hero h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .feature, .main-nav a::after, .skip-link, .whatsapp-float, .bent-whatsapp { transition: none; }
}

/* ── Signature visuals (v0.44) — heroes with fixed backgrounds, text
   scrolling over them with opacity, moving text (the vision's namesakes) ── */

/* hero overlay + parallax */
.hero { position: relative; }
.hero.hero-overlaid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; /* follow the hero's rounded corners, no dark square bleed */
  background: rgba(0, 0, 0, var(--hero-overlay, 0.35));
  pointer-events: none;
}
.hero.hero-overlaid > * { position: relative; z-index: 1; }
.hero.hero-overlaid { color: #fff; }
.hero.hero-parallax { background-attachment: fixed; }

/* parallax section — fixed image, content scrolls over it */
.parallax-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.parallax-sm { min-height: 30vh; }
.parallax-md { min-height: 50vh; }
.parallax-lg { min-height: 70vh; }
.parallax-full { min-height: 100vh; }
.parallax-section.parallax-overlaid::before,
.parallax-tint-dark::before,
.parallax-tint-light::before,
.parallax-tint-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--px-tint, #000);
  opacity: var(--px-overlay, 0.35);
}
/* BACKDROP tint: colour of the layer between the fixed image and the content */
.parallax-tint-dark { --px-tint: #0b1220; }
.parallax-tint-light { --px-tint: #ffffff; }
.parallax-tint-brand { --px-tint: var(--color-primary, #0a66c2); }
.parallax-tint-light .parallax-inner { color: #0f172a; }
/* BACKDROP fade: the content block fades in once as a unit */
@media (prefers-reduced-motion: no-preference) {
  .parallax-fade .parallax-inner { animation: tapuz-fade 1s ease-out both; }
}
.parallax-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  text-align: center;
  color: #fff;
}

/* Interactive containers (v0.54) — CSS-only, no JS.
   Tabs: the radio hack (checked radio + adjacent label + panel). */
.bent-tabs { display: flex; flex-wrap: wrap; margin: 1.25rem 0; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.bent-tabs > .bent-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bent-tabs > .bent-tab-label {
  order: 1; cursor: pointer; padding: 0.65rem 1.15rem; font-weight: 600;
  color: var(--color-text-muted, #64748b); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.bent-tabs > .bent-tab-panel { order: 2; width: 100%; display: none; padding: 1.1rem 0.15rem; line-height: 1.65; }
.bent-tabs > .bent-tab-radio:checked + .bent-tab-label { color: var(--color-primary, #0a66c2); border-bottom-color: var(--color-primary, #0a66c2); }
.bent-tabs > .bent-tab-radio:checked + .bent-tab-label + .bent-tab-panel { display: block; }
.bent-tabs > .bent-tab-radio:focus-visible + .bent-tab-label { outline: 2px solid var(--color-primary, #0a66c2); outline-offset: 2px; }

/* Accordion: native <details>, styled. */
.bent-accordion { margin: 1.25rem 0; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-lg, 12px); overflow: hidden; }
.bent-fold { border-bottom: 1px solid var(--color-border, #e2e8f0); }
.bent-fold:last-child { border-bottom: none; }
.bent-fold > summary {
  cursor: pointer; padding: 0.9rem 1.15rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.bent-fold > summary::-webkit-details-marker { display: none; }
.bent-fold > summary::after { content: "\25BE"; color: var(--color-text-muted, #94a3b8); transition: transform .2s; }
.bent-fold[open] > summary::after { transform: rotate(180deg); }
.bent-fold > .bent-fold-body { padding: 0 1.15rem 1.05rem; line-height: 1.65; color: var(--color-text, #334155); }

/* form (v0.58) — the decompiler's #1 tool gap, now a first-class module */
.bent-form { margin: 1.25rem 0; display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; }
.bent-field { display: flex; flex-direction: column; gap: 0.35rem; }
.bent-field-label { font-weight: 600; font-size: 0.92rem; color: var(--color-text, #334155); }
.bent-field-req { color: #dc2626; }
.bent-form input, .bent-form textarea, .bent-form select {
  width: 100%; box-sizing: border-box; padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border, #cbd5e1); border-radius: var(--radius-md, 8px);
  font: inherit; background: var(--color-surface, #fff); color: inherit;
}
.bent-form textarea { min-height: 6.5rem; resize: vertical; }
.bent-field-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.bent-field-checkbox input { width: auto; }
.bent-form input:focus, .bent-form textarea:focus, .bent-form select:focus {
  outline: none; border-color: var(--color-accent, #0a66c2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #0a66c2) 18%, transparent);
}
.bent-form-submit {
  align-self: flex-start; padding: 0.7rem 1.4rem; border: none; border-radius: var(--radius-md, 8px);
  background: var(--color-accent, #0a66c2); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.bent-form-submit:hover { filter: brightness(1.06); }
/* honeypot — visually gone, still in the DOM for bots to trip on */
.bent-form .bent-hp {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}

/* card grid (v0.59) — the walla lesson: a content site is a wall of media
   cards. Responsive auto-fit grid, zero JS. */
.bent-cards {
  display: grid; gap: 1.25rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.bent-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px); overflow: hidden; transition: box-shadow .2s, transform .2s;
}
a.bent-card:hover { box-shadow: var(--shadow-2, 0 10px 30px rgba(0,0,0,.12)); transform: translateY(-2px); }
.bent-card-media { margin: 0; aspect-ratio: 16 / 9; background: var(--color-border, #eef2f7); overflow: hidden; }
.bent-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bent-card-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bent-card-tag {
  align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--color-accent, #0a66c2);
}
.bent-card-title { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--color-text, #0f172a); }
.bent-card-excerpt { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted, #64748b); }

/* product / teaser grid — KSP-class shops, zero JS, no cart */
.bent-products {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.bent-products-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bent-products-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bent-products-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .bent-products-cols-2,
  .bent-products-cols-3,
  .bent-products-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .bent-products-cols-2,
  .bent-products-cols-3,
  .bent-products-cols-4 { grid-template-columns: 1fr; }
}
.bent-product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
a.bent-product:hover { box-shadow: var(--shadow-2, 0 10px 30px rgba(0,0,0,.12)); }
.bent-product-media { margin: 0; aspect-ratio: 1 / 1; background: var(--color-border, #eef2f7); overflow: hidden; }
.bent-product-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.bent-product-body { padding: 0.85rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.35rem; }
.bent-product-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.bent-product-price { margin: 0; font-weight: 700; color: var(--accent, #ea580c); }

/* blog article: code fence, byline, tag chips — zero JS */
.bent-code { margin: 1.5rem 0; }
.bent-code-lang {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted, #64748b); margin-bottom: 0.35rem;
}
.bent-code pre {
  margin: 0; padding: 0.9rem 1rem; overflow-x: auto;
  background: var(--color-bg-alt, #0f172a); color: #e2e8f0;
  border-radius: var(--radius-md, 10px); font-size: 0.85rem; line-height: 1.5;
}
.bent-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bent-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0; }
.bent-tag {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--color-bg-alt, #f8fafc); border: 1px solid var(--color-border, #e2e8f0);
  text-decoration: none; color: inherit; font-size: 0.85rem;
}
a.bent-tag:hover { border-color: var(--accent, #ea580c); color: var(--accent, #ea580c); }

/* table (v0.83) — hours, prices, schedules. The wrapper scrolls (invariant
   I2): a wide schedule pans in its own container, never the page. */
.bent-table-wrap { margin: 1.5rem 0; overflow-x: auto; }
.bent-table { border-collapse: collapse; min-width: 100%; }
.bent-table th, .bent-table td {
  padding: 0.6rem 0.9rem; text-align: start;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.bent-table th {
  background: var(--color-bg-alt, #f8fafc); font-weight: 700;
  color: var(--color-text, #0f172a); border-bottom-width: 2px;
}
.bent-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg-alt, #f8fafc) 55%, transparent); }
.bent-table-empty {
  padding: 1rem 1.25rem; border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: var(--radius-md, 10px); color: var(--color-text-muted, #64748b);
  background: var(--color-bg-alt, #f8fafc);
}

/* audio (v0.80) — native player, the video figure's little sibling */
.bent-audio { margin: 1.5rem 0; }
.bent-audio audio { width: 100%; max-width: 34rem; display: block; }
.bent-audio-caption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted, #64748b); }
.bent-audio-empty {
  padding: 1rem 1.25rem; border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: var(--radius-md, 10px); color: var(--color-text-muted, #64748b);
  background: var(--color-bg-alt, #f8fafc);
}

/* carousel (v0.79) — the cards unit sliding instead of wrapping. Zero JS:
   CSS scroll-snap, touch-native, RTL-aware via logical properties (the strip
   starts at inline-start — the right on RTL pages). `peek` keeps the next
   slide's edge visible so scrollability is self-evident. */
.bent-carousel { margin: 1.5rem 0; }
.bent-carousel-track {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: 0.5rem; /* room for the scrollbar, no clipped shadows */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bent-slide {
  flex: 0 0 80%; max-width: 26rem;
  scroll-snap-align: start;
}
.bent-carousel-full .bent-slide { flex-basis: 100%; max-width: 100%; }
.bent-slide .bent-card { height: 100%; }
.bent-carousel-sm .bent-slide .bent-card-media { aspect-ratio: 21 / 9; }
.bent-carousel-md .bent-slide .bent-card-media { aspect-ratio: 16 / 9; }
.bent-carousel-lg .bent-slide .bent-card-media { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .bent-slide { flex-basis: 44%; }
  .bent-carousel-full .bent-slide { flex-basis: 100%; }
}

/* category presentation (v0.64) — a branded header above the category's
   article grid (the grid itself REUSES .bent-cards). Accent color arrives as
   --bent-cat-color on the section (safeCssColor-guarded). */
.bent-category { margin: 1.75rem 0; }
.bent-category-head {
  padding: 0.9rem 1.1rem; margin-bottom: 1rem; border-radius: var(--radius-lg, 12px);
  border-inline-start: 5px solid var(--bent-cat-color, var(--color-primary, #0a66c2));
  background: var(--color-bg-alt, #f8fafc);
}
.bent-category-head.has-cover {
  background-size: cover; background-position: center; position: relative;
  min-height: 7.5rem; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.bent-category-head.has-cover::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.08));
}
.bent-category-head.has-cover .bent-category-name,
.bent-category-head.has-cover .bent-category-desc { position: relative; color: #fff; }
.bent-category-name { margin: 0; font-size: 1.45rem; }
.bent-category-desc { margin: 0.25rem 0 0; color: var(--color-text-muted, #64748b); }

/* nav (v0.60) — page-level navigation bar with color options, zero JS */
.bent-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  padding: 0.75rem 1rem; margin: 1rem 0; border-radius: var(--radius-md, 10px);
}
.bent-nav-start { justify-content: flex-start; }
.bent-nav-center { justify-content: center; }
.bent-nav-end { justify-content: flex-end; }
.bent-nav-link {
  color: var(--bent-nav-color, var(--color-text, #334155)); text-decoration: none;
  font-weight: 600; padding: 0.35rem 0.55rem; border-radius: var(--radius-sm, 6px); transition: opacity .15s;
}
.bent-nav-link:hover { opacity: .7; }

/* moving-news ticker (v0.61) — walla's מבזקים strip: a pinned label + a row of
   scrolling clickable headlines. Reuses the marquee's tapuz-marquee keyframes
   (two tracks in lockstep = seamless at any headline count); zero JS. */
.bent-ticker {
  display: flex; align-items: stretch; margin: 1rem 0;
  border-radius: var(--radius-md, 10px); overflow: hidden;
  /* the ticker bar is deliberately DARK chrome, not a surface panel — its own
     var so the always-emitted --color-surface can never turn it white-on-white */
  background: var(--bent-ticker-bg, #0f172a);
}
.bent-ticker-label {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 0 1rem; font-weight: 700; white-space: nowrap;
  background: rgba(0, 0, 0, 0.25); color: var(--bent-ticker-color, #fff);
}
.bent-ticker-viewport {
  flex: 1; min-width: 0; display: flex; overflow: hidden;
  white-space: nowrap; padding-block: 0.6rem;
}
.bent-ticker-track {
  flex-shrink: 0; min-width: 100%;
  display: flex; align-items: center; gap: 2.5rem; padding-inline: 1.25rem;
  animation: tapuz-marquee var(--marquee-duration, 20s) linear infinite;
  will-change: transform;
}
.bent-ticker-slow .bent-ticker-track { --marquee-duration: 40s; }
.bent-ticker-fast .bent-ticker-track { --marquee-duration: 11s; }
.bent-ticker-link {
  /* light default to match the dark default bar — do NOT fall back to the
     page's --color-text (usually dark → invisible on the dark ticker). */
  color: var(--bent-ticker-color, #e2e8f0);
  text-decoration: none; font-weight: 600; flex-shrink: 0; transition: opacity .15s;
}
.bent-ticker-link:hover { opacity: .7; }
[dir="rtl"] .bent-ticker-track { animation-name: tapuz-marquee-rtl; }
@media (prefers-reduced-motion: reduce) { .bent-ticker-track { animation: none; } }

/* newspop (v0.70) — the STANDING timestamped news feed the ticker's scroll
   can't be: walla's column of "HH:MM · headline" rows. Zero JS, RTL-first. */
.bent-newspop {
  margin: 1.25rem 0; border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px); overflow: hidden; background: var(--color-surface, #fff);
}
.bent-newspop-head {
  padding: 0.6rem 1rem; font-weight: 700; font-size: 0.95rem;
  background: var(--color-accent, #0a66c2); color: #fff;
}
.bent-newspop-list { list-style: none; margin: 0; padding: 0; }
.bent-newspop-item {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.7rem 1rem; border-top: 1px solid var(--color-border, #eef2f7);
}
.bent-newspop-item:first-child { border-top: none; }
.bent-newspop-time {
  flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 0.8rem; color: var(--color-accent, #0a66c2); min-width: 3.2rem;
}
.bent-newspop-text { color: var(--color-text, #0f172a); text-decoration: none; line-height: 1.4; }
a.bent-newspop-text:hover { text-decoration: underline; }

/* marquee — two full-width tracks scrolling in lockstep = seamless at any
   text length (no "pop" for short strings) */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  padding-block: 0.6rem;
}
.marquee-track {
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-around;
  gap: 3rem;
  animation: tapuz-marquee var(--marquee-duration, 18s) linear infinite;
  will-change: transform;
}
.marquee-slow .marquee-track { --marquee-duration: 32s; }
.marquee-fast .marquee-track { --marquee-duration: 9s; }
.marquee-item { display: inline-block; font-size: 1.15rem; }
@keyframes tapuz-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
[dir="rtl"] .marquee-track { animation-name: tapuz-marquee-rtl; }
@keyframes tapuz-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* entrance animations — scroll-driven where supported, one-shot elsewhere.
   Universal since v1.97: any module may carry animate= (fade | rise | zoom) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .anim-fade { animation: tapuz-fade both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .anim-rise { animation: tapuz-rise both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .anim-zoom { animation: tapuz-zoom both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  @supports not (animation-timeline: view()) {
    .anim-fade { animation: tapuz-fade 0.8s ease-out both; }
    .anim-rise { animation: tapuz-rise 0.8s ease-out both; }
    .anim-zoom { animation: tapuz-zoom 0.8s ease-out both; }
  }
}
@keyframes tapuz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tapuz-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tapuz-zoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* fixed backgrounds are janky on touch devices (any size — tablets, big
   phones, landscape) — key on the input type, not just a width breakpoint */
@media (hover: none) and (pointer: coarse) {
  .hero.hero-parallax, .parallax-section { background-attachment: scroll; }
}
@media (max-width: 768px) {
  .hero.hero-parallax, .parallax-section { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .anim-fade, .anim-rise, .anim-zoom { animation: none; }
}

/* MOTION entrance effects (effect: fade | slide | typewriter) — the text is
   always fully present; CSS supplies the motion. Distinct from the marquee
   scroll (effect: marquee). Speed sets the duration. */
.motion-text { padding-block: 0.4rem; }
.motion-text .motion-text-inner { display: inline-block; max-width: 100%; }
.motion-slow { --motion-dur: 1.5s; }
.motion-md { --motion-dur: 0.9s; }
.motion-fast { --motion-dur: 0.5s; }
@media (prefers-reduced-motion: no-preference) {
  .motion-fade .motion-text-inner { animation: tapuz-fade var(--motion-dur, 0.9s) ease-out both; }
  .motion-slide .motion-text-inner { animation: tapuz-motion-slide var(--motion-dur, 0.9s) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .motion-typewriter .motion-text-inner {
    overflow: hidden;
    white-space: nowrap;
    border-inline-end: 2px solid currentColor;
    animation: tapuz-typewriter var(--motion-dur, 0.9s) steps(32, end) both,
               tapuz-caret 0.75s step-end infinite;
  }
}
@keyframes tapuz-motion-slide {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: none; }
}
[dir="rtl"] .motion-slide .motion-text-inner { animation-name: tapuz-motion-slide-rtl; }
@keyframes tapuz-motion-slide-rtl {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes tapuz-typewriter { from { width: 0; } to { width: 100%; } }
@keyframes tapuz-caret { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .motion-fade .motion-text-inner,
  .motion-slide .motion-text-inner,
  .motion-typewriter .motion-text-inner { animation: none; width: auto; border-inline-end: 0; }
}

/* ── section (מיכל) — container-as-tool, v0.75 ──
   A section with content flows naturally; an EMPTY section is legitimate —
   it publishes as reserved blank space waiting for a future release. */
.tz-section { min-width: 0; }
.tz-section.is-empty { display: block; }
.tz-section.is-empty.size-sm { min-height: 2.5rem; }
.tz-section.is-empty.size-md { min-height: 6rem; }
.tz-section.is-empty.size-lg { min-height: 12rem; }
.tz-section.is-empty.size-xl { min-height: 20rem; }

/* ── The stretch band (v2.56) — SECTION / BACKDROP / HERO width: wide|full.
   A design tool's page is a stack of color bands; here the band runs edge
   to edge while its content keeps the site's column (.sec-inner, the
   backdrop's inner, the hero's children). Same breakout as
   .columns.cols-full. The page clips the few pixels a classic scrollbar
   adds to 100vw, only when such a band is on it. */
body:has(.sec-w-full, .sec-w-wide, .px-w-full, .px-w-wide, .hero-w-full, .hero-w-wide) { overflow-x: clip; }
.bent-section.sec-w-full,
.parallax-section.px-w-full,
.hero.hero-w-full {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-block: 0;
  border-radius: 0;
  box-sizing: border-box;
}
.bent-section.sec-w-wide,
.parallax-section.px-w-wide,
.hero.hero-w-wide {
  width: min(1400px, calc(100vw - 2rem));
  max-width: none;
  margin-inline: calc(50% - min(700px, 50vw - 1rem));
  margin-block: 0;
  box-sizing: border-box;
}
.bent-section.sec-w-full,
.bent-section.sec-w-wide { padding: clamp(2.5rem, 6vw, 5.5rem) 1.25rem; }
.bent-section > .sec-inner { max-width: var(--max-width); margin-inline: auto; }
.bent-section > .sec-inner > :first-child { margin-top: 0; }
.bent-section > .sec-inner > :last-child { margin-bottom: 0; }
.parallax-section.px-w-full .parallax-inner,
.parallax-section.px-w-wide .parallax-inner { max-width: var(--max-width); width: 100%; text-align: inherit; }
.hero.hero-w-full > *,
.hero.hero-w-wide > * { max-width: 760px; margin-inline: auto; }
.hero.hero-w-full,
.hero.hero-w-wide { padding-block: clamp(3rem, 8vw, 7rem); }
/* bands butt against the header and the footer, like the design */
.main-content > .container > :is(.sec-w-full, .px-w-full, .hero-w-full):first-child { margin-top: -2.25rem; }
.main-content > .container > :is(.sec-w-full, .px-w-full, .hero-w-full):last-child { margin-bottom: -2.25rem; }

/* A menu with no items draws no burger (v2.56 — an imported one-page design
   has no menu, and a button that opens nothing is a broken promise) */
/* (!important: the phone collapse rules carry a four-class selector, and no
   nav with nothing in it should ever show) */
.main-nav:not(:has(li)) { display: none !important; }

/* Geppetto's helpers (v2.56) — a round portrait (a design's circle frame),
   and a row of cards whose pictures the design framed in circles */
.bent-image.gp-circle img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.bent-cards.gp-round-media .bent-card-media { background: none; padding: 1rem 1rem 0; aspect-ratio: auto; overflow: visible; }
.bent-cards.gp-round-media .bent-card-media img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; width: min(78%, 220px); height: auto; margin-inline: auto; display: block; }
.bent-cards.gp-round-media .bent-card-body { text-align: center; }

/* ── HTML גולמי (the raw-HTML escape hatch) — v1.49 ──
   Deliberately almost nothing. This block exists so an author can build the
   thing the CMS has no module for, so the theme must not impose a look on
   their markup. We only stop it from breaking the page around it: contain the
   layout and keep long unbroken strings from forcing a horizontal scrollbar.
   Anything visual is the author's job, inside their own markup. */
.bent-html { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.bent-html > * { max-width: 100%; }

/* per-device visibility (v2.12) — builder "עיצוב מודול" chrome */
@media (max-width: 767px) { .hide-on-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-on-desktop { display: none !important; } }

/* ===== Side menu (menuPlacement: side) — a REAL sidebar (v2.13) =====
   body.menu-side is stamped by the renderer when the theme picks the vertical
   menu. It used to just stack the top header's flex column — the menu pushed
   the whole page down. Now: a two-column grid; the entire header becomes a
   sticky, full-height sidebar on the inline-start side (right in RTL, left in
   LTR), content + footer flow in the second column. Narrow screens fall back
   to the regular top bar with a wrapping horizontal menu — CSS only, published
   pages still ship zero JavaScript. */
body.menu-side {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}
body.menu-side .site-header {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-bottom: none;
  border-inline-end: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
body.menu-side .main-content {
  grid-column: 2;
  grid-row: 1;
  /* v2.63 — the item used to be centred by its auto margins, so it was sized
     by its content, not the track: a 900px column plus padding is 943px, and
     a 745px track (a 1024px screen beside a 264px rail) overflowed. Measured
     with the mirrored rail, where the overflow ran UNDER the rail. The item
     now fills the track (stretch counts the padding); the reading width
     lives on the container inside it. */
  max-width: none;
  min-width: 0;
  margin: 0;
}
body.menu-side .main-content > .container { max-width: var(--max-width); margin: 0 auto; }
body.menu-side .site-footer {
  grid-column: 2;
  grid-row: 2;
}
/* stray static body children (site extras) belong to the content column;
   fixed/absolute ones (floats, banners, skip-link) are out of flow anyway */
body.menu-side > :not(.site-header):not(.main-content):not(.site-footer) {
  grid-column: 2;
}
body.menu-side .site-header .header-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
  max-width: none;
  margin: 0;
}
body.menu-side .header-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
body.menu-side .main-nav ul {
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
}
body.menu-side .main-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md, 10px);
}
body.menu-side .main-nav a:hover {
  background: var(--color-light-bg);
  color: var(--color-primary);
}
/* in the rail a sub-menu is an indented list, always open, and there is no
   burger (v2.28). Scoped to the widths where the rail EXISTS: below 900px
   side mode falls back to the top bar, and at ≤720px the drawer must win —
   an unscoped `body.menu-side .nav-burger{display:none}` outranks the
   drawer's `.nav-burger{display:flex}` and the phone menu vanishes. */
@media (min-width: 901px) {
  /* a side site never gets a scroll strip: menu-side + menu-scroll is a legal
     knob pair, and the strip's nowrap / overflow-x / edge fade would fade
     every rail row at both ends. (0,2,2) beats the strip's (0,2,1). */
  body.menu-side .main-nav ul { overflow-x: visible; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  body.menu-side .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.2rem; padding-inline-start: 0.9rem; background: transparent; min-width: 0; }
  body.menu-side .main-nav .sub-menu a { padding: 0.35rem 0.85rem; font-size: 0.9em; }
  body.menu-side .main-nav li.has-children > a::before { content: ''; margin: 0; }
  body.menu-side .nav-burger { display: none; }
  /* the rail marks the current page with a tint, not an underline (a 2px
     line under a padded block link looks broken); a fold's summary is a rail
     row like any link */
  body.menu-side .main-nav a[aria-current="page"] { background: var(--color-light-bg); color: var(--color-primary); }
  body.menu-side .main-nav a[aria-current="page"]::after { display: none; }
  /* the parent of the current page echoes the mark as colour only: its
     underline echo (li.has-current > a::after, width: 100%) is cancelled
     like the current link's own */
  body.menu-side .main-nav li.has-current > a::after { display: none; }
  body.menu-side .main-nav li.has-current > a { color: var(--color-primary); }
  body.menu-side .main-nav .nav-more-sum { display: block; padding: 0.55rem 0.85rem; border-radius: var(--radius-md, 10px); }
}
@media (max-width: 900px) {
  /* narrow screens: back to the familiar top bar, menu wraps horizontally */
  body.menu-side { display: block; }
  body.menu-side .site-header {
    height: auto;
    overflow: visible;
    border-inline-end: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.9rem 0;
  }
  body.menu-side .site-header .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    max-width: var(--max-width);
    margin: 0 auto;
  }
  body.menu-side .header-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  body.menu-side .main-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    /* no scroll strip in side mode at any width (see the rail block) */
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.menu-side .main-nav a { padding: 0.25rem 0.4rem; }
}

/* ===== The store (v2.53) — <bent-shop> <bent-buy> <bent-cart> <bent-checkout>
   <bent-order> and the header's cart. Every colour, radius and shadow is the
   theme's own variable, so a store wears whatever the site wears. The cart,
   the checkout and the order page are filled by /tz-store.js; the grid and
   the buy box are plain server-rendered HTML. ===== */
.bent-shop-card[hidden], .bent-checkout-box[hidden], .bent-checkout-address[hidden], .bent-price-was[hidden] { display: none !important; }
/* the theme caps prose at 70ch (p, li); the store's rows are layout, not prose */
.bent-totals-row, .bent-totals-note, .bent-issues li, .bent-field, .bent-coupon, .bent-checkout-error,
.bent-cart-empty p, .bent-store-closed, .bent-store-wait, .bent-order-pay p { max-width: none; }

/* the header's cart button */
.tz-cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; margin-inline-start: 0.5rem;
  border-radius: var(--radius-pill, 999px); color: var(--color-text, #111827); text-decoration: none;
  border: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface, #fff);
  transition: border-color .15s ease, color .15s ease;
}
.tz-cart-link:hover, .tz-cart-link:focus-visible { border-color: var(--color-primary, #0a66c2); color: var(--color-primary, #0a66c2); }
.tz-cart-count {
  position: absolute; top: -0.35rem; inset-inline-end: -0.35rem; min-width: 1.25rem; height: 1.25rem;
  padding: 0 0.3rem; border-radius: 999px; background: var(--accent-bg, var(--color-primary, #0a66c2));
  color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}

/* shared */
.bent-store-closed, .bent-store-wait {
  margin: 1rem 0; padding: 0.85rem 1rem; border-radius: var(--radius-md, 10px);
  background: var(--color-light-bg, #f8fafc); border: 1px solid var(--color-border, #e5e7eb); color: var(--color-muted, #6b7280);
}
.bent-store-wait { border-style: dashed; }
.bent-price-now { font-weight: 800; color: var(--color-text, #111827); }
.bent-price-was { color: var(--color-muted, #6b7280); font-weight: 500; margin-inline-start: 0.35rem; }
.bent-stock { margin: 0.2rem 0 0; font-size: 0.85rem; font-weight: 600; }
.bent-stock-low { color: #b45309; }
.bent-stock-out { color: #b91c1c; }
.bent-shop-badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--accent-bg, var(--color-primary, #0a66c2)); color: #fff;
}
.bent-btn, .bent-shop-add, .bent-buy-add, .bent-checkout-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.65rem 1.2rem; border: 2px solid transparent; border-radius: var(--radius-md, 8px);
  background: var(--accent-bg, var(--color-primary, #0a66c2)); color: #fff; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.bent-btn:hover, .bent-shop-add:hover, .bent-buy-add:hover, .bent-checkout-submit:hover { filter: brightness(0.92); }
.bent-btn:focus-visible, .bent-shop-add:focus-visible, .bent-buy-add:focus-visible, .bent-checkout-submit:focus-visible,
.bent-qty-btn:focus-visible, .bent-shop-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary, #0a66c2) 45%, transparent); outline-offset: 2px; }
.bent-btn-ghost { background: transparent; color: var(--color-text, #111827); border-color: var(--color-border, #e5e7eb); }
.bent-shop-add.is-added, .bent-buy-add.is-added { transform: scale(1.04); }
.bent-shop-add.is-out { background: var(--color-light-bg, #f1f5f9); color: var(--color-muted, #6b7280); cursor: default; }
.bent-checkout-submit[disabled] { opacity: .6; cursor: progress; }

/* <bent-shop> */
.bent-shop { margin: 1.5rem 0; }
.bent-shop-title { margin: 0 0 1rem; }
.bent-shop-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.bent-shop-chip {
  padding: 0.35rem 0.95rem; border-radius: 999px; border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff); color: var(--color-text, #111827); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.bent-shop-chip.is-on { background: var(--accent-bg, var(--color-primary, #0a66c2)); border-color: transparent; color: #fff; }
.bent-shop-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bent-shop-cols-2 .bent-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bent-shop-cols-4 .bent-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bent-shop-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px); transition: box-shadow .15s ease, transform .15s ease;
}
.bent-shop-card:hover { box-shadow: var(--shadow-2, 0 10px 30px rgba(2, 8, 23, 0.12)); }
.bent-shop-card.is-out .bent-shop-img { filter: grayscale(0.6); opacity: .75; }
.bent-shop-media { display: block; aspect-ratio: 1 / 1; background: var(--color-light-bg, #f1f5f9); overflow: hidden; }
.bent-shop-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.bent-shop-card:hover .bent-shop-img { transform: scale(1.03); }
.bent-shop-noimg, .bent-buy-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.6rem; opacity: .55; }
.bent-shop-card > .bent-shop-badge { position: absolute; top: 0.7rem; inset-inline-start: 0.7rem; }
.bent-shop-body { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem 1.05rem; }
.bent-shop-name { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.bent-shop-link { color: inherit; text-decoration: none; }
.bent-shop-link:hover { color: var(--color-primary, #0a66c2); }
.bent-shop-summary { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--color-muted, #6b7280); }
.bent-shop-price { margin: 0.2rem 0 0; font-size: 1.05rem; }
.bent-shop-body .bent-shop-add { margin-top: auto; align-self: stretch; }
.bent-shop-body .bent-stock + .bent-shop-add, .bent-shop-body .bent-shop-price + .bent-shop-add { margin-top: 0.6rem; }
.bent-shop-empty { padding: 2rem 1rem; text-align: center; color: var(--color-muted, #6b7280); }
@media (max-width: 860px) {
  .bent-shop-grid, .bent-shop-cols-4 .bent-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .bent-shop-grid, .bent-shop-cols-2 .bent-shop-grid, .bent-shop-cols-4 .bent-shop-grid { grid-template-columns: 1fr; }
}

/* <bent-buy> */
.bent-buy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; margin: 1.5rem 0; align-items: start; }
.bent-buy-missing { display: block; }
.bent-buy-gallery { display: flex; flex-direction: column; gap: 0.7rem; }
.bent-buy-main, .bent-buy-gallery > .bent-buy-noimg {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg, 12px);
  background: var(--color-light-bg, #f1f5f9); border: 1px solid var(--color-border, #e5e7eb);
}
.bent-buy-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bent-buy-thumb { padding: 0; width: 4.2rem; height: 4.2rem; border-radius: var(--radius-md, 8px); overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; }
.bent-buy-thumb.is-on { border-color: var(--color-primary, #0a66c2); }
.bent-buy-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bent-buy-info { display: flex; flex-direction: column; gap: 0.55rem; }
.bent-buy-info > .bent-shop-badge { align-self: flex-start; }
.bent-buy-title { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; }
.bent-buy-shelf { margin: 0; font-size: 0.85rem; color: var(--color-muted, #6b7280); }
.bent-buy-summary { margin: 0; font-size: 1.05rem; color: var(--color-muted, #6b7280); }
.bent-buy-price { margin: 0.3rem 0; font-size: 1.6rem; }
.bent-buy-label { font-size: 0.85rem; font-weight: 700; color: var(--color-muted, #6b7280); }
.bent-buy-variant, .bent-buy-qty {
  font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px); background: var(--color-surface, #fff); color: var(--color-text, #111827);
}
.bent-buy-variant { width: 100%; max-width: 22rem; }
.bent-buy-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.bent-buy-qty { width: 5rem; text-align: center; }
.bent-buy-add { flex: 1; min-width: 12rem; padding-block: 0.85rem; font-size: 1.05rem; }
.bent-buy-vat { margin: 0; font-size: 0.8rem; color: var(--color-muted, #6b7280); }
.bent-buy-desc { margin-top: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); line-height: 1.75; }
.bent-buy-desc p { margin: 0 0 0.8rem; }
@media (max-width: 760px) {
  .bent-buy { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* the cart, the checkout summary, the order page — shared lines + totals */
.bent-cart, .bent-order { margin: 1.5rem 0; }
.bent-cart-lines { display: flex; flex-direction: column; border-top: 1px solid var(--color-border, #e5e7eb); }
.bent-cart-line {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto auto; gap: 0.9rem; align-items: center;
  padding: 0.9rem 0; border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.bent-cart-lines.is-compact .bent-cart-line { grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.6rem 0; }
.bent-cart-media { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md, 8px); overflow: hidden; background: var(--color-light-bg, #f1f5f9); }
.bent-cart-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bent-cart-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bent-cart-link { font-weight: 700; color: inherit; text-decoration: none; }
a.bent-cart-link:hover { color: var(--color-primary, #0a66c2); }
.bent-cart-variant, .bent-cart-unit { font-size: 0.85rem; color: var(--color-muted, #6b7280); }
.bent-cart-total { font-weight: 800; white-space: nowrap; }
.bent-cart-remove {
  width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--color-border, #e5e7eb);
  background: transparent; color: var(--color-muted, #6b7280); cursor: pointer; font: inherit;
}
.bent-cart-remove:hover { color: #b91c1c; border-color: #fca5a5; }
.bent-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 8px); overflow: hidden; }
.bent-qty-btn { width: 2.1rem; height: 2.3rem; border: 0; background: var(--color-light-bg, #f8fafc); color: var(--color-text, #111827); font: inherit; font-weight: 700; cursor: pointer; }
.bent-qty-input { width: 2.8rem; height: 2.3rem; border: 0; text-align: center; font: inherit; background: var(--color-surface, #fff); color: var(--color-text, #111827); -moz-appearance: textfield; }
.bent-qty-input::-webkit-outer-spin-button, .bent-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bent-totals { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bent-totals-row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.bent-totals-row.is-discount span:last-child { color: #15803d; font-weight: 700; }
.bent-totals-row.is-total { margin-top: 0.3rem; padding-top: 0.6rem; border-top: 2px solid var(--color-border, #e5e7eb); font-size: 1.2rem; font-weight: 800; }
.bent-totals-note { margin: 0.2rem 0; font-size: 0.85rem; color: var(--color-muted, #6b7280); }
.bent-cart-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.bent-cart-empty { padding: 2.5rem 1rem; text-align: center; }
.bent-issues {
  list-style: none; margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md, 10px);
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.92rem;
}
@media (max-width: 560px) {
  .bent-cart-line { grid-template-columns: 3.6rem minmax(0, 1fr) auto; grid-template-areas: 'media name remove' 'media qty total'; row-gap: 0.5rem; }
  .bent-cart-line > .bent-cart-media { grid-area: media; }
  .bent-cart-line > .bent-cart-name { grid-area: name; }
  .bent-cart-line > .bent-qty { grid-area: qty; justify-self: start; }
  .bent-cart-line > .bent-cart-total { grid-area: total; }
  .bent-cart-line > .bent-cart-remove { grid-area: remove; }
  .bent-cart-lines.is-compact .bent-cart-line { grid-template-areas: none; }
  /* no areas in the compact (read-only) row, so no area names on its cells either —
     a named area that is not in the template sends every cell to the same implicit
     track, and the picture, the name and the total are drawn on top of each other */
  .bent-cart-lines.is-compact .bent-cart-line > * { grid-area: auto; }
}

/* <bent-checkout> */
.bent-checkout { margin: 1.5rem 0; }
.bent-checkout-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.bent-checkout-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.bent-checkout-box {
  margin: 0; padding: 1rem 1.1rem 0.6rem; border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px); background: var(--color-surface, #fff);
}
.bent-checkout-box legend { padding: 0 0.4rem; font-weight: 800; }
.bent-field { margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; }
.bent-field label { font-size: 0.88rem; font-weight: 700; }
.bent-field input, .bent-field textarea, .bent-coupon input {
  font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px); background: var(--color-surface, #fff); color: var(--color-text, #111827);
}
.bent-field input:focus, .bent-field textarea:focus, .bent-coupon input:focus {
  outline: none; border-color: var(--color-primary, #0a66c2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0a66c2) 20%, transparent);
}
.bent-field.is-bad input, .bent-field.is-bad textarea { border-color: #dc2626; }
.bent-field-error { min-height: 0; font-size: 0.82rem; color: #b91c1c; }
.bent-field-check label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.bent-choices { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.bent-choice {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.6rem; align-items: center;
  padding: 0.7rem 0.85rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 10px); cursor: pointer;
}
.bent-choice:has(input:checked) { border-color: var(--color-primary, #0a66c2); background: color-mix(in srgb, var(--color-primary, #0a66c2) 6%, var(--color-surface, #fff)); }
.bent-choice-label { font-weight: 700; }
.bent-choice-price { font-weight: 700; }
.bent-choice-note { grid-column: 2 / -1; font-size: 0.82rem; color: var(--color-muted, #6b7280); }
.bent-checkout-summary {
  position: sticky; top: 5.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-lg, 12px);
  background: var(--color-light-bg, #f8fafc); border: 1px solid var(--color-border, #e5e7eb);
}
.bent-checkout-h { margin: 0 0 0.6rem; font-size: 1.15rem; }
.bent-summary-edit { display: inline-block; margin: 0.5rem 0; font-size: 0.85rem; }
.bent-coupon { margin: 0.8rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.bent-coupon label { font-size: 0.85rem; font-weight: 700; }
.bent-coupon-row { display: flex; gap: 0.4rem; }
.bent-coupon-row input { flex: 1; min-width: 0; }
.bent-coupon-apply {
  padding: 0.55rem 0.9rem; border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff); color: var(--color-text, #111827); font: inherit; font-weight: 700; cursor: pointer;
}
.bent-coupon-msg { font-size: 0.85rem; }
.bent-coupon-msg.is-ok { color: #15803d; }
.bent-coupon-msg.is-bad { color: #b91c1c; }
.bent-checkout-error { margin: 0.4rem 0; min-height: 1.2em; color: #b91c1c; font-weight: 600; }
.bent-checkout-submit { width: 100%; padding-block: 0.95rem; font-size: 1.1rem; }
/* the honeypot: off-screen, not display:none (some bots skip hidden fields) */
.bent-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) {
  .bent-checkout-form { grid-template-columns: 1fr; }
  .bent-checkout-summary { position: static; }
}

/* <bent-order> */
.bent-order-head { text-align: center; padding: 1.5rem 1rem 1rem; }
.bent-order-check {
  width: 3.4rem; height: 3.4rem; margin: 0 auto 0.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #dcfce7; color: #15803d; font-size: 1.7rem; font-weight: 800;
}
.bent-order-title { margin: 0; font-size: 1.6rem; }
.bent-order-status { display: inline-block; margin: 0.5rem 0; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--color-light-bg, #f1f5f9); font-weight: 700; font-size: 0.9rem; }
.bent-order-status.is-cancelled { background: #fee2e2; color: #b91c1c; }
.bent-order-status.is-shipped, .bent-order-status.is-completed { background: #dcfce7; color: #15803d; }
.bent-order-thanks, .bent-order-tracking { margin: 0.3rem 0; color: var(--color-muted, #6b7280); }
.bent-order-pay {
  margin: 1rem 0; padding: 1rem 1.2rem; border-radius: var(--radius-lg, 12px);
  border: 2px solid var(--color-primary, #0a66c2); background: color-mix(in srgb, var(--color-primary, #0a66c2) 5%, var(--color-surface, #fff));
}
.bent-order-pay h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.bent-order-pay-details { margin: 0 0 0.4rem; white-space: pre-line; }
.bent-order-pay-phone { margin: 0 0 0.6rem; font-weight: 700; }

/* "added to cart" */
.bent-toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 150%); z-index: 2147482500;
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.1rem; border-radius: var(--radius-md, 10px); background: #111827; color: #fff;
  box-shadow: 0 12px 32px rgba(2, 8, 23, 0.3); transition: transform .25s ease; font-size: 0.95rem;
}
.bent-toast.is-on { transform: translate(-50%, 0); }
.bent-toast-link { color: #fff; font-weight: 800; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .bent-toast, .bent-shop-card, .bent-shop-img { transition: none; }
}

/* the card gateway: the test-mode banner on the checkout and the order page, the payment's state line */
.bent-test-banner { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: #fef3c7; color: #92400e; border: 1px dashed #f59e0b; font-weight: 700; text-align: center; }
.bent-order-pay-state { margin: 0 0 0.6rem; font-weight: 600; }
.bent-order-pay-state.is-failed, .bent-order-pay-state.is-mismatch { color: #b91c1c; }
.bent-order-pay-state.is-paid { color: #166534; }

/* ===== The header's shape (v2.63) — chrome.headerLayout, chrome.menuDrawer,
   layout.menuPlacement side-end / bottom. Ben: "let the user move the menu …
   more modern, less typecast". The body classes come from
   theme.menuBodyClasses; CSS only — published pages still ship no JavaScript.
   ===== */

/* centered (header-layout="centered"): the brand above a centered menu */
body.header-centered .site-header .header-inner { flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
body.header-centered .header-brand { flex-direction: column; gap: 0.3rem; }
body.header-centered .main-nav { flex: 0 1 auto; width: 100%; justify-content: center; }
body.header-centered .main-nav ul { justify-content: center; }
body.header-centered .nav-burger { margin-inline: auto; }

/* floating (header-layout="floating"): a detached, rounded glass pill that
   hovers over the page. Sticky like the bar, but with air around it; the
   surface colour is emitted by theme.js (header-bg or the surface, 84%). */
body.header-floating .site-header {
  position: sticky;
  top: 0.75rem;
  z-index: 100;
  width: min(var(--header-max-width, 1140px), calc(100% - 1.5rem));
  margin: 0.75rem auto 0;
  padding: 0.45rem 0;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow-2, 0 10px 30px rgba(2, 8, 23, 0.12));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.header-floating .site-header .container { max-width: none; padding: 0; }
body.header-floating .site-header .header-inner { max-width: none; padding-inline: 1.25rem 0.6rem; }
body.header-floating .site-header .site-logo img { max-height: 40px; }
body.header-floating .site-header.site-header--nosticky { position: relative; }
/* the pill opens (the ☰ list inside it): corners, not a circle */
body.header-floating .site-header:has(.nav-toggle:checked) { border-radius: var(--radius-lg, 18px); }

/* the rail on the other side (menu="side-end") — the same rail, mirrored */
@media (min-width: 901px) {
  body.menu-side-end { grid-template-columns: minmax(0, 1fr) 264px; }
  body.menu-side-end .site-header { grid-column: 2; border-inline-end: none; border-inline-start: 1px solid var(--color-border); }
  body.menu-side-end .main-content, body.menu-side-end .site-footer { grid-column: 1; }
  body.menu-side-end > :not(.site-header):not(.main-content):not(.site-footer) { grid-column: 1; }
}

/* the bar at the bottom (menu="bottom"): the brand keeps the top, the menu is
   a bar fixed along the bottom edge, the way an app does it. Best with up to
   six items — more wrap to a second row. Sub-menus open upward. The body
   also carries nav-collapse-never (theme.js), so no breakpoint ever folds
   this bar into a ☰. A blurred header would position the fixed bar by
   itself (backdrop-filter is a containing block), so the glass steps aside. */
body.menu-bottom { padding-bottom: 4.25rem; }
body.menu-bottom .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-bottom .main-nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 110;
  background: var(--color-surface, #fff);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(2, 8, 23, 0.08);
  padding: 0.35rem 0.75rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
}
body.menu-bottom .main-nav ul { justify-content: space-around; column-gap: 0.5rem; row-gap: 0.2rem; }
body.menu-bottom .main-nav a { padding: 0.45rem 0.7rem; border-radius: 999px; }
body.menu-bottom .main-nav a::after { display: none; }
body.menu-bottom .main-nav a[aria-current="page"] { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
body.menu-bottom .main-nav .sub-menu { top: auto; bottom: calc(100% + 0.4rem); }
/* no ☰ at any width (the body also carries nav-collapse-never, so this only says it beside the bar) */
body.menu-bottom .nav-toggle, body.menu-bottom .nav-burger { display: none; }

/* the ☰ opens a panel over the page (drawer="overlay") instead of the list
   inside the header. Rides on the breakpoint drawer rules above: they still
   decide WHEN the ☰ shows and toggle the list; this only moves the open list
   off-canvas. `html body` lifts these above the drawer's own list rules; the
   padding is the one property both set, so it is marked. The burger stays
   above the backdrop so a second tap closes the panel. */
html body.nav-overlay .nav-burger { position: relative; z-index: 160; }
/* v2.65 — the close button belongs to the panel. Measured on the Hebrew site
   under the centered masthead: the burger sits BELOW the logo (y 53–91 on a
   375px phone) and the panel's first item started at y 40 — the ✕ covered
   "הבית". While the panel is open the burger is pinned to the panel's top
   corner, whatever shape the header has; the panel's 4.5rem top padding
   clears it. */
html body.nav-overlay .main-nav:has(.nav-toggle:checked) .nav-burger { position: fixed; top: 1rem; inset-inline-end: 1.25rem; margin: 0; }
html body.nav-overlay .nav-toggle:checked ~ ul {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(320px, 86vw);
  box-sizing: border-box; /* measured: content-box made a 320px panel 364px wide on a 375px phone */
  z-index: 150;
  margin: 0;
  padding: 4.5rem 1.25rem 1.5rem !important;
  /* measured on the Hebrew site (v2.64): the list inherits the bar's flex-wrap,
     and a column list with a fixed height wraps its overflow into a SECOND
     column instead of scrolling — a 17-row menu put "אודות" and "צרו קשר"
     beside the panel, over the page. A panel scrolls; it never wraps. */
  flex-wrap: nowrap;
  overflow-y: auto;
  /* v2.65 — a panel's list starts at the top: the centered masthead's
     menu-align=center would float a short list mid-panel */
  justify-content: flex-start;
  background: var(--color-surface, #fff);
  border-inline-start: 1px solid var(--color-border);
  box-shadow: 0 0 48px rgba(2, 8, 23, 0.28);
}
html body.nav-overlay .nav-toggle:checked ~ ul a,
html body.nav-overlay .nav-toggle:checked ~ ul .nav-more-sum { display: block; padding: 0.7rem 0.5rem; font-size: 1.05rem; white-space: normal; }
html body.nav-overlay .main-nav:has(.nav-toggle:checked)::after { content: ''; position: fixed; inset: 0; z-index: 140; background: rgba(2, 8, 23, 0.45); }
/* a fixed panel inside a blurred header would be positioned by the header (backdrop-filter is a containing block): the blur steps aside while the panel is open */
html body.nav-overlay .site-header:has(.nav-toggle:checked) { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: no-preference) {
  html body.nav-overlay .nav-toggle:checked ~ ul { animation: nav-overlay-in 0.22s ease-out; }
}
@keyframes nav-overlay-in { from { transform: translateX(var(--nav-overlay-from, 100%)); } to { transform: none; } }
[dir="rtl"] body.nav-overlay { --nav-overlay-from: -100%; }


/* Tapuz theme overrides */
:root {
  --font-family: -apple-system, "SF Pro Display", Inter, system-ui, sans-serif;
  --font-heading: -apple-system, "SF Pro Display", Inter, system-ui, sans-serif;
  --max-width: 960px;
  --color-text: #F5F5F7;
  --color-muted: #9a9aa6;
  --color-text-muted: #9a9aa6;
  --color-primary: #FFC761;
  --color-accent: #FFC761;
  --color-secondary: #7a5cff;
  --color-border: #26262e;
  --color-bg: #000000;
  --color-light-bg: #1a1a20;
  --color-surface: #121216;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(2, 8, 23, 0.06);
  --shadow-2: 0 10px 30px rgba(2, 8, 23, 0.12);
  --accent-bg: #FFC761;
  --header-max-width: 1140px;
  --menu-gap: 1.75rem;
  --menu-size: 0.95rem;
  --menu-align: flex-end;
}
html { font-size: 17px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
.site-header { background: #08080a; }
.site-header, .site-header .site-logo, .site-header .main-nav a, .site-header .main-nav .nav-more-sum, .site-header .site-tagline { color: #F5F5F7; }
.main-nav a, .main-nav .nav-more-sum { transition: color 0.15s, box-shadow 0.15s; }
.main-nav a:hover, .main-nav .nav-more-sum:hover { color: #FFC761; box-shadow: inset 0 -2px 0 #FFC761; }
.site-footer { background: #08080a; }
.site-footer, .site-footer a, .footer-col-title { color: #9a9aa6; }

/* ── theme skin (trusted-author, see DEFAULT_OVERRIDES.skin) ── */
:root { --color-bg-alt: #1a1a20; --hn-glow: #FFC761; --hn-glow-soft: #FFC76180; }
.site-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg,#FF6E73,#FF9E45,#FFD961,#61EBB2,#70BDFF,#AD8FFF,#FF85CC) 1; }
.site-footer { border-top: 1px solid #26262e; }
a.btn-primary, .btn-primary, button.primary { box-shadow: 0 0 24px var(--hn-glow-soft); }
img.hn-shot, .bent-image img { box-shadow: 0 0 24px var(--hn-glow-soft); border-radius: 12px; }
.site-banner.tone-dark { background: #121216; color: #F5F5F7; border: 1px solid #26262e; }