/* =============================================================================
   STYLE.CSS — Global base: variables, reset, structure
   Do not put project-specific visual design here — use sections.css
   Design system: "28x design system" handoff 2026-07-28 (emerald + yellow)
   ============================================================================= */

/* --- Imports --- */
@import url('../vendor/bootstrap/css/bootstrap.min.css');
@import url('../vendor/fancybox/dist/fancybox.css');
/* AOS css is linked conditionally in partials/head.tpl ($features.aos).
   Slider css is loaded by the templates that use a slider. */


/* =============================================================================
   :ROOT — Design tokens
   Update these for each project. Everything else adapts automatically.
   Accent swap = re-theme: change the two accent lines (+ dark variants).
   ============================================================================= */
:root {
  /* Accent — primary (orange, from the old neza.css) */
  --color-accent:          #e17038;
  --color-accent-dark:     #b95828;
  --color-accent-light:    #fcf1eb;   /* tint background: tags, hover fills */
  --color-accent-contrast: #ffffff;

  /* Accent — secondary (yellow): date badges, highlights, selection */
  --color-accent-2:          #f7c447;
  --color-accent-2-dark:     #d9a323;
  --color-accent-2-light:    #fdf3d7;
  --color-accent-2-contrast: #2a3138;

  /* Neutrals */
  --color-heading:       #12161b;
  --color-text:          #363d45;
  --color-muted:         #6b7480;
  --color-bg:            #ffffff;
  --color-bg-alt:        #f5f6f8;
  --color-border:        #e4e7ec;
  --color-border-strong: #cfd4db;   /* inputs, hoverable borders */
  --color-dark:          #232d38;   /* dark footer / dark CTA band only */
  --color-dark-text:     #aeb6bf;   /* body text on dark */

  /* Semantic */
  --color-success:    #1c7c4d;
  --color-success-bg: #e9f6ef;
  --color-error:      #c0392f;
  --color-error-bg:   #fbeeec;
  --color-info:       #16a07f;
  --color-info-bg:    #e7f6f1;

  /* Typography */
  --font-body:    'Oxygen', system-ui, -apple-system, 'Segoe UI', sans-serif;      /* old neza.css: body + h1-h5 */
  --font-heading: 'Oxygen', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-nav:     'BenchNine', 'Oxygen', sans-serif;   /* old neza.css: top/language menu (.jeziki-menu) */
  /* 'Open Sans' was loaded by the old site but overridden in its heading cascade — not tokenised */
  --fs-xs:        0.8125rem;   /* 13 — meta, badges */
  --fs-sm:        0.875rem;    /* 14 */
  --fs-base:      1rem;        /* 16 */
  --fs-lg:        1.125rem;    /* 18 */
  --fs-xl:        1.375rem;    /* 22 — leads, card titles */
  --fs-h1:       clamp(2.375rem, 1.4rem + 3.2vw, 3.875rem);
  --fs-h2:       clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  --fs-h3:       clamp(1.3125rem, 1.1rem + 0.75vw, 1.625rem);
  --fs-h4:       1.1875rem;
  --fs-display:  clamp(2.75rem, 1.4rem + 5.2vw, 5.5rem);   /* hero only */
  --lh-base:      1.6;
  --lh-heading:   1.06;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --ls-caps:      0.08em;   /* kickers, tags, labels */

  /* Spacing */
  --space-2xs: 0.25rem;   /*   4 */
  --space-xs:  0.5rem;    /*   8 */
  --space-sm:  1rem;      /*  16 */
  --space-md:  1.5rem;    /*  24 */
  --space-lg:  2.5rem;    /*  40 */
  --space-xl:  4rem;      /*  64 */
  --space-2xl: 6.5rem;    /* 104 — section rhythm on desktop */

  /* Layout */
  --header-height: 72px;
  --measure: 44rem;   /* comfortable reading width */

  /* Misc */
  --radius:      6px;    /* buttons, inputs, tags */
  --radius-md:   10px;   /* cards, images */
  --radius-lg:   16px;   /* large media, modals */
  --radius-pill: 999px;
  --transition:  0.22s ease;
  /* hairline borders by default; shadows = hover lift + floating layers */
  --shadow:    0 1px 2px rgba(18, 22, 27, 0.05), 0 4px 16px rgba(18, 22, 27, 0.06);
  --shadow-lg: 0 8px 24px rgba(18, 22, 27, 0.10), 0 24px 64px rgba(18, 22, 27, 0.12);
}


/* =============================================================================
   BASE
   ============================================================================= */

::selection { background-color: var(--color-accent-2); color: var(--color-accent-2-contrast); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The horizontal-overflow guard above must not cost us position:sticky.
   `overflow-x: hidden` on <body> turns it into a scroll container, and every
   sticky descendant (checkout summary, cart summary, sidebars) then sticks to
   a box that never scrolls — i.e. it silently does nothing. `clip` guards the
   same overflow WITHOUT creating a scroll container. `hidden` stays above as
   the fallback for browsers that don't know `clip` (Safari < 16). */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin-bottom: 0.5em;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 0.9375rem; }

/* Links — underline slides in on hover */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: var(--color-accent-dark); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }
video { max-width: 100%; height: auto; } /* self-hosted <video> in rich text must not overflow the column */

p { margin-bottom: 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--color-border); opacity: 1; margin: var(--space-lg) 0; }

::placeholder          { color: var(--color-muted); opacity: 1; }
.dark-bg ::placeholder { color: rgba(255, 255, 255, 0.5); }


/* =============================================================================
   UTILITIES
   ============================================================================= */

.style-none { list-style: none; padding-left: 0; margin-bottom: 0; }

