/* =========================================================================
   layout.css — page shell, typography defaults, containers, nav skeleton.
   ========================================================================= */

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--cocoa);
  background: var(--cream);
  overflow-x: clip; /* marquees must never produce a horizontal scrollbar */
}

/* The two tint layers, composited above the page background but below
   content. --section-tint is stepped by scroll; --card-tint by hover. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  opacity: var(--tint-strength);
  transition: background-color .6s var(--ease-out);
}
body::before { background-color: var(--section-tint); }
body::after  { background-color: var(--card-tint); }

/* ---- Typography defaults ------------------------------------------------
   Tracking and opsz both scale with size — see the token comments. A single
   -.03em across every display size is too loose on a 180px hero and too
   tight on a 30px subhead. */
.t-display,
.t-hero,
.t-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .92;
  letter-spacing: var(--track-hero);
  font-variation-settings: var(--wonk-hero);
  /* No widows in display type — one orphaned word in a 90px headline is
     the most visible typographic failure on a page. */
  text-wrap: balance;
}
.t-hero    { font-size: var(--fs-hero); }
.t-display { font-size: var(--fs-display); letter-spacing: var(--track-h2); }
.t-h2 {
  font-size: var(--fs-h2);
  font-variation-settings: var(--wonk-h2);
  letter-spacing: var(--track-h2);
  line-height: .96;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--track-h3);
  font-variation-settings: var(--wonk-sub);
  text-wrap: balance;
}

/* Every heading element, not just the ones wearing a t- class. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* `pretty` only affects the last few lines, so it is safe on long copy and
   fixes the single-word final line that `balance` is too expensive for. */
p, .t-lead, li, dd, figcaption { text-wrap: pretty; }

.t-script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: var(--maxw-text);
  letter-spacing: var(--track-body);
}

/* Small UI text gets no negative tracking at all. */
.chip, .card__tag, .btn, .nav__link, .footer__head, .card__go {
  letter-spacing: var(--track-ui);
}

/* ---- Containers --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-gutter);
}

.section {
  position: relative;
  padding-block: var(--pad-section);
}

/* Everything after the hero rides above it so it can slide over the
   scrubbed bottom corners. The hero itself is sticky at z-below. */
.after-hero {
  position: relative;
  z-index: var(--z-content);
  background: var(--cream);
}

/* ---- Focus -------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
  border-radius: var(--r-sm);
}

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    height       var(--dur-mid) var(--ease-out),
    background   var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow   var(--dur-mid) var(--ease-out);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

/* Solid state — past 90vh. Transitioned, never snapped. */
.nav.is-solid {
  height: var(--nav-h-solid);
  background: var(--cream);
  border-bottom-color: rgba(var(--cocoa-rgb), .14);
  box-shadow: 0 2px 20px rgba(var(--cocoa-rgb), .05);
}

/* ---- Logo --------------------------------------------------------------
   ONE logo in every context — the supplied wordmark.

   It is white-filled with cocoa and pink offset shadows on transparency, so
   it only reads on dark ground. Over the hero the scrim provides that. On
   the cream sticky nav it measured 1.03:1 bare (see tools/verify report),
   far under the 3:1 non-text minimum, so it sits on a teal-deep badge
   instead — which is the brand's own avatar treatment, not a patch.

   The padding is always present and only background-color transitions, so
   solidifying the nav costs a repaint and never a reflow. */
.nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
}
.logo-badge {
  display: inline-flex;
  align-items: center;
  padding: clamp(5px, .55vw, 8px) clamp(10px, 1.1vw, 16px);
  border-radius: var(--r-pill);
  background: transparent;
  transition: background-color var(--dur-mid) var(--ease-out);
}
.logo-badge picture { display: block; }
.logo-badge img {
  display: block;
  width: auto;
  height: clamp(28px, 2.9vw, 40px);
}

