/* ==========================================================================
   ŽOGU FABRIKA — PUBLIC component recipes
   v0.1 · 2026-10-11 · requires zf-public-tokens.css, nothing else.
   --------------------------------------------------------------------------
   Every rule references a token; no raw hex. Prefix `zfp-` = public.
   Mobile first. Breakpoints: 480 / 768 / 1024 / 1280 (see tokens §7).
   Sections, in file order:
     1 layout  2 buttons  3 badges/chips  4 top bar  5 hero  6 stat strip
     7 section header + text  8 cards (category / product / news)
     9 carousel  10 product page  11 FAQ  12 forms  13 map  14 footer
     15 cookie banner  16 breadcrumbs + pagination  17 utilities
   ========================================================================== */

/* 1. LAYOUT ---------------------------------------------------------------- */
.zfp-container {
  width: 100%;
  max-width: calc(var(--zfp-container) + 2 * var(--zfp-gutter));
  margin-inline: auto;
  padding-inline: var(--zfp-gutter);
}
.zfp-container--wide   { max-width: calc(var(--zfp-container-wide)   + 2 * var(--zfp-gutter)); }
.zfp-container--narrow { max-width: calc(var(--zfp-container-narrow) + 2 * var(--zfp-gutter)); }
.zfp-container--form   { max-width: calc(var(--zfp-container-form)   + 2 * var(--zfp-gutter)); }

.zfp-section    { padding-block: var(--zfp-section-y); }
.zfp-section--sm{ padding-block: var(--zfp-section-y-sm); }
.zfp-section--sunken { background: var(--zf-bg-sunken); }
.zfp-section--surface{ background: var(--zf-bg-nav); border-block: 1px solid var(--zf-border-subtle); }

.zfp-grid { display: grid; gap: var(--zfp-grid-gap); grid-template-columns: 1fr; }
@media (min-width: 480px)  { .zfp-grid--2, .zfp-grid--3, .zfp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zfp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .zfp-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .zfp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* two-column text + media; stacks on phones */
.zfp-split { display: grid; gap: var(--zf-space-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .zfp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--zf-space-16); }
  .zfp-split--media-first > :first-child { order: 2; }
}

/* 2. BUTTONS --------------------------------------------------------------- */
.zfp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zf-space-2);
  min-height: 48px; padding: 0 var(--zf-space-6);
  font: var(--zf-fw-semibold) var(--zf-fs-16)/1 var(--zf-font-sans);
  letter-spacing: var(--zf-ls-snug);
  border-radius: var(--zf-radius-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--zf-dur-fast) var(--zf-ease), border-color var(--zf-dur-fast) var(--zf-ease),
              color var(--zf-dur-fast) var(--zf-ease), transform var(--zf-dur-fast) var(--zf-ease);
}
.zfp-btn:active { transform: translateY(1px); }
.zfp-btn--primary { background: var(--zf-accent); color: var(--zf-text-on-accent); }
.zfp-btn--primary:hover  { background: var(--zf-accent-hover); color: var(--zf-text-on-accent); }
.zfp-btn--primary:active { background: var(--zf-accent-active); }
/* Shop CTA. Amber is reserved for "go and buy" — one colour, one meaning. */
.zfp-btn--shop { background: var(--zf-accent-2); color: var(--zf-text-on-accent-2); }
.zfp-btn--shop:hover  { background: var(--zf-accent-2-hover); color: var(--zf-text-on-accent-2); }
.zfp-btn--shop:active { background: var(--zf-accent-2-active); }
.zfp-btn--secondary { background: transparent; color: var(--zf-text-primary); border-color: var(--zf-border-strong); }
.zfp-btn--secondary:hover { background: var(--zf-bg-surface-hover); border-color: var(--zf-text-muted); color: var(--zf-text-primary); }
.zfp-btn--ghost { background: transparent; color: var(--zf-text-secondary); }
.zfp-btn--ghost:hover { background: var(--zf-bg-surface-hover); color: var(--zf-text-primary); }
.zfp-btn--sm { min-height: 40px; padding: 0 var(--zf-space-4); font-size: var(--zf-fs-14); }
.zfp-btn--lg { min-height: 56px; padding: 0 var(--zf-space-8); font-size: var(--zfp-fs-h4); }
.zfp-btn--block { width: 100%; }
.zfp-btn:disabled, .zfp-btn[aria-disabled="true"] { color: var(--zf-text-disabled); background: var(--zf-bg-inset); border-color: var(--zf-border-subtle); cursor: not-allowed; transform: none; }
.zfp-btn__icon { width: 20px; height: 20px; flex: none; }
.zfp-btn--icon { padding: 0; width: 48px; }
.zfp-btn--icon.zfp-btn--sm { width: 40px; }