.light-bg { background-color: var(--color-bg-alt); }
.dark-bg  { background-color: var(--color-dark); color: var(--color-dark-text); }
.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4 { color: #fff; }

.text-muted-custom { color: var(--color-muted); }
.text-accent       { color: var(--color-accent); }
.text-lg           { font-size: var(--fs-xl); line-height: 1.5; }

/* Uppercase section eyebrow */
.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.lead { font-size: var(--fs-xl); line-height: 1.5; color: var(--color-muted); font-weight: var(--fw-normal); }

/* Top spacing for sections that sit directly under the absolute-positioned header (no hero) */
.page-top { padding-top: calc(var(--header-height) + 3rem); }

@media (min-width: 992px) {
  .page-top { padding-top: calc(var(--header-height) + 5rem); }
}

.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-top    { border-top:    1px solid var(--color-border) !important; }
.dark-bg .border-bottom { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.dark-bg .border-top    { border-top:    1px solid rgba(255,255,255,0.1) !important; }

/* Scroll-to-top */
.scroll-top {
  width: 40px;
  height: 40px;
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.25rem;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-heading);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.scroll-top:hover { background: var(--color-accent); transform: translateY(-2px); }
.scroll-top.show  { display: flex; }


/* =============================================================================
   NAVIGATION
   ============================================================================= */

/* Header wrapper — absolute at top. Solid white with a hairline border by
   default; transparent on .white-top-menu pages (dark hero behind it).
   JS adds .main-header-fixed--pin on scroll up (white bg + fixed). */
.main-menu {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  transition: background var(--transition), box-shadow var(--transition);
}
.main-menu.white-top-menu {
  background-color: transparent;
  border-bottom-color: transparent;
}
.main-menu.main-header-fixed--pin { border-bottom-color: var(--color-border); }

.main-menu .inner-content {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.main-menu .inner-content > .d-flex { width: 100%; }

/* Scroll up past 300px — fixed header with white bg */
.main-menu.main-header-fixed--pin {
  position: fixed;
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
  animation: slideDown 0.35s ease forwards;
}

/* Scroll down past 300px — already off-screen, suppress */
.main-menu.main-header-fixed--unpin {
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Logo */
.main-menu .logo { flex-shrink: 0; margin-inline-end: auto; }
.main-menu .logo a { display: inline-flex; align-items: center; }
.main-menu .logo img { height: 36px; width: auto; }

/* Two logo files, one visible at a time: the light lockup only over a dark
   hero (.white-top-menu before it pins). Both are in the DOM so the swap
   costs no request at scroll time. */
.main-menu .logo .logo-light { display: none; }
.main-menu.white-top-menu:not(.main-header-fixed--pin) .logo .logo-dark  { display: none; }
.main-menu.white-top-menu:not(.main-header-fixed--pin) .logo .logo-light { display: block; }

/* Desktop header is three zones: logo left, menu centred, widgets right.
   Both side zones are flex:1 so the menu sits on the page's centre line no
   matter how wide the widget cluster grows (login + cart + languages). */
@media (min-width: 992px) {
  .main-menu .logo   { flex: 1 1 0; margin-inline-end: 0; }
  .main-menu .navbar { flex: 0 1 auto; }
  .main-menu .right-widget { flex: 1 1 0; justify-content: flex-end; margin-inline-start: 0; }
  /* a long menu shortens the gaps before it wraps to a second line */
  .main-menu .navbar-nav { flex-wrap: nowrap; }
  .main-menu .navbar-nav .nav-link { white-space: nowrap; }
}

/* Navbar reset */
.navbar { padding: 0; }

.navbar .navbar-nav .nav-link {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  padding: 0.5rem 0.125rem;
  margin-inline: 0.75rem;
  position: relative;
  transition: color var(--transition);
}
/* sliding underline */
.navbar .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .active > .nav-link { color: var(--color-accent); }
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after,
.navbar .navbar-nav .active > .nav-link::after { transform: scaleX(1); }

/* White links for dark hero pages */
.white-top-menu .navbar .navbar-nav .nav-link,
.white-top-menu .right-widget a,
.white-top-menu .right-widget button         { color: #fff; }
.white-top-menu .navbar .navbar-nav .nav-link::after { background: #fff; }
.white-top-menu .navbar-toggler span,
.white-top-menu .navbar-toggler::before,
.white-top-menu .navbar-toggler::after       { background: #fff; }

/* Once fixed, always dark */
.main-header-fixed--pin .navbar .navbar-nav .nav-link,
.main-header-fixed--pin .right-widget a,
.main-header-fixed--pin .right-widget button { color: var(--color-heading); }
.main-header-fixed--pin .navbar .navbar-nav .nav-link:hover,
.main-header-fixed--pin .navbar .navbar-nav .nav-link.active { color: var(--color-accent); }
.main-header-fixed--pin .navbar .navbar-nav .nav-link::after { background: var(--color-accent); }
.main-header-fixed--pin .navbar-toggler span,
.main-header-fixed--pin .navbar-toggler::before,
.main-header-fixed--pin .navbar-toggler::after { background: var(--color-heading); }

/* Dropdown */
.navbar .dropdown-toggle::after { display: none; }

.navbar .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  min-width: 240px;
  margin-top: 0; /* no gap — a gap breaks the hover reveal on the way to the panel */
}

.navbar .dropdown-item {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 0.6em 0.9em;
  transition: color var(--transition), background var(--transition);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
  background-color: var(--color-bg-alt);
  color: var(--color-accent);
}

/* Desktop dropdown reveal */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Hamburger */
.navbar-toggler {
  position: relative;
  width: 28px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
.navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--color-accent); outline-offset: 3px; }

.navbar-toggler span,
.navbar-toggler::before,
.navbar-toggler::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-heading);
  transition: transform 0.25s, opacity 0.25s;
}
.navbar-toggler span           { top: 50%; transform: translateY(-50%); }
.navbar-toggler::before        { top: 0; }
.navbar-toggler::after         { bottom: 0; }
.navbar-toggler[aria-expanded="true"] span    { opacity: 0; }
.navbar-toggler[aria-expanded="true"]::before { transform: rotate(45deg) translate(5px, 5px); }
.navbar-toggler[aria-expanded="true"]::after  { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile panel */
@media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100dvh;
    width: min(320px, calc(100vw - 50px));
    z-index: 9999;
    overflow-y: auto;
    background: var(--color-bg);
    padding: 1.5rem 1.25rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: block !important;
  }
  .navbar-collapse.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .navbar-collapse .logo { margin-bottom: 2rem; }

  .navbar .navbar-nav .nav-link { margin: 0; padding: 0.625rem 0; font-size: var(--fs-lg); color: var(--color-heading); }
  .navbar .navbar-nav .nav-link::after { display: none; }
  .navbar .navbar-nav li + li .nav-link { border-top: 1px solid var(--color-border); }
  .navbar .dropdown-menu { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0 0 var(--space-sm) var(--space-sm); margin: 0; }
  .navbar .dropdown-item { padding: 0.35rem 0; color: var(--color-muted); background: transparent; }
  .navbar .dropdown-item:hover { background: transparent; }

  .mobile-content { margin-block-start: 2rem; padding-block-start: 2rem; border-top: 1px solid var(--color-border); }
  .mobile-content .address-block p { font-size: var(--fs-sm); line-height: 1.6; }
  .mobile-content .address-block a { color: var(--color-text); }
  .mobile-content .address-block a:hover { color: var(--color-accent); }
}

/* Right widget */
.right-widget { gap: 0.375rem; flex-shrink: 0; margin-inline-start: 1.25rem; }
.login-btn {
  gap: 0.375rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  border-radius: var(--radius);
  padding: 0.45rem 0.625rem;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.login-btn:hover { color: var(--color-accent); background: var(--color-bg-alt); }
.white-top-menu:not(.main-header-fixed--pin) .login-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.white-top-menu:not(.main-header-fixed--pin) .sidebar-nav-button:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.white-top-menu:not(.main-header-fixed--pin) .lang-switch-item a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.white-top-menu:not(.main-header-fixed--pin) .lang-switch-item a,
.white-top-menu:not(.main-header-fixed--pin) .lang-switch-item span { color: rgba(255, 255, 255, 0.7); }
.white-top-menu:not(.main-header-fixed--pin) .lang-switch-current { color: #fff; }
.sidebar-nav-button {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.sidebar-nav-button:hover { color: var(--color-accent); background: var(--color-bg-alt); }
.sidebar-nav .logo img { height: 32px; width: auto; }

/* Search (right widget) — trigger link/button opening the search dialog
   (V2 pattern; the dialog itself is .search-dialog further down) */
.search-widget { position: relative; }
.search-widget .search-trigger {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.search-widget .search-trigger:hover { color: var(--color-accent); background: var(--color-bg-alt); }
.white-top-menu:not(.main-header-fixed--pin) .search-widget .search-trigger { color: #fff; }
.white-top-menu:not(.main-header-fixed--pin) .search-widget .search-trigger:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* ============ Search dialog (V2 — Claude Design handoff 2026-08-15) ======
   Native <dialog> in the top layer: immune to header ink/stacking by
   construction — NO z-index anywhere, and every color inside is explicit.
   <768px the same DOM becomes a full-screen sheet. */
.search-dialog {
  width: 560px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin: 44px auto auto;
  max-height: calc(100vh - 88px);
}
.search-dialog::backdrop { background: rgba(18, 22, 27, 0.5); }
.search-dialog__form { margin: 0; }
.search-dialog__inputrow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border);
}
.search-dialog__icon { color: var(--color-muted); flex: none; }
.search-dialog__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16px; /* also prevents iOS zoom-on-focus */
  color: var(--color-heading);
}
.search-dialog__input::placeholder { color: var(--color-muted); opacity: 1; }
.search-dialog__input::-webkit-search-cancel-button { display: none; }
.search-dialog__kbd {
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}
.search-dialog__close { flex: none; border: 0; background: none; padding: 0; cursor: pointer; }
.search-dialog__close-label { display: none; }
.search-dialog__spinner {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: sdspin 0.7s linear infinite;
}
@keyframes sdspin { to { transform: rotate(360deg); } }
.search-dialog__skeleton { display: flex; flex-direction: column; gap: 11px; padding: 18px 20px 20px; }
.search-dialog__skeleton span { height: 12px; border-radius: var(--radius-pill); background: var(--color-bg-alt); }
.search-dialog__skeleton span:nth-child(1) { width: 70%; }
.search-dialog__skeleton span:nth-child(2) { width: 54%; }
.search-dialog__skeleton span:nth-child(3) { width: 63%; }
.search-dialog__body { overflow-y: auto; }
.search-dialog__panel { padding: 8px; }
.search-dialog__list { padding: 8px; margin: 0; list-style: none; }
.search-dialog__hint { margin: 0; padding: 14px 18px 16px; font-size: 13px; color: var(--color-muted); }
.search-dialog__grouphead {
  margin: 0;
  padding: 12px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.search-dialog__grouphead:first-child { padding-top: 8px; }
.search-dialog__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.search-dialog__title,
.search-dialog__rowmain {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-heading);
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.search-dialog__title strong { font-weight: 700; } /* bold match — <mark> is results-page only */
.search-dialog__row[aria-selected="true"],
.search-dialog__row:hover {
  background: var(--color-accent-light);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.search-dialog__enter {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-accent-dark);
  visibility: hidden;
}
.search-dialog__row[aria-selected="true"] .search-dialog__enter { visibility: visible; }
.search-dialog__remove {
  flex: none;
  border: 0;
  background: none;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 14px;
}
.search-dialog__remove:hover { color: var(--color-error); }
.search-dialog__zero { padding: 16px 18px 6px; }
.search-dialog__zero-msg { margin: 0 0 10px; font-size: 14px; color: var(--color-text); }
.search-dialog__zero-msg strong { color: var(--color-heading); }
.search-dialog__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding: 10px 18px;
  background: var(--color-bg-alt);
}
.search-dialog__all { font-size: 14px; font-weight: 600; color: var(--color-accent); text-decoration: none; }
.search-dialog__all:hover { text-decoration: underline; }
.search-dialog__hints { font-size: 11.5px; color: var(--color-muted); }
.search-dialog :focus-visible {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
@media (max-width: 767.98px) {
  .search-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .search-dialog::backdrop { background: var(--color-bg); }
  .search-dialog__inputrow { height: auto; padding: 14px 16px; gap: 10px; }
  .search-dialog__kbd { display: none; }
  .search-dialog__close-label { display: inline; font-size: 14px; font-weight: 600; color: var(--color-heading); padding: 10px 4px; }
  .search-dialog__row { min-height: 48px; padding: 6px 12px; }
  .search-dialog__title, .search-dialog__rowmain { font-size: 16px; }
  .search-dialog__footer { padding: 14px 20px 22px; }
  .search-dialog__all { font-size: 15px; }
  .search-dialog__hints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search-dialog__spinner { animation: none; border-top-color: var(--color-border); }
}

/* ============ Search results page (V2) ============ */
.search-page-form { display: flex; gap: 10px; max-width: 560px; }
.search-page-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-muted);
  background: var(--color-bg);
}
.search-page-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--color-heading);
}
.search-page-field:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.search-page-submit {
  flex: none;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.search-page-submit:hover { background: var(--color-accent-dark); }
.search-page-count { margin: 14px 0 6px; font-size: 14px; color: var(--color-muted); }
.search-page-count strong { color: var(--color-heading); }
.search-broad-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  border: 1px solid color-mix(in oklab, var(--color-accent) 25%, transparent);
  color: var(--color-accent-dark);
  font-size: 13.5px;
  line-height: 1.55;
}
.search-broad-note p { margin: 0; }
.search-results mark,
.search-dialog mark {
  background: var(--color-accent-light);
  color: inherit;
  font-weight: 600;
  padding: 0 2px;
  border-radius: 3px;
}
.search-result { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.search-result-thumb {
  flex: none;
  width: 128px;
  height: 96px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-kind { margin: 0 0 6px; }
.search-result-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.search-result-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.search-result-title a { color: var(--color-heading); text-decoration: none; }
.search-result-title a:hover { color: var(--color-accent); }
.search-result-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-muted); }
.search-empty { text-align: center; padding: 28px 32px; }
.search-empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.search-empty-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--color-heading); }
.search-empty-sub { margin: 0; font-size: 14px; color: var(--color-muted); }
.search-empty-sub strong { color: var(--color-heading); }
/* dropdown panels stay white even while the transparent header paints its
   buttons/links #fff — restore button colors inside them (search + cart) */
.white-top-menu .right-widget .dropdown-menu .btn-two { color: var(--color-heading); }
.white-top-menu .right-widget .dropdown-menu .btn-two:hover { color: var(--color-accent); }
.white-top-menu .right-widget .dropdown-menu .btn-one { color: var(--color-accent-contrast); }

/* Cart (right widget) — icon button + count badge */
.right-widget .dropdown-toggle::after { display: none; }
.cart-group-wrapper { position: relative; }
.cart-group-wrapper > button {
  position: relative;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.cart-group-wrapper > button:hover { color: var(--color-accent); background: var(--color-bg-alt); }
.white-top-menu:not(.main-header-fixed--pin) .cart-group-wrapper > button:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* pulses when the basket changes — the badge is far from the button that
   caused it, so something has to point at it */
.cart-group-wrapper .item-count.is-bumped { animation: cartBump 0.45s ease; }
@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .cart-group-wrapper .item-count.is-bumped { animation: none; } }
.cart-group-wrapper .item-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 17px;
  text-align: center;
}
.cart-group-wrapper .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  padding: var(--space-sm);
  font-size: var(--fs-sm);
}

