/* ==========================================================================
   Posodi.si – design system
   --------------------------------------------------------------------------
   Plain CSS, no build step. Mobile-first: base styles target phones,
   `min-width` media queries add the larger layouts.
   Breakpoints: 520 (2-col cards) · 720 (tablet) · 960 (desktop nav,
   dashboard sidebar, split layouts) · 1200 (wide).

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout (container, sections, grids, split, stack, cluster)
     05  Icons
     06  Site header, nav, menus, mobile menu
     07  Site footer
     08  Buttons
     09  Forms
     10  Notices, flash messages, toasts
     11  Hang tag (price tag) – the signature element
     12  Item card, card grids, image placeholder
     13  Pills, badges, counts
     14  Tables (stack on mobile)
     15  Chips & tabs (filters)
     16  Empty state
     17  Breadcrumbs & pagination
     18  Dialog
     19  Gallery
     20  Panel, price summary, key-value list, booking row, person,
         timeline, image upload
     21  Calendar – public range picker (.cal)
     22  Calendar – owner management (.ocal)
     23  Dashboard shell, page header, stats
     24  Steps (booking flow)
     25  Home page (hero, rail tags, categories, how it works, vendors band)
     26  Error page, auth & prose pages
     27  Utilities
     28  Motion & reduced motion
   ========================================================================== */


/* ==========================================================================
   01  Tokens
   ========================================================================== */
:root {
  /* Base palette (from the brief) */
  --canvas: #EEF1EC;          /* cool sage-grey page background */
  --surface: #FFFFFF;
  --ink: #17262B;             /* text */
  --muted: #5A6B70;           /* secondary text – 4.9:1 on canvas, 5.6:1 on white */
  --line: #D5DDD7;
  --violet: #4433C8;          /* "stamp" – primary actions, links, selection, focus */
  --manila: #F2C94C;          /* hang tag paper – PRICE TAGS ONLY */
  --ok: #1E7A4F;
  --warn: #B7791F;
  --danger: #C0392B;

  /* Derived neutrals */
  --canvas-deep: #E3E9E2;     /* footer, wells, image placeholders */
  --canvas-soft: #F6F8F5;     /* table heads, subtle hover on white */
  --ink-2: #2C3D42;
  --muted-strong: #4A5B60;    /* muted text on --canvas-deep */
  --line-strong: #B9C6BF;     /* control borders */
  --line-hover: #93A39B;
  --disabled: #A3B0AA;

  /* Violet tints */
  --violet-50: #F1EFFC;
  --violet-100: #E3DFFA;
  --violet-200: #C9C2F4;
  --violet-hover: #3828AD;
  --violet-press: #2D1F92;

  /* Manila tints (tag details only) */
  --manila-deep: #D8AC2C;     /* punched-hole reinforcement ring */
  --manila-50: #FBF3DA;

  /* Status tints + AA text tones */
  --ok-50: #E4F2EA;
  --ok-ink: #17613F;
  --warn-50: #FBF0DC;
  --warn-ink: #85560F;        /* 5.6:1 on --warn-50 (amber itself is too light for text) */
  --danger-50: #FBE8E5;
  --danger-ink: #A93226;
  --info-50: var(--violet-50);

  /* Type */
  --font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Modular scale, ratio ≈1.25 (major third), fluid at the top */
  --text-xs: .8125rem;                                          /* 13 */
  --text-sm: .875rem;                                           /* 14 */
  --text-base: 1rem;                                            /* 16 */
  --text-md: 1.0625rem;                                         /* 17 – prose */
  --text-lg: 1.25rem;                                           /* 20 */
  --text-xl: clamp(1.375rem, 1.25rem + .5vw, 1.5625rem);        /* 22 → 25 */
  --text-2xl: clamp(1.625rem, 1.4rem + 1vw, 1.9375rem);         /* 26 → 31 */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.4375rem);       /* 30 → 39 */
  --text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.0625rem);        /* 36 → 49 */
  --text-hero: clamp(2.5rem, 1.55rem + 4.2vw, 4.625rem);        /* 40 → 74 */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.55;

  /* Spacing (4 px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius by hierarchy: imagery softest, controls tightest */
  --r-xs: 4px;    /* tags, tiny marks */
  --r-sm: 8px;    /* buttons, inputs, chips-in-tables */
  --r-md: 12px;   /* menus, notices, small panels, thumbnails */
  --r-lg: 18px;   /* images, panels, dialogs */
  --r-xl: 26px;   /* hero media, bands */
  --r-pill: 999px;

  /* Elevation – used only for things that float */
  --shadow-1: 0 1px 2px rgba(23, 38, 43, .06), 0 1px 1px rgba(23, 38, 43, .04);
  --shadow-2: 0 2px 4px rgba(23, 38, 43, .05), 0 10px 28px -8px rgba(23, 38, 43, .18);
  --shadow-3: 0 4px 10px rgba(23, 38, 43, .07), 0 28px 56px -14px rgba(23, 38, 43, .32);

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --container-text: 680px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .15s;

  /* Textures (data URIs, allowed by CSP img-src data:) */
  --paper-grain: 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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .05 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

  color-scheme: light;
}


/* ==========================================================================
   02  Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
::selection { background: var(--violet-100); color: var(--ink); }

a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--manila); }

.site-main { flex: 1 0 auto; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }


/* ==========================================================================
   03  Typography
   Bricolage Grotesque: display (headings, prices, wordmark). Its optical
   size axis follows font-size automatically (font-optical-sizing: auto);
   the width axis is used via font-stretch.
   Instrument Sans: body & UI.
   ========================================================================== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--text-3xl); font-weight: 680; line-height: var(--leading-tight); letter-spacing: -.02em; font-stretch: 94%; }
h2, .h2 { font-size: var(--text-2xl); font-weight: 650; line-height: 1.12; letter-spacing: -.015em; font-stretch: 96%; }
h3, .h3 { font-size: var(--text-lg); font-weight: 620; line-height: var(--leading-snug); letter-spacing: -.005em; }
h4, .h4 { font-size: var(--text-md); font-weight: 620; line-height: var(--leading-snug); }

.display {
  font-size: var(--text-hero);
  font-weight: 720;
  line-height: 1.0;
  letter-spacing: -.032em;
  font-stretch: 86%;
}

p { text-wrap: pretty; }
.lead { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--muted); }
.small, small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.money { font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Long-form content: terms, privacy, item description */
.prose { font-size: var(--text-md); line-height: 1.65; max-width: 68ch; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--text-xl); margin-top: 2em; }
.prose h3 { font-size: var(--text-lg); margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { padding-left: 1em; border-left: 3px solid var(--line-strong); color: var(--muted); }


/* ==========================================================================
   04  Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }

/* Vertical rhythm for public pages */
.page { padding-block: var(--s-6) var(--s-8); }
.section { padding-block: clamp(48px, 6vw, 88px); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-5);
}
.section-head p { color: var(--muted); max-width: 60ch; }
.section-head__link { font-weight: 600; white-space: nowrap; }

/* Flow spacing: .stack > * + * gets top margin (set --stack to change) */
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.stack-sm { --stack: var(--s-2); }
.stack-lg { --stack: var(--s-6); }

/* Inline cluster of items that wraps */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }

/* Main + aside (item page, booking page). Aside becomes sticky on desktop. */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7); align-items: start; }
  .split--wide-aside { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* Generic responsive grid */
.grid { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 260px)), 1fr)); }


/* ==========================================================================
   05  Icons – inline SVG from the `ui.icon(name)` macro
   ========================================================================== */
.icon {
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon--sm { --icon-size: 16px; }
.icon--lg { --icon-size: 24px; }


/* ==========================================================================
   06  Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--header-h);
}

/* Logo: hang-tag mark + Bricolage wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.logo__mark { width: 30px; height: 30px; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 760;
  font-stretch: 84%;
  letter-spacing: -.035em;
  line-height: 1;
  padding-bottom: 2px;
}
.logo__tld { color: var(--muted); font-weight: 560; letter-spacing: -.02em; }

/* Nav toggle (mobile) */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
}
.nav-toggle:hover { background: var(--canvas); }
.nav-toggle .icon { --icon-size: 24px; }
.nav-toggle[aria-expanded="true"] .icon-open,
.nav-toggle:not([aria-expanded="true"]) .icon-close { display: none; }