/* 3. BADGES / CHIPS -------------------------------------------------------- */
.zfp-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 26px; padding: 0 var(--zf-space-3);
  border-radius: var(--zf-radius-pill);
  font-size: var(--zf-fs-12); font-weight: var(--zf-fw-semibold); letter-spacing: var(--zf-ls-wide); text-transform: uppercase;
  background: var(--zf-bg-inset); color: var(--zf-text-secondary); border: 1px solid var(--zf-border-subtle);
}
.zfp-badge--accent { background: var(--zf-accent-wash); color: var(--zf-accent-on-wash); border-color: transparent; }
.zfp-badge--amber  { background: var(--zf-accent-2-wash); color: var(--zf-accent-2); border-color: transparent; }
.zfp-badge--good   { color: var(--zf-status-good-text); }
.zfp-badge--good::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zf-status-good-fill); }
.zfp-badge--critical { color: var(--zf-status-critical-text); }

.zfp-chip {
  display: inline-flex; align-items: center; gap: var(--zf-space-2);
  height: 36px; padding: 0 var(--zf-space-4);
  border-radius: var(--zf-radius-pill); border: 1px solid var(--zf-border-default);
  background: transparent; color: var(--zf-text-secondary);
  font: var(--zf-fw-medium) var(--zf-fs-14)/1 var(--zf-font-sans); cursor: pointer; text-decoration: none;
}
.zfp-chip:hover { border-color: var(--zf-border-strong); color: var(--zf-text-primary); }
.zfp-chip[aria-pressed="true"], .zfp-chip--active { background: var(--zf-accent-wash); border-color: var(--zf-accent); color: var(--zf-accent-on-wash); }

/* 4. TOP BAR --------------------------------------------------------------- */
.zfp-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--zf-bg-nav) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zf-border-subtle);
}
.zfp-topbar__inner {
  min-height: var(--zfp-topbar-h-compact);
  display: flex; align-items: center; gap: var(--zf-space-3);
}
@media (min-width: 480px) { .zfp-topbar__inner { gap: var(--zf-space-4); } }
@media (min-width: 1024px) { .zfp-topbar__inner { min-height: var(--zfp-topbar-h); gap: var(--zf-space-6); } }

.zfp-brand { display: flex; align-items: center; gap: var(--zf-space-3); text-decoration: none; color: inherit; flex: none; }
.zfp-brand__mark { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.zfp-brand__name { font-size: var(--zf-fs-14); font-weight: var(--zf-fw-bold); letter-spacing: var(--zf-ls-wide); text-transform: uppercase; color: var(--zf-text-primary); white-space: nowrap; }
.zfp-brand__sub  { display: none; font-size: var(--zf-fs-11); color: var(--zf-text-muted); letter-spacing: var(--zf-ls-wide); text-transform: uppercase; }
/* below 400px the wordmark leaves the layout but stays in the accessible name of the link */
@media (max-width: 399px) { .zfp-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 1280px) { .zfp-brand__sub { display: block; } }

.zfp-nav { display: none; margin-inline: auto; }
.zfp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--zf-space-1); }
.zfp-nav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--zf-space-3);
  border-radius: var(--zf-radius-md); font-size: var(--zf-fs-14); font-weight: var(--zf-fw-medium);
  color: var(--zf-text-secondary); text-decoration: none; white-space: nowrap;
}
.zfp-nav a:hover { background: var(--zf-bg-surface-hover); color: var(--zf-text-primary); }
.zfp-nav a[aria-current="page"] { color: var(--zf-accent-on-wash); background: var(--zf-accent-wash); font-weight: var(--zf-fw-semibold); }
@media (min-width: 1024px) { .zfp-nav { display: block; } }

.zfp-topbar__actions { display: flex; align-items: center; gap: var(--zf-space-1); margin-left: auto; }
@media (min-width: 480px) { .zfp-topbar__actions { gap: var(--zf-space-2); } }
@media (min-width: 1024px) { .zfp-topbar__actions { margin-left: 0; } }

/* Language switch — a segmented control; current language is a non-link. */
.zfp-lang { display: inline-flex; padding: 3px; border-radius: var(--zf-radius-pill); background: var(--zf-bg-inset); border: 1px solid var(--zf-border-subtle); }
.zfp-lang a, .zfp-lang span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 6px;
  border-radius: var(--zf-radius-pill); font-size: var(--zf-fs-12); font-weight: var(--zf-fw-semibold); letter-spacing: var(--zf-ls-wide);
  color: var(--zf-text-muted); text-decoration: none; text-transform: uppercase;
}
.zfp-lang a:hover { color: var(--zf-text-primary); }
.zfp-lang [aria-current="true"] { background: var(--zf-bg-surface-raised); color: var(--zf-text-primary); box-shadow: var(--zf-elev-1); }

.zfp-topbar .zfp-btn--shop { display: none; }
@media (min-width: 480px) { .zfp-topbar .zfp-btn--shop { display: inline-flex; } }

