/* ============================================================
   TOKENS — the single source of truth for a build.
   Everything references var(--token); nothing hard-codes a value.
   The dev cheat sheet (tools/dev-tools.js) reads these live.
   Set the CORE PALETTE per client. Everything below it derives
   automatically, so change one core colour and the neutrals,
   gradients and overlays all follow.
   ============================================================ */

:root {

  /* ================= CORE PALETTE — the only 6 you set ============= */
  --white:      #ffffff;
  --ink:        #05101d;   /* darkest TEXT colour. If the brand guide names its own dark, FOLD ink into it at brand-mapping: find-replace `var(--ink)` -> `var(--brand)` (closing paren included), delete this line (§3). Invent an off-black ONLY when the guide has no dark — then never pure #000 */
  --brand:      #314367;   /* primary brand   */
  --brand-2:    #960707;   /* secondary brand */
  --brand-tint: color-mix(in srgb, var(--brand) 60%, var(--white)); /* lighter primary; tracks --brand */
  --accent:     #ff1c1c;   /* the red of the angled divider band */   /* accent          */

  /* ================= DERIVED NEUTRALS — auto from ink/white ======== */
  /* You normally leave these alone; they restyle themselves when you
     change --ink or --white. */
  --bg:       var(--ink);
  --surface:  #17181b;   /* the old content background */
  --line:     color-mix(in srgb, var(--white) 20%, transparent);  /* hairlines on dark */
  --ink-soft: color-mix(in srgb, var(--white) 66%, var(--ink));  /* muted text           */
  --on-dark:      color-mix(in srgb, var(--white) 90%, transparent); /* text on dark  */
  --on-dark-soft: color-mix(in srgb, var(--white) 60%, transparent); /* muted on dark */
  --dark-bg:      var(--ink);   /* dark bands (hero / .is-dark / footer) + root overscroll — keep ONLY when the band dark differs from --ink (e.g. forest bands over off-black text); a brand that collapses them FOLDS this away (§3) */
  --heading-c:    var(--white);   /* heading colour on light surfaces — keep ONLY when headings differ from --ink; otherwise FOLD (§3). Dark contexts set their own */

  /* ================= GRADIENTS — built from the palette =========== */
  /* Reuse these instead of hand-writing gradients. Because they use
     var(), changing a core colour updates every gradient. */
  --grad-brand:  linear-gradient(135deg, var(--brand), var(--brand-tint));
  --grad-duo:    linear-gradient(135deg, var(--brand-2), var(--brand));
  --grad-accent: linear-gradient(135deg, var(--brand), var(--accent));

  /* ================= OVERLAYS — ink at an opacity ================= */
  /* One token used everywhere. Change --ink and the overlay follows;
     change the % here once and every overlay on the site updates. */
  --overlay:        color-mix(in srgb, var(--ink) 60%, transparent);
  --overlay-strong: color-mix(in srgb, var(--ink) 80%, transparent);
  /* Image scrim (top-darker gradient) so text stays legible over any photo. */
  --scrim: linear-gradient(180deg,
             color-mix(in srgb, var(--ink) 55%, transparent),
             color-mix(in srgb, var(--ink) 32%, transparent));

  /* ================= FONTS — HARD CAP of 3 (head / body / accent) ==
     Roles, not restrictions: a "head" font can style a CTA body.
     A 4th family needs Tobie's explicit OK — never add one unprompted.
     Google Fonts only; for an off-Google brand font use the closest
     Google equivalent. Self-host the 3 for EU clients. */
  --font-head:   'Lato', system-ui, sans-serif;   /* the old site's face, kept on purpose (replica direction) */
  --font-body:   var(--font-head);
  --font-accent: var(--font-head);

  /* ================= FLUID TYPE SCALE ============================= */
  /* ONE clamp() per element — never re-declare font-size in a media
     query. Middle value always carries a rem term so browser zoom
     scales text; every element keeps max <= 2.5x min (WCAG 1.4.4).
     Retune with fluid(minPx,maxPx) — helper in ../../playbook.md. */
  --fs-display: clamp(2.500rem, 1.583rem + 4.583vw, 5.250rem); /* 40 -> 84px */
  --fs-h1:      clamp(2.125rem, 1.583rem + 2.708vw, 3.750rem); /* 34 -> 60px */
  --fs-h2:      clamp(1.688rem, 1.333rem + 1.771vw, 2.750rem); /* 27 -> 44px */
  --fs-h3:      clamp(1.375rem, 1.208rem + 0.833vw, 1.875rem); /* 22 -> 30px */
  --fs-h4:      clamp(1.125rem, 1.063rem + 0.313vw, 1.313rem); /* 18 -> 21px */
  --fs-lead:    clamp(1.125rem, 1.042rem + 0.417vw, 1.375rem); /* 18 -> 22px */
  --fs-body:    clamp(1.000rem, 0.958rem + 0.208vw, 1.125rem); /* 16 -> 18px */
  --fs-small:   clamp(0.844rem, 0.833rem + 0.052vw, 0.875rem); /* 13.5 -> 14 */

  --lh-display: 1.02; --lh-h1: 1.06; --lh-h2: 1.12; --lh-h3: 1.2; --lh-h4: 1.3;
  --lh-body: 1.6; --lh-tight: 1.15;
  --fw-light: 300; --fw-body: 400; --fw-medium: 500; --fw-head: 700;
  --track-tight: -0.02em; --track-eyebrow: 0.18em;

  /* ================= WIDTHS + MEASURE ============================= */
  /* One measure on the BLOCK, children fill it -> headline + subhead +
     body share the same width. See .block in base.css. */
  --content-max: 1200px;
  --measure:      65ch;
  --measure-hero: calc(var(--fs-display) * 8);   /* ~14 display characters per line; ch here would measure the BODY font (24ch = 272px) */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  /* ================= SPACING + RHYTHM ============================= */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem;
  --space-xl: 3rem; --space-2xl: 4rem;
  --section-y: clamp(3.5rem, 8vw, 8rem);

  /* ================= SHAPE + ELEVATION =========================== */
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-sm: 0 2px 8px -3px rgba(16,20,40,.18);
  --shadow:    0 18px 40px -24px rgba(16,20,40,.30);
  --shadow-lg: 0 40px 80px -42px rgba(16,20,40,.45);

  /* ================= MOTION ====================================== */
  --ease:    cubic-bezier(.16, 1, .3, 1);     /* reveals */
  --ease-ui: cubic-bezier(.22, .61, .36, 1);  /* hovers  */
  --dur:     600ms;   /* scroll reveals        */
  --dur-ui:  200ms;   /* hovers / transitions  */
  --reveal-distance: 24px;
  /* Blanket hover/interaction transition — "all" so nothing is forgotten. */
  --transition: all var(--dur-ui) var(--ease-ui);

  /* ================= LAYOUT CHROME =============================== */
  --header-h: 76px;

  /* ============ BREAKPOINTS — 4 modes (matches Cornerstone) ========
     Mobile-first. Labels are Tobie's reference names (device-loose on
     purpose), chosen to sync with the Cornerstone builder. var() can't be
     used in a @media condition, so queries hardcode these — keep in sync.
       mobile   0–479    base, no query
       tablet   480–767  @media (min-width: 480px)
       laptop   768–979  @media (min-width: 768px)
       desktop  980+     @media (min-width: 980px)   */
  --bp-tablet: 480px; --bp-laptop: 768px; --bp-desktop: 980px;
}

:root {
  /* ---- Vizirent replica additions (all named by usage) ---- */
  --ice: #d2eaff;                                   /* the old site's light-blue emphasis text (bold words, links, footer) */
  --note-red: #ff4d4d;                              /* the red "bukan per 24 jam" note in the price-list intro */
  --overlay-photo: rgba(0, 0, 0, .4);               /* hero photo scrim */
  --overlay-band:  rgba(0, 0, 0, .8);               /* photo bands behind content */
  --circle-bg:     rgba(0, 0, 0, .7);               /* quicklink circles */
  --glass:         rgba(255, 255, 255, .8);         /* form fields on dark */
  --r-vz: 0 8px;                                    /* the old asymmetric corner (top-left square, bottom-right round) */
  --r-vz-lg: 0 20px;
  --r-vz-xl: 0 30px;
}

/* ===================================================================== BASE ===================================================================== */
/* ============================================================
   BASE — reset, element defaults wired to tokens, layout
   primitives, the scroll-reveal kit, accessibility baseline.
   Load order: tokens -> base -> components -> effects.
   Class names are unprefixed (clean, human). When a build is
   pasted into a themed WordPress page, prefix block roots with a
   client code (tp-, dwt-) so generic names can't collide.
   ============================================================ */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--dark-bg); }
/* root background = the footer's background, so the overscroll / rubber-band bounce at the top
   and bottom shows that colour instead of white. Both point at --dark-bg (tokens.css), so a
   non-black dark brand changes ONE token and root + hero + dark bands + footer all follow. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* clip, NOT hidden (hidden breaks sticky) */
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
/* Script-sized SVG overlays (an SVG that must keep the same box as an image wider than the viewport)
   need `max-width: none` on their own rule; this reset clamped the JOB mountain trail (2026-09-16). */
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* Blanket interaction transition — "all" so no hover is ever forgotten.
   Scoped to interactive elements (not *) so it never fights the reveal
   animation or animates layout on load. */
a, button, input, select, textarea, summary, label[for] { transition: var(--transition); }

/* ---- Headings + text wired to the fluid scale ---------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: var(--fw-head); color: var(--heading-c);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight); text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
p  { text-wrap: pretty; }
small, .u-small { font-size: var(--fs-small); }
strong, b { font-weight: var(--fw-head); }

/* ---- Layout primitives --------------------------------------------- */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container.is-measure { max-width: 70ch; }   /* narrow one block without touching --content-max */
.section { padding-block: var(--section-y); position: relative; }

/* Stretched link: one real <a class="stretch"> makes its whole positioned
   parent (e.g. a .card) clickable. Put position:relative on the parent. */
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* THE shared-width block: --measure on the BLOCK, children fill it, so
   eyebrow + headline + subhead + body all wrap at the SAME width. */
.block { max-width: var(--measure); }
.block.is-centered { margin-inline: auto; text-align: center; }
.block.is-hero { max-width: var(--measure-hero); }
.block > * { max-width: 100%; }
.block > * + * { margin-top: var(--flow, 1em); }

.grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }  /* laptop+ */
@media (min-width: 980px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }  /* desktop */
/* Laptop band renders .cols-3 as 2-up; a lone odd last card would strand left — centre it at card width (Ana, 2026-07-21). */
@media (min-width: 768px) and (max-width: 979.98px) {
  .grid.cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - (var(--gutter) / 2)); margin-inline: auto; }
}

[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---- Accessibility -------------------------------------------------- */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--white); padding: .6rem 1rem; border-radius: var(--r-sm);
  transition: var(--transition);
}
.skip:focus { top: 8px; }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Scroll-reveal kit (keyframe animation, not transition, so it
   never collides with the blanket hover transition) ------------------- */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].is-revealed {
  animation: reveal var(--dur) var(--ease) var(--reveal-delay, 0ms) both;
}
@keyframes reveal { from { opacity: 0; transform: var(--reveal-from, none); } to { opacity: 1; transform: none; } }
[data-reveal="fade-up"]    { --reveal-from: translateY(var(--reveal-distance)); }
[data-reveal="fade-down"]  { --reveal-from: translateY(calc(-1 * var(--reveal-distance))); }
[data-reveal="fade-left"]  { --reveal-from: translateX(var(--reveal-distance)); }   /* enters from right */
[data-reveal="fade-right"] { --reveal-from: translateX(calc(-1 * var(--reveal-distance))); } /* from left */
[data-reveal="scale-in"]   { --reveal-from: scale(.94); }
[data-reveal="fade-in"]    { --reveal-from: none; }

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1 !important; animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===================================================================== COMPONENTS ===================================================================== */
/* ============================================================
   COMPONENTS — reusable blocks. One block root class, short
   generic children nested with native CSS nesting + explicit &.
   Unprefixed by default; prefix roots with a client code when
   pasting into a themed WordPress page.
   ============================================================ */