/* Mini basket — basics: thumbnail, title, qty × line total, remove; then the
   subtotal and the two ways out. */
.cart-dropdown .cart_list { max-height: min(50vh, 340px); overflow-y: auto; margin: 0; }
.cart-dropdown .cart_item { display: flex; align-items: flex-start; gap: var(--space-xs); padding-block: var(--space-xs); }
.cart-dropdown .cart_item + .cart_item { border-top: 1px solid var(--color-border); }
.cart-dropdown .cart_item-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-alt); }
.cart-dropdown .cart_item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-dropdown .cart_item p { flex: 1; min-width: 0; margin: 0; }
.cart-dropdown .cart_item p > a { display: block; color: var(--color-heading); font-weight: var(--fw-medium); text-decoration: none; }
.cart-dropdown .cart_item p > a:hover { color: var(--color-accent); }
.cart-dropdown .quantity { display: block; color: var(--color-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cart-dropdown .product-remove .remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius); color: var(--color-muted); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.cart-dropdown .product-remove .remove:hover { color: var(--color-error); background: var(--color-error-bg); }
.cart-dropdown .cart-empty { padding-block: var(--space-sm); color: var(--color-muted); text-align: center; }
.cart-group-wrapper .subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.cart-group-wrapper .subtotal .amount { font-variant-numeric: tabular-nums; }
.cart-dropdown-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-sm); }
.cart-dropdown-actions .btn-one,
.cart-dropdown-actions .btn-two { width: 100%; }

/* Language switcher */
.lang-switch { display: flex; align-items: center; gap: 0.125rem; margin: 0 0.25rem 0 0; padding: 0; list-style: none; }
.lang-switch-item { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.lang-switch-item a,
.lang-switch-item span {
  display: inline-block;
  padding: 0.3em 0.45em;
  border-radius: var(--radius);
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.lang-switch-item a:hover { color: var(--color-accent); background: var(--color-accent-light); }
.lang-switch-current { color: var(--color-heading); font-weight: var(--fw-semibold); }


/* =============================================================================
   BUTTONS — .btn-one (solid) / .btn-two (outline) / .btn-three (text + arrow)
   Stable contract classes: used by templates AND editor content.
   ============================================================================= */

.btn {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius);
  padding: 0.7em 1.5em;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.btn-one,
.btn-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.7em 1.5em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.btn-one {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.btn-one:hover {
  background: var(--color-accent-dark);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-one:active { transform: translateY(0); box-shadow: none; }

.btn-two {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-border-strong);
}
.btn-two:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  text-decoration: none;
}

/* text link with sliding arrow */
.btn-three {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition);
}
.btn-three::after { content: '\2192'; transition: transform var(--transition); }
.btn-three:hover { color: var(--color-accent-dark); text-decoration: none; }
.btn-three:hover::after { transform: translateX(4px); }

/* Sizes + states */
.btn-sm { padding: 0.5em 1.1em; font-size: var(--fs-sm); }
.btn-lg { padding: 0.85em 1.9em; font-size: var(--fs-lg); }
.btn-one[disabled], .btn-two[disabled],
.btn-one.is-disabled, .btn-two.is-disabled { opacity: 0.45; pointer-events: none; }

/* Inverse — for dark / accent bands */
.btn-inverse.btn-one { background: #fff; color: var(--color-heading); }
.btn-inverse.btn-one:hover { background: var(--color-bg-alt); color: var(--color-heading); }
.btn-inverse.btn-two { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-inverse.btn-two:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }


/* =============================================================================
   FOOTER — dark band, editorial grid + wordmark watermark
   Three zones (brand / links / contact) on an asymmetric grid, an oversized
   outlined wordmark under them, hairline legal row last.
   ============================================================================= */

.main-footer {
  position: relative;
  overflow: hidden;                 /* the watermark bleeds past the container */
  background: var(--color-dark);
  color: var(--color-dark-text);
}
.main-footer a { color: var(--color-dark-text); text-decoration: none; }
.main-footer a:hover { color: #fff; }
/* faint accent wash from the top-left corner, so the band is not flat black */
.main-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: min(760px, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle at 0 0, rgba(22, 160, 127, 0.16), transparent 62%);
  pointer-events: none;
}
.main-footer .container { position: relative; }

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: var(--space-xl) var(--space-lg);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-brand { max-width: 30rem; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 40px; width: auto; }
.footer-desc { font-size: var(--fs-sm); margin-block: var(--space-sm) 0; }
.footer-cta { margin-top: var(--space-sm); color: #fff; }
.footer-cta:hover { color: var(--color-accent); }

.footer-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.footer-nav li { margin-bottom: var(--space-xs); font-size: var(--fs-sm); }
/* sub-levels of the menu plugin stay quiet — the footer lists sections, not pages */
.footer-nav ul { display: none; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  margin-bottom: 0.625rem;
}
.footer-contact i { color: var(--color-accent); margin-top: 0.3em; }
.footer-hours p { margin-bottom: 0; }

/* Watermark — the site title at display size, outlined, clipped by the band.
   Decorative only: no pointer events, no selection, aria-hidden in markup. */
.footer-mark {
  margin-inline: calc(var(--space-sm) * -1);
  line-height: 0.78;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.footer-mark span {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(4rem, 16vw, 15rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  text-transform: lowercase;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  margin-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.social-icon { display: flex; gap: 0.5rem; }
.social-icon li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.social-icon li a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); color: #fff; }

.copyright { font-size: var(--fs-xs); margin-bottom: 0; color: var(--color-muted); }

@media (min-width: 768px) { .footer-main { padding-block: var(--space-2xl) var(--space-lg); } }
@media (max-width: 991.98px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .footer-main { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-mark span { -webkit-text-stroke-width: 0.5px; }
}


/* =============================================================================
   FORMS — one kit used everywhere (Bootstrap class names, handoff visuals)
   ============================================================================= */

.form-control,
.form-select {
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--color-heading);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.65em 0.9em;
  background-color: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:hover,
.form-select:hover { border-color: var(--color-muted); }
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
  outline: none;
}

label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading); margin-bottom: 0.375rem; }

.form-group { margin-bottom: 1.25rem; }
.form-hint { font-size: var(--fs-xs); color: var(--color-muted); }

textarea.form-control { resize: vertical; min-height: 120px; }

/* checkbox / radio — accent-tinted Bootstrap inputs */
.form-check-input { border-color: var(--color-border-strong); width: 1.15em; height: 1.15em; }
.form-check-input:hover { border-color: var(--color-accent); }
.form-check-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-check label { cursor: pointer; font-weight: var(--fw-normal); }

.form-control.has-error { border-color: var(--color-error); }
.form-control.has-error:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
.error-message {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-error);
  margin-block-start: 0.25rem;
  display: block;
}


/* =============================================================================
   BREADCRUMBS
   ============================================================================= */

.breadcrumb { font-size: var(--fs-sm); margin-bottom: 0; color: var(--color-muted); }
.breadcrumb-item { color: var(--color-muted); }
.breadcrumb-item a { color: var(--color-muted); text-decoration: none; transition: color var(--transition); }
.breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-item.active { color: var(--color-heading); font-weight: var(--fw-medium); }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--color-border-strong); padding-inline: 0.4rem; }

.hero-breadcrumb .breadcrumb-item,
.hero-breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.7); }
.hero-breadcrumb .breadcrumb-item.active { color: #fff; }
.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.3); }


/* =============================================================================
   RTE — editor28 output; .rte-content + inner class names = STABLE CONTRACT
   ============================================================================= */

.rte-content h2 { margin: var(--space-lg) 0 var(--space-sm); }
.rte-content h3,
.rte-content h4 { margin: var(--space-md) 0 var(--space-xs); }
.rte-content > :first-child { margin-top: 0; }
.rte-content > :last-child { margin-bottom: 0; }
.rte-content ul,
.rte-content ol  { padding-inline-start: 1.4em; margin-bottom: 1rem; }
.rte-content li  { margin-bottom: var(--space-2xs); }
.rte-content li::marker { color: var(--color-accent); }
.rte-content img { border-radius: var(--radius-md); margin-block: 1rem; }
.rte-content a   { text-decoration: underline; text-decoration-color: currentColor; }
/* clear inline-style floated images */
.rte-content::after { content: ''; display: table; clear: both; }

.rte-content blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  border-left: 3px solid var(--color-accent);
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.rte-content blockquote cite {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-normal);
  color: var(--color-muted);
}

/* Tables — bare <table> from the editor; main.js wraps it in .table-wrap for
   horizontal scroll on phones */
.table-wrap { overflow-x: auto; margin: var(--space-md) 0; }
.rte-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table-wrap > table { min-width: 480px; margin: 0; }
.rte-content th, .rte-content td {
  text-align: left;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-border);
}
.rte-content thead th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-muted);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-border-strong);
}
.rte-content tbody tr:hover { background: var(--color-bg-alt); }

/* Photo gallery + file list — shared markup from partials/attachments.tpl AND
   editor-inserted inline galleries (same .content-gallery class). Lives in the
   base stylesheet because the shared templates depend on it (sections.css
   starts empty on new projects). */