/* Burger + drawer (phones and tablets) */
.zfp-burger { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--zf-text-primary); border-radius: var(--zf-radius-md); cursor: pointer; }
.zfp-burger:hover { background: var(--zf-bg-surface-hover); }
@media (min-width: 1024px) { .zfp-burger { display: none; } }
.zfp-drawer { display: none; border-top: 1px solid var(--zf-border-subtle); background: var(--zf-bg-nav); }
.zfp-drawer[data-open="true"] { display: block; }
@media (min-width: 1024px) { .zfp-drawer, .zfp-drawer[data-open="true"] { display: none; } }
.zfp-drawer ul { list-style: none; margin: 0; padding: var(--zf-space-3) 0; }
.zfp-drawer a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--zfp-gutter); font-size: var(--zf-fs-16); font-weight: var(--zf-fw-medium); color: var(--zf-text-primary); text-decoration: none; }
.zfp-drawer a:hover { background: var(--zf-bg-surface-hover); }
.zfp-drawer a[aria-current="page"] { color: var(--zf-accent); }
.zfp-drawer__cta { padding: var(--zf-space-3) var(--zfp-gutter) var(--zf-space-5); }

/* Cart button (shop) */
.zfp-cart { position: relative; }
.zfp-cart__count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--zf-radius-pill); background: var(--zf-accent-2); color: var(--zf-text-on-accent-2);
  font-size: var(--zf-fs-11); font-weight: var(--zf-fw-bold); line-height: 18px; text-align: center;
}

/* 5. HERO ------------------------------------------------------------------ */
.zfp-hero { position: relative; isolation: isolate; overflow: hidden; }
.zfp-hero__media { position: absolute; inset: 0; z-index: -2; }
.zfp-hero__media img, .zfp-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.zfp-hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--zfp-scrim-strong); }
.zfp-hero__inner { display: grid; gap: var(--zf-space-8); padding-block: clamp(72px, 10vw, 160px) clamp(56px, 8vw, 120px); }
.zfp-hero__title { font-size: var(--zfp-fs-display); line-height: var(--zfp-lh-display); letter-spacing: var(--zf-ls-tighter); max-width: 14ch; }
.zfp-hero__lead  { font-size: var(--zfp-fs-lead); line-height: var(--zfp-lh-lead); color: var(--zf-text-secondary); max-width: 52ch; }
.zfp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zf-space-3); }
.zfp-hero__meta { display: flex; flex-wrap: wrap; gap: var(--zf-space-2) var(--zf-space-5); font-size: var(--zf-fs-14); color: var(--zf-text-muted); }
.zfp-hero__meta li { display: flex; align-items: center; gap: var(--zf-space-2); }
.zfp-hero__meta svg { width: 18px; height: 18px; color: var(--zf-accent); flex: none; }

/* Hero variant B: text + framed media side by side (video or image) */
.zfp-hero--split .zfp-hero__inner { align-items: center; }
@media (min-width: 1024px) { .zfp-hero--split .zfp-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--zf-space-16); } }
.zfp-hero__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--zf-radius-xl); overflow: hidden; border: 1px solid var(--zf-border-subtle); box-shadow: var(--zf-elev-3); background: var(--zfp-media-placeholder); }
.zfp-hero__frame img, .zfp-hero__frame video { width: 100%; height: 100%; object-fit: cover; }
.zfp-play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--zf-bg-page) 70%, transparent); color: var(--zf-text-primary);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center;
  outline: 1px solid var(--zf-border-strong);
}
.zfp-play:hover { background: var(--zf-accent); color: var(--zf-text-on-accent); }
.zfp-play svg { width: 28px; height: 28px; margin-left: 4px; }

/* 6. STAT STRIP ------------------------------------------------------------ */
.zfp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zf-space-6) var(--zf-space-4); }
@media (min-width: 1024px) { .zfp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--zf-space-8); } }
.zfp-stat { display: grid; gap: var(--zf-space-1); padding-left: var(--zf-space-4); border-left: 2px solid var(--zf-accent); }
.zfp-stat__value { font-size: var(--zfp-fs-stat); line-height: var(--zfp-lh-stat); font-weight: var(--zf-fw-semibold); letter-spacing: var(--zf-ls-tight); color: var(--zf-text-primary); font-variant-numeric: tabular-nums; }
.zfp-stat__unit  { font-size: .5em; font-weight: var(--zf-fw-medium); color: var(--zf-text-muted); margin-left: .15em; }
.zfp-stat__label { font-size: var(--zf-fs-14); color: var(--zf-text-secondary); line-height: var(--zf-lh-14); }