/* ---- Eyebrow + section heading -------------------------------------- */
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: var(--fw-medium);
  font-size: var(--fs-small); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--brand); margin-bottom: var(--space-sm);
}
.section-head { --flow: .75rem; margin-bottom: var(--space-xl); }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); }

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: 1;
  padding: .9em 1.7em; border-radius: var(--r-pill); border: 2px solid transparent;
  transition: var(--transition);

  &:hover { transform: translateY(-2px); }

  &.is-primary { background: var(--brand); color: var(--white); }
  &.is-primary:hover { background: color-mix(in srgb, var(--brand) 86%, black); }

  &.is-gradient { background-image: var(--grad-brand); color: var(--white); }
  &.is-gradient:hover { filter: brightness(1.06); }

  &.is-ghost { border-color: color-mix(in srgb, currentColor 45%, transparent); color: currentColor; }
  &.is-ghost:hover { border-color: currentColor; }

  &.is-quiet { padding: 0; color: var(--brand); }

  /* Chevron wipe (from the CLI build): a brand chevron sweeps L->R on hover.
     The pale focus ring keeps the keyboard outline from reading brand-on-brand. */
  &.is-wipe { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-tint); color: var(--ink); }
  &.is-wipe::before {
    content: ""; position: absolute; inset: 0 -22px 0 0; z-index: -1; background: var(--brand);
    transform: translateX(-102%); transition: transform .42s var(--ease-ui);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  }
  &.is-wipe:hover { color: var(--white); }
  &.is-wipe:hover::before { transform: translateX(0); }
  &.is-wipe:focus-visible { outline-color: var(--brand-tint); outline-offset: 2px; }

  /* Gradient sweep (from the Times Printers build): a duo-gradient slides across on hover. */
  &.is-sweep {
    background-image: linear-gradient(to right, var(--brand-2), var(--ink) 50%, var(--brand) 50%);
    background-size: 200% 100%; background-position: 100% 0; background-origin: border-box; color: var(--white);
    transition: background-position .5s var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
  }
  &.is-sweep:hover { background-position: 0 0; }
}

/* ---- Sticky nav ----------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; transition: var(--transition);

  & .bar { max-width: var(--content-max); margin-inline: auto; padding: 1rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
  & .brand { font-family: var(--font-head); font-weight: var(--fw-head); font-size: 1.25rem; color: var(--white); }
  & .links { display: flex; gap: var(--space-md); align-items: center; }
  & .links a { position: relative; font-family: var(--font-head); font-weight: var(--fw-medium);
    font-size: var(--fs-small); color: var(--on-dark); padding: .25rem 0; }
  & .links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
    background: var(--brand); transform: scaleX(0); transform-origin: left; transition: var(--transition); }
  & .links a:hover::after { transform: scaleX(1); }
  & .toggle { display: none; width: 42px; height: 42px; }
  & .toggle span { display: block; width: 22px; height: 2px; background: var(--white); margin: 5px auto; transition: var(--transition); }

  &.is-scrolled { background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
  &.is-scrolled .brand, &.is-scrolled .links a { color: var(--ink); }
  &.is-scrolled .toggle span { background: var(--ink); }
}
@media (max-width: 979px) {   /* full nav on desktop (>=980); hamburger below */
  .nav .toggle { display: block; }
  .nav .links { display: none; position: absolute; inset: calc(100% + 8px) var(--gutter) auto var(--gutter);
    flex-direction: column; align-items: stretch; gap: 2px; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--space-2xs); box-shadow: var(--shadow); }
  .nav .links.is-open { display: flex; }
  .nav .links a { color: var(--ink); padding: .8rem 1rem; border-radius: var(--r-sm); }
  .nav .links a::after { display: none; }
  .nav .links a:hover { background: var(--surface); }
  .nav.is-open .toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Hero ----------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--white); background: var(--dark-bg); overflow: hidden;

  & .container { position: relative; z-index: 2; padding-block: calc(var(--header-h) + 3rem) var(--space-2xl); }
  & .block { --flow: 1.25rem; }
  & .title { font-size: var(--fs-display); line-height: var(--lh-display); color: inherit; }  /* hero titles keep the hero's white, not --heading-c */
  & .lead { color: var(--on-dark-soft); }
  & .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
}

/* ---- Section variants ----------------------------------------------- */
.section.is-dark { background: var(--dark-bg); color: var(--on-dark); }
.section.is-dark h1, .section.is-dark h2, .section.is-dark h3, .section.is-dark h4 { color: var(--white); }
.section.is-dark .lead { color: var(--on-dark-soft); }
.section.is-surface { background: var(--surface); }

/* ---- Feature card --------------------------------------------------- */
.card {
  --flow: .6rem; position: relative; padding: var(--space-lg); border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--line); transition: var(--transition);

  /* apply the card's own flow — .block's applier doesn't reach cards inside a grid (gap found in the Ana build) */
  & > * + * { margin-top: var(--flow); }

  & .title { font-size: var(--fs-h4); }
  & p { color: var(--ink-soft); font-size: var(--fs-body); }
  & .icon { width: 48px; height: 48px; margin-bottom: var(--space-xs); color: var(--brand); }

  /* Hover-lift on pointer devices. On touch there is no hover, so add data-inview
     and js/main.js toggles .is-inview on the centred card as it scrolls past. */
  @media (hover: hover) { &:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
  @media (max-width: 767px) { &.is-inview { transform: translateY(-4px); box-shadow: var(--shadow); } }
}

/* ---- Stat band ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); text-align: center; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats .num { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--track-tight); }
.stats .num em { font-style: normal; color: var(--brand); font-size: .55em; }
.stats .label { display: block; margin-top: var(--space-2xs); color: var(--ink-soft); font-size: var(--fs-small); }

/* ---- Form ----------------------------------------------------------- */
.form {
  --flow: 1rem; padding: var(--space-lg); border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);

  & .row { display: grid; gap: var(--space-sm); }
  @media (min-width: 768px) { & .row.two { grid-template-columns: 1fr 1fr; } }
  & label { display: block; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-small); margin-bottom: .4rem; }
  & input, & select, & textarea { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
  & input:focus, & select:focus, & textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
  & textarea { resize: vertical; min-height: 120px; }
  & .btn { width: 100%; justify-content: center; }
}

/* ---- Footer --------------------------------------------------------- */
.footer {
  background: var(--dark-bg); color: var(--on-dark-soft); padding-block: var(--space-2xl) var(--space-lg);

  & a { color: var(--on-dark-soft); }
  & a:hover { color: var(--white); }
  & .top { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; padding-bottom: var(--space-lg); border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent); }
  @media (min-width: 768px) { & .top { grid-template-columns: 1.4fr 1fr 1fr; } }
  & h4 { font-family: var(--font-head); color: var(--white); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-sm); }
  & .col ul { display: flex; flex-direction: column; gap: .6rem; font-size: var(--fs-small); }
  & .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); font-size: var(--fs-small); }
}

/* ---- Modal / dialog ------------------------------------------------- */
/* Accessible overlay dialog. Markup (see index.html / playbook §7):
     <div class="modal" id="modal-x" role="dialog" aria-modal="true"
          aria-labelledby="modal-x-title" hidden>
       <div class="modal__overlay" data-modal-close></div>
       <div class="modal__dialog" tabindex="-1">
         <button class="modal__close" data-modal-close aria-label="Close"><svg…/></button>
         <div class="modal__scroll"> …content… </div>
       </div>
     </div>
   The dialog is a flex column that does NOT scroll; .modal__scroll scrolls under
   it, so the close button pins to the corner. JS partner in js/main.js opens by id
   (a [data-modal-open="x"] trigger -> #modal-x), traps focus, closes on ESC / overlay
   / [data-modal-close], locks body scroll, restores focus, respects reduced-motion. */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: var(--space-md);
  opacity: 0; transition: opacity .25s var(--ease);
}
.modal.is-open { opacity: 1; }
.modal__overlay { position: absolute; inset: 0; background: var(--overlay-strong); }
.modal__dialog {
  position: relative; z-index: 1; width: min(640px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.985); transition: transform .3s var(--ease);

  &:focus { outline: none; }   /* open focuses the panel; suppress the stray ring */
}
.modal.is-open .modal__dialog { transform: none; }
.modal__scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-xl); }
/* X pinned to the dialog corner (the dialog doesn't scroll; .modal__scroll does under
   it). Understated: no fill, thin outline, dimmed at rest -> full opacity on hover. */
.modal__close {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: none; color: var(--ink); cursor: pointer;
  opacity: .55; transition: opacity .2s var(--ease);

  &:hover { opacity: 1; }
}
.modal__title { font-size: var(--fs-h3); margin: 0 0 var(--space-md); padding-right: var(--space-2xl); }
.modal__foot {
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
html.is-modal-open { overflow: hidden; }
@media (max-width: 767px) {
  .modal { padding: var(--space-sm); }
  .modal__scroll { padding: var(--space-lg); }
  .modal__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__dialog { transition: none; }
}

/* ===================================================================== EFFECTS ===================================================================== */
/* ============================================================
   EFFECTS — the reusable named-effect library (generalised from
   the Times Printers build). Opt-in via a class or data-attribute;
   each no-ops safely when absent. JS partners in js/effects.js.
   Motion gated on prefers-reduced-motion in base.css / the JS.
   ============================================================ */

/* ---- Image parallax ------------------------------------------------- */
.parallax { overflow: clip; }
.parallax > img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .parallax > img { animation: parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes parallax { from { transform: translateY(calc(-1 * var(--parallax-shift, 32px))); } to { transform: translateY(var(--parallax-shift, 32px)); } }
    @media (max-width: 767px) { .parallax > img { --parallax-shift: 14px; } }   /* calmer on mobile/tablet */
  }
}

/* ---- Fold-in: sticky section stacking ------------------------------- */
/* Pinned/covering sections need an OPAQUE background (or you see through the
   stack). body{overflow-x:clip} (base.css) — not hidden, which breaks sticky. */
.stack > section { isolation: isolate; }
.stack > section.is-pinned { position: sticky; top: 0; }
.stack > section.is-stacked { box-shadow: 0 -24px 48px -26px color-mix(in srgb, var(--ink) 40%, transparent); }
.stack > section:not(.is-dark):not([class*="fixedbg"]) { background: var(--bg); }

/* ---- Cursor-follow 3D tilt frame ------------------------------------ */
.tilt { position: relative; border-radius: var(--r-lg); overflow: hidden; transform-style: preserve-3d; will-change: transform; transition: transform .35s var(--ease); }
.tilt > img { position: absolute; inset: -8% -4%; width: 108%; height: 116%; max-width: none; object-fit: cover; will-change: transform; transition: transform .4s var(--ease); }
.tilt > .body { position: absolute; inset: auto 0 0 0; padding: var(--space-lg); z-index: 2; color: var(--white); }

/* ---- Network canvas (geometric lines) ------------------------------- */
/* <canvas class="net"> as first child of a positioned section; line/dot
   colour from --net-rgb ("r g b") on the canvas/section (default dark ink). */
.net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.net + * { position: relative; z-index: 1; }

/* ---- Hero bokeh blobs ----------------------------------------------- */
/* <div class="bokeh"><span class="blob b1"></span>...</div>. Colours from
   the palette; override a blob with --blob inline. */
.bokeh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bokeh .blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .55; will-change: transform; transform: translate(-50%, -50%); background: var(--blob, var(--brand)); }
.bokeh .b1 { width: 28vw; height: 28vw; min-width: 260px; min-height: 260px; left: 82%; top: 18%; --blob: var(--brand); }
.bokeh .b2 { width: 34vw; height: 34vw; min-width: 320px; min-height: 320px; left: 4%;  top: 78%; --blob: var(--accent); }
.bokeh .b3 { width: 30vw; height: 30vw; min-width: 300px; min-height: 300px; left: 78%; top: 74%; --blob: var(--brand-2); }