.content-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
.content-gallery a { display: block; overflow: hidden; border-radius: var(--radius-md); }
.content-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-block: 0;
  transition: transform 0.35s ease;
}
.content-gallery a:hover img { transform: scale(1.04); }
/* editor's "images per row" option */
.content-gallery.gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.content-gallery.gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.content-gallery.gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.content-gallery.gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .content-gallery[class*="gallery-cols-"] { grid-template-columns: repeat(2, 1fr); }
}
/* captioned items (editor "Vstavi opis" + gallery): <figure><a><img></a><figcaption> */
.content-gallery figure { margin: 0; }
.content-gallery figcaption { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
/* editor's "Poravnano" option — fjGallery justified rows (main.js lazy-init).
   The lib sizes items to their natural ratios, so the grid + crop rules yield.
   Row height: main.js reads --gallery-row-height — retune the default per
   project here; .gallery-rh-* are the editor's per-gallery presets. */
.content-gallery.gallery-justified { display: block; --gallery-row-height: 220px; }
.content-gallery.gallery-rh-140 { --gallery-row-height: 140px; }
.content-gallery.gallery-rh-220 { --gallery-row-height: 220px; }
.content-gallery.gallery-rh-320 { --gallery-row-height: 320px; }
.content-gallery.gallery-justified a { display: block; border-radius: var(--radius); }
.content-gallery.gallery-justified img { aspect-ratio: auto; height: auto; object-fit: unset; border-radius: 0; }
.content-gallery.gallery-justified a:hover img { transform: none; }
.content-gallery.gallery-justified figcaption { display: none; } /* captions live in the lightbox here */
.content-files li { margin-bottom: 0.5rem; }
.content-files .filesize { color: var(--color-muted); font-size: var(--fs-xs); margin-inline-start: 0.5rem; }

/* Standalone figures (floats handled below) */
.rte-content figure { margin: 0 0 var(--space-sm); }
.rte-content figure figcaption { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-2xs); }


/* =============================================================================
   PAGE TITLE — neutral default heading (partials/page-title.tpl)
   Projects restyle or replace it in their design pass.
   ============================================================================= */

.page-title { padding-bottom: var(--space-md); }
.page-title h1 { margin-bottom: 0; }
.page-title .lead { margin: var(--space-sm) 0 0; max-width: var(--measure); }
.page-title .breadcrumb-wrap { margin-bottom: var(--space-sm); }


/* =============================================================================
   SECTION STRUCTURE — spacing and header layout shared by full-section
   boxes and page sections (posts-cards, rtf-image, ...)
   ============================================================================= */

.section-pad { padding-block: clamp(var(--space-lg), 4vw + 1.5rem, var(--space-2xl)); }
.section-pad-bottom { padding-block-end: clamp(var(--space-lg), 4vw + 1.5rem, var(--space-2xl)); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.section-head-cta { flex-shrink: 0; }

.section-title { margin-bottom: 0; }
.section-subtitle { color: var(--color-muted); font-size: var(--fs-lg); margin: var(--space-xs) 0 0; max-width: var(--measure); }
.section-lead { font-size: var(--fs-xl); line-height: 1.5; color: var(--color-muted); }
.section-intro { color: var(--color-muted); max-width: var(--measure); margin-top: var(--space-xs); }


/* =============================================================================
   NEUTRAL SCAFFOLDING — plain, token-driven component defaults so module
   templates render usable before a project design exists. Override the look
   in sections.css per project; keep selectors/classes stable.
   ============================================================================= */

/* Editor block styles (styles dropdown: par-*) — stable contract classes */
.rte-content .par-highlight {
  background: var(--color-accent-2-light);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-heading);
}
.rte-content .par-alternative {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.rte-content .par-comment {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border-strong);
}
.rte-content .par-big { font-size: var(--fs-xl); line-height: 1.5; color: var(--color-heading); }
.rte-content .par-small { font-size: var(--fs-sm); color: var(--color-muted); }

/* Accordion — editor "Accordion" block stores native <details>/<summary>.
   No wrapper around the body content — pad the children, not a .details-body. */
.rte-content details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-xs);
  background: var(--color-bg);
  transition: border-color var(--transition);
}
.rte-content details:hover,
.rte-content details[open] { border-color: var(--color-border-strong); }
.rte-content summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.rte-content summary::-webkit-details-marker { display: none; }
.rte-content summary::after {
  content: '+';
  font-size: 1.3em;
  line-height: 1;
  color: var(--color-muted);
  transition: transform var(--transition);
}
.rte-content details[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.rte-content details > *:not(summary) { padding-inline: var(--space-md); }
.rte-content details > *:not(summary):last-child { padding-bottom: var(--space-sm); margin-bottom: 0; }

/* Link / product card — editor "Product / link card" block
   (div.link-card > a > img + span.link-card-body with title/desc/domain) */
.rte-content .link-card { margin: var(--space-md) 0; }
.rte-content .link-card > a {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.rte-content .link-card > a:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.rte-content .link-card img {
  width: 180px;
  min-height: 120px;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  flex: 0 0 auto;
}
.rte-content .link-card .link-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  min-width: 0;
}
.rte-content .link-card .link-card-body:first-child { padding-left: var(--space-md); }
.rte-content .link-card .link-card-title { font-weight: var(--fw-semibold); color: var(--color-heading); }
.rte-content .link-card > a:hover .link-card-title { color: var(--color-accent); }
.rte-content .link-card .link-card-desc {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rte-content .link-card .link-card-domain {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (max-width: 480px) {
  .rte-content .link-card img { width: 96px; }
}

/* File / download banner — editor "Insert document"
   (div.file-card > a > span.file-card-ext + span.file-card-body with title/meta;
   div.file-card.file-card-locked = lead-gated file, links through /ajax/dl/<id>). */
.rte-content .file-card { margin: var(--space-sm) 0; }
.rte-content .file-card > a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rte-content .file-card > a:hover { border-color: var(--color-accent); box-shadow: var(--shadow); }
.rte-content .file-card .file-card-ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-align: center;
}
.rte-content .file-card .file-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rte-content .file-card .file-card-title { font-weight: var(--fw-medium); color: var(--color-heading); }
.rte-content .file-card > a:hover .file-card-title { color: var(--color-accent); }
.rte-content .file-card .file-card-meta {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
/* download affordance on the right (lock for gated files) */
.rte-content .file-card > a::after {
  content: '\2193';
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color var(--transition), transform var(--transition);
}
.rte-content .file-card > a:hover::after { color: var(--color-accent); transform: translateY(2px); }
.rte-content .file-card.file-card-locked > a::after { content: '🔒'; font-size: 0.9rem; transform: none; }
.rte-content .file-card.file-card-locked .file-card-ext { background: var(--color-bg-alt); color: var(--color-muted); }
.rte-content .file-card.file-card-locked > a:hover { border-color: var(--color-border-strong); }

/* Files inserted as a compact list ("Prikaži kot seznam") */
.rte-content .files-list {
  list-style: none;
  margin: var(--space-md) 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rte-content .files-list li { margin: 0; }
.rte-content .files-list li + li { border-top: 1px solid var(--color-border); }
.rte-content .files-list a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  text-decoration: none;
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--transition), color var(--transition);
}
.rte-content .files-list a:hover { background: var(--color-bg-alt); color: var(--color-accent); }

/* Anchor targets (editor "Anchor" on headings) — clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); }

/* Cards (listings, boxes) */
.card-basic {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card-basic:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.card-basic .card-img { overflow: hidden; }
.card-basic .card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.45s ease; }
.card-basic:hover .card-img img { transform: scale(1.04); }
.card-basic .card-body { padding: var(--space-md); }
.card-basic .card-title { font-size: var(--fs-h4); margin-bottom: 0.375rem; }
.card-basic .card-meta { font-size: var(--fs-xs); color: var(--color-muted); margin-bottom: var(--space-xs); }

/* Tags / badges */
.tag-basic {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.7em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
a.tag-basic:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.tag-basic.tag-neutral { background: var(--color-bg-alt); color: var(--color-muted); }

/* Alerts (form feedback, user messages) */
.alert-basic {
  border: 1px solid;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
}
.alert-basic.is-success { border-color: rgba(28, 124, 77, 0.25);  background: var(--color-success-bg); color: var(--color-success); }
.alert-basic.is-error   { border-color: rgba(192, 57, 47, 0.25);  background: var(--color-error-bg);   color: var(--color-error); }
.alert-basic.is-info    { border-color: rgba(22, 160, 127, 0.25); background: var(--color-info-bg);    color: var(--color-info); }

/* Pagination */
.pagination { gap: var(--space-2xs); justify-content: center; }
.pagination .page-link,
.pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-xs);
  border: none;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.pagination .page-link:hover,
.pagination li a:hover { background: var(--color-bg-alt); color: var(--color-heading); }
.pagination .page-item.active .page-link,
.pagination li.active a {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Tables */
.table-basic { width: 100%; font-size: var(--fs-sm); }
.table-basic th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-muted);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-border-strong);
  padding: 0.75em 1em;
  text-align: left;
}
.table-basic td { border-bottom: 1px solid var(--color-border); padding: 0.75em 1em; }
.table-basic tbody tr:hover { background: var(--color-bg-alt); }