/* 7. SECTION HEADER + RUNNING TEXT ----------------------------------------- */
.zfp-eyebrow { display: inline-flex; align-items: center; gap: var(--zf-space-2); font-size: var(--zfp-fs-eyebrow); line-height: var(--zfp-lh-eyebrow); font-weight: var(--zf-fw-semibold); letter-spacing: var(--zf-ls-wide); text-transform: uppercase; color: var(--zf-accent); margin-bottom: var(--zf-space-3); }
.zfp-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
.zfp-section-head { display: grid; gap: var(--zf-space-3); margin-bottom: var(--zf-space-10); }
.zfp-section-head p { color: var(--zf-text-secondary); font-size: var(--zfp-fs-lead); line-height: var(--zfp-lh-lead); max-width: 60ch; }
@media (min-width: 768px) {
  .zfp-section-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .zfp-section-head--row p { grid-column: 1; }
  .zfp-section-head--row .zfp-section-head__aside { grid-column: 2; grid-row: 1 / span 2; }
}
.zfp-prose { max-width: var(--zfp-measure); color: var(--zf-text-secondary); }
.zfp-prose h2, .zfp-prose h3 { color: var(--zf-text-primary); margin-top: var(--zf-space-8); margin-bottom: var(--zf-space-3); }
.zfp-prose h2:first-child, .zfp-prose h3:first-child { margin-top: 0; }
.zfp-prose p { margin-bottom: var(--zf-space-4); }
.zfp-prose ul { padding-left: 1.2em; margin: 0 0 var(--zf-space-4); }
.zfp-prose li { margin-bottom: var(--zf-space-1); }
.zfp-prose strong { color: var(--zf-text-primary); font-weight: var(--zf-fw-semibold); }
.zfp-prose--lead { font-size: var(--zfp-fs-lead); line-height: var(--zfp-lh-lead); }
/* long SEO copy: collapsed on phones behind a <details> */
.zfp-readmore > summary { list-style: none; cursor: pointer; color: var(--zf-accent); font-weight: var(--zf-fw-medium); display: inline-flex; gap: var(--zf-space-2); align-items: center; margin-top: var(--zf-space-2); }
.zfp-readmore > summary::-webkit-details-marker { display: none; }
.zfp-readmore[open] > summary .zfp-readmore__more, .zfp-readmore:not([open]) > summary .zfp-readmore__less { display: none; }
@media (min-width: 768px) { .zfp-readmore > summary { display: none; } } /* + 4 lines of JS set [open] from 768px */

/* Value list (icon + title + text) */
.zfp-values { display: grid; gap: var(--zf-space-6); }
@media (min-width: 768px) { .zfp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zf-space-8); } }
.zfp-value { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--zf-space-4); align-items: start; }
.zfp-value__icon { width: 48px; height: 48px; border-radius: var(--zf-radius-md); background: var(--zf-accent-wash); color: var(--zf-accent); display: grid; place-items: center; }
.zfp-value__icon svg { width: 24px; height: 24px; }
.zfp-value h3 { margin-bottom: var(--zf-space-1); }
.zfp-value p { color: var(--zf-text-secondary); }

/* 8. CARDS ----------------------------------------------------------------- */
.zfp-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--zf-bg-surface); border: 1px solid var(--zf-border-subtle); border-radius: var(--zf-radius-lg);
  overflow: hidden; box-shadow: var(--zf-elev-1);
  transition: border-color var(--zf-dur-base) var(--zf-ease), transform var(--zf-dur-base) var(--zf-ease), box-shadow var(--zf-dur-base) var(--zf-ease);
}
.zfp-card:hover { border-color: var(--zf-border-strong); transform: translateY(-2px); box-shadow: var(--zf-elev-2); }
.zfp-card:focus-within { border-color: var(--zf-accent); }
.zfp-card__media { aspect-ratio: 4 / 3; background: var(--zfp-media-placeholder); overflow: hidden; }
.zfp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--zf-dur-slow) var(--zf-ease); }
.zfp-card:hover .zfp-card__media img { transform: scale(1.03); }
.zfp-card__body { display: flex; flex-direction: column; gap: var(--zf-space-2); padding: var(--zf-space-5); flex: 1; }
.zfp-card__title { font-size: var(--zfp-fs-h4); line-height: var(--zfp-lh-h4); }
/* stretched link: the whole card is the target; the anchor is the title */
.zfp-card__title a { color: inherit; text-decoration: none; }
.zfp-card__title a::after { content: ""; position: absolute; inset: 0; }
.zfp-card__text { color: var(--zf-text-secondary); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-card__cta { margin-top: auto; padding-top: var(--zf-space-2); color: var(--zf-accent); font-size: var(--zf-fs-14); font-weight: var(--zf-fw-semibold); display: inline-flex; align-items: center; gap: var(--zf-space-1); }
.zfp-card__cta svg { width: 16px; height: 16px; transition: transform var(--zf-dur-fast) var(--zf-ease); }
.zfp-card:hover .zfp-card__cta svg { transform: translateX(3px); }

/* category card: image dominant, title over a scrim */
.zfp-card--category .zfp-card__media { aspect-ratio: 3 / 4; position: relative; }
.zfp-card--category .zfp-card__media::after { content: ""; position: absolute; inset: 0; background: var(--zfp-scrim); }
.zfp-card--category .zfp-card__body { position: absolute; inset: auto 0 0 0; padding: var(--zf-space-5); }
.zfp-card--category .zfp-card__title { font-size: var(--zfp-fs-h3); line-height: var(--zfp-lh-h3); }
@media (min-width: 1024px) { .zfp-card--category .zfp-card__media { aspect-ratio: 4 / 5; } }

/* product card (shop) */
.zfp-card--product .zfp-card__media { aspect-ratio: 1; background: var(--zf-bg-inset); }
.zfp-card__badges { position: absolute; top: var(--zf-space-3); left: var(--zf-space-3); display: flex; gap: var(--zf-space-1); z-index: 1; }
.zfp-card__meta { font-size: var(--zf-fs-12); color: var(--zf-text-muted); letter-spacing: var(--zf-ls-wide); text-transform: uppercase; }
.zfp-price { display: flex; align-items: baseline; gap: var(--zf-space-2); flex-wrap: wrap; }
.zfp-price__value { font-size: var(--zfp-fs-price); line-height: var(--zfp-lh-price); font-weight: var(--zf-fw-semibold); letter-spacing: var(--zf-ls-tight); color: var(--zf-text-primary); font-variant-numeric: tabular-nums; }
.zfp-price__unit  { font-size: var(--zf-fs-14); color: var(--zf-text-muted); }
.zfp-price__note  { font-size: var(--zf-fs-12); color: var(--zf-text-muted); width: 100%; }
.zfp-price__old   { font-size: var(--zf-fs-14); color: var(--zf-text-muted); text-decoration: line-through; }
.zfp-card--product .zfp-card__actions { display: flex; gap: var(--zf-space-2); margin-top: var(--zf-space-2); position: relative; z-index: 1; }
.zfp-card--product .zfp-card__actions .zfp-btn { flex: 1; }

/* news / article card */
.zfp-card--news .zfp-card__media { aspect-ratio: 16 / 9; }
.zfp-card__date { font-size: var(--zf-fs-12); color: var(--zf-text-muted); }

/* 9. CAROUSEL (scroll-snap; buttons are enhancement) ----------------------- */
.zfp-carousel { position: relative; }
.zfp-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px);
  gap: var(--zf-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--zfp-gutter);
  padding-block: var(--zf-space-2) var(--zf-space-4);
  /* bleed to the viewport edge on phones so the next card peeks */
  margin-inline: calc(-1 * var(--zfp-gutter)); padding-inline: var(--zfp-gutter);
  scrollbar-width: none;
}
.zfp-carousel__track::-webkit-scrollbar { display: none; }
.zfp-carousel__track > * { scroll-snap-align: start; }
@media (min-width: 768px)  { .zfp-carousel__track { grid-auto-columns: calc((100% - var(--zf-space-4)) / 2); } }
@media (min-width: 1024px) { .zfp-carousel__track { grid-auto-columns: calc((100% - 2 * var(--zf-space-4)) / 3); margin-inline: 0; padding-inline: 0; } }
@media (min-width: 1280px) { .zfp-carousel__track { grid-auto-columns: calc((100% - 3 * var(--zf-space-4)) / 4); } }
.zfp-carousel__nav { display: flex; gap: var(--zf-space-2); }
.zfp-carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--zf-border-default); background: var(--zf-bg-surface); color: var(--zf-text-primary); cursor: pointer; display: grid; place-items: center; }
.zfp-carousel__btn:hover { border-color: var(--zf-accent); color: var(--zf-accent); }
.zfp-carousel__btn:disabled { color: var(--zf-text-disabled); cursor: default; border-color: var(--zf-border-subtle); }
.zfp-carousel__btn svg { width: 20px; height: 20px; }