/* ============================================================
   VIZIRENT THEME LAYER — the old site's world, rebuilt on the
   framework: photo bands with dark scrims, the red angled
   divider, icon-topped section headers with rule lines, white
   product tiles, white outline buttons, circular icon quicklinks,
   glass form fields, three-icon footer. Sections in order:
   ground · topbar + nav · hero · divider · band · icon header ·
   product tiles · outline button · teaser · quicklinks · map ·
   footer · page hero · product page · how-to boxes · calendar ·
   catalogue chips · price list · forms · prose · steps.
   ============================================================ */

/* ---- Ground ------------------------------------------------------------ */
body { color: var(--on-dark); background: var(--dark-bg); }
.lead { color: var(--on-dark-soft); }
.small { font-size: var(--fs-small); color: var(--on-dark-soft); }
.ice, .prose b, .prose a, .howto b, .howto a, .teaser b, .teaser a { color: var(--ice); }
:focus-visible { outline-color: var(--ice); }
.section.is-surface { background: var(--surface); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.two { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .two { grid-template-columns: 1fr 1fr; align-items: start; } }
.upper { text-transform: uppercase; letter-spacing: .12em; }

/* ---- Topbar + nav (transparent over photos, solid once scrolled) -------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: color-mix(in srgb, var(--brand) 55%, var(--ink)); color: var(--on-dark); font-size: var(--fs-small); }
.topbar .bar { max-width: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: .35rem var(--gutter); }
.topbar .social { display: flex; gap: .4rem; }
.topbar .social a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--white) 50%, transparent); }
.topbar .social a:hover { background: var(--white); color: var(--ink); }
.topbar .social svg { width: 13px; height: 13px; }
.nav { top: var(--topbar-h, 34px); background: transparent; border: 0; z-index: 100; }   /* explicit: the open mobile panel and the mega menu must stack above hero content */
.nav .bar { max-width: none; padding: .9rem var(--gutter); }
.nav.is-scrolled { background: color-mix(in srgb, #000 90%, transparent); backdrop-filter: none; box-shadow: none; }
.nav.is-scrolled .links a, .nav.is-scrolled .brand { color: var(--on-dark); }
.nav.is-scrolled .toggle span { background: var(--white); }
.nav .brand img { height: 44px; width: auto; }
.nav .links { gap: 0; }
.nav .links > a, .nav .links > .has-sub > a { padding: .5rem .9rem; font-weight: var(--fw-head); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark); border-left: 1px solid color-mix(in srgb, var(--white) 18%, transparent); }
.nav .links > :first-child > a, .nav .links > a:first-child { border-left: 0; }
.nav .links a::after { display: none; }
.nav .links a:hover { color: var(--white); }
.nav .links .btn { margin-left: var(--space-sm); padding: .6em 1.1em; border-radius: var(--r-vz); background: #25d366; border-color: #25d366; color: var(--white); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); }
.nav .links .btn svg { width: 1.1em; height: 1.1em; }
.nav .pin { display: inline-flex; align-items: center; }
.nav .pin img { width: 30px; height: 30px; }
.nav .has-sub { position: relative; }
.nav .has-sub > a { display: inline-flex; align-items: center; gap: .35em; }
.nav .sub { display: none; position: absolute; left: 0; top: calc(100% + 8px); min-width: 320px; padding: var(--space-sm); background: #08080a; border-radius: var(--r-vz-xl); box-shadow: var(--shadow-lg); border-top: 2px solid var(--accent); }
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }   /* invisible hover bridge between the link and its panel */
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.is-open .sub { display: block; }
/* Info: one column of icon rows with a one-line description each */
.nav .sub.info { left: 50%; transform: translateX(-50%); width: 380px; display: none; gap: .15rem; }
.nav .has-sub:hover .sub.info, .nav .has-sub:focus-within .sub.info, .nav .has-sub.is-open .sub.info { display: grid; }
.info-item { display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: center; padding: .55rem .7rem; border-radius: var(--r-vz); color: var(--on-dark); transition: var(--transition); }
.info-item:hover, .info-item:focus-visible { background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); }
.info-item img { width: 40px; height: 40px; }
.info-item b { display: block; font-size: var(--fs-small); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .08em; color: var(--white); }
.info-item small { display: block; font-size: var(--fs-small); color: var(--on-dark-soft); line-height: 1.35; }
/* Alat: full-width mega panel under the bar, one column per root category, price-list feature column on the right */
.nav .has-sub.is-mega { position: static; }
.nav .sub.mega { left: 0; right: 0; top: 100%; min-width: 0; padding: 0; border-radius: 0 0 var(--r-vz-xl) var(--r-vz-xl); background: #08080a; }
.mega-in { max-width: var(--content-max); margin: 0 auto; padding: var(--space-lg) var(--gutter) var(--space-xl); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.7fr); gap: var(--space-lg); }
.mega-col.is-long { grid-column: span 2; }
.mega-col.is-long ul { columns: 2; column-gap: var(--space-md); }
.mega-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent); color: var(--white); font-size: var(--fs-small); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .1em; }
.mega-head:hover span { color: var(--ice); }
.mega-head img { width: 34px; height: 34px; flex: none; }
.mega-col ul { display: block; list-style: none; margin: 0; padding: 0; }
.mega-col li { break-inside: avoid; }
.mega-col li a { display: block; padding: .22rem 0; font-size: var(--fs-small); color: var(--on-dark-soft); transition: var(--transition); }
.mega-col li a:hover, .mega-col li a:focus-visible { color: var(--ice); }
.mega-col li small { color: color-mix(in srgb, var(--white) 38%, transparent); font-size: .85em; margin-left: .25em; }
.mega-col.is-feature { border-left: 1px solid color-mix(in srgb, var(--white) 14%, transparent); padding-left: var(--space-lg); }
.mega-col.is-feature p { font-size: var(--fs-small); color: var(--on-dark-soft); line-height: 1.5; margin-bottom: var(--space-sm); }
.nav .links .mega-col .btn.is-outline { display: inline-flex; margin: 0; padding: .6em 1em; font-size: var(--fs-small); white-space: nowrap; background: transparent; border: 2px solid var(--white); border-radius: 0; color: var(--white); }
.nav .links .mega-col .btn.is-outline:hover { background: var(--white); color: var(--ink); }
.mega-link { display: block; margin-top: .6rem; font-size: var(--fs-small); color: var(--ice); }
.mega-link:hover { color: var(--white); }
@media (max-width: 979px) {
  .topbar .bar { justify-content: center; }
  .topbar .social { display: none; }
  .nav .links { background: rgba(10, 10, 10, .96); border: 0; border-radius: var(--r-vz-lg); max-height: calc(100svh - 120px); overflow: auto; }
  .nav .links > a, .nav .links > .has-sub > a { border: 0; padding: .8rem 1rem; }
  .nav .links a:hover { background: color-mix(in srgb, var(--white) 8%, transparent); }
  /* accordion: a submenu opens on the first tap of its parent (site.js adds .is-open) */
  .nav .sub, .nav .sub.info, .nav .sub.mega { display: none; position: static; transform: none; width: auto; min-width: 0; padding: 0 1rem .8rem; background: none; box-shadow: none; border: 0; }
  .nav .has-sub.is-open .sub, .nav .has-sub.is-open .sub.info, .nav .has-sub.is-open .sub.mega { display: block; }
  .nav .has-sub > a svg { transition: transform var(--dur-ui) var(--ease-ui); }
  .nav .has-sub.is-open > a svg { transform: rotate(180deg); }
  .nav .sub::before { display: none; }
  .mega-in { grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); padding: 0; }
  .mega-col.is-long { grid-column: span 2; } .mega-col.is-long ul { columns: 2; }
  .mega-col.is-feature { display: none; }
  .info-item { padding: .45rem .3rem; }
  /* the starter paints mobile-menu links ink-dark for a light panel; this panel is dark */
  .nav .links .sub a { color: var(--on-dark); padding: .25rem 0; border-radius: 0; }
  .nav .links .mega-head { color: var(--white); padding: 0 0 .45rem; margin-top: .4rem; }
  .nav .links .info-item { padding: .45rem .3rem; }
  .nav .links .info-item b { color: var(--white); }
  .nav .links .info-item small { color: var(--on-dark-soft); }
  .nav .links .btn { margin: var(--space-2xs) 1rem 0; justify-content: center; }
}

.band.is-first { padding-top: calc(var(--header-h) + 34px + var(--space-xl)); }   /* pages without a hero: clear the fixed topbar + nav, then one step of air before the icon header */

/* ---- Hero: full-bleed photo, logo, thin uppercase title, slashed subtitle ---- */
.hero { min-height: min(56.25vw, 820px); display: grid; place-items: center; text-align: center; padding-top: calc(var(--header-h) + 34px); color: var(--white); background: var(--ink); overflow: clip; }   /* clip, never hidden: hidden makes the hero a scroll container and the photo's view() timeline measures against it and freezes (playbook §8) */
.hero .bg { position: absolute; inset: 0; z-index: 0; overflow: clip; }
/* Hero photo: 130% tall and centred with 15% overdraw each side, so the scroll-driven drift can move it ±11% of its own
   height (about a quarter of the scroll distance) and the band stays covered; zoom-in on load uses `scale`, the drift uses
   `translate`, so the two never fight over `transform`. JS fallback in site.js (.parallax > img). */