/* Site users — auth pages, account, my posts (user-*.tpl) */
.user-auth-card,
.user-account-card,
.user-edit-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.user-auth-card .card-body,
.user-account-card .card-body,
.user-edit-card .card-body { padding: var(--space-lg); }
.user-auth-head { margin-bottom: 1.25rem; }
.user-auth-head p { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: 0; }
.user-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: 1.25rem;
  color: var(--color-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.user-divider::before,
.user-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.user-social-buttons { display: grid; gap: 0.625rem; }
.user-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  padding: 0.7em 1.5em;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.user-social-btn:hover { background: var(--color-bg-alt); border-color: var(--color-muted); color: var(--color-heading); }
.user-form-meta { font-size: var(--fs-sm); margin-block: 0.75rem 0; }
.user-otp-input {
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5em;
}
.user-otp-resend { margin-top: 0.75rem; text-align: center; font-size: var(--fs-sm); color: var(--color-muted); }
.user-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}
.user-password-heading { margin-top: 1rem; }
.user-account-link { display: block; margin-bottom: 1rem; text-decoration: none; }
.user-account-link .card-body i { font-size: 1.5rem; color: var(--color-accent); margin-bottom: 0.5rem; }
.user-account-link p { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: 0; }
.user-posts-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.user-posts-table td { vertical-align: middle; }
.user-posts-tools { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.user-posts-tools form { display: inline-flex; margin: 0; }
.user-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 0;
  background: none;
  border-radius: var(--radius);
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.user-tool-btn:hover { background: var(--color-bg-alt); color: var(--color-accent); }
/* status badges — dot + tint */
.user-status-pending,
.user-status-rejected,
.user-status-hidden,
.user-status-approved {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.user-status-pending::before,
.user-status-rejected::before,
.user-status-hidden::before,
.user-status-approved::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.user-status-pending  { background: var(--color-accent-2-light); color: #9a6b15; }
.user-status-rejected { background: var(--color-error-bg); color: var(--color-error); }
.user-status-hidden   { background: var(--color-bg-alt); color: var(--color-muted); }
.user-status-approved { background: var(--color-success-bg); color: var(--color-success); }
.user-edit-card { margin-bottom: 1.25rem; }
.user-field-divider { margin-bottom: 0.25rem; }
.user-field-help { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 0.25rem; }
.user-edit-actions { display: flex; justify-content: space-between; gap: 1rem; }


/* =============================================================================
   SHOP — cart / checkout / order pages (shop-*.tpl)
   ============================================================================= */

/* --- Add-to-cart toast (shop-scripts-core.tpl builds it) ---- */
/* The badge pulse alone is not an answer to "did that work?" — on a phone the
   header is off screen by the time you have scrolled to a product. */
.shop-toast {
  position: fixed;
  z-index: 1080;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: min(26rem, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.shop-toast.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.shop-toast.is-warn { border-left-color: var(--color-accent-2-dark); }
.shop-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-toast-body strong { color: var(--color-heading); }
.shop-toast-body span { color: var(--color-muted); overflow-wrap: anywhere; }
.shop-toast-link { flex: none; align-self: center; font-weight: var(--fw-medium); white-space: nowrap; }
.shop-toast-close {
  flex: none;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.shop-toast-close:hover { background: var(--color-bg-alt); color: var(--color-heading); }
@media (max-width: 575.98px) {
  /* above the checkout's fixed action bar, never under it */
  .shop-toast { inset-inline: var(--space-sm); inset-block-end: calc(var(--space-sm) + 84px); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .shop-toast { transition: opacity var(--transition); transform: none; } }

/* nothing left to add: the button says so instead of counting into a refusal */
.btn-one.is-maxed, .btn-one.is-maxed:hover { background: var(--color-bg-alt); color: var(--color-muted); box-shadow: none; transform: none; }

/* --- Product listing (shop-list.tpl) ------------------------ */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.9em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.chip-count { font-size: var(--fs-xs); opacity: 0.7; font-variant-numeric: tabular-nums; }
.shop-count { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.list-search { display: flex; gap: var(--space-2xs); max-width: 26rem; margin-bottom: var(--space-md); }
.list-search input[type="search"] {
  flex: 1;
  padding: 0.45em 0.9em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.list-search input[type="search"]:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.filter-active { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.filter-clear { font-size: var(--fs-xs); }
.shop-list-intro { margin-top: var(--space-xl); max-width: var(--measure); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-md);
}
@media (max-width: 575.98px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
}

/* --- Product card (partials/cards/product.tpl) -------------- */
.card-product { display: flex; flex-direction: column; }
.card-product .card-img { position: relative; }
.card-product .card-img img { aspect-ratio: 1; }
.card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--color-bg-alt);
  color: var(--color-border-strong);
  font-size: 2rem;
}
.card-flags { position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.tag-sale    { background: var(--color-accent-2-light); color: var(--color-accent-2-contrast); }
.tag-low     { background: var(--color-bg-alt); color: var(--color-muted); }
.tag-soldout { background: var(--color-error-bg); color: var(--color-error); }
.card-product .card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-sm) var(--space-sm) var(--space-md); }
.card-product .card-title { font-size: var(--fs-base); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.card-product .card-title a { color: var(--color-heading); text-decoration: none; }
.card-product .card-title a:hover { color: var(--color-accent); }
.card-product .card-summary { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.card-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-xs); }
.card-buy-note { font-size: var(--fs-xs); color: var(--color-muted); }
.card-buy-note.is-incart { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-accent); font-weight: var(--fw-medium); }
.card-product.is-soldout .card-img img { opacity: 0.55; filter: saturate(0.4); }

/* Price — printed by partials/shop-price.tpl everywhere */
.price { display: inline-flex; align-items: baseline; gap: var(--space-2xs); font-variant-numeric: tabular-nums; }
.price-now { font-weight: var(--fw-semibold); color: var(--color-heading); }
.price-was { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--color-muted); }
.price.is-sale .price-now { color: var(--color-error); }
.price-lg { font-size: var(--fs-h3); margin-block: var(--space-xs) var(--space-sm); }
.price-lg .price-was { font-size: var(--fs-lg); }

/* --- Product page (shop-product.tpl) ------------------------ */
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.product-figure { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); }
.product-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-figure .card-img-placeholder { font-size: 3rem; }
.product-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); padding: 0; }
.product-thumbs a { display: block; width: 72px; height: 72px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.product-thumbs a:hover, .product-thumbs a.is-active { border-color: var(--color-accent); }
.product-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-cat { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-accent); text-decoration: none; margin-bottom: var(--space-xs); }
.product-title { font-size: var(--fs-h2); margin-bottom: var(--space-xs); }
.product-subtitle { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.product-stock { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-success); margin-bottom: var(--space-md); }
.product-stock.is-low { color: var(--color-accent-2-dark); }
.product-stock.is-out { color: var(--color-error); }

.product-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); border-block: 1px solid var(--color-border); }
.product-add-btn { min-height: 48px; flex: 1; min-width: 12rem; }
.product-add-btn.is-added { background: var(--color-success); }
/* everything the shop has is already in this basket — a fact about the button,
   never about the stock line above it */
.product-add-full { justify-content: space-between; }
.product-add-full p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
.product-add-note { margin: var(--space-xs) 0 0; font-size: var(--fs-sm); color: var(--color-muted); }
.product-add-note[hidden] { display: none; }
.product-soldout { padding: var(--space-sm) 0; border-block: 1px solid var(--color-border); }
.stock-notify-row { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.stock-notify-row .form-control { flex: 1; min-width: 0; }
.stock-notify-msg { margin: var(--space-xs) 0 0; font-size: var(--fs-sm); color: var(--color-success); }

.product-facts { margin: var(--space-md) 0 0; font-size: var(--fs-sm); }
.product-facts li { display: flex; gap: var(--space-xs); padding-block: 0.2rem; }
.product-facts li span { min-width: 6rem; color: var(--color-muted); }
.product-fact-note { color: var(--color-muted); }
.product-assurance { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-md); font-size: var(--fs-xs); color: var(--color-muted); }
.product-assurance i { color: var(--color-accent); margin-right: var(--space-2xs); }
.product-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.product-tags .tag-basic { text-decoration: none; }

.product-detail { max-width: var(--measure); margin-top: var(--space-xl); }
.product-rail { margin-top: var(--space-xl); }
.product-rail h2 { font-size: var(--fs-h3); margin-bottom: var(--space-md); }

@media (max-width: 991.98px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* --- Basket page (shop-cart.tpl) ---------------------------- */
/* Shares the checkout's layout + summary card; only the item rows are its own.
   Layout rules live with .checkout-layout below (one place, two pages). */

.cart-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto 40px;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}
.cart-item + .cart-item { border-top: 1px solid var(--color-border); }
.cart-item-media { display: block; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-alt); }
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { min-width: 0; }
.cart-item-title { display: block; font-weight: var(--fw-medium); color: var(--color-heading); text-decoration: none; }
.cart-item-title:hover { color: var(--color-accent); }
.cart-item-unit { font-size: var(--fs-sm); color: var(--color-muted); margin-top: 2px; }
.cart-item-unit s { margin-right: 0.35rem; }
.cart-item-unit-label { font-size: var(--fs-xs); }
.cart-item-note { display: flex; align-items: center; gap: var(--space-2xs); margin: 0.35rem 0 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-muted); }
.cart-item-error { display: flex; align-items: center; gap: var(--space-2xs); margin: 0.35rem 0 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-error); }
.cart-item-total { text-align: right; font-weight: var(--fw-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-item-total s { display: block; font-weight: var(--fw-normal); font-size: var(--fs-sm); color: var(--color-muted); }
.cart-item-remove { flex: none; }
/* .icon-btn is declared further down (checkout primitives) — win on specificity
   rather than on source order, so the red hover survives a reshuffle */
.cart-item-remove.icon-btn:hover { color: var(--color-error); background: var(--color-error-bg); }
.cart-item.is-soldout .cart-item-media img { opacity: 0.5; }
.cart-continue { margin: var(--space-md) 0 0; }

.shop-qty { display: inline-flex; align-items: center; gap: 0.25rem; }
.shop-qty input[data-shop-qty] { width: 3rem; height: 36px; text-align: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 0.2rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.shop-qty input[data-shop-qty]::-webkit-outer-spin-button,
.shop-qty input[data-shop-qty]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-qty-btn { width: 36px; height: 36px; border: 1px solid var(--color-border-strong); background: var(--color-bg); border-radius: var(--radius); color: var(--color-heading); cursor: pointer; line-height: 1; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.shop-qty-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }

@media (max-width: 767.98px) {
  /* two lines: media + title on top, stepper and money underneath */
  .cart-item { grid-template-columns: 64px minmax(0, 1fr) 40px; row-gap: var(--space-xs); padding: var(--space-sm); }
  .cart-item-media { width: 64px; height: 64px; }
  .cart-item-qty { grid-column: 2; }
  .cart-item-total { grid-column: 3 / -1; grid-row: 2; align-self: center; }
  .cart-item-remove { grid-column: 3; grid-row: 1; align-self: start; }
}

/* --- Order confirmation (shop-checkout-ok.tpl) -------------- */
.shop-order-box { max-width: 640px; margin: 0 auto; }
.shop-summary-items { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.shop-summary-items li { display: flex; align-items: baseline; gap: var(--space-xs); padding: 0.35rem 0; font-size: var(--fs-sm); }
.shop-summary-qty { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.shop-summary-title { flex: 1; min-width: 0; color: var(--color-heading); }
.shop-summary-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-summary-rows { margin: 0; }
.shop-summary-rows > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.4rem 0; }
.shop-summary-rows dt { color: var(--color-muted); font-weight: 400; }
.shop-summary-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.shop-summary-total { border-top: 1px solid var(--color-border); margin-top: 0.35rem; padding-top: 0.6rem !important; font-size: var(--fs-lg); font-weight: 700; }
.shop-summary-total dt { color: inherit; font-weight: 700; }
.shop-order-paid { display: inline-block; background: var(--color-success-bg); color: var(--color-success); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; margin-left: 0.5rem; text-transform: uppercase; }
.shop-order-pending h2 { color: var(--color-muted); }
.shop-order-summary { margin: 1.5rem 0; }
.shop-empty { text-align: center; padding: 3rem 1.5rem; }
.shop-empty > i { display: block; font-size: 1.75rem; color: var(--color-muted); margin-bottom: var(--space-xs); }
.shop-empty .btn-two { margin-top: 1rem; }

/* back-in-stock notify form (product page, out of stock) */
.stock-notify-form { margin-top: 0.75rem; max-width: 26rem; }
.stock-notify-form label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.stock-notify-form [data-stock-notify-msg] { margin-top: 0.6rem; color: var(--color-accent); font-weight: 600; }


/* =============================================================================
   CHECKOUT — one-page guest checkout (shop-checkout.tpl)
   Design system handoff 2026-08-02. Neutral, reusable class names; every value
   comes from a token, so a project re-themes this by overriding :root only.
   ============================================================================= */

/* --- Form primitives the checkout composes with ------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); }
.form-field { margin-bottom: var(--space-sm); min-width: 0; }
.form-field-full { grid-column: 1 / -1; }
.form-field > .form-label { display: inline-block; margin-bottom: 0.25rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-heading); }
.form-field .req { color: var(--color-error); }
.form-field .form-hint { display: block; margin: 0.25rem 0 0; }
.form-error-msg { display: flex; align-items: flex-start; gap: var(--space-2xs); margin: 0.25rem 0 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-error); }
.form-field.has-error .form-control,
.form-field.has-error .form-select { border-color: var(--color-error); }
.form-field.has-error .form-control:focus,
.form-field.has-error .form-select:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
@media (max-width: 575.98px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.btn-sm { padding: 0.45em 1em; font-size: var(--fs-sm); }
.btn-link { border: 0; background: none; padding: var(--space-2xs); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: inherit; text-decoration: underline; cursor: pointer; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: none; color: var(--color-muted); cursor: pointer; }
.icon-btn:hover { background: var(--color-bg-alt); color: var(--color-heading); }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -0.1em; }
@keyframes spin { to { transform: rotate(360deg); } }
button.is-busy { pointer-events: none; opacity: 0.9; }

/* --- Layout: form + sticky summary -------------------------- */
/* The basket page uses the same grid (.cart-*), so the two steps of the flow
   line up column-for-column. */
.checkout-layout,
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-xl); align-items: start; }
.checkout-main,
.cart-main { min-width: 0; }
.checkout-aside,
.cart-aside { position: sticky; top: calc(var(--header-height) + var(--space-md)); min-width: 0; }
@media (max-width: 1199.98px) {
  .checkout-layout,
  .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-lg); }
}
@media (max-width: 991.98px) {
  .checkout-layout,
  .cart-layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .checkout-aside { position: static; order: -1; width: 100%; }
  /* the basket summary stays UNDER the items: the shopper is still editing
     quantities here, so the list is the thing that must be at the top */
  .cart-aside { position: static; width: 100%; }
  .checkout-main,
  .cart-main { width: 100%; }
  /* room for the fixed action bar */
  .shop-checkout { padding-bottom: 96px; }
}