/* 10. PRODUCT PAGE (shop) -------------------------------------------------- */
.zfp-product { display: grid; gap: var(--zf-space-8); }
@media (min-width: 1024px) { .zfp-product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--zf-space-16); align-items: start; } }
.zfp-gallery { display: grid; gap: var(--zf-space-3); }
.zfp-gallery__main { aspect-ratio: 4 / 3; border-radius: var(--zf-radius-xl); overflow: hidden; background: var(--zf-bg-inset); border: 1px solid var(--zf-border-subtle); }
.zfp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.zfp-gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--zf-space-2); }
.zfp-gallery__thumb { aspect-ratio: 1; border-radius: var(--zf-radius-md); overflow: hidden; border: 2px solid transparent; background: var(--zf-bg-inset); padding: 0; cursor: pointer; }
.zfp-gallery__thumb[aria-current="true"] { border-color: var(--zf-accent); }
.zfp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zfp-buybox { display: grid; gap: var(--zf-space-5); position: sticky; top: calc(var(--zfp-topbar-h) + var(--zf-space-4)); }
.zfp-buybox__panel { display: grid; gap: var(--zf-space-4); padding: var(--zf-space-6); background: var(--zf-bg-surface); border: 1px solid var(--zf-border-subtle); border-radius: var(--zf-radius-lg); }
.zfp-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--zf-border-default); border-radius: var(--zf-radius-md); overflow: hidden; height: 48px; }
.zfp-qty button { width: 44px; border: 0; background: var(--zf-bg-inset); color: var(--zf-text-primary); font-size: var(--zf-fs-20); cursor: pointer; }
.zfp-qty button:hover { background: var(--zf-bg-surface-hover); }
.zfp-qty input { width: 56px; text-align: center; border: 0; border-inline: 1px solid var(--zf-border-default); background: var(--zf-bg-surface); color: var(--zf-text-primary); font: var(--zf-fw-semibold) var(--zf-fs-16) var(--zf-font-sans); -moz-appearance: textfield; }
.zfp-qty input::-webkit-outer-spin-button, .zfp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zfp-buyrow { display: flex; gap: var(--zf-space-3); flex-wrap: wrap; }
.zfp-buyrow .zfp-btn { flex: 1 1 200px; }
.zfp-attrs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--zf-space-2) var(--zf-space-5); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); margin: 0; }
.zfp-attrs dt { color: var(--zf-text-muted); }
.zfp-attrs dd { margin: 0; color: var(--zf-text-primary); font-weight: var(--zf-fw-medium); }
.zfp-variants { display: flex; flex-wrap: wrap; gap: var(--zf-space-2); }
.zfp-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--zf-border-default); padding: 3px; background: transparent; cursor: pointer; }
.zfp-swatch[aria-pressed="true"] { border-color: var(--zf-accent); }
.zfp-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.zfp-tabs { display: flex; gap: var(--zf-space-1); border-bottom: 1px solid var(--zf-border-subtle); overflow-x: auto; }
.zfp-tabs button { border: 0; background: transparent; color: var(--zf-text-secondary); font: var(--zf-fw-medium) var(--zf-fs-16) var(--zf-font-sans); padding: var(--zf-space-3) var(--zf-space-4); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.zfp-tabs button[aria-selected="true"] { color: var(--zf-text-primary); border-bottom-color: var(--zf-accent); }

/* 11. FAQ ------------------------------------------------------------------ */
.zfp-faq { display: grid; gap: var(--zf-space-3); }
.zfp-faq__item { background: var(--zf-bg-surface); border: 1px solid var(--zf-border-subtle); border-radius: var(--zf-radius-lg); }
.zfp-faq__item[open] { border-color: var(--zf-border-default); }
.zfp-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--zf-space-4);
  padding: var(--zf-space-5) var(--zf-space-6); font-size: var(--zfp-fs-h4); line-height: var(--zfp-lh-h4); font-weight: var(--zf-fw-semibold); color: var(--zf-text-primary);
  border-radius: var(--zf-radius-lg);
}
.zfp-faq__q::-webkit-details-marker { display: none; }
.zfp-faq__q::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--zf-accent); border-bottom: 2px solid var(--zf-accent); transform: rotate(45deg); transition: transform var(--zf-dur-base) var(--zf-ease); margin-top: -6px; }
.zfp-faq__item[open] .zfp-faq__q::after { transform: rotate(225deg); margin-top: 6px; }
.zfp-faq__a { padding: 0 var(--zf-space-6) var(--zf-space-6); color: var(--zf-text-secondary); max-width: var(--zfp-measure); }