/* Nav – mobile sheet by default */
.site-nav { display: none; }
.site-nav.is-open {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--gutter) var(--s-7);
  overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  animation: sheet-in .18s var(--ease-out);
}
/* Without JS the nav is simply shown under the bar */
.no-js .site-nav {
  display: flex;
  flex-direction: column;
  position: static;
  padding: var(--s-3) 0;
}
.no-js .nav-toggle { display: none; }
.no-js .site-header { position: static; }
.no-js .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); }
.no-js .site-nav { order: 10; width: 100%; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { background: var(--canvas); text-decoration: none; }
.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav-cats-desktop { display: none; }
.nav-cats-mobile { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.nav-cats-mobile__title { font-size: var(--text-sm); color: var(--muted); font-weight: 600; padding: 0 8px 4px; }
.nav-cats-mobile a { display: flex; align-items: center; gap: 12px; padding: 6px 8px; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); font-weight: 500; }
.nav-cats-mobile .cat-icon { width: 34px; height: 34px; border-radius: 9px; }
.nav-cats-mobile .cat-icon .icon { --icon-size: 19px; }
.nav-cats-mobile a:hover { background: var(--canvas); }

/* Header search */
.site-search { position: relative; margin-bottom: var(--s-2); }
.site-search .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.site-search input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 40px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: var(--text-base);
}
.site-search input::placeholder { color: var(--muted); opacity: 1; }
.site-search input:hover { border-color: var(--line-strong); }
.site-search input:focus { outline: none; background: var(--surface); border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-100); }
.site-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Account area */
.site-account { display: flex; align-items: center; }
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
}
.account-btn:hover { background: var(--canvas); }
.account-btn__name { display: none; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn > .icon { display: none; color: var(--muted); }
.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet-100);
  color: var(--violet);
  font-family: var(--font-display);
  font-weight: 720;
  font-size: 1rem;
  line-height: 1;
}
.avatar .count { position: absolute; top: -4px; right: -6px; box-shadow: 0 0 0 2px var(--surface); }

/* Dropdown menus (built on <details class="menu">) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .chev { transition: rotate var(--t-fast); }
.menu[open] > summary .chev { rotate: 180deg; }
.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: pop-in .14s var(--ease-out);
}
.menu__panel--right { left: auto; right: 0; }
.menu__who { padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); line-height: 1.35; }
.menu__who strong { display: block; font-weight: 600; }
.menu__who span { display: block; color: var(--muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; }
.menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.menu__link:hover { background: var(--canvas); }
.menu__link .icon { color: var(--muted); }
.menu__link .count { margin-left: auto; }
.menu__link[aria-current="page"] { font-weight: 650; }
.menu__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu__form { margin: 0; }

/* Category dropdown – icon + name */
.menu__panel--cats { min-width: 280px; }
.menu__cat { gap: 12px; padding: 7px 10px; }
.menu__cat .cat-icon { width: 36px; height: 36px; border-radius: 10px; }
.menu__cat .cat-icon .icon { --icon-size: 20px; }
.menu__cat-name { font-weight: 600; line-height: 1.2; }
.menu__all { display: block; margin: 6px 4px 2px; padding: 10px 8px 6px; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.menu__all:hover { text-decoration: underline; }

@media (min-width: 720px) {
  .account-btn { padding: 4px 10px 4px 4px; }
  .account-btn__name, .account-btn > .icon { display: inline-block; }
}

/* Desktop nav */
@media (min-width: 960px) {
  .site-header__inner { gap: var(--s-4); }
  .logo { margin-right: var(--s-2); }
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.is-open,
  .no-js .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 2px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    animation: none;
    order: 0;
    width: auto;
  }
  .no-js .site-header__inner { flex-wrap: nowrap; height: var(--header-h); }
  .nav-link { padding: 8px 12px; font-size: var(--text-base); }
  .nav-cats-desktop { display: block; }
  .nav-cats-mobile { display: none; }
  .site-search { flex: 1 1 240px; max-width: 380px; margin: 0 auto 0 var(--s-3); order: 0; }
  .site-search input { height: 40px; }
  .page-home .site-search { display: none; } /* the hero has the big search */
  .page-home .nav-cats-desktop { margin-right: auto; }
}


/* ==========================================================================
   07  Site footer
   ========================================================================== */
.site-footer {
  margin-top: auto;
  padding-block: var(--s-7) var(--s-5);
  background: var(--canvas-deep);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.footer-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; max-width: 34ch; }
.footer-brand .logo { margin-bottom: var(--s-3); }
.footer-brand p { color: var(--muted-strong); font-size: var(--text-base); }
.footer-title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 650; color: var(--ink); margin-bottom: var(--s-3); letter-spacing: 0; }
.footer-list li + li { margin-top: 8px; }
.footer-list a { color: var(--ink-2); text-decoration: none; }
.footer-list a:hover { color: var(--violet); text-decoration: underline; }
.footer-contact { display: grid; gap: 8px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.footer-contact a:hover { color: var(--violet); }
.footer-contact .icon { color: var(--muted-strong); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
  color: var(--muted-strong);
  font-size: var(--text-xs);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}


/* ==========================================================================
   08  Buttons
   .btn + one of --primary | --secondary | --ghost | --danger | --danger-ghost
   sizes: --sm | --lg; --block for full width; --icon for square icon buttons.
   Loading: add .is-loading (or aria-busy="true"); app.js does it on submit.
   ========================================================================== */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  --btn-bg-hover: var(--surface);
  --btn-bd-hover: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); text-decoration: none; }
.btn:active { translate: 0 1px; }
.btn .icon { --icon-size: 18px; }

.btn--primary { --btn-bg: var(--violet); --btn-fg: #fff; --btn-bd: var(--violet); --btn-bg-hover: var(--violet-hover); --btn-bd-hover: var(--violet-hover); }
.btn--primary:active { --btn-bg-hover: var(--violet-press); }
.btn--secondary { /* default look, named for clarity */ }
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-bg-hover: rgba(23, 38, 43, .06); --btn-bd-hover: transparent; }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); --btn-bg-hover: var(--danger-ink); --btn-bd-hover: var(--danger-ink); }
.btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--danger-ink); --btn-bd: transparent; --btn-bg-hover: var(--danger-50); --btn-bd-hover: transparent; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); --btn-bg-hover: var(--ink-2); --btn-bd-hover: var(--ink-2); }
.on-dark .btn--secondary, .btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); --btn-bg-hover: rgba(255, 255, 255, .08); --btn-bd-hover: #fff; }

.btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--text-sm); border-radius: 7px; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1.03rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 44px; }
.btn--icon.btn--sm { width: 36px; }

.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn.is-loading, .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn.is-loading > *, .btn[aria-busy="true"] > * { visibility: hidden; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Text-style button (inline actions in tables, "Prekliči" links) */
.link-btn { padding: 0; border: 0; background: none; color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }
.link-btn--danger { color: var(--danger-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }


/* ==========================================================================
   09  Forms
   Structure (the ui.field macro outputs this):
   <div class="field [has-error]">
     <label class="label" for="f-email">E-pošta <span class="opt">(neobvezno)</span></label>
     <input class="input" id="f-email" …>
     <p class="help">…</p>
     <p class="field-error" id="f-email-err">…</p>
   </div>
   ========================================================================== */
.form { display: grid; gap: var(--s-5); }
.form-grid { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .form-grid > .full, .form-grid > .fieldset, .form-grid > .form-actions { grid-column: 1 / -1; }
}

.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.label { font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.label .opt { font-weight: 400; color: var(--muted); }
.help { font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }
.field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--danger-ink);
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.4;
}
.field-error .icon { --icon-size: 16px; margin-top: 1px; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #7F8E89; opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-hover); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-100);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--canvas-soft); color: var(--muted); cursor: not-allowed; }
.input[readonly] { background: var(--canvas-soft); }
.textarea { min-height: 120px; resize: vertical; }
.select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
}
input[type="date"].input { min-width: 0; }
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="number"].input { font-variant-numeric: tabular-nums; }

.field.has-error .input, .field.has-error .select, .field.has-error .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.field.has-error .input:focus, .field.has-error .select:focus, .field.has-error .textarea:focus,
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-50); }