/* --- Step strip --------------------------------------------- */
.checkout-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; margin: 0 0 var(--space-md); padding: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.checkout-steps li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.checkout-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--color-border-strong); }
.checkout-steps .is-current { color: var(--color-heading); font-weight: var(--fw-semibold); }
.checkout-steps a { color: var(--color-muted); text-decoration: none; }
.checkout-steps a:hover { color: var(--color-accent); }

/* --- Section blocks ----------------------------------------- */
.co-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-md); margin: 0 0 var(--space-sm); min-width: 0; }
.co-section-title { display: flex; align-items: center; gap: var(--space-xs); float: left; width: 100%; padding: 0; margin: 0 0 var(--space-sm); font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--color-heading); }
.co-section-title + * { clear: both; }
.co-step-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--color-accent-light); color: var(--color-accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.co-note { margin-bottom: var(--space-md); }
.co-note > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-accent); }
.co-note > summary::marker { color: var(--color-border-strong); }
.co-note .form-field { margin: var(--space-xs) 0 0; }
/* why an option list is shorter than usual (pickup-only basket). A muted line
   above the cards was read as fine print and the missing option still looked
   like a bug — this is a callout in the site's info voice, and the store icon
   is the same one the summary marks the offending line with */
.co-restriction { display: flex; align-items: flex-start; gap: var(--space-xs); margin: 0 0 var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid rgba(22, 160, 127, 0.25); border-radius: var(--radius-md); background: var(--color-info-bg); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.45; color: var(--color-heading); }
.co-restriction .icon { flex: none; margin-top: 0.15em; font-size: 1.1em; color: var(--color-info); }

/* the same fact on the line that causes it, in the order summary */
.pickup-badge { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: 0.3rem; padding: 0.1rem var(--space-xs); border-radius: var(--radius-pill); background: var(--color-info-bg); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-info); }

/* --- Opt-in reveal blocks (R1, different address) ------------ */
.reveal { border-top: 1px solid var(--color-border); margin-top: var(--space-sm); padding-top: var(--space-sm); }
.reveal > .form-check { margin-bottom: 0; }
.reveal > .form-check label { font-weight: var(--fw-medium); color: var(--color-heading); }
.reveal-body { display: none; border: 0; margin: var(--space-sm) 0 0; padding: var(--space-sm) 0 0; border-top: 1px dashed var(--color-border); min-width: 0; }
.reveal:has(> .form-check input:checked) .reveal-body { display: block; }

/* --- Option cards (delivery / payment radios) --------------- */
.option-list { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; }
.option-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), opacity var(--transition); }
.option-card:hover { border-color: var(--color-accent); }
.option-card input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg); cursor: pointer; transition: border var(--transition); }
.option-card input[type="radio"]:checked { border: 6px solid var(--color-accent); }
.option-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-light); box-shadow: inset 0 0 0 1px var(--color-accent); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.option-body { display: block; flex: 1; min-width: 0; }
.option-title { display: flex; align-items: center; gap: var(--space-xs); font-weight: var(--fw-medium); color: var(--color-heading); }
.option-title .icon { flex: none; color: var(--color-muted); }
.option-card:has(input:checked) .option-title .icon { color: var(--color-accent); }
.option-desc { display: block; font-size: var(--fs-sm); color: var(--color-muted); margin: 2px 0 0; }
.option-price { flex: none; margin-left: auto; font-weight: var(--fw-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.option-price-free { color: var(--color-success); }
/* Unavailable: stays in place, explains itself, posts nothing */
.option-card.is-unavailable { background: var(--color-bg-alt); border-style: dashed; border-color: var(--color-border); cursor: not-allowed; opacity: 0.7; }
.option-card.is-unavailable:hover { border-color: var(--color-border); }
.option-card.is-unavailable .option-title,
.option-card.is-unavailable .option-price { color: var(--color-muted); }
.option-card.is-unavailable input[type="radio"] { opacity: 0.4; }
.option-reason { flex-basis: 100%; display: none; align-items: center; gap: var(--space-2xs); margin: 0 0 0 28px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-muted); }
.option-card.is-unavailable .option-reason { display: flex; }
/* Single-option shop: the radio stays in the DOM, the chrome does not */
.option-list.is-single .option-card { cursor: default; background: var(--color-bg-alt); border-color: var(--color-border); box-shadow: none; }
.option-list.is-single .option-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.option-list.is-single .option-card:hover { border-color: var(--color-border); }

/* Extra panel attached under a chosen option (locker picker) */
.option-block { display: flex; flex-direction: column; }
.option-extra { margin: var(--space-xs) 0 0 28px; }
.option-block:not(:has(input:checked)) .option-extra { display: none; }

/* --- Locker picker ------------------------------------------ */
.locker-chosen { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-accent); border-radius: var(--radius); background: var(--color-bg); }
.locker-chosen .icon { color: var(--color-accent); }
.locker-chosen-body { display: block; flex: 1; min-width: 0; }
.locker-chosen-name { display: block; font-weight: var(--fw-medium); color: var(--color-heading); }
.locker-chosen-addr { display: block; font-size: var(--fs-sm); color: var(--color-muted); }
.picker-trigger { min-height: 44px; margin-top: var(--space-xs); }

.picker { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.picker[hidden] { display: none; }
@media (min-width: 768px) { .picker { align-items: center; padding: var(--space-md); } }
.picker-backdrop { position: absolute; inset: 0; background: rgba(18, 22, 27, 0.45); border: 0; padding: 0; }
.picker-panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(86vh, 720px); background: var(--color-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); overflow: hidden; }
@media (min-width: 768px) { .picker-panel { border-radius: var(--radius-lg); } }
.picker-head { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-xs); }
.picker-head h2 { margin: 0; font-size: var(--fs-h4); }
.picker-head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--color-muted); }
.picker-search { padding: var(--space-xs) var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-border); }
.picker-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: var(--space-xs); -webkit-overflow-scrolling: touch; }
.picker-group { position: sticky; top: 0; z-index: 1; padding: var(--space-xs) var(--space-sm) var(--space-2xs); background: var(--color-bg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-muted); }
.picker-item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 56px; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius); background: none; font: inherit; text-align: left; cursor: pointer; transition: background var(--transition); }
.picker-item:hover { background: var(--color-accent-light); }
.picker-item .icon { flex: none; color: var(--color-muted); }
.picker-item > span { display: flex; flex-direction: column; min-width: 0; }
.picker-item-name { display: block; font-weight: var(--fw-medium); color: var(--color-heading); }
.picker-item-addr { display: block; font-size: var(--fs-sm); color: var(--color-muted); }
.picker-empty { padding: var(--space-md); text-align: center; color: var(--color-muted); font-size: var(--fs-sm); }
.picker-foot { padding: var(--space-xs) var(--space-md) var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-muted); }
/* the plain text field is the no-JS baseline; the picker replaces it */
[data-locker][data-enhanced] [data-locker-raw] { display: none; }
[data-locker]:not([data-enhanced]) [data-picker-open],
[data-locker]:not([data-enhanced]) [data-locker-chosen] { display: none; }

/* --- Turnstile slot ----------------------------------------- */
.verify-slot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.verify-note { flex: 1; min-width: 12rem; font-size: var(--fs-xs); color: var(--color-muted); margin: 0; }

/* --- Summary ------------------------------------------------ */
.summary-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.summary-card > summary,
.summary-card > .summary-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); cursor: pointer; list-style: none; font-weight: var(--fw-semibold); color: var(--color-heading); }
/* the basket's head is a heading, not a disclosure control */
.summary-card > .summary-head { cursor: default; }
.summary-card > .summary-head .icon { color: var(--color-muted); }
.summary-card > summary::-webkit-details-marker { display: none; }
.summary-card > summary .icon { transition: transform var(--transition); color: var(--color-muted); }
.summary-card[open] > summary .icon-chevron { transform: rotate(180deg); }
.summary-head-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.summary-body { padding: var(--space-md); }