/* ---- Three nav treatments, one flag each -------------------------------
   The client asked to see the navbar without the teal disc behind the logo.
   The disc is not decoration: the wordmark is white-filled artwork on
   transparency and measures 1.04:1 bare on cream — invisible, not merely
   weak. So removing it is a switch rather than a deletion, and the third
   option exists because the second one cannot pass on its own.

     CB.LOGO_BADGE = true    ->  html.cb-logo-badge   teal disc on cream nav
     CB.NAV_SOLID_DARK = true->  html.cb-nav-dark     whole solid nav teal

   DEFAULT STATE IS BADGELESS. The classes only ever ADD a treatment, so a
   page that paints before data.js runs shows the flags' default rather than
   flashing a disc that then disappears.

   Over a hero or a title band the nav is transparent on a dark scrim and
   the bare wordmark is correct in all three variants — the disc only ever
   mattered in the solid scrolled state. Measurements per variant are in
   suite U. */
html.cb-logo-badge .nav.is-solid .logo-badge { background: var(--teal-deep); }

html.cb-nav-dark .nav.is-solid {
  background: var(--teal-deep);
  border-bottom-color: rgba(var(--ink-rgb), .3);
  box-shadow: 0 2px 24px rgba(var(--ink-rgb), .18);
}
html.cb-nav-dark .nav.is-solid .nav__link,
html.cb-nav-dark .nav.is-solid .nav__icon-btn { color: var(--cream); }
html.cb-nav-dark .nav.is-solid .nav__icon-btn:hover {
  background: rgba(var(--cream-rgb), .14);
}
/* The disc would be teal-on-teal here. Belt and braces in case both flags
   are on at once while the client compares. */
html.cb-nav-dark.cb-logo-badge .nav.is-solid .logo-badge { background: transparent; }

/* ---- Links -------------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2.4vw, var(--s-10));
}
.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: var(--s-2);
  transition: color var(--dur-mid) var(--ease-out);
}
.nav.is-solid .nav__link { color: var(--cocoa); }

/* Hot-pink underline wiping in from the left. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--hot-pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-4); }

/* ---- Cart and account ---------------------------------------------------
   Icon buttons rather than labelled links: this corner already holds the
   CTA and, below 900px, the burger. Two more words there is what pushed the
   burger off-screen at 360 the last time something was added here.

   Both carry a visible-to-AT name via aria-label and a title, so "icon
   only" is a visual decision and not an accessibility one.
   ------------------------------------------------------------------------ */
.nav__icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  color: var(--cream);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-control) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}
.nav.is-solid .nav__icon-btn { color: var(--cocoa); }
.nav__icon-btn:hover { background: rgba(var(--cream-rgb), .16); }
.nav.is-solid .nav__icon-btn:hover { background: rgba(var(--cocoa-rgb), .09); }
.nav__icon-btn:active { scale: .92; }
.nav__icon-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
}
.nav__icon-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The count badge. Hidden at zero rather than shown as "0" — an empty cart
   is not a notification. hidden is set by JS, and the [hidden] attribute is
   respected here explicitly because display:grid would otherwise win. */
.nav__badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--hot-pink);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Separates the pink from whatever is behind it in both nav states. */
  box-shadow: 0 0 0 2px rgba(var(--ink-rgb), .55);
}
.nav.is-solid .nav__badge { box-shadow: 0 0 0 2px var(--cream); }
html.cb-nav-dark .nav.is-solid .nav__badge { box-shadow: 0 0 0 2px var(--teal-deep); }
.nav__badge[hidden] { display: none; }

/* The icon IS the nav item for korpa/prijava/registracija/nalog, so it
   carries the current marker on those pages. Underline rather than a fill:
   it has to read the same in both nav states and against a photograph. */
.nav__icon-btn.is-current::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 18px;
  height: 2px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--hot-pink);
}

/* A short pop when the count changes, so the corner acknowledges the add
   even if the toast is missed. Never on first paint — cart.js adds the
   class only on a change. */