/* Input with a unit suffix/prefix: <div class="input-group"><input class="input"><span class="input-group__addon">€</span></div> */
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); min-width: 0; }
.input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--canvas-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.input-group__addon:first-child { border-left: 1px solid var(--line-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group__addon:first-child + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group > .btn { min-height: 46px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }

/* Checkbox & radio: <label class="check"><input type="checkbox"><span>Text</span></label> */
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.45; }
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line-hover);
  border-radius: 5px;
  background: var(--surface) no-repeat center / 14px;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:hover { border-color: var(--ink); }
.check input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.check input:checked {
  border-color: var(--violet);
  background-color: var(--violet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px); }
.check input:disabled { opacity: .5; cursor: not-allowed; }
.check__text { color: var(--ink); }
.check__text small { display: block; color: var(--muted); font-size: var(--text-sm); }
.field.has-error .check input { border-color: var(--danger); }
.checks { display: grid; gap: 10px; }

/* Selectable option cards (radio cards: payment method, pricing mode) */
.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.option:hover { border-color: var(--line-hover); }
.option:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); background: var(--violet-50); }
.option:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Day-of-week toggle chips (handover days): <label class="toggle-chip"><input type="checkbox" …><span>pon</span></label> */
.toggle-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-chip { position: relative; }
.toggle-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle-chip span {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 600;
  font-size: var(--text-sm);
}
.toggle-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.toggle-chip input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Fieldsets: grouped sections of a long form.
   Legends are floated so they sit inside the box like a normal heading. */
.fieldset, fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset > legend, fieldset.field > legend { float: left; width: 100%; }
.fieldset > legend + *, fieldset.field > legend + * { clear: both; }
.fieldset > legend, .fieldset__title {
  display: block;
  margin-bottom: var(--s-4);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 640;
  line-height: 1.25;
}
.fieldset__intro { margin: calc(var(--s-3) * -1) 0 var(--s-4); color: var(--muted); font-size: var(--text-sm); max-width: 60ch; }
.fieldset + .fieldset { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding-top: var(--s-2);
}
.form-actions--end { justify-content: flex-end; }
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-inline: calc(var(--s-5) * -1);
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
}


/* ==========================================================================
   10  Notices, flash messages, toasts
   ========================================================================== */