.hero .bg img { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; object-position: var(--pos, 50% 50%); --hero-shift: 11%; }
@media (max-width: 767px) { .hero .bg img { --hero-shift: 7%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .bg img { animation: hero-zoom 1.6s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .hero .bg.parallax img { animation: hero-zoom 1.6s var(--ease) both, hero-drift linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
  }
}
@keyframes hero-zoom { from { scale: 1.08; } to { scale: 1; } }
@keyframes hero-drift { from { translate: 0 calc(-1 * var(--hero-shift)); } to { translate: 0 var(--hero-shift); } }
.hero .scrim { position: absolute; inset: 0; z-index: 1; background: var(--overlay-photo); }
.hero .container { padding-block: var(--space-2xl); }
.hero .block { --flow: 0; max-width: min(920px, 100%); margin-inline: auto; }
.hero .logo { width: min(300px, 62vw); margin: 0 auto var(--space-md); }
.hero .title { font-weight: var(--fw-body); text-transform: uppercase; font-size: clamp(1.75rem, 1.094rem + 2.95vw, 3.75rem); line-height: 1.1;   /* 29px at 390 (three lines, like the old site) up to 60px */ letter-spacing: .02em; color: var(--white); text-wrap: balance; margin-inline: auto; max-width: 15em; }   /* two lines from 980px up, like the old site */
@media (max-width: 979px) { .hero .title { max-width: 13.5em; } }   /* three lines below 980px, like the old site */
@media (max-width: 767px) { .hero .title { max-width: 100%; } }   /* phones: let text-wrap: balance find three even lines */
.hero .sub { margin-top: var(--space-md); font-weight: var(--fw-light); text-transform: uppercase; letter-spacing: .28em; font-size: var(--fs-small); }
.hero .sub .slash { letter-spacing: -.12em; margin-right: .35em; opacity: .6; }
.hero .actions { justify-content: center; margin-top: var(--space-lg); }
/* Inner-page hero: content-sized (nav clearance, icon, title), so it carries the page's icon header and the band below starts straight with content */
.hero.is-page { min-height: 0; }
.hero.is-page .container { padding-block: var(--space-lg) var(--space-xl); }
.hero.is-page .icon { width: clamp(80px, 10vw, 120px); height: auto; margin: 0 auto -.35em; opacity: .9; }
.hero.is-page .title { display: inline-block; position: relative; font-size: var(--fs-h2); letter-spacing: .14em; max-width: none; }
.hero.is-page .title::before, .hero.is-page .title::after { content: ""; position: absolute; top: 50%; width: 50vw; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.hero.is-page .title::before { right: 100%; margin-right: 15px; }
.hero.is-page .title::after { left: 100%; margin-left: 15px; }
.hero.is-page .sub { margin-top: var(--space-sm); }

/* ---- The red angled divider (the old "Vizi Divider" block) --------------- */
.vdivider { position: relative; height: 70px; margin: -10px 0 -35px; z-index: 5; pointer-events: none; }
.vdivider::before { content: ""; position: absolute; inset: 0 0 10px 0; background: linear-gradient(to left, var(--brand-2) 30%, var(--accent) 100%); clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 10px); }
.vdivider::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45px; background: var(--white); opacity: .4; clip-path: polygon(0 10px, 100% 0, 100% 10px, 0 40px); z-index: -1; }

/* ---- Photo band: the old "fixed background" look without background-attachment:fixed.
   The photo is a viewport-sized position:fixed layer; the band's clip-path: inset(0) clips it to the band,
   so the photo stays put while content scrolls over it. Composited, iOS-safe (playbook §8). ---- */
.band { position: relative; isolation: isolate; clip-path: inset(0); color: var(--on-dark); background: var(--ink); padding-block: var(--section-y); }
.band .bg { position: fixed; inset: 0; z-index: -1; }
.band .bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.band .scrim { position: fixed; inset: 0; z-index: -1; background: var(--overlay-band); }
.band > .container, .band > .full { position: relative; z-index: 1; }
.band .bg.parallax > img { animation: none; will-change: auto; }
.band.is-plain { background: linear-gradient(180deg, var(--surface) 0%, var(--ink) 55%, color-mix(in srgb, var(--brand) 22%, var(--ink)) 100%); }   /* the promo band: plain ground with a slight gradient instead of a photo (Tobie, 2026-09-29) */
.band h1, .band h2, .band h3, .band h4 { color: var(--white); }

/* ---- Icon header: icon over an uppercase title with rule lines both sides ---- */
.ichead { text-align: center; margin: var(--space-xl) auto var(--space-lg); overflow: clip; }
.ichead:first-child { margin-top: 0; }
.ichead img { width: clamp(90px, 14vw, 170px); height: auto; margin: 0 auto -.35em; opacity: .9; }
.ichead h1, .ichead h2 { display: inline-block; position: relative; margin: var(--space-xs) 0 0; font-weight: var(--fw-body); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-h3); line-height: 1.2; opacity: .88; }
.ichead h1::before, .ichead h1::after, .ichead h2::before, .ichead h2::after { content: ""; position: absolute; top: 50%; width: 50vw; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.ichead h1::before, .ichead h2::before { right: 100%; margin-right: 15px; }
.ichead h1::after, .ichead h2::after { left: 100%; margin-left: 15px; }
.ichead .sub { max-width: 520px; margin: var(--space-xs) auto 0; font-style: italic; color: #e68a8a; font-size: var(--fs-small); }
.ichead .sub .hl { color: var(--note-red); }
.ichead .sub.is-plain { font-style: normal; color: var(--on-dark-soft); max-width: 600px; }   /* catalogue descriptions: a description, not a warning note */
.ichead.is-big img { width: 130px; height: 130px; }

/* ---- Product tiles (the old shop boxes: white square, category, title, price) ---- */
.pcards { display: grid; gap: var(--space-md) var(--space-sm); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 768px) { .pcards { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); } }
.pcard { position: relative; }
.pcard .pic { display: block; background: var(--white); aspect-ratio: 1; overflow: hidden; }
.pcard .pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
@media (hover: hover) { .pcard:hover .pic img { transform: scale(1.06); } }
.pcard .cat { display: block; margin-top: var(--space-xs); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-soft); }
.pcard .title { margin-top: .15rem; font-size: var(--fs-body); font-weight: var(--fw-head); line-height: var(--lh-h4); color: var(--white); }
.pcard .price { margin-top: .2rem; font-size: var(--fs-small); color: var(--on-dark-soft); }
.pcard .price b { font-weight: var(--fw-head); color: var(--white); }
.pcard .price .sep { opacity: .5; margin: 0 .3em; }
.pcard .stretch { color: inherit; }
.pcards + .more { margin-top: var(--space-xl); text-align: center; }
/* Homepage rows show whole lines only: 3 or 6 tiles at 3 columns (768px+), 2 or 4 tiles at 2 columns below. */
@media (min-width: 768px) {
  .pcards.is-row > :nth-child(n+7) { display: none; }
  .pcards.is-row > :first-child:nth-last-child(-n+5) ~ :nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
  .pcards.is-row > :nth-child(n+5) { display: none; }
  .pcards.is-row > :first-child:nth-last-child(-n+3) ~ :nth-child(n+3) { display: none; }
}
.empty { text-align: center; }
@media (max-width: 767px) { .pcard.is-inview .pic img { transform: scale(1.04); } }

/* ---- Outline button (white frame, uppercase, magnifier slides in on hover) ---- */
.btn.is-outline { border: 2px solid var(--white); color: var(--white); background: transparent; border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-head); font-size: var(--fs-small); padding: .95em 1.6em; }
.btn.is-outline .ico { width: 0; overflow: hidden; display: inline-flex; transition: var(--transition); }
.btn.is-outline .ico svg { width: 1.1em; height: 1.1em; flex: none; }
.btn.is-outline:hover { background: var(--white); color: var(--ink); transform: none; }
.btn.is-outline:hover .ico { width: 1.2em; margin-left: .2em; }
.btn.is-wa { background: #25d366; border-color: #25d366; color: var(--white); border-radius: var(--r-vz); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-head); font-size: var(--fs-small); }
.btn.is-wa:hover { background: #1fb457; }
.btn.is-wa svg { width: 1.2em; height: 1.2em; }

/* ---- Promo band (homepage, only while the weekday promo runs): two red percentage tiles lead, the copy and a price-list button follow ---- */
.band.is-promo { padding-block: var(--space-xl); }
.promo { display: grid; gap: var(--space-lg); align-items: center; text-align: center; }
@media (min-width: 768px) { .promo { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); text-align: left; } }   /* tiles left, copy right */
@media (min-width: 980px) { .promo { column-gap: var(--space-2xl); } }
.promo .nums { display: flex; justify-content: center; gap: var(--space-sm); }
.promo .num { display: grid; justify-items: center; align-content: center; min-width: 150px; padding: var(--space-sm) var(--space-md); border-radius: var(--r-vz-lg); background: linear-gradient(320deg, #b40006 0%, var(--accent) 100%); color: var(--white); text-align: center; }
.promo .num b { font-family: var(--font-head); font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--track-tight); }
.promo .num small { margin-top: .35rem; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; }
.promo .eyebrow { display: block; color: var(--accent); margin-bottom: .35rem; }
.promo h2 { font-size: var(--fs-h3); font-weight: var(--fw-body); text-transform: uppercase; letter-spacing: .1em; }
.promo p { margin: .5rem auto 0; color: var(--on-dark-soft); max-width: 60ch; }
@media (min-width: 768px) { .promo p { margin-inline: 0; } }
@media (max-width: 479px) { .promo .nums { flex-direction: column; align-items: stretch; } .promo .num { min-width: 0; } }

/* ---- Teaser paragraph (thin, big, justified with centred last line) ------ */
.teaser { max-width: 900px; margin: 0 auto; text-align: center; }
.teaser p { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.6; text-align: justify; text-align-last: center; margin-bottom: var(--space-lg); }

/* ---- Quicklinks: four photo banners with circular icon buttons ---------- */
.quick { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--ink); }
@media (min-width: 980px) { .quick { grid-template-columns: repeat(4, 1fr); } }
.quick a { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; color: var(--white); text-align: center; }
.quick .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .8s var(--ease); }
@media (hover: hover) { .quick a:hover .bg { transform: scale(1.08); } }
.quick .circle { position: relative; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--circle-bg); display: grid; align-content: center; justify-items: center; gap: .3rem; padding: 12%; }
/* Hover: the photo zooms (kept from the old site) and the circle deepens; the old bounce is gone (Tobie, 2026-09-28). */
.quick .circle { transition: background-color var(--dur-ui) var(--ease-ui); }
@media (hover: hover) { .quick a:hover .circle { background: rgba(0, 0, 0, .84); } }
.quick .circle img { width: 48%; height: auto; }
.quick .circle b { font-weight: var(--fw-body); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small); line-height: 1.25; }
@media (min-width: 850px) { .quick .circle b { font-size: var(--fs-body); } }

/* ---- Map + ViziHome ------------------------------------------------------ */
.home-map { display: grid; grid-template-columns: 1fr; background: var(--surface); }
@media (min-width: 768px) { .home-map { grid-template-columns: 1fr 1fr; } }
.home-map .map { position: relative; min-height: 420px; }
.home-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75); }
.home-map .gal { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; display: flex; justify-content: center; gap: 10px; padding: 0 var(--space-sm); pointer-events: none; }
.home-map .gal a { pointer-events: auto; }
.home-map .gal img { width: clamp(64px, 9vw, 100px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--white); box-shadow: var(--shadow); transition: var(--transition); }
@media (hover: hover) { .home-map .gal a:hover img { transform: scale(1.08); } }
.home-map .addr { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-md); align-items: start; padding: var(--space-2xl) var(--space-lg); }
.home-map .addr img { width: 64px; height: 64px; }
.home-map .addr h3 { font-size: var(--fs-h4); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .12em; }
.home-map .addr .tag { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark-soft); margin-bottom: var(--space-sm); }
.home-map .addr p { line-height: 1.8; font-size: var(--fs-body); }
.home-map .addr b { display: block; margin-top: var(--space-sm); color: var(--ice); }

/* ---- Footer: photo band, three left-aligned icon columns, tag row, bottom bar ----- */
.footer { padding: 0; color: var(--on-dark); }
.footer .cols { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; padding-block: var(--space-2xl) var(--space-xl); }
@media (min-width: 768px) { .footer .cols { grid-template-columns: 1.05fr 1.3fr .95fr; gap: var(--space-2xl); } .footer .col + .col { border-left: 1px solid color-mix(in srgb, var(--white) 18%, transparent); padding-left: var(--space-xl); } }
.footer .col > * + * { margin-top: var(--space-sm); }
.footer h4 { display: flex; align-items: center; gap: .65rem; margin: 0 0 var(--space-md); font-size: var(--fs-small); letter-spacing: .18em; text-transform: uppercase; color: var(--white); }
.footer h4 img { width: 44px; height: 44px; flex: none; opacity: .95; }
.footer .col p { font-size: var(--fs-body); line-height: 1.7; }
.footer .col b, .footer .col a { color: var(--ice); }
.footer .col a:hover { color: var(--white); }
.footer .small a { text-decoration: underline; text-underline-offset: .15em; }
.footer .col .small { font-size: var(--fs-small); color: var(--on-dark-soft); }
.footer .links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-small); }
.footer .links a { color: var(--on-dark); }
.footer .links a::before { content: "\25B8 "; color: var(--ice); }
.footer .bank { display: grid; grid-template-columns: 1fr; gap: .1rem; font-size: var(--fs-body); }
.footer .bank dd + dt { margin-top: .55rem; }
.footer .bank dt { color: var(--on-dark-soft); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; }
.footer .bank dd { color: var(--ice); font-weight: var(--fw-head); }
.footer .tagbox { padding: var(--space-lg) 0 var(--space-2xl); border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent); }
.footer .tagbox h4 { margin-bottom: var(--space-sm); }
.footer .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.footer .tags a { font-size: var(--fs-small); border: 1px solid color-mix(in srgb, var(--white) 45%, transparent); padding: 2px 8px; border-radius: 0 6px; color: var(--on-dark); transition: var(--transition); }
.footer .tags a:hover { background: var(--ice); border-color: var(--ice); color: var(--ink); }
.footer .bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--gutter); background: #0a0a0a; font-size: var(--fs-small); }
.footer .bottom .social { display: inline-flex; gap: .5rem; }
.footer .bottom .social a { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--white) 40%, transparent); transition: var(--transition); }
.footer .bottom .social a:hover { background: var(--white); color: var(--ink); }
.footer .bottom .social svg { width: 13px; height: 13px; }
@media (max-width: 479px) { .footer .links { grid-template-columns: 1fr; } .footer .bottom { justify-content: center; text-align: center; } }