/* 12. FORMS ---------------------------------------------------------------- */
.zfp-form { display: grid; gap: var(--zf-space-5); }
.zfp-form__row { display: grid; gap: var(--zf-space-5); }
@media (min-width: 480px) { .zfp-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zfp-field { display: grid; gap: var(--zf-space-2); }
.zfp-label { font-size: var(--zf-fs-14); font-weight: var(--zf-fw-medium); color: var(--zf-text-primary); }
.zfp-label__opt { color: var(--zf-text-muted); font-weight: var(--zf-fw-regular); }
.zfp-input, .zfp-select, .zfp-textarea {
  width: 100%; min-height: 48px; padding: 0 var(--zf-space-4);
  background: var(--zf-bg-inset); color: var(--zf-text-primary);
  border: 1px solid var(--zf-border-default); border-radius: var(--zf-radius-md);
  font: var(--zf-fw-regular) var(--zf-fs-16)/1.4 var(--zf-font-sans);
  transition: border-color var(--zf-dur-fast) var(--zf-ease);
}
.zfp-textarea { padding-block: var(--zf-space-3); min-height: 140px; resize: vertical; }
.zfp-input::placeholder, .zfp-textarea::placeholder { color: var(--zf-text-muted); }
.zfp-input:hover, .zfp-select:hover, .zfp-textarea:hover { border-color: var(--zf-border-strong); }
.zfp-input:focus-visible, .zfp-select:focus-visible, .zfp-textarea:focus-visible { outline: none; border-color: var(--zf-accent); box-shadow: 0 0 0 3px var(--zf-accent-wash-hi); }
.zfp-input[aria-invalid="true"], .zfp-textarea[aria-invalid="true"] { border-color: var(--zf-status-critical-text); }
.zfp-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zf-text-muted) 50%), linear-gradient(135deg, var(--zf-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--zf-space-10); }
.zfp-hint { font-size: var(--zf-fs-13); line-height: var(--zf-lh-13); color: var(--zf-text-muted); }
.zfp-error { font-size: var(--zf-fs-13); line-height: var(--zf-lh-13); color: var(--zf-status-critical-text); }
.zfp-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--zf-space-3); align-items: start; font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); color: var(--zf-text-secondary); }
.zfp-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--zf-accent); }
.zfp-form__actions { display: flex; flex-wrap: wrap; gap: var(--zf-space-3); align-items: center; }
.zfp-form__note { font-size: var(--zf-fs-13); color: var(--zf-text-muted); }
/* honeypot — visually gone, present for bots */
.zfp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.zfp-alert { display: flex; gap: var(--zf-space-3); padding: var(--zf-space-4) var(--zf-space-5); border-radius: var(--zf-radius-md); border: 1px solid; font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-alert--good { color: var(--zf-status-good-text); border-color: color-mix(in srgb, var(--zf-status-good-text) 40%, transparent); background: color-mix(in srgb, var(--zf-status-good-fill) 10%, transparent); }
.zfp-alert--critical { color: var(--zf-status-critical-text); border-color: color-mix(in srgb, var(--zf-status-critical-text) 40%, transparent); background: color-mix(in srgb, var(--zf-status-critical-fill) 10%, transparent); }

/* contact panel: form + details side by side */
.zfp-contact { display: grid; gap: var(--zf-space-8); }
@media (min-width: 1024px) { .zfp-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--zf-space-16); } }
.zfp-contact__card { padding: var(--zf-space-6); background: var(--zf-bg-surface); border: 1px solid var(--zf-border-subtle); border-radius: var(--zf-radius-lg); }
@media (min-width: 768px) { .zfp-contact__card { padding: var(--zf-space-8); } }
.zfp-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zf-space-4); }
.zfp-contact__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--zf-space-3); align-items: start; }
.zfp-contact__list svg { width: 40px; height: 40px; padding: 10px; border-radius: var(--zf-radius-md); background: var(--zf-accent-wash); color: var(--zf-accent); }
.zfp-contact__list strong { display: block; color: var(--zf-text-primary); font-weight: var(--zf-fw-semibold); }
.zfp-contact__list span, .zfp-contact__list a { color: var(--zf-text-secondary); }
.zfp-people { display: grid; gap: var(--zf-space-4); margin-top: var(--zf-space-6); }
@media (min-width: 480px) { .zfp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zfp-person { padding: var(--zf-space-4); border: 1px solid var(--zf-border-subtle); border-radius: var(--zf-radius-md); background: var(--zf-bg-surface); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-person strong { display: block; color: var(--zf-text-primary); }
.zfp-person small { display: block; color: var(--zf-text-muted); font-size: var(--zf-fs-12); text-transform: uppercase; letter-spacing: var(--zf-ls-wide); margin-bottom: var(--zf-space-1); }

/* 13. MAP ------------------------------------------------------------------ */
.zfp-map { position: relative; width: 100%; border-radius: var(--zf-radius-xl); overflow: hidden; border: 1px solid var(--zf-border-subtle); background: var(--zf-bg-sunken); aspect-ratio: 4 / 3; }
/* no min-height here: with aspect-ratio Chrome transfers a min-height into a min-WIDTH and the block overflows a phone */
@media (min-width: 768px)  { .zfp-map { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .zfp-map { aspect-ratio: 21 / 9; } }
.zfp-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.zfp-map-fig { margin: 0; }
.zfp-map__caption { display: flex; flex-wrap: wrap; gap: var(--zf-space-2) var(--zf-space-5); justify-content: space-between; align-items: baseline; margin-top: var(--zf-space-3); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-map__open { color: var(--zf-text-primary); }
.zfp-map__osm { color: var(--zf-text-muted); font-size: inherit; }
.zfp-map__pin { position: absolute; left: var(--zf-space-5); bottom: var(--zf-space-5); max-width: calc(100% - 2 * var(--zf-space-5)); padding: var(--zf-space-4) var(--zf-space-5); background: var(--zf-bg-surface-raised); border: 1px solid var(--zf-border-default); border-radius: var(--zf-radius-md); box-shadow: var(--zf-elev-2); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-map__pin strong { display: block; color: var(--zf-text-primary); }
.zfp-map__pin span { color: var(--zf-text-secondary); }
/* phones: the card would cover the pin; the address is in the contacts block right below (E2) */
@media (max-width: 767.98px) { .zfp-map__pin { display: none; } }

/* 14. FOOTER --------------------------------------------------------------- */
.zfp-footer { background: var(--zf-bg-sunken); border-top: 1px solid var(--zf-border-subtle); padding-block: var(--zf-space-16) var(--zf-space-8); color: var(--zf-text-secondary); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); }
.zfp-footer__grid { display: grid; gap: var(--zf-space-10); }
@media (min-width: 768px)  { .zfp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zfp-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--zf-space-12); } }
.zfp-footer h4, .zfp-footer__h { font-size: var(--zf-fs-12); letter-spacing: var(--zf-ls-wide); text-transform: uppercase; color: var(--zf-text-muted); margin-bottom: var(--zf-space-4); }
.zfp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zf-space-2); }
.zfp-footer a { color: var(--zf-text-secondary); text-decoration: none; }
.zfp-footer a:hover { color: var(--zf-text-primary); text-decoration: underline; }
.zfp-footer__about p { max-width: 40ch; margin-top: var(--zf-space-4); }
.zfp-footer__social { display: flex; gap: var(--zf-space-2); margin-top: var(--zf-space-5); }
.zfp-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--zf-border-default); color: var(--zf-text-secondary); }
.zfp-footer__social a:hover { border-color: var(--zf-accent); color: var(--zf-accent); }
.zfp-footer__social svg { width: 20px; height: 20px; }
.zfp-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--zf-space-2) var(--zf-space-6); justify-content: space-between; margin-top: var(--zf-space-12); padding-top: var(--zf-space-6); border-top: 1px solid var(--zf-border-subtle); font-size: var(--zf-fs-13); color: var(--zf-text-muted); }
.zfp-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--zf-space-2) var(--zf-space-5); }