.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--n-bd, var(--line));
  border-radius: var(--r-md);
  background: var(--n-bg, var(--surface));
  color: var(--ink);
  line-height: 1.45;
}
.notice > .icon { color: var(--n-fg, var(--muted)); margin-top: 1px; }
.notice__body { flex: 1; min-width: 0; }
.notice__body > * + * { margin-top: 6px; }
.notice__title { font-weight: 650; }
.notice--ok { --n-bg: var(--ok-50); --n-bd: #BFE0CC; --n-fg: var(--ok); }
.notice--info { --n-bg: var(--violet-50); --n-bd: var(--violet-200); --n-fg: var(--violet); }
.notice--warn { --n-bg: var(--warn-50); --n-bd: #EED6A8; --n-fg: var(--warn-ink); }
.notice--error { --n-bg: var(--danger-50); --n-bd: #F1C1BA; --n-fg: var(--danger-ink); }
.notice__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
}
.notice__close:hover { background: rgba(23, 38, 43, .07); color: var(--ink); }

.flash-stack { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.flash { animation: pop-in .2s var(--ease-out); }
.flash.is-leaving { opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .25s; }

.toasts {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 300;
  display: grid;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  translate: -50% 0;
  pointer-events: none;
}
.toast {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: toast-in .22s var(--ease-out);
}
.toast .icon { color: #9DE0BC; }
.toast--error .icon { color: #FFB4A9; }
.toast--info .icon { color: var(--violet-200); }
.toast.is-leaving { opacity: 0; translate: 0 8px; transition: opacity .2s, translate .2s; }


/* ==========================================================================
   11  Hang tag – the signature element (prices only)
   Markup (ui.priceTag):
   <span class="tag [tag--lg]">
     <svg class="tag__string">…</svg>
     <span class="tag__body">
       <span class="tag__text"><span class="tag__from">od</span>
       <span class="tag__amount">25 €</span><span class="tag__unit">/dan</span></span>
     </span>
   </span>
   The body is cut as a tag (chamfered left end), the punched hole is a real
   transparent hole (mask), with a darker reinforcement ring. The string is an
   inline SVG that starts in the hole and curls away.
   ========================================================================== */
.tag {
  --tag-h: 36px;
  --hole-x: 12px;
  --chamfer: 10px;
  --tag-rot: -3deg;
  position: relative;
  display: inline-flex;
  flex: none;
  transform: rotate(var(--tag-rot));
  transform-origin: var(--hole-x) 50%;
  filter: drop-shadow(0 1px .5px rgba(23, 38, 43, .28)) drop-shadow(0 5px 8px rgba(23, 38, 43, .16));
  color: var(--ink);
  line-height: 1;
}
.tag__body {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 12px 0 calc(var(--hole-x) * 2 + 1px);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background:
    radial-gradient(circle at var(--hole-x) 50%, transparent 0 4.5px, var(--manila-deep) 5px 6.5px, transparent 7px),
    var(--paper-grain),
    var(--manila);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  -webkit-mask: radial-gradient(circle at var(--hole-x) 50%, transparent 3.6px, #000 4.2px);
  mask: radial-gradient(circle at var(--hole-x) 50%, transparent 3.6px, #000 4.2px);
}
.tag__text { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.tag__from { font-size: .75rem; font-weight: 600; margin-right: 1px; }
.tag__amount {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 740;
  font-stretch: 88%;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tag__unit { font-size: .8125rem; font-weight: 600; }
.tag__string { /* drawn in front: it comes out of the punched hole */
  position: absolute;
  z-index: 2;
  left: calc(var(--hole-x) - 26px);
  top: calc(var(--tag-h) / 2 - 31px);
  width: 30px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}
.tag__string .s-halo { stroke: rgba(255, 255, 255, .8); stroke-width: 3.6; }
.tag__string .s-line { stroke: var(--ink); stroke-width: 1.5; }

.tag--lg { --tag-h: 54px; --hole-x: 17px; --chamfer: 15px; --tag-rot: -2deg; }
.tag--lg .tag__body {
  padding-right: 18px;
  background:
    radial-gradient(circle at var(--hole-x) 50%, transparent 0 6px, var(--manila-deep) 6.5px 9px, transparent 9.5px),
    var(--paper-grain),
    var(--manila);
  -webkit-mask: radial-gradient(circle at var(--hole-x) 50%, transparent 5px, #000 5.6px);
  mask: radial-gradient(circle at var(--hole-x) 50%, transparent 5px, #000 5.6px);
}
.tag--lg .tag__amount { font-size: 1.875rem; }
.tag--lg .tag__unit { font-size: .9375rem; }
.tag--lg .tag__from { font-size: .875rem; }
.tag--lg .tag__string { left: calc(var(--hole-x) - 32px); top: calc(var(--tag-h) / 2 - 38px); width: 37px; height: 42px; }

.tag--flat { --tag-rot: 0deg; } /* inside tables / tight rows */


/* ==========================================================================
   12  Item card, card grids, image placeholder
   Markup (ui.itemCard): article.card > .card__body (title link + meta),
   .card__tag (price tag), .card__media (img or .ph). Grid places the tag
   over the bottom edge of the photo; DOM order keeps title first for
   screen readers. The whole card is clickable via the title link.
   ========================================================================== */
.cards {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 520px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.card__media {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--canvas-deep);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media::after { /* hairline so white product shots don't bleed into the page */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(23, 38, 43, .06);
  pointer-events: none;
}
.card__tag {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: start;
  z-index: 2;
  margin: 0 0 -17px 14px;
  pointer-events: none;
}
.card__body { grid-row: 2; padding: 26px 2px 0; display: grid; gap: 4px; align-content: start; }
.card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__link { color: var(--ink); text-decoration: none; }
.card__link::after { /* stretch the link over the whole card */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--r-lg);
}
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--violet); outline-offset: 4px; }
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: var(--text-sm); }
.card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.card__meta .icon { --icon-size: 15px; }
.card__meta .is-instant { color: var(--ok-ink); font-weight: 550; }

/* Featured layout: the first card is large on desktop – breaks the uniform grid.
   Quantity-aware so rows always end full (3 columns):
   3, 6, 9 items → big card 2×2 · 2, 5, 8 → 2 columns wide · 1, 4, 7 → full width */
@media (min-width: 900px) {
  .cards--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--feature > .card:first-child { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto; }
  .cards--feature > .card:first-child .card__media { aspect-ratio: auto; min-height: 340px; }
  .cards--feature:has(> .card:last-child:nth-child(3n + 2)) > .card:first-child { grid-row: auto; }
  .cards--feature:has(> .card:last-child:nth-child(3n + 2)) > .card:first-child .card__media { min-height: 0; }
  .cards--feature:has(> .card:last-child:nth-child(3n + 1)) > .card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .cards--feature:has(> .card:last-child:nth-child(3n + 1)) > .card:first-child .card__media { aspect-ratio: 21 / 8; min-height: 0; }
  .cards--feature > .card:first-child .card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 640; letter-spacing: -.01em; }
  .cards--feature > .card:first-child .tag { --tag-h: 44px; --hole-x: 15px; --chamfer: 13px; }
  .cards--feature > .card:first-child .tag__amount { font-size: 1.5rem; }
  .cards--feature > .card:first-child .tag__unit { font-size: .875rem; }
  .cards--feature > .card:first-child .card__tag { margin-bottom: -22px; margin-left: 22px; }
  .cards--feature > .card:first-child .card__body { padding-top: 32px; }
}

/* Horizontal compact card (related items, owner lists) */
.card--row { grid-template-rows: auto; grid-template-columns: 112px minmax(0, 1fr); gap: 0 14px; align-items: center; }
.card--row .card__media { grid-row: 1; grid-column: 1; border-radius: var(--r-md); }
.card--row .card__body { grid-row: 1; grid-column: 2; padding: 0; }
.card--row .card__tag { display: none; }
.card--row .card__price { font-family: var(--font-display); font-weight: 680; }

/* Image placeholder (no cover). Tinted by category, with the category icon. */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--tone, var(--canvas-deep));
  color: var(--tone-ink, var(--muted));
}
.ph .icon { --icon-size: clamp(36px, 22%, 72px); width: 26%; height: auto; aspect-ratio: 1; stroke-width: 1.25; opacity: .9; }

/* Category tones – used by placeholders and category icons */
.tone-default, .ph, .cat-icon { --tone: #DFE6E0; --tone-ink: #3E5A50; }
.tone-prikolice { --tone: #DCE6DF; --tone-ink: #2F5244; }
.tone-foto-video { --tone: #E6E3F8; --tone-ink: #3F33A0; }
.tone-orodje { --tone: #F3E9CF; --tone-ink: #6E5414; }
.tone-sport-prosti-cas { --tone: #DAE8EE; --tone-ink: #22546A; }
.tone-dogodki { --tone: #F1E2DE; --tone-ink: #7A3A2E; }
.tone-ostalo { --tone: #E4E8E3; --tone-ink: #4A5B60; }

.cat-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--tone);
  color: var(--tone-ink);
}
.cat-icon .icon { --icon-size: 26px; stroke-width: 1.6; }


/* ==========================================================================
   13  Pills, badges, counts
   .pill + tone: --neutral | --ok | --warn | --danger | --violet | --muted
   Status → tone mapping lives in the statusPill / itemStatusPill /
   paymentPill macros (see docs/DESIGN.md).
   ========================================================================== */
.pill {
  --pill-bg: #E6ECE7;
  --pill-fg: var(--ink-2);
  --pill-dot: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 9px;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pill-dot); flex: none; }
.pill--ok { --pill-bg: var(--ok-50); --pill-fg: var(--ok-ink); --pill-dot: var(--ok); }
.pill--warn { --pill-bg: var(--warn-50); --pill-fg: var(--warn-ink); --pill-dot: var(--warn); }
.pill--danger { --pill-bg: var(--danger-50); --pill-fg: var(--danger-ink); --pill-dot: var(--danger); }
.pill--violet { --pill-bg: var(--violet-50); --pill-fg: var(--violet); --pill-dot: var(--violet); }
.pill--muted { --pill-bg: transparent; --pill-fg: var(--muted); --pill-dot: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pill--muted::before { box-shadow: inset 0 0 0 1.5px var(--disabled); }
.pill--neutral { /* default */ }
.pill--lg { height: 30px; padding: 0 12px 0 11px; font-size: var(--text-sm); }

/* Plain label badge without dot (e.g. "Takojšnja potrditev", "Izpostavljeno") */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--canvas-deep);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge .icon { --icon-size: 14px; }
.badge--ok { background: var(--ok-50); color: var(--ok-ink); }
.badge--violet { background: var(--violet-50); color: var(--violet); }

/* Numeric count bubble (pending bookings in menus) */
.count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: #fff;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count--warn { background: var(--warn); }


/* ==========================================================================
   14  Tables – .table-wrap > table.table[.table--stack]
   On phones .table--stack turns each row into a block; every <td> needs
   data-label="Column name" (empty label hides the prefix).
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.table { width: 100%; font-size: .9375rem; }
.table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FAFBF9; }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table .t-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.table a.t-title:hover { text-decoration: underline; }
.table .t-sub { display: block; color: var(--muted); font-size: var(--text-sm); }
.table tfoot td { font-weight: 650; background: var(--canvas-soft); border-top: 1px solid var(--line); border-bottom: 0; }
.table--compact td { padding: 10px 14px; }

@media (max-width: 719px) {
  .table-wrap:has(.table--stack) { overflow: visible; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tfoot { display: block; }
  .table--stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody tr:hover td { background: none; }
  .table--stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .table--stack td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
  }
  .table--stack td[data-label=""]::before, .table--stack td:not([data-label])::before { display: none; }
  .table--stack td:first-child { display: block; text-align: left; padding-bottom: 8px; }
  .table--stack td:first-child::before { display: none; }
  .table--stack .actions { justify-content: flex-end; padding-top: 10px; }
}


/* ==========================================================================
   15  Chips & tabs (filters)
   Chips: links/buttons; active = aria-current="page" | aria-pressed="true" | .is-active
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
  scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip .icon { --icon-size: 16px; }
.chip__count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.chip[aria-current], .chip[aria-pressed="true"], .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-current] .chip__count, .chip[aria-pressed="true"] .chip__count, .chip.is-active .chip__count { color: rgba(255, 255, 255, .72); }

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 12px 10px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-current], .tab[aria-selected="true"], .tab.is-active { color: var(--ink); border-bottom-color: var(--violet); }


/* ==========================================================================
   16  Empty state
   ========================================================================== */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
.empty__art { width: 96px; height: 80px; margin-bottom: var(--s-2); }
.empty__title { font-size: var(--text-xl); }
.empty__text { color: var(--muted); max-width: 46ch; }
.empty .btn { margin-top: var(--s-3); }
.empty--plain { border: 0; padding-block: var(--s-6); }


/* ==========================================================================
   17  Breadcrumbs & pagination
   ========================================================================== */
.crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--text-sm); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: "/"; color: var(--line-hover); margin-right: 2px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: var(--s-7); }
.pager__link {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pager__link:hover { border-color: var(--ink); }
.pager__link[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager__link[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pager__link--wide { display: inline-flex; gap: 6px; }
.pager__gap { color: var(--muted); padding: 0 4px; }


/* ==========================================================================
   18  Dialog – native <dialog class="dialog">
   Open with [data-dialog-open="id"], close with [data-dialog-close].
   ========================================================================== */
.dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
}
.dialog::backdrop { background: rgba(23, 38, 43, .5); }
.dialog[open] { animation: dialog-in .2s var(--ease-out); }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) 0; }
.dialog__title { font-size: var(--text-xl); }
.dialog__close { margin: -8px -10px 0 0; }
.dialog__body { padding: var(--s-3) var(--s-5) var(--s-2); color: var(--ink-2); }
.dialog__body > * + * { margin-top: var(--s-4); }
.dialog__foot { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
@media (max-width: 519px) {
  .dialog__foot .btn { flex: 1 1 auto; }
}
.dialog--wide { width: min(720px, calc(100vw - 32px)); }


/* ==========================================================================
   19  Gallery – [data-gallery]
   ========================================================================== */
.gallery { display: grid; gap: var(--s-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--canvas-deep);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main .ph .icon { width: 18%; }
.gallery__thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding: 3px; margin: -3px; scrollbar-width: thin; }
.gallery__thumb {
  flex: none;
  width: 76px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--canvas-deep);
  opacity: .72;
  transition: opacity var(--t-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--violet); }
@media (min-width: 720px) { .gallery__thumb { width: 92px; height: 69px; } }


/* ==========================================================================
   20  Panel, price summary, key-value list, booking row, person, timeline, upload
   ========================================================================== */
.panel {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.panel + .panel { margin-top: var(--s-4); }
.panel--flush { padding: 0; overflow: hidden; }
.panel--soft { background: var(--canvas-soft); }
.panel__title { font-size: var(--text-lg); margin-bottom: var(--s-4); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel__head .panel__title { margin: 0; }
@media (min-width: 960px) {
  .panel--sticky { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (min-width: 720px) {
  .panel { padding: var(--s-6); }
  .panel--flush { padding: 0; }
}

/* Booking side panel: price headline + calendar + summary */
.book-panel__price { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); padding-left: 18px; }
.book-panel__terms { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--muted); }

/* Price summary: line items + total */
.sum { display: grid; gap: 10px; font-size: .9375rem; }
.sum__row { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.sum__row dt { color: var(--ink-2); }
.sum__row dd { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 550; }
.sum__row--discount dd, .sum__row--discount dt { color: var(--ok-ink); }
.sum__total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.sum__total dt { font-weight: 650; color: var(--ink); }
.sum__total dd { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 720; letter-spacing: -.01em; }
.sum__note dt, .sum__note dd { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }

/* Key-value list (item specs, booking details) */
.kv { display: grid; font-size: .9375rem; }
.kv > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--s-4); padding: 11px 0; border-bottom: 1px solid var(--line); }
.kv > div:first-child { border-top: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.kv--plain > div, .kv--plain > div:first-child { border: 0; padding: 5px 0; }

/* Booking row (ui.bookingRow) – compact list item */
.brow {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
}
.brow + .brow { border-top: 1px solid var(--line); }
.brow__thumb { grid-row: span 2; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-md); background: var(--canvas-deep); }
.brow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.brow__thumb .ph .icon { width: 50%; }
.brow__title { font-weight: 620; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow__link { color: var(--ink); text-decoration: none; }
.brow__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.brow__link:focus-visible { outline: none; }
.brow__link:focus-visible::after { outline: 2px solid var(--violet); outline-offset: -2px; border-radius: inherit; }
.brow:hover .brow__title { text-decoration: underline; text-underline-offset: .18em; }
.brow__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: var(--text-sm); min-width: 0; }
.brow__meta span { display: inline-flex; align-items: center; gap: 5px; }
.brow__meta .icon { --icon-size: 15px; }
.brow__side { grid-column: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brow__total { font-family: var(--font-display); font-weight: 680; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .brow { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 16px 20px; }
  .brow__side { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 6px; }
}
.list-panel { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.brow--due .brow__due { color: var(--warn-ink); font-weight: 600; }


/* Person chip (owner on the item page, renter on booking pages)
   <div class="person"><span class="avatar">A</span><div><p class="person__name">Aleš</p><p class="person__meta">Na Posodi.si od 2024</p></div></div> */
.person { display: flex; align-items: center; gap: 12px; }
.person .avatar { width: 44px; height: 44px; font-size: 1.125rem; }
.person__name { font-weight: 620; line-height: 1.3; }
.person__meta { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }

/* Timeline (booking events)
   <ol class="timeline"><li class="timeline__item [is-ok|is-warn|is-danger]">
     <p class="timeline__text">Lastnik je potrdil rezervacijo.</p><p class="timeline__time">10. 10. 2026, 14:05 – Aleš</p></li></ol> */
.timeline { position: relative; display: grid; gap: var(--s-4); padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line-hover);
}
.timeline__item.is-ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-50); }
.timeline__item.is-warn::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-50); }
.timeline__item.is-danger::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-50); }
.timeline__item.is-violet::before { background: var(--violet); box-shadow: 0 0 0 3px var(--violet-100); }
.timeline__text { font-weight: 550; line-height: 1.4; }
.timeline__time { color: var(--muted); font-size: var(--text-sm); }

/* Image upload: dropzone + sortable tiles (owner/item-images)
   <label class="dropzone"><input type="file" name="images" multiple accept="image/*"> …</label>
   <ul class="img-grid"><li class="img-tile [is-cover]"><img …><div class="img-tile__bar">…buttons…</div></li></ul> */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--s-6) var(--s-5);
  border: 1.5px dashed var(--line-hover);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--violet); background: var(--violet-50); }