.summary-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.summary-item { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--fs-sm); }
.summary-item img { flex: none; width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; background: var(--color-bg-alt); }
.summary-item-body { display: block; flex: 1; min-width: 0; }
.summary-item-title { display: block; color: var(--color-heading); font-weight: var(--fw-medium); }
.summary-item-meta { display: block; color: var(--color-muted); }
.summary-item-total { flex: none; font-weight: var(--fw-medium); color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-item-total s { display: block; font-weight: var(--fw-normal); color: var(--color-muted); }
.summary-item.is-soldout .summary-item-title,
.summary-item.is-soldout .summary-item-total { color: var(--color-error); }
.summary-item.is-soldout img { opacity: 0.5; }
.summary-edit { margin: var(--space-sm) 0 0; font-size: var(--fs-sm); }

.summary-rows { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
/* first thing in the card (basket page): no rule and no gap above it */
.summary-rows-flush { margin-top: 0; padding-top: 0; border-top: 0; }
.summary-note { margin: var(--space-sm) 0 0; font-size: var(--fs-xs); color: var(--color-muted); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding: 2px var(--space-2xs); border-radius: var(--radius); }
.sum-row .sum-label { color: var(--color-text); }
.sum-row .sum-value { font-variant-numeric: tabular-nums; color: var(--color-heading); white-space: nowrap; }
.sum-row-discount .sum-label b { color: var(--color-success); font-weight: var(--fw-semibold); }
.sum-row-discount .sum-value { color: var(--color-success); }
.sum-row-total { margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); align-items: flex-start; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.sum-row-total .sum-label small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--color-muted); }
.sum-row-total .sum-value { font-size: var(--fs-xl); }
.sum-row[hidden] { display: none; }
.sum-row.is-updated { animation: sumFlash 1.4s ease; }
@keyframes sumFlash { 0%, 25% { background: var(--color-accent-2-light); } 100% { background: transparent; } }
.sum-value s { color: var(--color-muted); font-weight: var(--fw-normal); margin-right: var(--space-2xs); }
/* nothing to pay yet: an em dash, not a payable-looking number with a currency */
.sum-row.is-unpriced .sum-value { color: var(--color-error); }
.sum-row.is-unpriced .cur { display: none; }
.sum-value .is-free { color: var(--color-success); }

.summary-status { display: none; align-items: center; gap: var(--space-xs); margin: var(--space-xs) 0 0; font-size: var(--fs-xs); color: var(--color-muted); }
.is-repricing .summary-status { display: flex; }
.is-repricing .summary-rows { opacity: 0.55; transition: opacity var(--transition); }
.shop-postage-error { display: flex; align-items: flex-start; gap: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-error); margin: var(--space-sm) 0 0; }

/* Coupon */
.shop-coupon { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--color-border); }
/* Descendant, not child: the summary sits inside the <details>, which is itself
   inside .shop-coupon — `>` never matched and every site got the browser's
   default ▼ marker (found on sadike). */
.shop-coupon summary { list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 24px; }
.shop-coupon summary::-webkit-details-marker { display: none; }
.shop-coupon-row { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.shop-coupon-row .form-control { flex: 1; min-width: 0; text-transform: uppercase; }
.shop-coupon-msg { display: flex; align-items: flex-start; gap: var(--space-2xs); margin: var(--space-xs) 0 0; font-size: var(--fs-xs); }
.shop-coupon-error { color: var(--color-error); }
.shop-coupon-applied { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); background: var(--color-success-bg); color: var(--color-success); font-size: var(--fs-sm); }
.shop-coupon-applied .icon { flex: none; }
.shop-coupon-applied .shop-coupon-msg { flex: 1; min-width: 0; margin: 0; font-size: inherit; }
.shop-coupon-remove { border: 0; background: none; padding: var(--space-2xs); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: inherit; text-decoration: underline; cursor: pointer; }
/* one state at a time: while a coupon is on the basket the field is the strip */
.shop-coupon:has([data-shop-coupon-applied]:not([hidden])) > details { display: none; }

/* Submit area */
.summary-submit { margin-top: var(--space-md); }
.summary-submit .btn-one { width: 100%; min-height: 52px; }
.shop-summary-legal { margin: var(--space-xs) 0 0; font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }
.summary-assurance { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-sm); font-size: var(--fs-xs); color: var(--color-muted); }
.summary-assurance span { display: flex; align-items: center; gap: var(--space-xs); }
.summary-assurance .icon { flex: none; color: var(--color-accent); }

/* --- Fixed mobile action bar -------------------------------- */
.checkout-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 16px rgba(18, 22, 27, 0.08); }
@media (max-width: 991.98px) { .checkout-bar { display: flex; } }
.checkout-bar-total { display: flex; flex-direction: column; line-height: 1.25; }
.checkout-bar-total span { font-size: var(--fs-xs); color: var(--color-muted); }
.checkout-bar-total b { font-size: var(--fs-lg); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.checkout-bar .btn-one { flex: 1; min-height: 48px; }

/* --- Error summary ------------------------------------------ */
.shop-checkout-error { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-md); }
.error-summary ul { margin: var(--space-2xs) 0 0; padding-left: 1.1em; font-size: var(--fs-sm); }
.error-summary a { color: inherit; }

/* --- Leaving-the-site overlay ------------------------------- */
.redirect-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(3px); }
.redirect-overlay[hidden] { display: none; }
.redirect-card { max-width: 380px; padding: var(--space-lg); text-align: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.redirect-card .spinner { font-size: 1.75rem; color: var(--color-accent); margin-bottom: var(--space-sm); }
.redirect-card h2 { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }
.redirect-card p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }

/* --- Static (non-editable) value, e.g. a single delivery country */
.static-value { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0.55em 0.9em; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-alt); color: var(--color-heading); font-weight: var(--fw-medium); }
.static-value .icon { color: var(--color-muted); }

/* The row flash and the spinner are the only motion here; a reader who asked
   for less gets a static ring instead of the flash. The global reduce rule
   below zeroes durations, which would leave the flash colour painted on. */