/* ---- Product page ------------------------------------------------------- */
.product { display: grid; gap: var(--space-xl); text-align: center; }
@media (min-width: 768px) { .product { grid-template-columns: 1fr 1fr; align-items: start; text-align: left; } }
.product .gallery { background: var(--white); aspect-ratio: 1; overflow: hidden; }
.product .gallery img { width: 100%; height: 100%; object-fit: cover; }
.product .info { --flow: var(--space-md); max-width: none; }
@media (min-width: 768px) { .product .gallery { position: sticky; top: calc(var(--header-h) + 34px + var(--space-md)); } }   /* the photo stays in view while the details scroll */
.product .about { text-align: left; }
.product .about h2 { margin-bottom: .5rem; }
.product-avail { max-width: 900px; margin: var(--space-2xl) auto 0; }
.vz-avail-off .vz-av-slot, .vz-avail-off .vz-av { display: none; }
.avail-note { text-align: center; margin-bottom: var(--space-md); }
.product .info h1 { font-size: var(--fs-h2); font-weight: var(--fw-head); color: var(--white); }
.product .crumbs { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-soft); }
.product .crumbs a:hover { color: var(--white); }
.product .pricebox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.product .price { display: flex; flex-direction: column; gap: .15rem; padding: var(--space-md); border-radius: var(--r-vz-lg); background: var(--glass); color: var(--ink); }
.product .price .label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-2); font-weight: var(--fw-head); }
.product .price .num { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h3); line-height: 1.1; }
.product .price .per { font-size: var(--fs-small); color: color-mix(in srgb, var(--ink) 65%, var(--white)); }
.product .note { font-size: var(--fs-small); color: var(--on-dark-soft); }
.product .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 767px) { .product .actions { justify-content: center; } }
.product .meta { font-size: var(--fs-small); color: var(--on-dark-soft); text-transform: uppercase; letter-spacing: .08em; }
.product .meta b { color: var(--on-dark); font-weight: var(--fw-body); }
.kit { --flow: .35rem; text-align: left; }
.kit li { position: relative; padding-left: 1.2em; }
.kit li + li { margin-top: .35rem; }
.kit li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: .45em; background: var(--accent); border-radius: 0 3px; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tags a { font-size: var(--fs-small); padding: 1px 8px; border: 1px solid currentColor; opacity: .8; border-radius: 0 5px; color: var(--on-dark); }
.tags a:hover { background: var(--ice); color: var(--ink); opacity: 1; }
.desc { --flow: 1em; }
.desc ul { list-style: disc; padding-left: 1.2em; }
.desc .vizi-desc { --flow: .8em; text-align: justify; }
.desc .vizi-list { list-style: disc; padding-left: 1.2em; margin-top: .5em; }
.desc .eyebrow + * { margin-top: 0; }

/* ---- How-to boxes (icon left, uppercase title, text under a rule) -------- */
.howto { display: grid; gap: var(--space-xl); max-width: 980px; margin: 0 auto; }
.ibox { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-md); align-items: start; text-align: left; }
.ibox img { width: 60px; height: 60px; }
.ibox h3 { font-size: var(--fs-h4); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.ibox .body { border-top: 1px solid color-mix(in srgb, var(--white) 20%, transparent); padding-top: .6rem; font-size: var(--fs-small); line-height: 1.55; text-align: justify; }
.ibox .body > * + * { margin-top: .6em; }
.ibox ol, .ibox ul { padding-left: 1.3em; }
.ibox ol { list-style: decimal; } .ibox ul { list-style: disc; }
.ibox li + li { margin-top: .35em; }
.xnotice { color: #ffef9c; border: 1px solid #ffef9c; text-align: center; padding: 10px; border-radius: var(--r-vz-lg); margin-top: var(--space-sm); }
.xnotice a { display: block; max-width: 250px; margin: 10px auto 4px; background: #ffef9c; color: var(--ink); text-transform: uppercase; font-size: var(--fs-small); border-radius: var(--r-vz); padding: .3em 1em; transition: var(--transition); }
.xnotice a:hover { transform: scale(1.06); background: #6b5b09; color: var(--white); }

/* ---- Availability calendar ---------------------------------------------- */
.avail { border-radius: var(--r-vz-lg); padding: var(--space-md); background: color-mix(in srgb, var(--white) 6%, transparent); border: 1px solid var(--line); }
.avail .months { display: grid; gap: var(--space-md); }
@media (min-width: 480px) { .avail .months { grid-template-columns: 1fr 1fr; } }
.avail .m h4 { font-size: var(--fs-body); margin-bottom: .5rem; text-align: center; color: var(--white); text-transform: uppercase; letter-spacing: .1em; font-weight: var(--fw-body); }
.avail .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: var(--fs-small); text-align: center; }
.avail .dow { color: var(--on-dark-soft); font-size: .72em; text-transform: uppercase; padding: .2em 0; }
.avail .d { padding: .5em 0; border-radius: 0 6px; background: color-mix(in srgb, var(--white) 8%, transparent); }
.avail .d.is-past { opacity: .28; }
.avail .d.is-full { background: color-mix(in srgb, var(--brand-2) 70%, transparent); color: var(--white); text-decoration: line-through; }
.avail .d.is-partial { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.avail .d.is-today { box-shadow: inset 0 0 0 1px var(--on-dark-soft); }
.avail .legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--on-dark-soft); }
.avail .legend .d { display: inline-block; width: 1em; height: 1em; padding: 0; vertical-align: -2px; margin-right: .35em; }
.avail .loading, .avail .err { color: var(--on-dark-soft); font-size: var(--fs-small); }

/* ---- Catalogue: icon header over a category sidebar (the old shop sidebar) + the tile grid ---- */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "main"; gap: var(--space-lg); align-items: start; }
@media (min-width: 768px) { .catalog { grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "head head" "side main"; gap: var(--space-lg) var(--space-xl); } }
@media (min-width: 980px) { .catalog { grid-template-columns: 250px minmax(0, 1fr); column-gap: var(--space-2xl); } }
.catalog .head { grid-area: head; }
.catalog .head .ichead { margin-bottom: 0; }
.catalog .main { grid-area: main; min-width: 0; }
@media (min-width: 768px) and (max-width: 979px) { .catalog .main .pcards { grid-template-columns: repeat(2, 1fr); } }   /* beside the sidebar the laptop band fits two tiles, not three */
.catalog.is-loading .main { opacity: .4; }
.catalog .main { transition: opacity var(--dur-ui) var(--ease-ui); }
.side { grid-area: side; min-width: 0; }
@media (min-width: 768px) { .side { position: sticky; top: calc(var(--header-h) + 34px + var(--space-md)); } }
.side-toggle { display: none; }
.side-in { display: grid; gap: var(--space-md); }
.side h2 { font-size: var(--fs-small); font-weight: var(--fw-body); text-transform: uppercase; letter-spacing: .14em; color: var(--on-dark-soft); padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.side-search input { width: 100%; height: 42px; padding: 0 .9rem; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); }
.side-search input:focus { outline: 2px solid var(--ice); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree > li { border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent); }
.tree .row { display: flex; align-items: center; }
.tree a { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .55rem 0; color: var(--on-dark); transition: var(--transition); }
.tree a small { flex: none; font-size: var(--fs-small); color: color-mix(in srgb, var(--white) 40%, transparent); }
.tree a:hover { color: var(--ice); }
.tree li.is-active > .row > a, .tree li.is-active > a { color: var(--ice); font-weight: var(--fw-head); }
.tree .tog { flex: none; width: 36px; height: 36px; margin-right: -10px; display: grid; place-items: center; border-radius: 50%; color: var(--on-dark-soft); transition: var(--transition); }
.tree .tog svg { width: 12px; height: 12px; transition: transform var(--dur-ui) var(--ease-ui); }
.tree .tog:hover { color: var(--white); background: color-mix(in srgb, var(--white) 8%, transparent); }
.tree .kids { display: none; padding: 0 0 .4rem var(--space-sm); }
.tree .kids a { padding: .3rem 0; font-size: var(--fs-small); color: var(--on-dark-soft); }
.tree .kids li.is-active > a { color: var(--ice); }
.tree li.is-open > .kids { display: block; }
.tree li.is-open > .row .tog svg { transform: rotate(180deg); }
.side-link { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; color: var(--ice); }
.side-link:hover { color: var(--white); }
@media (max-width: 767px) {   /* phones + tablets: the tree folds behind a "Kategori alat" button between the header and the grid */
  .side-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .75rem 1rem; border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); border-radius: var(--r-vz); color: var(--white); font-size: var(--fs-small); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .1em; }
  .side-toggle svg { width: 12px; height: 12px; transition: transform var(--dur-ui) var(--ease-ui); }
  .side.is-open .side-toggle svg { transform: rotate(180deg); }
  .side-in { display: none; padding-top: var(--space-md); }
  .side.is-open .side-in { display: grid; }
}

/* ---- Price list ---------------------------------------------------------- */
.plbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: center; margin-bottom: var(--space-lg); }
.plbar input { flex: 1 1 260px; max-width: 520px; padding: .8rem 1rem; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); height: 44px; }
.plbar input:focus { outline: 2px solid var(--ice); }
.pl-extra { margin-top: var(--space-xl); }   /* optional page content under the price table */
.pl { width: 100%; border-collapse: collapse; }
.pl th, .pl td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: var(--lh-tight); }
.pl th { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); font-weight: var(--fw-body); }
.pl .c2, .pl .c3 { white-space: nowrap; text-align: right; width: 1%; font-weight: var(--fw-head); }
.pl .c4 { width: 1%; text-align: right; padding-right: .3rem; }   /* the + button sits in the last column, like the Dewata price list */
.pl tr.cat td { position: relative; padding: 9px 0 0 60px; height: 52px; margin-top: var(--space-xl); background: color-mix(in srgb, var(--white) 20%, transparent); font-weight: var(--fw-head); font-size: var(--fs-h3); color: var(--white); border-bottom: 0; }
.pl tr.cat td::before { content: ""; position: absolute; left: 6px; top: 4px; width: 43px; height: 43px; background: var(--icon) center / 43px auto no-repeat; }
.pl tr.sub td { padding-top: var(--space-md); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); border-bottom: 0; }
.pl td.c1 a { color: var(--on-dark); }
.pl td.c1 a:hover { color: var(--ice); text-decoration: underline; }
.pl tr[hidden] { display: none; }
.pl.is-student .c2, .pl.is-pro .c3 { display: none; }   /* a chosen price mode shows only that tier's column (site.js applyMode) */
@media (max-width: 479px) { .pl th, .pl td { padding: .6rem .35rem; font-size: var(--fs-small); } .pl tr.cat td { font-size: var(--fs-h4); } }