.dropzone:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .icon { --icon-size: 28px; color: var(--violet); }
.dropzone__title { font-weight: 650; }
.dropzone__hint { color: var(--muted); font-size: var(--text-sm); }
.img-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.img-tile { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--canvas-deep); aspect-ratio: 4 / 3; }
.img-tile img { width: 100%; height: 100%; object-fit: cover; }
.img-tile.is-cover { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--violet); }
.img-tile__badge { position: absolute; top: 8px; left: 8px; }
.img-tile__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px;
  background: linear-gradient(to top, rgba(23, 38, 43, .55), transparent);
}
.img-tile__bar .btn { --btn-bg: rgba(255, 255, 255, .92); --btn-bd: transparent; --btn-bg-hover: #fff; --btn-bd-hover: transparent; }


/* ==========================================================================
   21  Calendar – public range picker
   Built by public/js/calendar.js inside [data-calendar]. Markup contract:

   <div class="cal [cal--2]">                        2 months side by side ≥720px
     <div class="cal__nav">
       <button class="cal__arrow" data-cal-prev aria-label="Prejšnji mesec">…</button>
       <button class="cal__arrow" data-cal-next aria-label="Naslednji mesec">…</button>
     </div>
     <div class="cal__months">
       <div class="cal__month">
         <h3 class="cal__title">Oktober 2026</h3>
         <div class="cal__grid" role="grid">
           <span class="cal__wd">pon</span> … ×7
           <span class="cal__pad"></span>              empty cells before day 1
           <button type="button" class="cal__day [state classes]" data-date="2026-10-14"
                   aria-label="sreda, 14. oktobra" aria-pressed="false"><span>14</span></button>
         </div>
       </div>
     </div>
     <div class="cal__legend">…</div>
     <p class="cal__hint" aria-live="polite">Izberi dan prevzema.</p>
   </div>

   Day state classes:
     is-past        before today / before `first`        (disabled)
     is-disabled    outside the bookable window           (disabled)
     is-booked      in `blocked` – drawn as a rubber date stamp (disabled)
     is-nohandover  pick-up/return not possible that weekday (can be inside a range)
     is-today       today
     is-start / is-end   selected start / end
     is-in-range    days between start and end
     is-preview     hover preview of a range before the 2nd click
   Disabled days should also get the `disabled` attribute (or aria-disabled).
   ========================================================================== */
.cal { --cell: 44px; position: relative; user-select: none; }
.cal__nav {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cal__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  pointer-events: auto;
}
.cal__arrow:hover { border-color: var(--ink); }
.cal__arrow:disabled { opacity: .35; cursor: default; }
.cal__months { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .cal--2 .cal__months { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.cal__title {
  height: 28px;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 640;
  text-align: center;
  line-height: 28px;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.cal__wd { padding: 4px 0 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 550; text-align: center; }
.cal__pad { height: var(--cell); }

.cal__day {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: var(--cell);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
}
.cal__day > span { position: relative; z-index: 2; }
/* the selectable disc */
.cal__day::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: var(--cell);
  max-width: 100%;
  margin: auto;
  border-radius: 50%;
  transition: background-color .12s;
}
.cal__day:hover::after { background: var(--violet-50); box-shadow: inset 0 0 0 1.5px var(--violet-200); }
.cal__day:focus-visible { outline: none; }
.cal__day:focus-visible::after { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--violet); }

.cal__day.is-today > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}
.cal__day.is-today { font-weight: 750; }

.cal__day.is-past, .cal__day.is-disabled, .cal__day:disabled {
  color: var(--disabled);
  cursor: default;
}
.cal__day.is-past:hover::after, .cal__day.is-disabled:hover::after, .cal__day:disabled:hover::after { background: none; box-shadow: none; }

/* Booked: a rubber date stamp in violet ink, each one slightly differently inked */
.cal__day.is-booked { color: var(--violet); cursor: not-allowed; }
.cal__day.is-booked > span { opacity: .78; }
.cal__day.is-booked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 32px;
  height: 30px;
  margin: auto;
  border: 2px solid currentColor;
  border-radius: 7px;
  opacity: .62;
  transform: rotate(var(--stamp-rot, -7deg));
  -webkit-mask: var(--ink-grain) 0 0 / 60px 60px;
  mask: var(--ink-grain) 0 0 / 60px 60px;
}
.cal__day.is-booked:nth-child(3n)::before { --stamp-rot: -4deg; opacity: .7; -webkit-mask-position: 23px 9px; mask-position: 23px 9px; }
.cal__day.is-booked:nth-child(3n + 1)::before { --stamp-rot: -10deg; opacity: .55; -webkit-mask-position: 41px 30px; mask-position: 41px 30px; }
.cal__day.is-booked:nth-child(5n)::before { --stamp-rot: -2deg; }
.cal__day.is-booked:hover::after { background: none; box-shadow: none; }