.nav__badge.is-bumped { animation: badge-bump .42s var(--ease-spring); }
@keyframes badge-bump {
  0%   { scale: 1; }
  38%  { scale: 1.42; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__badge.is-bumped { animation: none; }
}

/* ---- Mobile toggle ------------------------------------------------------ */
.burger { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger     { display: grid; }
  /* Keep the wordmark narrow enough that logo + CTA + burger still fit at
     360, where the burger was previously pushed off-screen. */
  .logo-badge img { height: 26px; }
  .logo-badge     { padding: 5px 10px; }
}

/* Cart and account are the third and fourth things competing for this
   corner. At 600 and below the CTA pill goes — it is duplicated verbatim in
   the mobile overlay's foot, so nothing is lost, whereas the cart badge has
   no second home and the burger is the only way to the menu.
   Measured at 360 in suite S: logo + 2 icons + burger, no overflow. */
@media (max-width: 600px) {
  /* .nav__right prefix is load-bearing. `.btn { display: inline-flex }` in
     components.css has the same specificity as a bare `.nav__cta` and loads
     later, so it won. The pill stayed on screen at 360 and pushed the
     burger off the right edge — measured, not predicted. */
  .nav__right .nav__cta { display: none; }
  .nav__right { gap: var(--s-1); }
  .nav__icon-btn { width: 38px; height: 38px; }
  .nav__icon-btn svg { width: 21px; height: 21px; }
}

/* =========================================================================
   PRELOADER
   Default state is HIDDEN. JS opts in by adding .is-loading to <html>.
   With JS off, erroring, or main.js 404ing, this is never painted.
   ========================================================================= */
.preloader { display: none; }

html.is-loading { overflow: hidden; }
html.is-loading .preloader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--cream);
  border-radius: 0;
  overflow: hidden;
  will-change: transform, border-radius;
}

/* Warm radial glow behind the badge. */
.preloader__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(140vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(246, 173, 205, .34) 0%,
    rgba(244, 227, 206, .26) 46%,
    rgba(255, 247, 239, 0) 72%);
}

/* Grain, inline so it costs no request. feTurbulence at 2.5% is the whole
   trick: enough to kill the flatness of a solid cream field, not enough to
   be seen as texture. */
.preloader__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.preloader__inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  width: min(78vw, 340px);
}

/* Same badge treatment as the sticky nav — teal-deep disc, white artwork. */
.preloader__badge {
  width: 100%;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--teal-deep);
  display: grid;
  place-items: center;
  transform-origin: 50% 60%;
  box-shadow: 0 2px 6px rgba(var(--cocoa-rgb), .10),
              0 18px 44px rgba(var(--cocoa-rgb), .18);
}

/* THE WIPE.
   The wordmark reveals left to right, which starts at its initial "C" —
   the letter that is itself a cinnamon-roll spiral — so the logo appears
   to write itself out of the roll.

   Chosen over tracing an SVG spiral and cross-fading to the raster at the
   moment they align: that version is better when it lands and shows a
   visible seam when it does not, and the alignment is sub-pixel work on
   artwork whose "C" has variable stroke weight. This approach reveals the
   real artwork throughout, so there is no seam to get wrong.

   The 9% feather is what makes it read as writing rather than as a bar
   sliding across. */
.preloader__logo {
  width: 100%;
  height: auto;
  --wipe: 0%;
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--wipe) - 9%), transparent var(--wipe));
          mask-image: linear-gradient(to right,
    #000 calc(var(--wipe) - 9%), transparent var(--wipe));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.preloader__tagline {
  font-family: var(--font-script);
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--teal-deep);          /* 11.08:1 on cream */
  line-height: 1;
}

/* Hairline progress rule, matched to the badge width. */
.preloader__meter {
  width: 100%;
  height: 1px;
  background: rgba(var(--cocoa-rgb), .16);
  overflow: hidden;
}
.preloader__rule {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hot-pink);      /* a fill, never text */
  transform: scaleX(0);
  transform-origin: left center;
}

.preloader__count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .04em;
  color: var(--cocoa);
  /* Tabular figures: without this the digits change width as they count and
     the whole block twitches. */
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--wonk-sub);
  opacity: .68;
}

@media (prefers-reduced-motion: reduce) {
  /* Static logo, no wipe, no counter animation. */
  .preloader__logo { --wipe: 130%; }
  .preloader__rule { transform: scaleX(1); }
  .preloader__glow { display: none; }
}