/* 15. COOKIE BANNER -------------------------------------------------------- */
.zfp-cookie {
  position: fixed; z-index: 100; inset: auto var(--zfp-gutter) var(--zfp-gutter) var(--zfp-gutter);
  max-width: 560px; margin-inline: auto;
  padding: var(--zf-space-6); background: var(--zf-bg-surface-raised); border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-2xl); box-shadow: var(--zf-elev-3);
  display: grid; gap: var(--zf-space-4);
}
@media (min-width: 768px) { .zfp-cookie { inset: auto auto var(--zf-space-6) var(--zf-space-6); margin: 0; } }
.zfp-cookie[hidden] { display: none; }
.zfp-cookie h2 { font-size: var(--zfp-fs-h4); line-height: var(--zfp-lh-h4); }
.zfp-cookie p { font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); color: var(--zf-text-secondary); }
.zfp-cookie__opts { display: grid; gap: var(--zf-space-2); }
.zfp-cookie__actions { display: flex; flex-wrap: wrap; gap: var(--zf-space-2); }
.zfp-cookie__actions .zfp-btn { flex: 1 1 140px; }

/* 16. BREADCRUMBS + PAGINATION --------------------------------------------- */
.zfp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--zf-space-1) var(--zf-space-2); font-size: var(--zf-fs-14); line-height: var(--zf-lh-14); color: var(--zf-text-muted); }
.zfp-crumbs li { display: inline-flex; align-items: center; gap: var(--zf-space-2); }
.zfp-crumbs li + li::before { content: "/"; color: var(--zf-border-strong); }
.zfp-crumbs a { color: var(--zf-text-secondary); text-decoration: none; }
.zfp-crumbs a:hover { color: var(--zf-accent); text-decoration: underline; }
.zfp-crumbs [aria-current="page"] { color: var(--zf-text-primary); font-weight: var(--zf-fw-medium); }