/* No pick-up/return on this weekday: dotted underline */
.cal__day.is-nohandover > span { color: var(--muted); }
.cal__day.is-nohandover > span::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -7px;
  border-bottom: 2px dotted var(--line-hover);
}

/* Range band – continuous across cells, rounded at week edges */
.cal__day.is-in-range, .cal__day.is-preview { background: var(--violet-50); }
.cal__day.is-preview { background: color-mix(in srgb, var(--violet-50) 70%, transparent); }
.cal__day.is-start:not(.is-end) { background: linear-gradient(to right, transparent 50%, var(--violet-50) 50%); }
.cal__day.is-end:not(.is-start) { background: linear-gradient(to left, transparent 50%, var(--violet-50) 50%); }
.cal__grid > .cal__day.is-in-range:nth-child(7n + 1), .cal__grid > .cal__day.is-preview:nth-child(7n + 1) { border-radius: 12px 0 0 12px; }
.cal__grid > .cal__day.is-in-range:nth-child(7n), .cal__grid > .cal__day.is-preview:nth-child(7n) { border-radius: 0 12px 12px 0; }
.cal__day.is-in-range > span { color: var(--violet-press); }
.cal__day.is-in-range.is-nohandover > span { color: var(--violet); }
.cal__day.is-start, .cal__day.is-end { color: #fff; }
.cal__day.is-start::after, .cal__day.is-end::after { background: var(--violet); box-shadow: none; }
.cal__day.is-start:hover::after, .cal__day.is-end:hover::after { background: var(--violet-hover); }
.cal__day.is-start > span, .cal__day.is-end > span { color: #fff; }
.cal__day.is-start > span::before, .cal__day.is-end > span::before { display: none; }

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal__key { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.cal__key--free { box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--surface); }
.cal__key--sel { background: var(--violet); }
.cal__key--booked { border-radius: 4px; border: 2px solid var(--violet); opacity: .65; transform: rotate(-8deg); -webkit-mask: var(--ink-grain) 0 0 / 40px 40px; mask: var(--ink-grain) 0 0 / 40px 40px; }
.cal__key--nohandover { width: 16px; height: 2px; border-radius: 0; border-bottom: 2px dotted var(--line-hover); }
.cal__hint { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-2); min-height: 1.5em; }
.cal__hint.is-error { color: var(--danger-ink); font-weight: 550; }
.cal.is-loading .cal__months { opacity: .45; pointer-events: none; }
@media (max-width: 380px) { .cal { --cell: 40px; } }


/* ==========================================================================
   22  Calendar – owner management (.ocal)
   Markup contract (owner/item-calendar.njk + its JS):

   <div class="ocal">
     <div class="ocal__head">
       <h2 class="ocal__title">Oktober 2026</h2>
       <div class="ocal__nav"> prev/next .btn--icon buttons </div>
     </div>
     <div class="ocal__grid">
       <span class="ocal__wd">pon</span> … ×7
       <div class="ocal__day [is-out|is-past|is-today|is-blocked|is-selected]" data-date="2026-10-14">
         <span class="ocal__num">14</span>
         <a class="ocal__bar ocal__bar--confirmed is-start [is-end]" href="/moje/rezervacije/12">
           <span class="ocal__label">Ana Kos</span></a>
         <span class="ocal__bar ocal__bar--buffer">…</span>        buffer days after a booking
         <span class="ocal__block [is-start]">Servis</span>         manual block label (only on its first day)
       </div>
     </div>
   </div>

   Bars are per-day segments that touch across cells; .is-start / .is-end
   round the ends. Label text is shown on the start segment and at the
   start of each week row. Status modifiers: --requested --confirmed
   --pending_payment --completed --buffer.
   ========================================================================== */
.ocal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ocal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); }
.ocal__title { font-size: var(--text-lg); }
.ocal__nav { display: flex; gap: 6px; }
.ocal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ocal__wd { padding: 8px 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; text-align: center; border-bottom: 1px solid var(--line); background: var(--canvas-soft); }
.ocal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 64px;
  padding: 4px 0 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ocal__grid > .ocal__day:nth-child(7n) { border-right: 0; }