/* ---- Forms: glass fields on the dark band, boxed upload groups ---------- */
.form { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 560px; margin: 0 auto; }
.form input, .form select, .form textarea { background: var(--glass); border: 0; color: var(--ink); border-radius: var(--r-vz); height: 44px; font-size: 16px; }
.form textarea { height: auto; min-height: 100px; }
.form select option { color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ice); box-shadow: none; }
.form input[type="file"] { height: auto; padding: .6rem; background: color-mix(in srgb, var(--white) 92%, transparent); }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-2xl); min-width: 0; }
.form fieldset > * + * { margin-top: var(--space-sm); }
.form legend { display: block; width: 100%; text-align: center; margin-bottom: var(--space-md); font-weight: var(--fw-body); }
.form legend img { width: 120px; height: 120px; margin: 0 auto -10px; opacity: .9; }
.form legend span { display: inline-block; position: relative; font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .14em; opacity: .88; color: var(--white); }
.form legend span::before, .form legend span::after { content: ""; position: absolute; top: 50%; width: 50vw; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.form legend span::before { right: 100%; margin-right: 15px; } .form legend span::after { left: 100%; margin-left: 15px; }
.form .hint { font-style: italic; color: #e68a8a; font-size: var(--fs-small); text-align: center; line-height: 1.45; }
.form label { color: var(--on-dark); font-weight: var(--fw-body); font-size: var(--fs-small); }
.form .check { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-body); margin: 0; cursor: pointer; }
.form .check input { width: auto; height: auto; margin-top: .3em; accent-color: var(--accent); transform: scale(1.3); }
.form .group[hidden], .form [hidden] { display: none !important; }
.form .group > * + * { margin-top: var(--space-sm); }
.form .upload { border: 1px solid color-mix(in srgb, var(--white) 80%, transparent); border-radius: var(--r-vz-lg); overflow: hidden; }
.form .upload label { display: block; background: var(--glass); color: var(--ink); padding: .5rem .8rem; margin: 0; border-radius: 0 20px 0 0; }
.form .upload input[type="file"] { border-radius: 0; background: transparent; color: var(--on-dark); }
.form .agree { padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--r-vz-lg); text-transform: uppercase; font-size: var(--fs-small); text-align: justify; }
.form .agree input { transform: scale(1.6); margin: .35em .8em 0 .3em; }
.form .msg.is-error { color: #ffb4b4; font-size: var(--fs-small); text-align: center; }
.form .btn[type="submit"] { display: block; width: 220px; margin: var(--space-md) auto 0; }
.form .done { --flow: .6rem; text-align: center; }
.form .done > * + * { margin-top: var(--flow); }
.form fieldset .vz-row { display: grid; gap: var(--space-2xs) var(--space-sm); }
.form .row { gap: var(--space-2xs) var(--space-sm); }

/* ---- Focus document (registration walkthrough): no site chrome, one question per screen ---- */
.vz-focus { padding-bottom: 0; background: var(--ink); }
.focus-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: .9rem var(--gutter); background: linear-gradient(to bottom, var(--ink) 75%, transparent); }
.focus-head .brand img { height: 36px; width: auto; display: block; }
.focus-exit { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--on-dark); transition: var(--transition); }
.focus-exit:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.focus-exit svg { width: 18px; height: 18px; }
.focus-main { display: grid; }
.reg.is-wizard { max-width: none; width: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100svh - 72px); }   /* margin:0: an auto margin would shrink the grid item to its content */
.q-nav .q-next { flex: 0 0 auto; width: auto; }
.q-stage { overflow: auto; padding: var(--space-md) var(--gutter) var(--space-xl); display: grid; }
.reg.is-wizard .q { display: none; width: min(680px, 100%); margin: auto; }
.reg.is-wizard .q.is-on { display: block; animation: q-in .32s var(--ease) both; }
.reg.is-wizard .q.is-on.is-back { animation-name: q-in-l; }
@keyframes q-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes q-in-l { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reg.is-wizard .q.is-on { animation: none; } }
.reg.is-wizard .q { text-align: center; }   /* question block centred, answer block left-aligned */
.reg.is-wizard .q-body { text-align: left; }
.q-eyebrow { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .18em; color: var(--ice); margin-bottom: var(--space-sm); }
.q-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-light); color: var(--white); text-wrap: balance; }
.q-hint { margin-top: var(--space-sm); font-size: var(--fs-body); font-style: italic; color: #e68a8a; line-height: 1.5; }
.q-body { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.q-field { display: grid; gap: .4rem; }
.q-field label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-soft); }
.reg.is-wizard input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) { height: 54px; font-size: 18px; padding: 0 1rem; }
.reg.is-wizard textarea { min-height: 120px; font-size: 18px; padding: .8rem 1rem; }
.q-two { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .q-two { grid-template-columns: 1fr 1fr; } }
/* option buttons: radio groups (the old selects use the same name/value pairs) */
.q-opts { display: grid; gap: 10px; }
.q-opt { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--white) 30%, transparent); border-radius: var(--r-vz-lg); color: var(--on-dark); font-size: var(--fs-lead); font-weight: var(--fw-body); cursor: pointer; transition: var(--transition); }
.form .q-opt { display: flex; font-size: var(--fs-lead); color: var(--on-dark); }   /* beats the form's generic label rule (block, small) */
.form .q-upload { display: grid; }
.q-opt:hover { border-color: var(--white); background: color-mix(in srgb, var(--white) 6%, transparent); }
.q-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.q-opt .key { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); font-size: var(--fs-small); font-weight: var(--fw-head); color: var(--on-dark-soft); }
.q-opt:has(input:checked) { background: var(--ice); border-color: var(--ice); color: var(--ink); }
.q-opt:has(input:checked) .key { background: var(--brand-2); border-color: var(--brand-2); color: var(--white); }
.q-opt:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (hover: none) { .q-opt .key { display: none; } }
/* upload tiles */
.q-uploads { display: grid; gap: 10px; }
@media (min-width: 560px) { .q-uploads { grid-template-columns: 1fr 1fr; } }
.q-upload { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: .15rem .9rem; align-items: center; margin: 0; padding: .9rem 1rem; border: 1px dashed color-mix(in srgb, var(--white) 40%, transparent); border-radius: var(--r-vz-lg); color: var(--on-dark); font-size: var(--fs-body); cursor: pointer; transition: var(--transition); }
.q-upload:hover { border-color: var(--white); background: color-mix(in srgb, var(--white) 6%, transparent); }
.q-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-upload .ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--white) 10%, transparent); color: var(--ice); }
.q-upload .ico svg { width: 22px; height: 22px; }
.q-upload .lbl { color: var(--white); font-weight: var(--fw-head); }
.q-upload .file { font-size: var(--fs-small); color: var(--on-dark-soft); overflow-wrap: anywhere; }
.q-upload.is-set { border-style: solid; border-color: var(--ice); }
.q-upload.is-set .file { color: var(--ice); }
.q-upload:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
/* bottom nav: progress, back, counter, next */
.q-foot { position: sticky; bottom: 0; padding: var(--space-sm) var(--gutter) var(--space-md); background: linear-gradient(to top, var(--ink) 80%, transparent); }
.q-bar { height: 3px; max-width: 680px; margin: 0 auto var(--space-sm); background: color-mix(in srgb, var(--white) 14%, transparent); border-radius: 2px; overflow: hidden; }
.q-fill { display: block; height: 100%; width: 0; background: linear-gradient(to right, #b40006, var(--accent)); transition: width .45s var(--ease); }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); max-width: 680px; margin: 0 auto; }
.q-prev { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--on-dark); transition: var(--transition); }
.q-prev:hover:not([disabled]) { background: var(--white); color: var(--ink); }
.q-prev[disabled] { opacity: .25; cursor: default; }
.q-prev svg { width: 18px; height: 18px; }
.q-count { font-size: var(--fs-small); letter-spacing: .12em; color: var(--on-dark-soft); }
.q-next, .q-start, .reg.is-wizard .btn[type="submit"] { background: linear-gradient(320deg, #b40006 0%, var(--accent) 100%); border-color: transparent; color: var(--white); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-head); border-radius: var(--r-vz); padding: .85em 1.6em; width: auto; margin: 0; }
.q-next:hover, .q-start:hover, .reg.is-wizard .btn[type="submit"]:hover { filter: brightness(1.12); transform: none; }
.q-body .q-start { justify-self: center; width: auto; }   /* the form's buttons are full-width by default */
.reg.is-wizard .btn[type="submit"] { justify-self: start; }
.reg.is-start .q-foot { visibility: hidden; }
.q.is-final .q-body { gap: var(--space-md); }
.reg.is-wizard .agree { text-transform: none; text-align: left; font-size: var(--fs-body); }
.reg.is-wizard .msg.is-error { text-align: left; }
.q-err { margin: 0; padding: .7rem 1rem; border-radius: var(--r-vz); background: color-mix(in srgb, var(--brand-2) 35%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); color: #ffd6d6; font-size: var(--fs-body); }
.reg.is-wizard .is-bad { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-opts.is-bad { border-radius: var(--r-vz-lg); }
.reg-review { display: grid; gap: var(--space-sm); }
.rv-group { padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: var(--r-vz-lg); background: color-mix(in srgb, var(--white) 4%, transparent); text-align: left; }
.rv-group h3 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .1em; color: var(--white); margin-bottom: .45rem; }
.rv-edit { font-size: var(--fs-small); font-weight: var(--fw-body); text-transform: none; letter-spacing: 0; color: var(--ice); text-decoration: underline; }
.rv-group dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .2rem .8rem; font-size: var(--fs-small); }
.rv-group dt { color: var(--on-dark-soft); } .rv-group dd { color: var(--on-dark); overflow-wrap: anywhere; }
@media (max-width: 479px) { .rv-group dl { grid-template-columns: 1fr; gap: 0; } .rv-group dd { margin-bottom: .35rem; } }
.reg.is-wizard .done { width: min(680px, 100%); margin: auto; padding: var(--space-xl) var(--gutter); text-align: center; }
.reg.is-wizard .done .done-act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.reg.is-wizard .done .btn { width: auto; }
.reg.is-wizard .q:focus { outline: none; }
/* processing state while the application uploads */
.q-busy { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); background: var(--ink); }
.q-busy-in { width: min(640px, 100%); text-align: center; display: grid; gap: var(--space-md); }
.q-busy .q-bar { max-width: none; margin: 0; height: 6px; }
.q-busy-step { color: var(--on-dark-soft); }
.q-warn { padding: var(--space-md); border: 2px solid var(--accent); border-radius: var(--r-vz-lg); background: color-mix(in srgb, var(--brand-2) 30%, transparent); color: var(--white); font-size: var(--fs-lead); line-height: 1.5; }
.q-warn b { display: block; margin-bottom: .35rem; color: #ffd6d6; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-h4); }
.reg.is-busy .q-stage, .reg.is-busy .q-foot { visibility: hidden; }

/* ---- Prose pages, steps with the red dropcaps, terms, FAQ --------------- */
.content { max-width: 980px; margin: 0 auto; }
.content > * + * { margin-top: var(--space-2xl); }
.prose { --flow: 1em; max-width: var(--measure); margin-inline: auto; text-align: justify; text-align-last: left; }
.prose > * + * { margin-top: var(--flow); }
.prose h2 { margin-top: var(--space-xl); text-align: center; text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-body); font-size: var(--fs-h3); opacity: .9; }
.prose h3 { margin-top: var(--space-lg); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-sm); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose.facts { margin-top: var(--space-xl); }   /* "Vizirent sekilas" list under the About copy */
.prose a { text-decoration: underline; text-underline-offset: .15em; }
.prose .eyebrow { display: block; text-align: center; color: var(--ice); margin-bottom: 0; }
.steps { display: grid; gap: var(--space-lg); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps .step { --flow: .6rem; padding: var(--space-lg); border-radius: var(--r-vz-xl); background: color-mix(in srgb, #000 55%, transparent); border: 1px solid color-mix(in srgb, var(--white) 25%, transparent); text-align: justify; }
.steps .step > * + * { margin-top: var(--flow); }
.steps .step p { font-size: var(--fs-small); line-height: 1.55; }
.steps .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; line-height: 1; padding-bottom: .075em; background: linear-gradient(320deg, #b40006 0%, var(--accent) 100%); color: var(--white); font-size: var(--fs-h3); font-weight: var(--fw-head); border-radius: 0 12px; margin: 0 auto var(--space-sm); }   /* grid-centred glyph; the small bottom padding lifts Lato's digits, which sit low in their line box */
.steps .step h3 { font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: .08em; text-align: center; font-weight: var(--fw-body); }
.more { margin-top: var(--space-lg); text-align: center; }
.terms, .prose .terms { --flow: .8em; counter-reset: term; list-style: none; padding-left: 0; }   /* .prose ol would otherwise add decimal markers next to the counters */
.terms > li { position: relative; padding-left: 3em; text-align: justify; }
.terms > li::before { counter-increment: term; content: counter(term); position: absolute; left: 0; top: .1em; width: 2.2em; height: 2.2em; display: grid; place-items: center; line-height: 1; padding-bottom: .075em; background: linear-gradient(320deg, #b40006 0%, var(--accent) 100%); border-radius: 0 8px; font-size: var(--fs-small); font-weight: var(--fw-head); color: var(--white); }
.terms b { color: var(--ice); }
.terms ol { list-style: lower-alpha; padding-left: 1.4em; margin-top: .4em; }
.terms ul { list-style: disc; padding-left: 1.4em; margin-top: .4em; }
.faq details { padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--r-vz-lg); background: color-mix(in srgb, #000 45%, transparent); text-align: left; }
.faq details + details { margin-top: var(--space-xs); }
.faq summary { cursor: pointer; font-weight: var(--fw-head); color: var(--white); }
.faq details > * + * { margin-top: .6em; }
.faq ul { list-style: disc; padding-left: 1.3em; }
.unis, .prose .unis { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }   /* .prose ul would add bullets to the chips */
.unis li { padding: .45em 1em; border-radius: 0 8px; border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); font-size: var(--fs-small); color: var(--white); }
.unilogos { text-align: center; }
.unilogos img { width: min(100%, 760px); height: auto; margin: 0 auto; }

/* ---- Logged-in admins: keep the fixed bars below WordPress's own admin bar ---- */
.admin-bar .topbar { top: 32px; }
.admin-bar .nav { top: 66px; }
@media (max-width: 782px) { .admin-bar .topbar { top: 46px; } .admin-bar .nav { top: 80px; } }

/* ============================================================
   CART — sticky date bar, membership sheet, date picker, quick
   view, drawer, plus buttons and availability marks.
   ============================================================ */
:root { --vz-bar-h: 64px; }
body { padding-bottom: var(--vz-bar-h); }
html.is-vz-open { overflow: hidden; }

/* ---- Sticky date bar ---------------------------------------------------- */
.vz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: stretch; padding: 8px var(--gutter); background: color-mix(in srgb, #000 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); color: var(--white); }
.vz-bar button { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: .35rem .7rem; border-radius: var(--r-vz); border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); color: var(--white); line-height: 1.2; min-height: 46px; }
.vz-bar button small { font-size: var(--fs-small); color: var(--on-dark-soft); }
.vz-bar button b { font-family: var(--font-head); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; }
.vz-bar button:hover { border-color: var(--white); }
/* price-mode select, styled like the bar buttons */
.vz-bar .who { position: relative; display: flex; flex-direction: column; justify-content: center; padding: .35rem .7rem; border-radius: var(--r-vz); border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); min-height: 46px; line-height: 1.2; cursor: pointer; transition: var(--transition); }
.vz-bar .who:hover, .vz-bar .who:has(.who-sel:focus-visible) { border-color: var(--white); }
.vz-bar .who .lbl { font-size: var(--fs-small); color: var(--on-dark-soft); }
.vz-bar .who .val { display: block; padding-right: 16px; color: var(--white); font-family: var(--font-head); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center / 10px 10px; }
/* the real <select> covers the whole button invisibly: a tap anywhere on it opens the system menu; keyboard and screen readers still get a native select */
.vz-bar .who-sel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; }
.vz-bar .who-sel option { color: var(--ink); text-transform: none; }
.vz-bar .cartbtn { flex-direction: row; gap: .5rem; align-items: center; background: #25d366; border-color: #25d366; padding-inline: 1rem; }
.vz-bar .cartbtn svg { width: 20px; height: 20px; }
.vz-bar .cartbtn .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: var(--fw-head); font-size: var(--fs-small); }
.vz-bar .cartbtn .lbl { display: none; }
@media (max-width: 479px) { .vz-bar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 5px; padding-inline: var(--space-2xs); } .vz-bar .dates .t, .vz-bar .who .l-long { display: none; } .vz-bar button, .vz-bar .who { padding-inline: .5rem; } }
@media (min-width: 480px) { .vz-bar .who .l-short { display: none; } }
@media (min-width: 768px) { .vz-bar { grid-template-columns: auto auto 1fr auto; padding: 8px calc(var(--gutter) * 2); } .vz-bar .cartbtn { justify-self: end; } .vz-bar .cartbtn .lbl { display: inline; font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); } .vz-bar .brandtag { display: flex; align-items: center; color: var(--on-dark-soft); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .12em; } }
.vz-bar .brandtag { display: none; }
.vz-flash { position: fixed; left: 50%; bottom: calc(var(--vz-bar-h) + 12px); transform: translateX(-50%); z-index: 91; background: var(--white); color: var(--ink); padding: .5rem 1rem; border-radius: var(--r-vz); font-size: var(--fs-small); box-shadow: var(--shadow); }

/* ---- Sheets (picker / member / quick view / cart share one shell) ------- */
.vz-sheet { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; opacity: 0; transition: opacity .25s var(--ease); }
.vz-sheet.is-open { opacity: 1; }
#vz-picker.vz-sheet { z-index: 125; }   /* the picker opens on top of the cart or the quick view */
.vz-sheet[hidden] { display: none; }
.vz-sheet .ov { position: absolute; inset: 0; background: var(--overlay-band); }
.vz-sheet .panel { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 92svh; display: flex; flex-direction: column; background: var(--surface); color: var(--on-dark); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); transform: translateY(24px); transition: transform .3s var(--ease); }
.vz-sheet.is-open .panel { transform: none; }
.vz-sheet .head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
.vz-sheet .head h2, .vz-sheet .head .pk-title { font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: .1em; font-weight: var(--fw-body); margin: 0; }
.vz-sheet .x { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--on-dark); }
.vz-sheet .x:hover { background: var(--white); color: var(--ink); }
.vz-sheet .scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-md); -webkit-overflow-scrolling: touch; }   /* min-height:0 lets a flex child actually scroll */
@media (min-width: 768px) { .vz-sheet { place-items: center; padding: var(--space-md); } .vz-sheet .panel { border-radius: var(--r-vz-xl); max-height: 88vh; } .vz-sheet.is-drawer { place-items: stretch end; padding: 0; } .vz-sheet.is-drawer .panel { max-width: 520px; height: 100svh; max-height: 100svh; border-radius: 0; transform: translateX(24px); }   /* viewport-based height: a percentage would resolve against the auto grid row and the drawer could never scroll */ .vz-sheet.is-drawer.is-open .panel { transform: none; } }
.vz-sheet .hint { font-size: var(--fs-small); color: var(--on-dark-soft); }
.vz-sheet .btn.is-sm { padding: .6em 1em; font-size: var(--fs-small); }