.zfp-pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--zf-space-1); align-items: center; }
.zfp-pager a, .zfp-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--zf-space-3); border-radius: var(--zf-radius-md); font-size: var(--zf-fs-14); font-weight: var(--zf-fw-medium); color: var(--zf-text-secondary); text-decoration: none; }
.zfp-pager a:hover { background: var(--zf-bg-surface-hover); color: var(--zf-text-primary); }
.zfp-pager [aria-current="page"] { background: var(--zf-accent); color: var(--zf-text-on-accent); }
.zfp-pager .zfp-pager__gap { color: var(--zf-text-disabled); min-width: 24px; padding: 0; }
.zfp-pager [aria-disabled="true"] { color: var(--zf-text-disabled); pointer-events: none; }

/* CTA band */
.zfp-cta { display: grid; gap: var(--zf-space-6); padding: var(--zf-space-8); border-radius: var(--zf-radius-xl); background: linear-gradient(135deg, var(--zf-accent-wash-hi), transparent 60%), var(--zf-bg-surface); border: 1px solid var(--zf-border-default); }
@media (min-width: 768px) { .zfp-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--zf-space-10) var(--zf-space-12); } }
.zfp-cta p { color: var(--zf-text-secondary); font-size: var(--zfp-fs-lead); max-width: 48ch; }

/* 17. UTILITIES ------------------------------------------------------------ */
.zfp-list-reset { list-style: none; margin: 0; padding: 0; }
.zfp-list-reset-x { list-style: none; margin-block: 0; padding-block: 0; }
.zfp-eyebrow--flush { margin: 0; }
/* heading sizes detached from heading levels: pick the level for the outline, the class for the size */
.zfp-h1 { font-size: var(--zfp-fs-h1); line-height: var(--zfp-lh-h1); letter-spacing: var(--zf-ls-tight); font-weight: var(--zf-fw-semibold); }
.zfp-h2 { font-size: var(--zfp-fs-h2); line-height: var(--zfp-lh-h2); letter-spacing: var(--zf-ls-tight); font-weight: var(--zf-fw-semibold); }
.zfp-h3 { font-size: var(--zfp-fs-h3); line-height: var(--zfp-lh-h3); letter-spacing: var(--zf-ls-snug); font-weight: var(--zf-fw-semibold); }
.zfp-pager__disabled { color: var(--zf-text-disabled); }
.zfp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zfp-skip { position: absolute; left: var(--zf-space-4); top: -100px; z-index: 200; padding: var(--zf-space-3) var(--zf-space-4); background: var(--zf-accent); color: var(--zf-text-on-accent); border-radius: var(--zf-radius-md); font-weight: var(--zf-fw-semibold); text-decoration: none; }
.zfp-skip:focus { top: var(--zf-space-4); }
.zfp-muted { color: var(--zf-text-muted); }
.zfp-center { text-align: center; }
.zfp-stack > * + * { margin-top: var(--zfp-stack); }
.zfp-mt-2 { margin-top: var(--zf-space-2); }
.zfp-mt-6 { margin-top: var(--zf-space-6); }
.zfp-mb-6 { margin-bottom: var(--zf-space-6); }
.zfp-mb-12 { margin-bottom: var(--zf-space-12); }
.zfp-mt-10 { margin-top: var(--zf-space-10); }