.ocal__day:hover { background: var(--canvas-soft); }
.ocal__num { padding: 0 8px; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.ocal__day.is-out { background: var(--canvas-soft); }
.ocal__day.is-out .ocal__num { color: var(--disabled); }
.ocal__day.is-past .ocal__num { color: var(--muted); font-weight: 500; }
.ocal__day.is-today .ocal__num {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  min-width: 26px;
  height: 26px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
}
.ocal__day.is-blocked {
  background: repeating-linear-gradient(-45deg, #E2E8E3 0 5px, var(--surface) 5px 10px);
}
.ocal__day.is-selected { background: var(--violet-50); box-shadow: inset 0 0 0 2px var(--violet); }

.ocal__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0 -1px;
  padding: 0 8px;
  overflow: hidden;
  background: var(--bar-bg, var(--canvas-deep));
  color: var(--bar-fg, var(--ink));
  font-size: .75rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.ocal__bar.is-start { margin-left: 4px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.ocal__bar.is-end { margin-right: 4px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.ocal__label { overflow: hidden; text-overflow: ellipsis; }
.ocal__bar:not(.is-start) .ocal__label { visibility: hidden; }
.ocal__grid > .ocal__day:nth-child(7n + 1) .ocal__bar .ocal__label { visibility: visible; }
a.ocal__bar:hover { filter: brightness(.95); }
a.ocal__bar:focus-visible { outline-offset: 1px; z-index: 2; }
.ocal__bar--confirmed { --bar-bg: var(--ok); --bar-fg: #fff; }
.ocal__bar--requested { --bar-bg: var(--warn-50); --bar-fg: var(--warn-ink); box-shadow: inset 0 1px 0 #E9C98E, inset 0 -1px 0 #E9C98E; }
.ocal__bar--requested.is-start { box-shadow: inset 0 1px 0 #E9C98E, inset 0 -1px 0 #E9C98E, inset 1px 0 0 #E9C98E; }
.ocal__bar--requested.is-end { box-shadow: inset 0 1px 0 #E9C98E, inset 0 -1px 0 #E9C98E, inset -1px 0 0 #E9C98E; }
.ocal__bar--pending_payment { --bar-bg: var(--violet-50); --bar-fg: var(--violet); background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(68, 51, 200, .08) 6px 8px); }
.ocal__bar--completed { --bar-bg: #DCE3DE; --bar-fg: var(--ink-2); }
.ocal__bar--buffer { --bar-bg: transparent; --bar-fg: var(--muted); height: 22px; background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); background-size: 100% 2px; background-repeat: no-repeat; background-position: center; }
.ocal__block {
  align-self: flex-start;
  max-width: calc(100% - 8px);
  margin: 0 4px;
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocal__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.ocal__legend span { display: inline-flex; align-items: center; gap: 7px; }
.ocal__swatch { display: inline-block; width: 18px; height: 10px; border-radius: 3px; background: var(--bar-bg); }
.ocal__swatch--blocked { background: repeating-linear-gradient(-45deg, #C9D3CC 0 3px, var(--surface) 3px 6px); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 719px) {
  .ocal__day { min-height: 54px; }
  .ocal__bar { height: 8px; padding: 0; font-size: 0; }
  .ocal__bar--requested, .ocal__bar--requested.is-start, .ocal__bar--requested.is-end { box-shadow: none; --bar-bg: var(--warn); }
  .ocal__bar--buffer { height: 8px; }
  .ocal__block { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; }
  .ocal__num { padding: 0 6px; font-size: var(--text-xs); }
}
@media (min-width: 960px) { .ocal__day { min-height: 96px; } }


/* ==========================================================================
   23  Dashboard shell (owner "Moja ponudba", admin), page header, stats
   <div class="dash container">
     <nav class="dash__nav" aria-label="Moja ponudba"> a.dash__link[aria-current="page"] … </nav>
     <div class="dash__main"> ui.pageHeader(…) … </div>
   </div>
   ========================================================================== */
.dash { display: grid; gap: var(--s-5); padding-block: var(--s-5) var(--s-8); }
.dash__main { min-width: 0; }
.dash__nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 2px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.dash__nav::-webkit-scrollbar { display: none; }
.dash__group { display: none; }
.dash__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dash__link .icon { --icon-size: 18px; display: none; }
.dash__link:hover { color: var(--ink); text-decoration: none; }
.dash__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--violet); }
.dash__link .count { margin-left: 2px; }

@media (min-width: 960px) {
  .dash { grid-template-columns: 228px minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-6); align-items: start; }
  .dash__nav {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
  }
  .dash__group { display: block; padding: 18px 12px 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
  .dash__group:first-child { padding-top: 0; }
  .dash__link {
    padding: 9px 12px;
    margin: 0;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-weight: 550;
  }
  .dash__link .icon { display: block; color: var(--muted); }
  .dash__link:hover { background: rgba(23, 38, 43, .05); }
  .dash__link[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
  .dash__link[aria-current="page"] .icon { color: var(--violet); }
  .dash__link .count { margin-left: auto; }
}

/* Page header for dashboards: title + subtitle left, actions right */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
}
.page-head__text { min-width: 0; max-width: 64ch; }
.page-head__title { font-size: var(--text-3xl); }
.page-head__sub { margin-top: 6px; color: var(--muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.page-head .crumbs { margin-bottom: var(--s-3); }

/* Stats – understated: one strip, hairline dividers, no icons */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.stat { padding: var(--s-4) var(--s-5); box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); display: flex; flex-direction: column; }
.stat__label { order: -1; color: var(--muted); font-size: var(--text-sm); }
.stat__value { margin-top: 2px; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 620; letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat__note { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 519px) {
  .stat { padding: var(--s-3) var(--s-4); }
  .stat__value { font-size: var(--text-xl); }
}

/* Dashboard section block */
.block + .block { margin-top: var(--s-7); }
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.block__head > a { white-space: nowrap; font-weight: 600; }
.block__title { font-size: var(--text-lg); }


/* ==========================================================================
   24  Steps – the booking flow is a real sequence
   <ol class="steps"><li class="step is-done">…<li class="step is-current" aria-current="step">…
   ========================================================================== */
.steps { display: flex; gap: 0; counter-reset: step; margin-bottom: var(--s-6); }
.step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-right: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.25;
}
.step::after { /* connector */
  content: "";
  position: absolute;
  top: 14px;
  left: 36px;
  right: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}
.step:last-child { flex: 0 1 auto; }
.step:last-child::after { display: none; }
.step__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
}
.step__num .icon { --icon-size: 16px; stroke-width: 2.6; }
.step.is-done { color: var(--ink-2); }
.step.is-done .step__num { background: var(--violet-100); box-shadow: none; color: var(--violet); }
.step.is-done::after { background: var(--violet-200); }
.step.is-current { color: var(--ink); font-weight: 650; }
.step.is-current .step__num { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-100); color: #fff; }
.step a { color: inherit; }
@media (min-width: 720px) {
  .step { flex-direction: row; align-items: center; gap: 10px; font-size: .9375rem; }
  .step::after { position: static; flex: 1; min-width: 16px; margin: 0 6px; }
}


/* ==========================================================================
   25  Home page
   ========================================================================== */
/* Hero */
.hero { position: relative; padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 48px); overflow: hidden; }
/* Phones: text, search, rail. Desktop: text | rail, search spans below. */
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.hero__text, .hero__search, .hero__visual { min-width: 0; }
.hero__visual { margin-top: var(--s-3); }
.hero__title { max-width: 13ch; }
.hero__lead { margin-top: var(--s-5); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
@media (min-width: 1040px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text visual" "search search";
    gap: var(--s-7) var(--s-6);
  }
  .hero__text { grid-area: text; }
  .hero__visual { grid-area: visual; margin-top: 0; }
  .hero__search { grid-area: search; }
}

/* Hero search: one white bar with segments on desktop, stacked on phones */
.hero-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  border-radius: var(--r-lg);
  background: var(--line);
  box-shadow: var(--shadow-2);
  max-width: 940px;
}
.hero-search__field {
  position: relative;
  display: grid;
  align-content: center;
  padding: 10px 16px;
  background: var(--surface);
  cursor: text;
}
.hero-search__field--q { grid-column: 1 / -1; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.hero-search__field label { font-size: var(--text-xs); font-weight: 650; color: var(--ink-2); cursor: inherit; }
.hero-search__field input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  appearance: none;
}
.hero-search__field input::placeholder { color: #7F8E89; opacity: 1; }
.hero-search__field input:focus { outline: none; }
.hero-search__field:focus-within { z-index: 1; box-shadow: inset 0 0 0 2px var(--violet); }
.hero-search__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.hero-search__field input[type="date"]:not(:focus):invalid,
.hero-search__field input[type="date"].is-empty { color: #7F8E89; }
.hero-search__submit { grid-column: 1 / -1; padding: 8px; background: var(--surface); border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
.hero-search__submit .btn { width: 100%; }
@media (min-width: 720px) {
  .hero-search { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .hero-search__field--q { grid-column: auto; border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
  .hero-search__field { padding: 12px 18px; }
  .hero-search__submit { grid-column: auto; display: grid; place-items: center; border-radius: 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0; }
  .hero-search__submit .btn { width: auto; height: 52px; }
}
/* Same search bar on the search page: <form class="hero-search hero-search--inline"> */
.hero-search--inline { margin-top: 0; max-width: none; box-shadow: var(--shadow-1); }
.hero__quick { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); }
.hero__quick a { color: var(--ink-2); font-weight: 550; }

/* The rail: hang tags hanging from a rod – the hero visual */
.rail { position: relative; padding-top: 6px; margin-inline: auto; width: 100%; max-width: 620px; }
.rail__rod {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 7px;
  background: var(--ink);
}
.rail__rod::before, .rail__rod::after { /* wall brackets */
  content: "";
  position: absolute;
  top: -10px;
  width: 7px;
  height: 18px;
  border-radius: 3px;
  background: var(--ink-2);
}
.rail__rod::before { left: 6%; }
.rail__rod::after { right: 6%; }
.rail__tags {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 1.4vw, 16px);
  padding: 0 3%;
}
.htag {
  --len: 40px;
  --rot: 0deg;
  --w: 150px;
  position: relative;
  flex: 0 1 var(--w);
  min-width: 0;
  padding-top: var(--len);
  transform: rotate(var(--rot));
  transform-origin: 50% 0;
  filter: drop-shadow(0 1px 1px rgba(23, 38, 43, .22)) drop-shadow(0 12px 18px rgba(23, 38, 43, .16));
}
.htag::before { /* string from rod to hole */
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 2px;
  height: calc(var(--len) + 22px);
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink-2);
}
.htag::after { /* knot on the rod */
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--canvas);
}
.htag__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 44px 14px 14px;
  border-radius: 0 0 6px 6px;
  background:
    radial-gradient(circle at 50% 22px, transparent 0 6.5px, var(--manila-deep) 7px 10px, transparent 10.5px),
    var(--paper-grain),
    var(--manila);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px);
  -webkit-mask: radial-gradient(circle at 50% 22px, transparent 5.5px, #000 6.2px);
  mask: radial-gradient(circle at 50% 22px, transparent 5.5px, #000 6.2px);
  color: var(--ink);
  text-decoration: none;
}
a.htag__card:hover .htag__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
a.htag__card:focus-visible { outline: none; }
.htag:has(a.htag__card:focus-visible) { filter: drop-shadow(0 0 0 var(--violet)) drop-shadow(0 0 2px var(--violet)) drop-shadow(0 0 1px var(--violet)); }
.htag__icon { color: var(--ink); margin-bottom: 10px; }
.htag__icon .icon { --icon-size: 26px; stroke-width: 1.6; }
.htag__title {
  font-family: var(--font-display);
  font-size: .96875rem;
  font-weight: 640;
  font-stretch: 92%;
  line-height: 1.18;
  letter-spacing: -.01em;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.htag__price { display: flex; align-items: baseline; gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1.5px dashed rgba(23, 38, 43, .35); white-space: nowrap; }
.htag__amount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 760; font-stretch: 86%; letter-spacing: -.025em; line-height: 1; }
.htag__unit { font-size: .8125rem; font-weight: 600; }
.htag__from { font-size: .75rem; font-weight: 600; margin-right: 2px; }
.htag__sub { margin-top: auto; padding-top: 12px; font-size: var(--text-sm); font-weight: 550; border-top: 1.5px dashed rgba(23, 38, 43, .35); }
/* Tablet & phone: three tags that share the width */
@media (max-width: 1039px) {
  .rail { max-width: 560px; }
  .htag { flex: 1 1 0; max-width: var(--w); }
  .htag:nth-child(n + 4) { display: none; }
}
@media (max-width: 519px) {
  .rail__tags { gap: 8px; padding: 0 2%; }
  .htag__card { min-height: 156px; padding: 38px 10px 10px; }
  .htag__title { font-size: .84375rem; }
  .htag__amount { font-size: 1.1875rem; }
  .htag__icon { margin-bottom: 6px; }
  .htag__icon .icon { --icon-size: 22px; }
  .htag__price, .htag__sub { padding-top: 8px; }
}
@media (min-width: 1040px) and (max-width: 1279px) {
  .htag:nth-child(n + 4) { display: none; }
}
@media (min-width: 1040px) {
  .rail { margin-top: -8px; }
  .rail__rod { right: calc(var(--gutter) * -1 - 50vw); } /* the rail runs on past the page edge */
  .rail__rod::after { display: none; }
}

/* Categories: an index list rather than identical cards */
.cat-list { display: grid; grid-template-columns: 1fr; column-gap: var(--s-6); }
@media (min-width: 640px) { .cat-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cat-list { grid-template-columns: repeat(3, 1fr); } }
.cat-list li { border-top: 1px solid var(--line-strong); }
.cat-link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 2px 16px;
  align-items: center;
  padding: 18px 4px;
  color: var(--ink);
  text-decoration: none;
}
.cat-link .cat-icon { grid-row: span 2; }
.cat-link__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 640; letter-spacing: -.01em; line-height: 1.2; }
.cat-link__desc { grid-column: 2; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-link__count { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-link:hover .cat-link__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.cat-link:hover .cat-icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* How it works – four numbered steps on a line */
.how { display: grid; gap: var(--s-5); counter-reset: how; position: relative; }
.how__step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; }
.how__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 720;
  position: relative;
  z-index: 1;
}
.how__step:first-child .how__num { background: var(--violet); color: #fff; box-shadow: none; }
.how__title { font-size: var(--text-lg); align-self: end; }
.how__text { color: var(--muted); max-width: 34ch; }
.how__step:not(:last-child)::before { /* vertical connector on phones */
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: calc(var(--s-5) * -1);
  width: 2px;
  background: var(--line-strong);
}
@media (min-width: 900px) {
  .how { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .how__step { grid-template-columns: 1fr; gap: 12px; }
  .how__num { grid-row: auto; }
  .how__title { align-self: auto; margin-top: 6px; }
  .how__step:not(:last-child)::before { left: 44px; right: calc(var(--s-5) * -1); top: 21px; bottom: auto; width: auto; height: 2px; }
}

/* Vendors band – dark, with a blank tag waiting for "your price" */
.band {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #E6ECE8;
  overflow: hidden;
}
.band h2 { color: #fff; max-width: 18ch; }
.band p { color: #C3CEC9; max-width: 52ch; }
.band a:not(.btn) { color: #fff; }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.band__art { display: flex; justify-content: center; padding-top: 12px; }
.band__art .tag { --tag-rot: -8deg; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.band__art .tag__string .s-line { stroke: #E6ECE8; }
.band__art .tag__string .s-halo { stroke: transparent; }
.tag--blank .tag__body { gap: 10px; }
.tag--blank .tag__amount { font-size: inherit; }
.tag__blank { display: inline-block; width: 64px; border-bottom: 2px dashed rgba(23, 38, 43, .55); height: 1.1em; }
.tag--xl { --tag-h: 76px; --hole-x: 22px; --chamfer: 20px; }
.tag--xl .tag__body {
  padding-right: 26px;
  background:
    radial-gradient(circle at var(--hole-x) 50%, transparent 0 8px, var(--manila-deep) 8.5px 12px, transparent 12.5px),
    var(--paper-grain),
    var(--manila);
  -webkit-mask: radial-gradient(circle at var(--hole-x) 50%, transparent 7px, #000 7.6px);
  mask: radial-gradient(circle at var(--hole-x) 50%, transparent 7px, #000 7.6px);
}
.tag--xl .tag__amount { font-size: 2rem; }
.tag--xl .tag__unit { font-size: 1rem; }
.tag--xl .tag__string { left: calc(var(--hole-x) - 46px); top: calc(var(--tag-h) / 2 - 55px); width: 53px; height: 60px; }
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}


/* ==========================================================================
   26  Error page, auth & prose pages
   ========================================================================== */
.error-page { display: grid; justify-items: center; text-align: center; gap: var(--s-4); padding-block: clamp(48px, 9vw, 120px); }
.error-page__art { margin-bottom: var(--s-4); }
.error-page__art .tag { --tag-rot: 6deg; }
.error-page h1 { max-width: 20ch; }
.error-page p { color: var(--muted); max-width: 50ch; }
.error-page .site-search { width: min(100%, 420px); margin: var(--s-3) 0 0; visibility: visible; }
.error-page .site-search input { height: 48px; background: var(--surface); border-color: var(--line-strong); }

/* Auth (login/register): narrow centered panel */
.auth { width: 100%; max-width: 460px; margin: 0 auto; padding-block: clamp(32px, 6vw, 72px); }
.auth__title { font-size: var(--text-3xl); margin-bottom: var(--s-2); }
.auth__lead { color: var(--muted); margin-bottom: var(--s-5); }
.auth .panel { padding: var(--s-5); }
.auth__alt { margin-top: var(--s-5); text-align: center; color: var(--muted); }

/* Simple content page header (terms, privacy, how) */
.page-intro { padding-block: clamp(32px, 5vw, 64px) var(--s-5); }
.page-intro h1 { font-size: var(--text-4xl); max-width: 20ch; }
.page-intro .lead { margin-top: var(--s-4); }

/* Item page header */
.item-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.item-head__title { font-size: var(--text-3xl); }
.item-head__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); }
.item-head__meta span { display: inline-flex; align-items: center; gap: 6px; }


/* ==========================================================================
   27  Utilities
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--line); margin-block: var(--s-5); border: 0; }
@media (max-width: 719px) { .hide-mobile { display: none !important; } }
@media (min-width: 720px) { .only-mobile { display: none !important; } }


/* ==========================================================================
   28  Motion
   The one orchestrated moment: hero tags swing into rest on page load.
   Everything else is response to user action (menus, dialogs, toasts).
   ========================================================================== */
@keyframes spin { to { rotate: 360deg; } }
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; } }
@keyframes sheet-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } }
@keyframes dialog-in { from { opacity: 0; scale: .97; } }

@keyframes htag-swing {
  0%   { transform: rotate(calc(var(--rot) + 18deg)); opacity: 0; }
  10%  { opacity: 1; }
  38%  { transform: rotate(calc(var(--rot) - 9deg)); }
  60%  { transform: rotate(calc(var(--rot) + 4.5deg)); }
  78%  { transform: rotate(calc(var(--rot) - 2deg)); }
  90%  { transform: rotate(calc(var(--rot) + .6deg)); }
  100% { transform: rotate(var(--rot)); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .htag { animation: htag-swing 1.9s cubic-bezier(.33, .1, .3, 1) both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .flash-stack, .toasts, .dash__nav, .btn { display: none !important; }
  body { background: #fff; }
}