@media (prefers-reduced-motion: reduce) {
  .sum-row.is-updated { animation: none; box-shadow: inset 0 0 0 1px var(--color-accent-2); }
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1199px) { .text-lg { font-size: var(--fs-lg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .main-menu.main-header-fixed--pin { animation: none; }
  .scroll-top { transition: none; }
}


/* =============================================================================
   SITE THEME — Hiša Neža (port of the 2013 neza.css onto the new front)
   Layout: 960px page, content 610 / sidebar 320; dark translucent header over
   the hero; orange #e17038 accent; Oxygen body, BenchNine top bar.
   sections.css stays empty — everything site-specific lives in this section.
   ============================================================================= */
:root {
  --site-page-width: 990px;
  --site-header-h: 130px;
  --site-dark: #1c1f23;
  --site-bar: rgba(0, 0, 0, 0.75);
  --site-sidebar-bg: #e9e9e9;
  --site-sidebar-hover: #dfdfdf;
  --site-text: #333;
  --site-muted: #777;
  --site-heading: #222;
}
html { scroll-behavior: smooth; }
body {
  background: #efefef;
  color: var(--site-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
body.home { background: #fff; }
.container { max-width: var(--site-page-width); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: #000; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 300; color: var(--site-heading); margin: 0; }

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 200;
  background: var(--site-bar);
  color: #fff;
}
.site-header.has-hero { position: absolute; top: 0; left: 0; right: 0; }
.site-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--site-header-h);
}
.site-brand { flex: 0 0 auto; padding: 0.5rem 0 0.5rem 0.625rem; }
.site-brand img { display: block; height: 110px; width: auto; }
.site-header-right { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; }

.top-bar { display: flex; align-items: center; gap: 0.375rem; list-style: none; margin: 0; padding: 1.25rem 0.625rem 0 0; }
.top-bar a, .lang-switch a, .lang-switch-current {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #efefef;
  padding: 1px 4px;
  line-height: 1.4;
}
.top-bar a:hover { background: #fff; color: #000; }
.top-bar-sep::after { content: " |"; color: #efefef; font-family: var(--font-nav); font-size: 0.8125rem; }
.lang-switch { display: flex; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.lang-switch-item { margin: 0; }
.lang-switch-current { background: #fff; color: #000; }

.site-nav { padding: 1.125rem 0.625rem 0 0; }
.site-nav-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 0.9375rem; list-style: none; margin: 0; padding: 0; }
.site-nav-item { position: relative; margin: 0; }
.site-nav-item > a {
  display: block;
  font-size: 1.0625rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #aaa;
  padding: 0 0 5px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav-item > a:hover, .site-nav-item.active > a, .site-nav-item.open > a { color: #fff; border-bottom-color: var(--color-accent); }
.site-nav-sub {
  display: none;
  position: absolute;
  left: 0; top: 100%;
  min-width: 240px;
  margin: 0; padding: 15px 0 0;
  list-style: none;
  z-index: 300;
}
.site-nav-item.has-sub:hover .site-nav-sub, .site-nav-item.has-sub:focus-within .site-nav-sub, .site-nav-item.open .site-nav-sub { display: block; }
.site-nav-sub li { margin: 0; background: var(--site-bar); border-top: 1px solid #000; }
.site-nav-sub a { display: block; padding: 14px 20px 15px; font-size: 0.875rem; color: #ddd; text-transform: uppercase; }
.site-nav-sub a:hover, .site-nav-sub li.active a { color: #fff; background: #111; }
.nav-toggle {
  display: none;
  width: 44px; height: 40px;
  margin: 1rem 0.625rem 0 0;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: #efefef; margin: 5px 0; }

/* --- Hero strip + homepage slider -------------------------------------- */
.hero-strip {
  height: clamp(200px, 40vw, 500px);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.home-slider { position: relative; }
.home-slide {
  height: clamp(240px, 48vw, 620px);
  background-position: center top;
  background-size: cover;
  display: flex;
  align-items: flex-end;
}
.home-slide .container { padding-bottom: clamp(2rem, 8vw, 150px); }
.home-slide-content {
  width: 60%;
  border-top: 1px solid #fff;
  padding: 11px 0 17px;
}
.home-slide-title {
  display: inline-block;
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3.6vw, 2.25rem);
  line-height: 1.1;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 5px 3px 9px #000;
}
.home-slide-title a { color: #fff; }
.home-slide-sub { margin: 0; color: #fff; font-size: 0.9375rem; line-height: 1.25; text-shadow: 5px 3px 9px #000; }
.home-slider-nav { position: absolute; right: 30px; bottom: 44px; z-index: 5; display: flex; gap: 2px; }
.home-slider-nav button {
  width: 39px; height: 39px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.home-slider-nav button:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* --- Page layout ------------------------------------------------------- */
.page { padding: 0 0.9375rem 30px; }
.page-layout { display: grid; grid-template-columns: minmax(0, 610fr) 320fr; gap: 0 30px; align-items: start; }
.page-main { min-width: 0; padding-top: 30px; }
.page-side { padding-top: 30px; }
.page-heading {
  font-size: 1.5625rem;
  line-height: 1.32;
  margin: 10px 0 20px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--site-heading);
}
.page-subheading { font-size: 1.25rem; line-height: 1.3; margin: -10px 0 20px; font-weight: 300; text-transform: uppercase; color: #555; }
.page-main .rte-content, .text-column .rte-content { color: var(--site-text); font-size: 0.875rem; }
.page-main .rte-content p { line-height: 1.45; margin: 10px 0; }
.page-main .rte-content p a { background: #f8f8f8; padding: 1px 4px; color: var(--color-accent); }
.page-main .rte-content p a:hover { color: #000; }
.page-main .rte-content h2, .page-main .rte-content h3, .page-main .rte-content h4 { margin: 24px 0 8px; font-weight: 300; text-transform: uppercase; }
.page-main .rte-content h2 { font-size: 1.375rem; }
.page-main .rte-content h3 { font-size: 1.25rem; }
.page-main .rte-content h4 { font-size: 1.125rem; color: var(--color-accent); }
.page-main .rte-content ul { list-style-type: circle; margin: 0 0 0 40px; padding: 0; }
.page-main .rte-content li { padding: 3px; line-height: 1.3; }
.page-main .rte-content img { max-width: 100%; height: auto; }
.page-main .rte-content table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ddd; margin: 10px 0 20px; }
.page-main .rte-content td, .page-main .rte-content th { padding: 4px 5px; text-align: left; vertical-align: top; }
.page-main .rte-content tr:nth-child(odd) td { background: #f7f7f7; }
.page-main .rte-content thead td, .page-main .rte-content thead th, .page-main .rte-content th {
  color: var(--site-text);
  background: #ddd;
  line-height: 25px;
  border-right: 1px solid #efefef;
}
.post-image { margin: 0 0 20px; }
.post-image img { display: block; width: 100%; height: auto; }
.post-cta { margin: 30px 0 10px; }
.btn-book, a.btn-book {
  display: inline-block;
  padding: 10px 14px;
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}
.btn-book:hover, a.btn-book:hover { background: var(--color-accent-dark); color: #fff; }
.terms-link { margin: 40px 0 10px; }
.terms-link a { display: inline-block; padding: 5px 8px; background: #e9e9e9; color: var(--site-text); font-size: 0.8125rem; }
.terms-link a:hover { background: #aaa; color: #fff; }

/* --- Sidebar ----------------------------------------------------------- */
.side-nav { display: block; }
.side-nav-link {
  display: block;
  padding: 15px 15px 5px;
  font-size: 1.125rem;
  text-transform: uppercase;
  color: #000;
  background: var(--site-sidebar-bg);
  border-bottom: 1px solid #aaa;
}
.side-nav-link:first-child { border-top: 1px solid #aaa; }
.side-nav-link:hover, .side-nav-link.active { background: var(--site-sidebar-hover); color: #000; }
.side-nav-link.active { border-bottom-color: var(--color-accent); }
.side-nav-desc { display: block; text-transform: none; font-size: 0.75rem; line-height: 1.2; color: #888; margin: 5px 0 10px; }
.side-nav-link:not(:has(.side-nav-desc)) { padding-bottom: 15px; }

/* --- Gallery ----------------------------------------------------------- */
.photo-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0; }
.photo-gallery a { display: block; }
.photo-gallery img { display: block; width: 90px; height: 90px; object-fit: cover; padding: 5px; border: 1px solid #d3d3d3; background: #fff; }

/* --- Contact page ------------------------------------------------------ */
.map-embed iframe { display: block; width: 100%; height: 450px; border: 0; }
.map-link { margin: 5px 0 20px; font-size: 0.875rem; }
.map-link a { color: #aaa; }
.contact-box { background: #303030; color: #999; padding: 25px 30px 30px; }
.contact-box h2 { color: #fff; font-size: 1.4375rem; text-transform: uppercase; margin: 0 0 10px; }
.contact-box address { font-style: normal; color: #ccc; line-height: 1.3; margin: 0 0 10px; }
.contact-box p { line-height: 1.3; margin: 0; padding: 3px 0 10px; }
.contact-box a { color: #fff; }
.contact-box a:hover { color: var(--color-accent); }

/* --- Homepage teasers + text columns ----------------------------------- */
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 30px 0; }
.teaser-card { background: #fff; padding: 15px 15px 20px; min-height: 220px; box-shadow: 0 3px 33px -10px #444; }
.teaser-card img { display: block; width: 100%; height: auto; }
.teaser-title { margin: 10px 0; font-size: 1.25rem; text-transform: uppercase; }
.teaser-title a { color: #000; }
.teaser-title a:hover { color: var(--color-accent); }
.teaser-sub { margin: 5px 0 0; font-size: 0.75rem; line-height: 1.5; color: #999; }
.teaser-sub a { color: #999; }
.teaser-sub a:hover { color: #000; }
.text-columns { display: grid; grid-template-columns: 450fr 480fr; gap: 30px; margin: 20px 0; }
.text-column-title { display: inline-block; font-size: 1.375rem; color: #000; text-transform: uppercase; border-bottom: 1px solid #ddd; margin: 0 0 15px; }
.text-column .rte-content { color: #7c7c7c; font-size: 0.875rem; }
.text-column .rte-content p { line-height: 1.4; padding: 0 0 10px; margin: 0; }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--site-dark); color: #c5c5c5; margin-top: 30px; }
.footer-boxes { display: grid; grid-template-columns: 290fr 320fr 290fr; gap: 30px; padding: 40px 0 20px; }
.footer-box h3 { display: inline-block; color: #fff; font-size: 1.375rem; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--color-accent); margin: 0 0 15px; }
.footer-box p { font-size: 0.8125rem; line-height: 1.4; margin: 0 0 15px; color: #c5c5c5; }
.footer-box a { color: #fff; }
.footer-box a:hover { color: var(--color-accent); }
.footer-fb { display: inline-block; font-size: 0.8125rem; }
.footer-address { font-style: normal; font-size: 0.8125rem; line-height: 1.4; margin: 0 0 15px; }
.footer-address strong { display: block; font-size: 1.125rem; font-weight: 400; color: #fff; padding-bottom: 6px; }
.footer-icons { display: flex; gap: 10px; }
.footer-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #444; border-radius: 50%; color: #fff; opacity: 0.6; }
.footer-icons a:hover { opacity: 1; border-color: var(--color-accent); color: #fff; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-top: 20px; }
.footer-badges img { height: 20px; width: auto; opacity: 0.45; }
.footer-badges a:hover img { opacity: 1; }
.guest-quote { margin: 0; font-style: italic; }
.guest-quote p { font-size: 0.8125rem; }
.guest-quote i { color: rgba(255, 255, 255, 0.6); margin-right: 4px; }
.guest-quote-author { display: block; text-align: right; padding: 0 0 10px; color: var(--color-accent); font-size: 0.75rem; font-style: normal; }
.footer-legal { background: #fff; color: #828282; font-size: 0.6875rem; }
.footer-legal-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 15px 0.9375rem 30px; border-top: 1px solid #efefef; }
.footer-legal p { margin: 0; }
.footer-legal a { color: #828282; }
.footer-legal a:hover { color: #000; }
.footer-legal .credit { color: #fff; background: #555; padding: 1px 3px; border-radius: 2px; }
.footer-legal .credit:hover { color: #000; background: #ddd; }
.to-top { white-space: nowrap; }

/* --- Cookie bar -------------------------------------------------------- */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; background: #333; color: #999; padding: 20px 0; font-size: 0.8125rem; line-height: 1.4; }
.cookie-bar-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cookie-bar p { margin: 0; }
.cookie-bar i { opacity: 0.8; margin-right: 6px; }
.cookie-bar-accept { background: #4f4f4f; color: #efefef; border: 0; padding: 4px 10px; border-radius: 3px; font-size: 0.75rem; cursor: pointer; }
.cookie-bar-accept:hover { background: #666; color: #fff; }

/* --- Error page -------------------------------------------------------- */
.error-page { padding: 60px 0; text-align: center; }
.error-code { font-size: 4rem; font-weight: 300; color: var(--color-accent); margin: 0; line-height: 1; }
.error-page p { color: var(--site-text); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .site-header.has-hero { position: relative; }
  .site-header-inner { flex-wrap: wrap; align-items: center; min-height: 0; }
  .site-brand img { height: 80px; }
  .site-header-right { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
  .top-bar { padding: 0; }
  .nav-toggle { display: block; margin: 0; }
  .site-nav { display: none; width: 100%; padding: 0 0 1rem; }
  .site-header.nav-open .site-nav { display: block; }
  .site-nav-list { flex-direction: column; gap: 0; }
  .site-nav-item > a { padding: 10px 0; border-bottom: 1px solid #333; font-size: 0.9375rem; }
  .site-nav-sub { position: static; display: block; padding: 0 0 0 1rem; min-width: 0; }
  .site-nav-sub li { background: none; border: 0; }
  .site-nav-sub a { padding: 8px 0; }
  .page-layout { grid-template-columns: 1fr; }
  .page-side { padding-top: 10px; }
  .home-slide-content { width: 90%; }
  .home-slider-nav { display: none; }
  .teaser-grid { grid-template-columns: 1fr 1fr; }
  .text-columns, .footer-boxes { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575.98px) {
  .teaser-grid { grid-template-columns: 1fr; }
  .footer-legal-inner { flex-direction: column; text-align: center; }
  .site-brand img { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Hero slide: beat Swiper's .swiper-slide reset (display:block, height:100%),
   which loads after this sheet — two-class selectors keep the bottom-aligned text --- */
.home-swiper .home-slide {
  display: flex;
  align-items: flex-end;
  height: clamp(240px, 48vw, 620px);
  background-position: center top;
  background-size: cover;
}
.home-swiper .home-slide .container { width: 100%; padding-bottom: clamp(2rem, 8vw, 150px); }