/* ---- Date picker -------------------------------------------------------- */
.pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); font-weight: var(--fw-head); }
.pk-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--on-dark); font-size: 20px; }
.pk-months { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .pk-months { grid-template-columns: 1fr 1fr; } }
.pk-m h4 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; text-align: center; margin-bottom: .4rem; color: var(--white); font-weight: var(--fw-body); }
.pk-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: var(--fs-small); }
.pk-g .dow { color: var(--on-dark-soft); font-size: .72em; text-transform: uppercase; padding: .2em 0; }
.pk-g .d { padding: .55em 0; border-radius: 0 6px; background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--on-dark); }
.pk-g .d:hover:not([disabled]) { background: color-mix(in srgb, var(--white) 22%, transparent); }
.pk-g .d.is-past { opacity: .28; }
.pk-g .d.is-full { background: color-mix(in srgb, var(--brand-2) 70%, transparent); text-decoration: line-through; }
.pk-g .d.is-in { background: color-mix(in srgb, var(--ice) 35%, transparent); }
.pk-g .d.is-from, .pk-g .d.is-to { background: var(--ice); color: var(--ink); font-weight: var(--fw-head); }
.pk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--fs-small); }

/* ---- Membership sheet --------------------------------------------------- */
.mb-body { display: grid; gap: var(--space-sm); }
.mb-body .opt { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: var(--r-vz-lg); cursor: pointer; }
.mb-body .opt.is-on { border-color: var(--ice); background: color-mix(in srgb, var(--ice) 12%, transparent); }
.mb-body .opt input { accent-color: var(--accent); }
.mb-body .opt small { display: block; color: var(--on-dark-soft); font-size: var(--fs-small); }
.mb-body .mid { padding: var(--space-sm) var(--space-md); border: 1px dashed var(--line); border-radius: var(--r-vz-lg); }
.mb-body .mid label { display: block; font-size: var(--fs-small); margin-bottom: .4rem; }
.mb-body .mid input { width: 100%; height: 44px; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); padding: 0 1rem; text-transform: uppercase; }
.mb-body .mid input.is-bad { outline: 2px solid var(--accent); }
.mb-body .mid .ok { display: block; margin-top: .3rem; color: #7ee2a1; font-size: var(--fs-small); }

/* ---- Prices with membership emphasis ------------------------------------ */
.vz-prices { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.vz-prices .pp { display: flex; flex-direction: column; padding: .5rem .9rem; border-radius: var(--r-vz); border: 1px solid var(--line); min-width: 130px; flex: 1 1 150px; }
.vz-prices .pp b { font-family: var(--font-head); font-size: var(--fs-h4); color: var(--white); }
.vz-prices .pp small { font-size: var(--fs-small); color: var(--on-dark-soft); text-transform: uppercase; letter-spacing: .06em; }
.vz-prices .pp.is-main { background: var(--glass); color: var(--ink); border-color: transparent; }
.vz-prices .pp.is-main b { color: var(--ink); } .vz-prices .pp.is-main small { color: var(--brand-2); font-weight: var(--fw-head); }
.product .pricebox.vz-prices { display: flex; }
.vz-prices:not(.is-both) .pp:not(.is-main) { opacity: .75; }

/* ---- Quick view --------------------------------------------------------- */
.qv-grid { display: grid; gap: var(--space-md); }
.qv-side { display: contents; }   /* phone: photo, details, then the add bar (below) pinned to the sheet's bottom edge */
@media (min-width: 640px) { .qv-grid { grid-template-columns: 1fr 1.1fr; } .qv-side { display: flex; flex-direction: column; gap: var(--space-sm); position: sticky; top: 0; align-self: start; } }   /* photo and add-to-cart stay put while the details scroll (the sheet's .scroll is the scroll container) */
.qv-pic { background: var(--white); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-vz-lg); width: 100%; max-width: 300px; justify-self: center; }   /* single column (phones): the photo stays a modest square instead of filling the sheet */
@media (min-width: 640px) { .qv-pic { max-width: none; } }
.qv-pic img { width: 100%; height: 100%; object-fit: cover; }
.qv-info { --flow: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.qv-info .cat { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-soft); }
.qv-info h2 { font-size: var(--fs-h3); color: var(--white); }
.qv-info .kit { font-size: var(--fs-small); }
.qv-info .desc { font-size: var(--fs-small); color: var(--on-dark-soft); }
.qv-dates { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.qv-date { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--r-vz); color: var(--on-dark); font-size: var(--fs-small); }
.qv-date:hover { border-color: var(--white); }
.qv-total small { display: block; font-size: var(--fs-small); color: var(--on-dark-soft); margin-top: .3rem; }
.qv-act { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; order: 2; position: sticky; bottom: calc(-1 * var(--space-md)); z-index: 2; margin: 0 calc(-1 * var(--space-md)) calc(-1 * var(--space-md)); padding: var(--space-sm) var(--space-md) max(var(--space-sm), env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.qv-act { flex-wrap: nowrap; align-items: stretch; }
.qv-act .vz-qty { flex: none; }   /* compact stepper beside the button, both 46px tall */
.qv-act .vz-qty button { width: 32px; height: 44px; }
.qv-act .vz-qty input { width: 34px; height: 44px; }
.qv-act .qv-add { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 .5em; justify-content: center; white-space: nowrap; font-size: .75rem; letter-spacing: .03em; }
@media (min-width: 640px) { .qv-act { order: 0; position: static; margin: 0; padding: 0; background: none; border-top: 0; gap: var(--space-xs); } .qv-act .vz-qty button { width: 28px; } .qv-act .vz-qty input { width: 30px; } .qv-act .qv-add { font-size: .72rem; } }
.qv-link { font-size: var(--fs-small); color: var(--ice); }
.vz-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-vz); overflow: hidden; }
.vz-qty button { width: 38px; height: 40px; color: var(--on-dark); font-size: 18px; }
.vz-qty button:hover { background: color-mix(in srgb, var(--white) 12%, transparent); }
.vz-qty input, .vz-qty span { width: 44px; height: 40px; text-align: center; border: 0; background: transparent; color: var(--white); font-weight: var(--fw-head); display: inline-grid; place-items: center; -moz-appearance: textfield; }
.vz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---- Cart drawer -------------------------------------------------------- */
.ct-body { display: grid; gap: var(--space-md); }
.ct-body .empty { color: var(--on-dark-soft); text-align: center; padding: var(--space-xl) 0; }
.ct-dates { display: grid; gap: var(--space-xs); }
.ct-gdate { display: flex; flex-direction: column; text-align: left; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--r-vz-lg); color: var(--on-dark); }
.ct-gdate b { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.ct-gdate small { color: var(--on-dark-soft); font-size: var(--fs-small); }
.ct-toggle { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small); }
.ct-toggle input { accent-color: var(--accent); }
/* price mode block (first thing in the drawer: the estimate must be for one tier before sending) */
.ct-who { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--r-vz-lg); background: color-mix(in srgb, var(--ice) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ice) 45%, transparent); }
.ct-who.is-unset { border-color: color-mix(in srgb, var(--accent) 75%, transparent); }
.ct-who-head b { display: block; color: var(--white); text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-small); }
.ct-who-head small { display: block; color: var(--on-dark-soft); font-size: var(--fs-small); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg-btn { padding: .6rem .5rem; border-radius: var(--r-vz); border: 1px solid var(--line); color: var(--on-dark); font-family: var(--font-head); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); line-height: 1.2; transition: var(--transition); }
.seg-btn small { display: block; font-weight: var(--fw-body); text-transform: none; letter-spacing: 0; color: var(--on-dark-soft); }
.seg-btn:hover { border-color: var(--white); }
.seg-btn.is-on { background: var(--ice); color: var(--ink); border-color: var(--ice); }
.seg-btn.is-on small { color: var(--brand-2); }
.ct-mid { display: grid; gap: .3rem; font-size: var(--fs-small); }
.ct-mid input { height: 42px; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); padding: 0 .8rem; text-transform: uppercase; font-size: 16px; }
.ct-mid input.is-bad { outline: 2px solid var(--accent); }
.ct-mid .bad, .mb-body .mid .bad { color: #ffb4b4; font-size: var(--fs-small); }
.mb-act { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.ct-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); font-size: var(--fs-small); }
.ct-chip b { font-family: var(--font-head); }
.ct-chip button { text-decoration: underline; color: var(--brand-2); font-size: var(--fs-small); }
/* times: hour + minute selects (5-minute steps) with the date spelled out under each */
.ct-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.ct-time { display: grid; gap: .3rem; font-size: var(--fs-small); }
.ct-time .lbl { color: var(--on-dark-soft); }
.tsel { display: inline-flex; align-items: center; gap: 4px; }
.tsel select { height: 40px; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); padding: 0 .4rem; font-size: 16px; font-family: var(--font-head); font-weight: var(--fw-head); }
.tsel span { color: var(--on-dark-soft); }
.ct-time .prev { color: var(--ice); }
.ct-send-wrap { display: grid; gap: .5rem; }
.ct-send-wrap .msg { color: #ffb4b4; font-size: var(--fs-small); }
.ct-send[disabled] { opacity: .5; cursor: not-allowed; }
.ct-lines { display: grid; gap: var(--space-sm); }
.ct-line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-sm); align-items: start; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--r-vz-lg); }
.ct-line img { width: 64px; height: 64px; object-fit: contain; background: var(--white); border-radius: 0 8px; }
.ct-line .ct-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ct-line .ct-main b { color: var(--white); font-size: var(--fs-small); line-height: 1.3; }
.ct-line .ct-meta { font-size: var(--fs-small); color: var(--on-dark-soft); }
.ct-line .ct-date { align-self: flex-start; font-size: var(--fs-small); padding: .3rem .6rem; border: 1px dashed var(--line); border-radius: var(--r-vz); color: var(--ice); }
.ct-line .ct-side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; font-size: var(--fs-small); }
.ct-line .ct-side b { color: var(--white); }
.ct-line .ct-del { color: var(--on-dark-soft); font-size: var(--fs-small); text-decoration: underline; }
.ct-line[data-avail="none"] { border-color: color-mix(in srgb, var(--brand-2) 80%, transparent); }
.ct-totals { padding: var(--space-md); border-radius: var(--r-vz-lg); background: color-mix(in srgb, var(--white) 6%, transparent); display: grid; gap: .4rem; }
.ct-totals .row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--fs-small); }
.ct-totals .row.big { font-size: var(--fs-body); } .ct-totals .row.big b { font-size: var(--fs-h4); color: var(--white); }
.ct-form { display: grid; gap: var(--space-sm); }
.ct-form h3 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-soft); font-weight: var(--fw-body); }
.ct-form label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-small); }
.ct-form .row2 { display: grid; gap: var(--space-sm); } @media (min-width: 480px) { .ct-form .row2 { grid-template-columns: 1fr 1fr; } }
.ct-form input, .ct-form select, .ct-form textarea { height: 42px; border: 0; border-radius: var(--r-vz); background: var(--glass); color: var(--ink); padding: 0 .8rem; font-size: 16px; }
.ct-form textarea { height: auto; padding: .6rem .8rem; min-height: 60px; }
.ct-form .msg.is-error { color: #ffb4b4; font-size: var(--fs-small); }
.ct-form .ct-send { justify-content: center; }
.ct-done { --flow: var(--space-sm); display: grid; gap: var(--space-sm); text-align: center; padding: var(--space-lg) 0; }
.ct-done pre { text-align: left; white-space: pre-wrap; font: inherit; font-size: var(--fs-small); background: color-mix(in srgb, var(--white) 6%, transparent); padding: var(--space-sm); border-radius: var(--r-vz); }
.ct-done .btn { justify-self: center; }

/* ---- Plus buttons + availability marks on tiles and rows --------------- */
.vz-plus { position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-2); color: var(--white); font-size: 20px; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 2px solid var(--white); }
.vz-plus.is-in { background: var(--ice); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-head); }
.vz-plus:hover { transform: scale(1.08); }
.pcard .pic { position: relative; z-index: 2; }   /* above the title's stretched-link overlay, so an image click opens the quick view */
.pcard .vz-plus { top: 10px; right: 10px; }
.pl .vz-plus { position: static; width: 30px; height: 30px; font-size: 17px; margin: 0; border-width: 1px; }
.vz-av { display: inline-block; font-size: var(--fs-small); padding: .15em .6em; border-radius: 999px; background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--on-dark); }
[data-avail="ok"] .vz-av, .vz-av.is-ok { background: #1f8a4c; color: var(--white); }
[data-avail="low"] .vz-av, .vz-av.is-low { background: #b7791f; color: var(--white); }
[data-avail="none"] .vz-av, .vz-av.is-none { background: var(--brand-2); color: var(--white); }
.pcard .vz-av { margin-top: .35rem; }
.pl td .vz-av { margin-left: .5rem; }
.pcard[data-avail="none"] .pic img { opacity: .5; }
.vz-qv-open { cursor: zoom-in; }
.vz-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

/* ---- Weekday promo: tile badge, price-list promo prices, per-range chips, cart lines ---- */
.pbadge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: .28em .6em; border-radius: var(--r-vz); background: var(--accent); color: var(--white); font-size: var(--fs-small); font-weight: var(--fw-head); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
@media (max-width: 479px) { .pbadge .w { display: none; } }   /* phone tiles are too narrow for the word next to the + button */
.plnote { max-width: 780px; margin: 0 auto var(--space-md); text-align: center; font-size: var(--fs-small); color: var(--on-dark-soft); line-height: 1.5; }
.plnote b { color: var(--ice); }
/* price cells: the applicable price in bold, the other day price or the day count as a quiet line under it (no red) */
.pl td b { display: block; }
.pl td small, .pl th small { display: block; margin-top: .1rem; font-size: var(--fs-small); font-weight: var(--fw-body); letter-spacing: 0; text-transform: none; color: var(--on-dark-soft); white-space: nowrap; }
.plstatus { text-align: center; margin: 0 auto var(--space-md); font-size: var(--fs-small); color: var(--ice); }
.vz-days { display: inline-block; margin-top: .3rem; font-size: var(--fs-small); color: var(--ice); }
.vz-prices .pp em { display: block; margin-top: .2rem; font-style: normal; font-size: var(--fs-small); color: var(--on-dark-soft); }
.vz-prices .pp.is-main em { color: color-mix(in srgb, var(--ink) 65%, var(--white)); }
.product .price .sub { display: block; margin-top: .25rem; font-size: var(--fs-small); color: color-mix(in srgb, var(--ink) 65%, var(--white)); }
.product .note.is-promo { color: var(--on-dark); }
.product .note.is-promo b { color: var(--ice); }
.ct-totals .row.promo b { color: var(--ice); }

/* Grid tracks inside the sheets must never grow past the panel (a 1fr track has a min-content floor; minmax(0,1fr) does not). */
.ct-body, .ct-lines, .ct-dates, .ct-form, .mb-body, .qv-info { grid-template-columns: minmax(0, 1fr); }
.ct-form .row2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .ct-form .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 640px) { .qv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.ct-line { grid-template-columns: 64px minmax(0, 1fr) auto; }
.ct-line .ct-main b { overflow-wrap: anywhere; }
.ct-times label { min-width: 0; }
/* Phone width: cart lines stack the controls under the title instead of squeezing three columns */
@media (max-width: 479px) {
  .ct-line { grid-template-columns: 56px minmax(0, 1fr); }
  .ct-line img { width: 56px; height: 56px; }
  .ct-line .ct-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .25rem; border-top: 1px solid var(--line); }
  .ct-line .ct-side b { order: 2; } .ct-line .ct-side .ct-del { order: 3; }
  .ct-times { grid-template-columns: 1fr; }
}

/* ---- Paket Socmed Bundling (template-paket-socmed.php) ------------------- */
.socmed-intro { margin-top: var(--space-lg); }
.socmed-packs { margin-top: var(--space-xl); }
.socmed-status { margin-top: var(--space-sm); }
.socmed-terms { max-width: var(--measure); margin: var(--space-xl) auto 0; }
.socmed-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }
.promo .promo-link { color: var(--ice); text-decoration: underline; text-underline-offset: .15em; }

/* ---- photo gallery thumbnails (bundles): quick view and product page -------- */
.qv-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: var(--space-xs); }
.qv-thumb { width: 48px; height: 48px; border-radius: var(--r-vz); overflow: hidden; background: none; outline: 2px solid transparent; outline-offset: -2px; opacity: .7; transition: var(--transition); }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-thumb:hover, .qv-thumb.is-on { opacity: 1; outline-color: var(--ice); }
.qv-pic { max-width: 300px; }
@media (min-width: 640px) { .qv-side .qv-thumbs { justify-content: flex-start; } }
@media (min-width: 768px) { .product .gallery-col { position: sticky; top: calc(var(--header-h) + 34px + var(--space-md)); align-self: start; } .product .gallery { position: static; } }


.vz-parts { color: var(--on-dark-soft); }
.product .note.vz-parts { margin-top: var(--space-xs); }