/*
 * Stikerlab theme styles (design approved 22.10.2026, modelled on wallmur.com).
 * One family, Jost; white ground, warm grey sections, green for trust and prices,
 * terracotta only on "Dodaj u korpu". Contrast is WCAG AA: white on terracotta is 4.49:1,
 * so the buy button always uses large bold text (19px, 700).
 * Order: fonts, tokens, base, layout, buttons, header, navigation, drawer, cards and rails,
 * homepage, category, motif page, forms, trust bar, footer, kit, motion.
 */

/* ---------- Fonts (self-hosted, latin + latin-ext) ---------- */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --sl-bg: #FFFFFF;
  --sl-soft: #ECEBDE;          /* sections, gallery ground (palette 22.10.2026) */
  --sl-soft-2: #F4F3EC;        /* image placeholders, icon circles */
  --sl-text: #1E1E1C;
  --sl-text-2: #3C3A36;        /* body copy in long text */
  --sl-muted: #66625B;         /* 6.1:1 on white */
  --sl-line: #DEDACA;          /* decorative borders */
  --sl-line-strong: #8A826B;   /* form borders, 3.8:1 on white */
  /* Greige palette from Andrej (22.10.2026): #A59D84, #C1BAA1, #D7D3BF, #ECEBDE. The accent and the
     footer are darker shades of the same hue, because the palette itself is too light for text. */
  --sl-khaki: #A59D84;         /* decorative only: 2.7:1 on white */
  --sl-sand: #C1BAA1;
  --sl-accent-50: #ECEBDE;     /* price field, selected option */
  --sl-accent-100: #D7D3BF;    /* announcement bar */
  --sl-accent: #57513F;        /* accent text and borders: 7.9:1 on white, 6.6:1 on accent-50 */
  --sl-accent-hover: #46412F;
  --sl-accent-900: #3A372E;    /* footer */
  --sl-on-dark: #ECEBDE;       /* 9.9:1 on the footer */
  --sl-on-dark-muted: #C1BAA1; /* 6.1:1 on the footer */
  --sl-heart: #000000;         /* filled hearts, the logo colour (Andrej, 23.10.2026) */
  --sl-buy: #25251F;           /* "Dodaj u korpu" only (Andrej, 24.10.2026; until then #A59D84 with dark text) */
  --sl-buy-hover: #3B3B33;
  --sl-buy-text: #FFFFFF;      /* 15.6:1 on --sl-buy, 11.3:1 on hover */
  --sl-todo: #C8512E;          /* todo outline and seam lines in the frame */
  --sl-error: #A33A1C;

  --sl-font: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --sl-fs-hero: clamp(2.375rem, 1.5rem + 3vw, 4rem);         /* 38 -> 64 */
  --sl-fs-banner: clamp(2rem, 1.1rem + 3vw, 3.5rem);          /* 32 -> 56, bold */
  --sl-fs-section: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);      /* 24 -> 32, light */
  --sl-fs-page: clamp(2rem, 1.65rem + 1.1vw, 2.625rem);       /* 32 -> 42, page H1 */
  --sl-fs-split: clamp(2rem, 1.4rem + 1.9vw, 3rem);           /* 32 -> 48, light */
  --sl-fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --sl-fs-body: 1rem;
  --sl-fs-small: 0.875rem;
  --sl-fs-xs: 0.75rem;

  --sl-space-1: 0.25rem;
  --sl-space-2: 0.5rem;
  --sl-space-3: 0.75rem;
  --sl-space-4: 1rem;
  --sl-space-5: 1.5rem;
  --sl-space-6: 2rem;
  --sl-space-7: 3rem;
  --sl-space-8: clamp(3rem, 2rem + 3vw, 4.5rem);

  --sl-radius-sm: 8px;
  --sl-radius-md: 10px;
  --sl-radius: 12px;
  --sl-radius-lg: 16px;
  --sl-pill: 999px;

  --sl-wrap: 1490px;          /* content width inside the gutters (Andrej, 23.10.2026; was 1360 including them) */
  --sl-gutter: clamp(16px, 3vw, 40px);

  --sl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sl-dur: 240ms;             /* every animation stays at or under 300 ms */
  --sl-shadow: 0 1px 2px rgb(30 30 28 / 0.05), 0 12px 32px rgb(30 30 28 / 0.08);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--sl-bg);
  color: var(--sl-text);
  font-family: var(--sl-font);
  font-size: var(--sl-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* component display rules must never reveal a hidden element */
svg.sl-icon { flex: none; }

h1, h2, h3, h4 { margin: 0 0 0.5em; font-family: var(--sl-font); line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--sl-fs-page); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--sl-fs-section); font-weight: 300; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1.0625rem; font-weight: 500; }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--sl-accent); }

:focus-visible { outline: 3px solid var(--sl-accent); outline-offset: 3px; border-radius: 4px; }

button, input, select, textarea { font: inherit; color: inherit; }

.sl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sl-skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px;
  background: var(--sl-text); color: #fff;
  border-radius: var(--sl-radius-sm);
  font-weight: 600;
}
.sl-skip:focus { top: 16px; }

/* Unconfirmed value from the docs. Always visible, so it can never ship unnoticed. */
.todo {
  display: inline-block;
  padding: 0 0.35em;
  background: #FFF1A8;
  color: #6B2B00;
  outline: 1px dashed var(--sl-todo);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1.45;
}

/* ---------- Layout ---------- */

.sl-wrap { width: 100%; max-width: calc(var(--sl-wrap) + 2 * var(--sl-gutter)); margin-inline: auto; padding-inline: var(--sl-gutter); }
.sl-main { display: block; min-height: 40vh; }
.sl-flow { padding-block: var(--sl-space-7); }
.sl-section { padding-block: var(--sl-space-6); }
.sl-section--soft { background: var(--sl-soft); }
.sl-section--lg { padding-block: var(--sl-space-8); }
.sl-section--end { padding-bottom: var(--sl-space-8); }
/* Homepage rhythm (Andrej, 24.10.2026): exactly 70px between all sections and before the footer.
   The hero has its own background and keeps its inner padding. */
.home .sl-main > section:not(.sl-hero) { padding-block: 0; }
.home .sl-main > section + section { margin-top: 70px; }
.home .sl-main > section:last-child { margin-bottom: 70px; }
.sl-mt-6 { margin-top: var(--sl-space-6); }
.sl-mt-8 { margin-top: var(--sl-space-8); }
.sl-flow--pdp { padding-top: var(--sl-space-5); }
.sl-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; }
.sl-icon--left { transform: rotate(90deg); }
.sl-icon--right { transform: rotate(-90deg); }

.sl-dialog { width: min(92vw, 560px); padding: 24px 28px 28px; border: 0; border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow); color: var(--sl-text); }
.sl-dialog::backdrop { background: rgb(30 30 28 / 0.45); }
.sl-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sl-dialog__title { margin: 0; font-size: 1.375rem; font-weight: 500; }
.sl-dialog ol { padding-left: 1.2em; line-height: 1.6; }
.sl-dialog li { margin-bottom: 8px; }
/* Conditions and privacy on the checkout (inc/cart.php): fixed head and foot, the text scrolls. */
.sl-dialog.sl-doc { width: min(94vw, 820px); max-width: none; max-height: min(88vh, 960px); padding: 0; overscroll-behavior: contain; }
.sl-doc[open] { display: flex; flex-direction: column; }
.sl-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--sl-line); }
.sl-doc__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 28px; }
.sl-doc__foot { display: flex; justify-content: flex-end; padding: 14px 28px; border-top: 1px solid var(--sl-line); }
@media (max-width: 599px) {
  .sl-dialog.sl-doc { width: 100vw; max-height: 92svh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .sl-doc__head, .sl-doc__body, .sl-doc__foot { padding-inline: 18px; }
  .sl-doc__foot .sl-btn { width: 100%; }
}

.sl-prose { max-width: 72ch; }
.sl-prose img { border-radius: var(--sl-radius); }
.sl-prose ul, .sl-prose ol { padding-left: 1.25em; }
.sl-prose table { width: 100%; border-collapse: collapse; }
.sl-prose th, .sl-prose td { padding: 8px 12px; border-bottom: 1px solid var(--sl-line); text-align: left; }

.sl-section-title { margin: 0 0 var(--sl-space-5); text-align: center; font-size: var(--sl-fs-section); font-weight: 300; }
.sl-eyebrow {
  margin: 0 0 var(--sl-space-2);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
.sl-eyebrow--green { color: var(--sl-accent); }
.sl-lead { font-size: var(--sl-fs-lead); line-height: 1.6; color: var(--sl-text-2); max-width: 62ch; }
.sl-small { font-size: var(--sl-fs-small); color: var(--sl-muted); }
.sl-center { text-align: center; }

.sl-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--sl-space-4); font-size: var(--sl-fs-small); color: var(--sl-muted); }
.sl-breadcrumbs a { color: var(--sl-muted); text-decoration: none; }
.sl-breadcrumbs a:hover { color: var(--sl-text); text-decoration: underline; }
.sl-breadcrumbs [aria-current] { color: var(--sl-text); }

@media (max-width: 599px) {
  .sl-hide-sm { display: none !important; }
}

/* ---------- Buttons ---------- */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-2);
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--sl-pill);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease), transform var(--sl-dur) var(--sl-ease);
}
/* No button moves on hover, nor anything inside it (Andrej, 24.10.2026): only colours change. */
.sl-btn[disabled], .sl-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.sl-btn--dark { background: var(--sl-text); color: #fff; }
.sl-btn--dark:hover { background: #000; color: #fff; }
.sl-btn--light { background: #fff; color: var(--sl-text); }
.sl-btn--light:hover { background: var(--sl-soft); color: var(--sl-text); }
.sl-btn--outline { border-color: var(--sl-line); background: #fff; color: var(--sl-text); }
.sl-btn--outline:hover { border-color: var(--sl-text); color: var(--sl-text); }
.sl-btn--outline-light { border-color: rgb(255 255 255 / 0.85); color: #fff; }
.sl-btn--outline-light:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.sl-btn--green { background: var(--sl-accent); color: #fff; }
.sl-btn--green:hover { background: var(--sl-accent-hover); color: #fff; }

/* The one buy button: near black #25251F with white text, 22.8px (Andrej, 23.10.2026: +20%), in capitals and
   not bold (Andrej, 24.10.2026). */
.sl-btn--buy {
  min-height: 58px;
  border-radius: var(--sl-radius);
  background: var(--sl-buy);
  color: var(--sl-buy-text);
  font-size: 1.425rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sl-btn--buy:not([disabled]):hover { background: var(--sl-buy-hover); color: var(--sl-buy-text); }
.sl-btn--block { display: flex; width: 100%; }
.sl-btn--sm { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }
.sl-btn--buy[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Answer after "Dodaj u korpu" and the "Izmeni" link on a wallpaper line in the cart. */
.sl-summary__status { margin: 0; padding: 12px 14px; border-radius: var(--sl-radius); background: var(--sl-bg); font-weight: 500; text-align: center; }
.sl-summary__status a { color: var(--sl-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.sl-summary__status.is-error { color: var(--sl-error); }
.slc-edit { margin-left: 8px; color: var(--sl-accent); font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }

.sl-link { font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
.sl-link--green { color: var(--sl-accent); }

/* ---------- Announcement bar ---------- */

.sl-announce { background: var(--sl-accent-100); color: var(--sl-accent); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }
.sl-announce__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sl-space-5); min-height: 38px; }
.sl-announce__list { position: relative; flex: 1; min-height: 1.6em; margin: 0; padding: 0; list-style: none; }
.sl-announce__item {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--sl-dur) var(--sl-ease), visibility var(--sl-dur);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-announce__item.is-active { opacity: 1; visibility: visible; }
.sl-announce__phone { display: none; margin: 0; white-space: nowrap; }
.sl-announce__phone a { color: inherit; text-decoration: none; }
.sl-announce__phone a:hover { text-decoration: underline; }

@media (min-width: 900px) { .sl-announce__phone { display: flex; align-items: center; gap: 12px; } }
.sl-announce__apps { display: inline-flex; align-items: center; gap: 4px; }
.sl-announce__apps a { display: inline-flex; padding: 3px; border-radius: 6px; }
.sl-announce__apps a:hover { background: rgb(255 255 255 / 0.45); }
@media (max-width: 599px) {
  .sl-announce__list { min-height: 2.8em; text-align: center; }
  .sl-announce__item { display: flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.35; }
}

/* ---------- Header ---------- */

/* Smart sticky header (Andrej, 23.10.2026): it sticks to the top, hides while the page scrolls down
   and slides back as soon as the visitor scrolls up (main.js sets .is-stuck and .is-hidden). */
.sl-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; background: #fff; border-bottom: 1px solid var(--sl-line); transition: transform 320ms var(--sl-ease), box-shadow 320ms var(--sl-ease); }
.sl-header.is-stuck { box-shadow: 0 8px 28px rgb(30 30 28 / 0.08); }
.sl-header.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); box-shadow: none; }
@media (max-width: 600px) {
  .sl-header { top: 0; } /* the admin bar scrolls away on phones */
}
.sl-header__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sl-space-6);
  min-height: 84px;
}
.sl-header__logo { display: block; }
/* The wordmark alone, larger than with its tagline (Andrej, 24.10.2026: 230px, then 10% smaller). */
.sl-header__logo img { width: 207px; height: auto; }
.sl-header__actions { display: flex; align-items: center; gap: var(--sl-space-1); }
.sl-header__row .sl-header__burger { display: none; } /* beats .sl-icon-btn, which comes later */

.sl-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 640px;
  height: 46px;
  margin-inline: auto;
  padding: 0 6px 0 22px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-pill);
  background: #fff;
  transition: border-color var(--sl-dur) var(--sl-ease);
}
.sl-search:focus-within { border-color: var(--sl-text); }
.sl-search__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 0.9375rem; }
.sl-search__input::placeholder { color: var(--sl-muted); }
.sl-search__btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--sl-pill); background: none; cursor: pointer; }

.sl-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--sl-pill);
  background: transparent;
  color: var(--sl-text);
  cursor: pointer;
  transition: background-color var(--sl-dur) var(--sl-ease);
}
.sl-icon-btn:hover { background: var(--sl-soft-2); color: var(--sl-text); }
/* The header heart always sits in a filled circle (Andrej, 24.10.2026); hover goes one shade darker. */
.sl-header .sl-wish-link { background: var(--sl-soft-2); }
.sl-header .sl-wish-link:hover { background: var(--sl-soft); }

.sl-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.sl-cart:hover { border-color: var(--sl-text); color: var(--sl-text); }
.sl-cart__count {
  position: absolute; top: -4px; left: 26px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--sl-pill);
  background: var(--sl-text);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.sl-cart__count[hidden] { display: none; }
/* A short bump when the count changes without a reload (main.js); off under reduced motion. */
/* Messenger icons (sl_brand_icon): WhatsApp is an Icons8 PNG used as a mask, coloured by currentColor. */
.sl-brand-icon { display: inline-block; flex: none; vertical-align: middle; }
.sl-brand-icon--whatsapp { background: currentColor; -webkit-mask: url(../img/icons/whatsapp.png) center / contain no-repeat; mask: url(../img/icons/whatsapp.png) center / contain no-repeat; }
.sl-contact__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; color: var(--sl-muted); }
.sl-contact .sl-contact__apps a { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 500; color: var(--sl-accent); }

.sl-cart__count.is-bumped { animation: sl-cart-bump 280ms ease-out; }
@keyframes sl-cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (max-width: 1099px) {
  /* Equal side columns, so the logo sits in the true middle (Andrej, 24.10.2026: the burger column is
     narrower than heart and cart, which pushed the logo left). */
  /* 20px above the logo (Andrej, 24.10.2026): it sat right under the announcement bar. */
  .sl-header__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sl-space-3); min-height: 60px; padding-top: 20px; }
  .sl-header__row .sl-header__burger { display: inline-grid; justify-self: start; margin-left: -10px; }
  .sl-header__logo { justify-self: center; }
  .sl-header__row > .sl-header__actions { justify-self: end; }
  .sl-header__logo img { width: 176px; }
  .sl-header__row > .sl-search { grid-column: 1 / -1; grid-row: 2; max-width: none; height: 44px; margin-bottom: 12px; }
  .sl-cart { padding: 0 10px; border: 0; }
  .sl-cart__total { display: none; }
  .sl-cart__count { left: 22px; top: 2px; }
}
/* Phones (Andrej, 25.10.2026): logo 10 % smaller (176 → 158 px), cart icon 15 % larger (21 → 24 px). */
@media (max-width: 899px) {
  .sl-header__logo img { width: 158px; }
  .sl-cart > .sl-icon { width: 24px; height: 24px; }
  .sl-cart__count { left: 24px; }
}

/* ---------- Navigation (desktop) ---------- */

.sl-nav { display: none; border-top: 1px solid var(--sl-line); }
@media (min-width: 1100px) { .sl-nav { display: block; } }

.sl-nav__in { display: flex; align-items: stretch; justify-content: space-between; }
.sl-nav__list { display: flex; align-items: stretch; margin: 0 0 0 -14px; padding: 0; list-style: none; }
.sl-nav__item { display: flex; align-items: stretch; }
.sl-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  background: none;
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sl-nav__link:hover, .sl-nav__link[aria-current="page"], .sl-nav__item.is-open > .sl-nav__link { color: var(--sl-text); box-shadow: inset 0 -2px 0 var(--sl-text); }
.sl-nav__link .sl-icon { transition: transform var(--sl-dur) var(--sl-ease); }
.sl-nav__item.is-open .sl-nav__link .sl-icon { transform: rotate(180deg); }
.sl-nav__trust { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--sl-muted); }
.sl-nav__trust .sl-icon { color: var(--sl-accent); }
/* Eight menu items since 23.10.2026: below 1300px the line has no room for the message (the trust bar
   carries it too), and it never wraps. */
.sl-nav__trust { white-space: nowrap; }
/* From 1380 px: with "od 2015." (Andrej, 24.10.2026) the line needs about 50 px more than before. */
@media (max-width: 1379px) { .sl-nav__trust { display: none; } }

/* Panels open on hover, on keyboard focus inside, or when JS sets .is-open (click and touch). */
.sl-mega, .sl-drop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--sl-dur) var(--sl-ease), transform var(--sl-dur) var(--sl-ease), visibility var(--sl-dur);
}
@media (hover: hover) {
  .sl-nav__item:hover > .sl-mega, .sl-nav__item:hover > .sl-drop { opacity: 1; visibility: visible; transform: none; }
}
.sl-nav__item:focus-within > .sl-mega, .sl-nav__item:focus-within > .sl-drop,
.sl-nav__item.is-open > .sl-mega, .sl-nav__item.is-open > .sl-drop { opacity: 1; visibility: visible; transform: none; }
.sl-nav__item.is-closed > .sl-mega, .sl-nav__item.is-closed > .sl-drop { opacity: 0; visibility: hidden; }

.sl-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
  box-shadow: 0 24px 48px rgb(30 30 28 / 0.10);
}
.sl-mega__in { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 0.9fr) minmax(250px, 1.1fr); gap: var(--sl-space-7); padding-block: var(--sl-space-6) 40px; }
.sl-mega__title { margin: 0 0 14px; font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--sl-muted); }
.sl-mega__col ul { margin: 0; padding: 0; list-style: none; }
.sl-mega__col li > a, .sl-mega__col li > span { display: inline-flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 0.9375rem; text-decoration: none; }
.sl-mega__col li > a:hover { text-decoration: underline; }
/* Alphabetical down each column, then across. */
.sl-mega__motifs { columns: 3; column-gap: 16px; }
.sl-mega__motifs li { break-inside: avoid; }
.sl-mega__motifs li > a { gap: 10px; padding: 4px 0; font-size: 0.875rem; }
/* Smaller thumbs and type in the motif list (Andrej, 23.10.2026: the three columns felt crowded). */
.sl-mega__thumb { width: 32px; height: 32px; border-radius: var(--sl-radius-sm); object-fit: cover; background: var(--sl-soft-2); }
.sl-mega__all { margin-top: 12px; }
.sl-mega__all a { font-weight: 600; }
.sl-mega__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sl-space-4); padding: 22px; border-radius: 14px; background: var(--sl-soft); }
/* The photo grows into whatever height the motif column gives the panel, so the card has no empty bottom. */
.sl-mega__card img { flex: 1 1 0; width: 100%; height: auto; min-height: 150px; object-fit: cover; border-radius: var(--sl-radius-md); }
.sl-mega__card p { margin: 0; font-size: 1.125rem; line-height: 1.35; }
/* Two cards side by side (Foto tapete: send a photo, a design of your own; Andrej 23.10.2026). */
/* The rooms column is as wide as its heading ("Izaberite po prostoriji"), which stays on one line. */
.sl-mega__in--cards { grid-template-columns: minmax(0, 1.75fr) max-content minmax(0, 2fr); gap: var(--sl-space-6); }
.sl-mega__cards .sl-btn { white-space: nowrap; padding-inline: 18px; }
.sl-mega__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sl-space-4); }
.sl-mega__cards .sl-mega__card { padding: 18px; }
.sl-mega__cards .sl-mega__card p { font-size: 1rem; }
/* Side by side the photos keep one size and the text sits right under them; whatever height the panel
   adds goes above the button, so a shorter text leaves a little room there (Andrej, 23.10.2026). */
.sl-mega__cards .sl-mega__card img { flex: none; aspect-ratio: 1; min-height: 0; }
.sl-mega__cards .sl-mega__card .sl-btn { margin-top: auto; }
/* One list and the card (Stikeri za zid, Andrej 23.10.2026): the sticker types as one row of large
   square tiles with the name under each, and a square card at the right. */
.sl-mega__in--one { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.sl-mega__in--one .sl-mega__motifs { columns: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sl-space-4); }
.sl-mega__in--one .sl-mega__motifs li > a { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; font-size: 1rem; font-weight: 500; text-align: center; }
.sl-mega__in--one .sl-mega__thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--sl-radius-lg); transition: transform var(--sl-dur) var(--sl-ease); }
.sl-mega__in--one .sl-mega__motifs li > a:hover .sl-mega__thumb { transform: scale(1.03); }
.sl-mega__in--one .sl-mega__all { margin-top: var(--sl-space-5); }
.sl-mega__in--one .sl-mega__card { aspect-ratio: 1; gap: 12px; padding: 18px; }
.sl-mega__in--one .sl-mega__card img { flex: 1 1 0; height: auto; min-height: 0; }
.sl-mega__in--one .sl-mega__card p { font-size: 1rem; }
/* Foto tapete panel, editorial (Andrej, 25.10.2026: the old rows were too small). Motifs as larger rows
   with the room photo of each category, alphabetical down three columns; rooms as big thin lines with an
   arrow in a circle (sl-kx__link); the two offers as photo cards. Items rise in when the panel opens. */
.sl-mw { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.72fr) minmax(0, 1.2fr); gap: clamp(28px, 3vw, 56px); padding-block: 34px 40px; }
.sl-mw__head, .sl-mw__rooms > .sl-mega__title { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin: 0 0 12px; }
.sl-mw__head .sl-mega__title { margin: 0; }
.sl-mw__all { display: inline-flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 500; color: var(--sl-text); text-decoration: none; white-space: nowrap; }
.sl-mw .sl-kx__go { width: 34px; }
.sl-mw__all:hover .sl-kx__go, .sl-mw__all:focus-visible .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
.sl-mw__grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 7), auto); gap: 2px 10px; margin: 0 0 0 -8px; padding: 0; list-style: none; }
.sl-mw__motif { display: flex; align-items: center; gap: 14px; padding: 5px 8px; border-radius: 14px; color: var(--sl-text); font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none; transition: background-color 300ms var(--sl-ease); }
.sl-mw__motif:hover, .sl-mw__motif:focus-visible { background: var(--sl-soft); color: var(--sl-text); }
.sl-mw__thumb { flex: none; width: 60px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--sl-soft-2); }
.sl-mega .sl-mw__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sl-ease); }
.sl-mw__motif:hover .sl-mw__img { transform: scale(1.12); }
.sl-mw__name { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--sl-ease); }
.sl-mw__motif:hover .sl-mw__name, .sl-mw__motif:focus-visible .sl-mw__name { background-size: 100% 1px; }
.sl-mw__lines { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-mw .sl-mw__room { padding: 13px 0; font-size: clamp(1.1875rem, 0.85rem + 0.5vw, 1.4375rem); white-space: nowrap; }
.sl-mw__cards { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.sl-mw__card { position: relative; isolation: isolate; display: block; min-height: 200px; overflow: hidden; border-radius: 18px; background: var(--sl-text); color: #fff; text-decoration: none; }
.sl-mw__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 20 18 / 0) 0%, rgb(20 20 18 / 0.45) 38%, rgb(20 20 18 / 0.88) 82%); }
.sl-mega .sl-mw__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sl-ease); }
.sl-mw__card:hover .sl-mw__photo { transform: scale(1.05); }
.sl-mw__card:hover, .sl-mw__card:focus-visible { color: #fff; }
.sl-mw__body { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sl-mw__q { font-size: clamp(1.1875rem, 0.85rem + 0.5vw, 1.4375rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; }
.sl-mw__text { max-width: 44ch; font-size: 0.875rem; line-height: 1.4; color: rgb(255 255 255 / 0.85); }
.sl-mw .sl-mw__btn { min-height: 40px; margin-top: 8px; padding: 0 16px; font-size: 0.875rem; white-space: nowrap; }
.sl-mw__card:hover .sl-mw__btn { background: var(--sl-soft); }
@media (prefers-reduced-motion: no-preference) {
  .sl-mw__grid > li, .sl-mw__lines > li, .sl-mw__card { opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--sl-ease), transform 280ms var(--sl-ease); }
  .sl-nav__item:focus-within > .sl-mega--wall :is(.sl-mw__grid > li, .sl-mw__lines > li, .sl-mw__card),
  .sl-nav__item.is-open > .sl-mega--wall :is(.sl-mw__grid > li, .sl-mw__lines > li, .sl-mw__card) { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 12ms); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sl-nav__item:hover > .sl-mega--wall :is(.sl-mw__grid > li, .sl-mw__lines > li, .sl-mw__card) { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 12ms); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-mw__motif:hover .sl-mw__img, .sl-mw__card:hover .sl-mw__photo { transform: none; }
}
@media (max-width: 1379px) {
  .sl-mw { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 1fr); }
  .sl-mw__motif { gap: 11px; font-size: 0.9375rem; }
  .sl-mw__thumb { width: 46px; border-radius: 10px; }
  .sl-mw__text { display: none; }
}
@media (max-width: 1239px) {
  .sl-mw { grid-template-columns: minmax(0, 2fr) minmax(0, 0.75fr) minmax(0, 0.85fr); gap: 28px; }
  .sl-mw__grid { column-gap: 4px; }
  .sl-mw__motif { gap: 9px; padding-inline: 6px; font-size: 0.875rem; }
  .sl-mw__thumb { width: 40px; }
  .sl-mw .sl-mw__room { font-size: 1.125rem; }
}

.sl-nav__item--drop { position: relative; }
.sl-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: var(--sl-space-3) 0;
  background: #fff;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
}
/* The last item (Inspiracija) sits at the right edge: its panel opens leftwards, inside the page. */
.sl-nav__item--drop:last-child .sl-drop { left: auto; right: 0; }
.sl-drop ul { margin: 0; padding: 0; list-style: none; }
.sl-drop a, .sl-drop li > span { display: block; padding: 8px 20px; font-size: 0.9375rem; text-decoration: none; }
.sl-drop a:hover { background: var(--sl-soft); color: var(--sl-text); }

/* ---------- Mobile drawer ---------- */

.sl-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 400px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--sl-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sl-drawer::backdrop { background: rgb(30 30 28 / 0.45); }
.sl-drawer[open] { animation: sl-drawer-in var(--sl-dur) var(--sl-ease); }
@keyframes sl-drawer-in { from { transform: translateX(-24px); opacity: 0; } }

.sl-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 var(--sl-space-3) 0 var(--sl-space-5); border-bottom: 1px solid var(--sl-line); }
.sl-drawer__head img { width: 116px; height: auto; }
.sl-drawer__list { margin: 0; padding: var(--sl-space-2) 0; list-style: none; }
.sl-drawer__list > li { border-bottom: 1px solid var(--sl-line); }
.sl-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 var(--sl-space-5);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.sl-drawer__link::-webkit-details-marker { display: none; }
.sl-drawer__group[open] > summary .sl-icon { transform: rotate(180deg); }
.sl-drawer__group ul { margin: 0 0 var(--sl-space-4); padding: 0 var(--sl-space-5); list-style: none; }
.sl-drawer__group li a, .sl-drawer__group li > span { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; }
.sl-drawer__title { margin: var(--sl-space-3) var(--sl-space-5) var(--sl-space-1); font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-muted); }
/* Favourites line in the drawer; the header heart is hidden on phones (Andrej, 24.10.2026). */
.sl-drawer__wish .sl-icon { flex: none; }
@media (max-width: 899px) { .sl-header .sl-header__actions .sl-wish-link { display: none; } }
.sl-drawer__foot { display: grid; gap: var(--sl-space-3); padding: var(--sl-space-5); }
.sl-drawer__foot a { display: inline-flex; align-items: center; gap: var(--sl-space-2); font-weight: 500; text-decoration: none; }

/* ---------- Product cards ---------- */

.sl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sl-space-5) 12px; }
@media (min-width: 768px) { .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1100px) { .sl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sl-card { position: relative; height: 100%; }
.sl-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  background: #fff;
  text-decoration: none;
  transition: border-color var(--sl-dur) var(--sl-ease), box-shadow var(--sl-dur) var(--sl-ease);
}
.sl-card__link:hover { border-color: var(--sl-khaki); box-shadow: var(--sl-shadow); color: var(--sl-text); }
.sl-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sl-soft); }
/* .sl-card__media in front: WooCommerce's ".woocommerce img { height: auto }" is stronger than one class
   and left square photos square on shop pages, with an empty band under them. */
.sl-card__media .sl-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sl-ease); }
@media (hover: hover) {
  .sl-card__link:hover .sl-card__img { transform: scale(1.04); }
}
.sl-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 12px 12px; }
.sl-card__title { flex: 1; margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: center; }
.sl-card__price { margin: 0; padding: 8px 10px; border-radius: var(--sl-radius-sm); background: var(--sl-accent-50); color: var(--sl-accent); font-size: 0.90625rem; font-weight: 600; text-align: center; }
.sl-card__fav {
  position: absolute;
  top: 10px; right: 10px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--sl-pill);
  /* The header heart's circle, so it shows on the white cards too (Andrej, 26.10.2026; was white 92 %). */
  background: var(--sl-soft-2);
  cursor: pointer;
}
.sl-card__fav:hover { background: var(--sl-soft); color: var(--sl-heart); }

/* Hearts: filled in the logo colour when the product is in the list; a pop and a fading ring on adding (main.js). */
[data-fav] svg { transition: fill var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
[data-fav][aria-pressed="true"] svg { fill: currentColor; color: var(--sl-heart); }
[data-fav].is-popping svg { animation: sl-heart-pop 450ms cubic-bezier(0.2, 0.8, 0.3, 1.3); }
[data-fav].is-popping::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--sl-heart); border-radius: var(--sl-pill); pointer-events: none; animation: sl-heart-ring 500ms ease-out forwards; }
/* Header heart: filled while the list has items, two beats every 7 s; one pop right after adding. */
.sl-wish-link.is-wished svg { fill: currentColor; color: var(--sl-heart); animation: sl-heartbeat 7s ease-in-out 2s infinite; }
.sl-wish-link.is-beat-now svg { animation: sl-heart-pop 450ms cubic-bezier(0.2, 0.8, 0.3, 1.3); }
@keyframes sl-heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  55% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes sl-heart-ring {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes sl-heartbeat {
  0%, 14%, 100% { transform: scale(1); }
  3% { transform: scale(1.22); }
  6% { transform: scale(1); }
  9% { transform: scale(1.16); }
}
@media (max-width: 599px) {
  .sl-card__body { padding: 10px 8px; gap: 8px; }
  .sl-card__title { font-size: 0.90625rem; }
  .sl-card__price { font-size: 0.8125rem; padding: 6px 8px; }
}

/* Horizontal rail: 4 cards on desktop, about 2.2 on a phone, swipe or arrow buttons. */
.sl-rail { position: relative; }
.sl-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  gap: 24px;
  margin: 0;
  padding: 2px 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sl-rail__track::-webkit-scrollbar { display: none; }
.sl-rail__track > * { scroll-snap-align: start; }
@media (max-width: 899px) { .sl-rail__track { grid-auto-columns: 44%; gap: 12px; } }
.sl-rail__btn {
  position: absolute;
  top: 38%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-pill);
  background: #fff;
  box-shadow: 0 4px 16px rgb(30 30 28 / 0.10);
  cursor: pointer;
}
.sl-rail__btn--prev { left: -22px; }
.sl-rail__btn--next { right: -22px; }
.sl-rail__btn[disabled] { opacity: 0; pointer-events: none; }
.sl-rail .sl-rail__nav { display: none; }
@media (max-width: 899px) {
  .sl-rail__btn { display: none; }
  .sl-rail .sl-rail__nav { display: flex; justify-content: flex-end; margin: -10px 0 14px; }
}

/* ---------- Chips (category, motif page) ---------- */

.sl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 5px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); background: #fff; font-size: 0.90625rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sl-chip:hover { border-color: var(--sl-text); color: var(--sl-text); }
.sl-chip__img { width: 34px; height: 34px; border-radius: var(--sl-pill); object-fit: cover; background: var(--sl-soft-2); }
.sl-chip--text { padding-left: 18px; }
@media (max-width: 899px) { .sl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* ---------- Homepage ---------- */

.sl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.sl-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.sl-split__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sl-split__title { margin: 0; font-size: var(--sl-fs-split); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; }
.sl-split__body p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
@media (max-width: 899px) { .sl-split { grid-template-columns: 1fr; gap: 24px; } }

.sl-material__name { margin: 0; font-size: 1.375rem; font-weight: 500; }
.sl-material__price { margin: 0; font-size: 1.875rem; font-weight: 600; color: var(--sl-accent); }

.sl-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 32px; border-radius: 14px; background: var(--sl-accent-50); }
.sl-note p { margin: 0; max-width: 900px; font-size: 1.125rem; line-height: 1.5; }
@media (max-width: 599px) { .sl-note { padding: 20px; } .sl-note p { font-size: 1rem; } }

.sl-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sl-faq__item { border: 1px solid var(--sl-line); border-radius: var(--sl-radius); background: #fff; }
.sl-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 18px 0 22px; font-size: 1rem; font-weight: 500; cursor: pointer; list-style: none; }
.sl-faq__q::-webkit-details-marker { display: none; }
.sl-faq__q::after { content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--sl-pill); background: var(--sl-soft-2); font-size: 1.125rem; font-weight: 400; }
.sl-faq__item[open] .sl-faq__q::after { content: "−"; background: var(--sl-accent-50); color: var(--sl-accent); }
.sl-faq__a { margin: 0; padding: 0 22px 20px; color: var(--sl-text-2); line-height: 1.6; }
@media (max-width: 899px) { .sl-faq { grid-template-columns: 1fr; } }


/* ---------- Homepage (Stikerlab layout, sl-hm-*) ---------- */

/* Hero: room photo across the full width, copy over its darker left side. */
.sl-hero { position: relative; height: clamp(480px, 40vw, 600px); overflow: hidden; background: var(--sl-text); color: #fff; }
/* Slides cross-fade (main.js); only the active one is visible. The first photo is mirrored (Andrej,
   22.10.2026) so its mural wall sits on the left, under the copy; the others are shot that way. */
.sl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.sl-hero__img.is-active { opacity: 1; }
.sl-hero__img--mirror { transform: scaleX(-1); }
.sl-hero__dots { position: absolute; z-index: 2; right: var(--sl-gutter); bottom: 20px; display: flex; gap: 4px; }
.sl-hero__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.sl-hero__dot::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.5); box-shadow: 0 0 0 1px rgb(20 20 18 / 0.15); transition: background var(--sl-dur), transform var(--sl-dur); }
.sl-hero__dot[aria-pressed="true"]::before { background: #fff; transform: scale(1.25); }
/* Shade only behind the copy: --x is the copy's left edge (same as .sl-wrap), the shade is gone
   about 800px later, so the right half of the photo stays at full brightness (Andrej, 24.10.2026). */
.sl-hero::after { --x: max(var(--sl-gutter), (100% - var(--sl-wrap)) / 2); content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 20 18 / 0.62) 0, rgb(20 20 18 / 0.48) calc(var(--x) + 340px), rgb(20 20 18 / 0.22) calc(var(--x) + 640px), rgb(20 20 18 / 0) calc(var(--x) + 800px)); }
.sl-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; height: 100%; }
.sl-hero__slogan { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.sl-hero__title { max-width: 680px; margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; }
/* Hero headline: light Jost, key phrase in bold (Andrej, 24.10.2026, after the "Tapete po želji" H1). */
.sl-headline strong { font-weight: 600; letter-spacing: -0.05em; }
.sl-hero__text { max-width: 520px; margin: 0; font-size: var(--sl-fs-lead); font-weight: 300; line-height: 1.55; }
.sl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sl-hero__note { margin: -4px 0 0; font-size: var(--sl-fs-xs); font-weight: 400; letter-spacing: 0.02em; opacity: 0.85; }
@media (max-width: 899px) {
  .sl-hero::after { background: linear-gradient(180deg, rgb(20 20 18 / 0.1) 20%, rgb(20 20 18 / 0.72) 100%); }
  .sl-hero__img--mirror { object-position: 38% 50%; } /* the photo is mirrored, so 38% here frames what 62% did */
  .sl-hero__dots { top: 12px; bottom: auto; }
  .sl-hero__in { justify-content: flex-end; padding-bottom: 28px; gap: 12px; }
}

.sl-hm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--sl-space-5); }
.sl-hm-head__title { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); font-weight: 500; letter-spacing: -0.015em; }

/* Hero: copy and calculator on the left, the measured wall on the right. */
.sl-hm-hero { padding-block: clamp(24px, 3vw, 48px) var(--sl-space-6); background: linear-gradient(180deg, var(--sl-soft) 0%, #fff 100%); }
.sl-hm-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sl-hm-hero__title { margin: 0 0 18px; font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.75rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; }
.sl-hm-hero__text { margin: 0 0 24px; max-width: 520px; font-size: var(--sl-fs-lead); line-height: 1.6; color: var(--sl-text-2); }
.sl-hm-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.sl-hm-calc { display: grid; gap: 12px; max-width: 520px; padding: 20px 22px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); background: #fff; box-shadow: var(--sl-shadow); }
.sl-hm-calc__title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.sl-hm-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sl-hm-calc__result { margin: 0; padding: 10px 14px; border-radius: var(--sl-radius-md); background: var(--sl-accent-50); color: var(--sl-accent); font-weight: 500; }

.sl-hm-hero__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: var(--sl-soft-2); }
.sl-hm-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
/* The mural wall in hero-dnevna sits at about these coordinates of the photo. */
.sl-hm-wall { position: absolute; left: 34%; right: 6%; top: 6%; bottom: 14%; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgb(30 30 28 / 0.25); pointer-events: none; }
.sl-hm-wall__w, .sl-hm-wall__h, .sl-hm-wall__rolls {
  position: absolute;
  padding: 3px 10px;
  border-radius: var(--sl-pill);
  background: #fff;
  color: var(--sl-text);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgb(30 30 28 / 0.18);
}
.sl-hm-wall__w { top: -14px; left: 50%; transform: translateX(-50%); }
.sl-hm-wall__h { top: 50%; right: 8px; padding: 10px 3px; transform: translateY(-50%); writing-mode: vertical-rl; }
.sl-hm-wall__rolls { bottom: 10px; left: 10px; background: var(--sl-accent); color: #fff; }
.sl-hm-wall__seams { position: absolute; inset: 0; }
.sl-hm-wall__seams span { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgb(255 255 255 / 0.9); }

@media (max-width: 999px) {
  .sl-hm-hero__grid { grid-template-columns: 1fr; }
  .sl-hm-hero__media { order: -1; margin-inline: calc(-1 * var(--sl-gutter)); border-radius: 0; }
  .sl-hm-calc { max-width: none; }
}

/* Motif mosaic: one big tile and eight small ones. */
.sl-hm-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, 15vw); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sl-hm-mosaic__big { grid-column: span 2; grid-row: span 2; }
.sl-hm-mosaic__wide { grid-column: span 2; } /* the card for a wallpaper of your own */
.sl-hm-tile { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--sl-radius-lg); background: var(--sl-soft-2); }
.sl-hm-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sl-ease); }
.sl-hm-tile:hover .sl-hm-tile__img { transform: scale(1.04); }
.sl-hm-tile__label { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--sl-radius-md); background: rgb(255 255 255 / 0.94); color: var(--sl-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.sl-hm-tile__label small { font-size: 0.75rem; font-weight: 500; color: var(--sl-muted); }
.sl-hm-mosaic__big .sl-hm-tile__label { left: 16px; right: auto; bottom: 16px; padding: 12px 18px; font-size: 1.25rem; }
/* Small tiles next to the big one: three across the top; below, two tiles and the card for a sticker
   of your own (Andrej, 23.10.2026). */
.sl-hm-mosaic--5 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sl-hm-mosaic--5 > li { grid-column: span 2; }
.sl-hm-mosaic--5 > .sl-hm-mosaic__big { grid-column: span 3; grid-row: span 2; }
/* The photo fills the card; a dark fade from below carries the white copy and the button. */
.sl-hm-custom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 20 18 / 0) 15%, rgb(20 20 18 / 0.78) 70%); pointer-events: none; }
.sl-hm-custom__body { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #fff; }
.sl-hm-custom__body p { margin: 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.sl-hm-custom__body .sl-btn { min-height: 36px; padding: 0 14px; font-size: 0.84375rem; white-space: nowrap; }
@media (max-width: 899px) {
  .sl-hm-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .sl-hm-mosaic__big { grid-column: span 2; grid-row: span 2; }
  .sl-hm-mosaic--5 > li { grid-column: span 1; }
  /* Four tiles in pairs, then the last tile and the card each across the full width. The wide tile
     is two rows tall, so the square photo is barely cropped (Andrej, 23.10.2026: the 3D sticker was cut off). */
  .sl-hm-mosaic--5 > li:nth-last-child(2) { grid-column: span 2; grid-row: span 2; }
  .sl-hm-mosaic--5 > .sl-hm-mosaic__big, .sl-hm-mosaic--5 > li:last-child { grid-column: span 2; }
}

/* "Kako radi" on the homepage (Andrej, 24.10.2026): three cards in a row instead of the pinned scroll
   story, which held the whole screen for several seconds. Each card has a small room scene of its step;
   main.js gives the cards turns (.is-active, and .is-play restarts the scene) while the section is in
   view. Every scene rests on its last frame, so without JS, under reduced motion and between turns
   the cards show the finished step. Phones get a swipeable row. Scene geometry is in container units. */
.sl-how__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-how__step { position: relative; display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--sl-line); border-radius: 20px; background: #fff; transition: border-color 300ms var(--sl-ease); }
.sl-how__step.is-active { border-color: #A59D84; }
.sl-how__copy { padding: 14px 8px 8px; }
.sl-how__name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.sl-how__num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--sl-accent); border-radius: 50%; color: var(--sl-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; transition: background-color 300ms var(--sl-ease), color 300ms var(--sl-ease), border-color 300ms var(--sl-ease); }
.sl-how__step.is-active .sl-how__num { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-how__text { margin: 6px 0 0; padding-left: 36px; font-size: 0.9375rem; line-height: 1.55; color: var(--sl-muted); }
/* The turn timer: a thin line along the bottom of the playing card. */
.sl-how__bar { position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sl-accent); transform: scaleX(0); transform-origin: left; }
.sl-how.is-timed .is-active.is-play .sl-how__bar { animation: sl-how-time var(--how-t, 4500ms) linear both; }
@keyframes sl-how-time { to { transform: scaleX(1); } }
.sl-how__own { margin: 18px 0 0; font-size: 1rem; line-height: 1.55; color: var(--sl-muted); }
.sl-how__own a { color: var(--sl-text); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
.sl-how__own a:hover { text-decoration-thickness: 2px; }

/* The room: wall, skirting board, floor. */
.sl-how__scene { position: relative; height: clamp(140px, 20vh, 210px); container-type: size; overflow: hidden; border-radius: 14px; background: linear-gradient(to bottom, #ECEBDE 0 80%, #D7D3BF 80% 100%); }
.sl-how__scene::before { content: ""; position: absolute; inset: 80cqh 0 auto; height: 1.6cqh; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / 0.06); }
.sl-how__scene span, .sl-how__scene b { display: block; }

/* 1. Three motifs are dealt, the pointer taps the middle one, it lifts and gets the check. */
.sl-how__swatch { position: absolute; left: 50cqw; top: 11cqh; height: 62cqh; aspect-ratio: 3 / 4; border-radius: 10px; background: #C1BAA1 center / cover no-repeat; box-shadow: 0 14px 22px -10px rgb(58 55 46 / 0.45); translate: calc(-50% + var(--s) * 25cqw) 0; rotate: calc(var(--s) * 7deg); filter: saturate(0.5) opacity(0.6); }
.sl-how__swatch--pick { z-index: 1; scale: 1.1; filter: none; }
.sl-how__scene .sl-how__badge { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sl-accent-900); color: #fff; }
.sl-how__cursor { position: absolute; z-index: 2; left: 50cqw; top: 46cqh; width: 22px; height: 22px; margin: -11px; border: 2px solid #fff; border-radius: 50%; background: rgb(30 30 28 / 0.55); opacity: 0; }
.is-play .sl-how__swatch { animation: sl-how-deal 600ms var(--sl-ease) calc(100ms + (var(--s) + 1) * 110ms) both, sl-how-dim 500ms var(--sl-ease) 1550ms both; }
.is-play .sl-how__swatch--pick { animation: sl-how-deal 600ms var(--sl-ease) 210ms both, sl-how-lift 500ms cubic-bezier(0.3, 1.5, 0.5, 1) 1550ms both; }
.is-play .sl-how__badge { animation: sl-how-pop 450ms cubic-bezier(0.3, 1.6, 0.5, 1) 1650ms both; }
.is-play .sl-how__cursor { animation: sl-how-tap 1700ms var(--sl-ease) 500ms both; }
@keyframes sl-how-deal { from { opacity: 0; translate: calc(-50% + var(--s) * 25cqw) 18cqh; } }
@keyframes sl-how-dim { from { filter: none; } }
@keyframes sl-how-lift { from { scale: 1; } }
@keyframes sl-how-pop { from { transform: scale(0); } }
@keyframes sl-how-tap {
  0% { opacity: 0; translate: 22cqw 30cqh; }
  15% { opacity: 1; }
  55% { translate: 0 0; scale: 1; box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); }
  65% { scale: 0.7; }
  78% { opacity: 1; scale: 1; box-shadow: 0 0 0 18px rgb(255 255 255 / 0); }
  100% { opacity: 0; translate: -4cqw 20cqh; }
}

/* 2. The frame appears over the motif, the guides draw and the frame slides left and right. */
.sl-how__motif { position: absolute; left: 7cqw; right: 7cqw; top: 9cqh; height: 62cqh; overflow: hidden; border-radius: 10px; background: #C1BAA1 center / cover no-repeat; box-shadow: 0 14px 22px -12px rgb(58 55 46 / 0.45); }
.sl-how__frame { position: absolute; left: 50%; top: 12%; width: 34%; height: 76%; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 0 100cqw rgb(30 30 28 / 0.45); translate: -50% 0; }
.sl-how__scene .sl-how__grip { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: #fff; color: #1E1E1C; box-shadow: 0 6px 14px rgb(0 0 0 / 0.25); }
.sl-how__guide { position: absolute; background: #fff; }
.sl-how__guide b { position: absolute; left: 50%; top: 50%; padding: 2px 7px; border-radius: 99px; background: #fff; color: #1E1E1C; font-size: 0.5625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; translate: -50% -50%; }
.sl-how__guide--w { left: 8px; right: 8px; top: 9px; height: 1px; }
.sl-how__guide--h { top: 8px; bottom: 8px; left: 9px; width: 1px; }
.sl-how__guide--h b { rotate: -90deg; }
.is-play .sl-how__frame { animation: sl-how-show 400ms var(--sl-ease) 200ms both, sl-how-pan 2600ms ease-in-out 1000ms both; }
.is-play .sl-how__guide--w { animation: sl-how-draw-w 500ms var(--sl-ease) 600ms both; }
.is-play .sl-how__guide--h { animation: sl-how-draw-h 500ms var(--sl-ease) 600ms both; }
@keyframes sl-how-show { from { opacity: 0; scale: 0.9; } }
@keyframes sl-how-pan { 0%, 100% { translate: -50% 0; } 30% { translate: -125% 0; } 70% { translate: 25% 0; } }
@keyframes sl-how-draw-w { from { transform: scaleX(0); } }
@keyframes sl-how-draw-h { from { transform: scaleY(0); } }

/* 3. The motif prints (the head runs down) as four rolls of equal width that part along the seams,
   then the truck drives in on the floor. Each roll holds the whole motif shifted by its own offset. */
.sl-how__rolls { position: absolute; left: 24cqw; top: 9cqh; width: 52cqw; height: 62cqh; }
.sl-how__roll { position: absolute; top: 0; bottom: 0; left: calc(var(--r) * 25%); width: 25%; overflow: hidden; box-shadow: 0 12px 18px -10px rgb(58 55 46 / 0.55); translate: calc((var(--r) - 1.5) * 2.2cqw) 0; }
.sl-how__roll > span { position: absolute; top: 0; bottom: 0; left: calc(var(--r) * -13cqw); width: 52cqw; background: #C1BAA1 center / cover no-repeat; }
.sl-how__head { position: absolute; left: -2cqw; right: -2cqw; top: 0; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 14px 3px rgb(255 255 255 / 0.8); opacity: 0; }
.sl-how__scene .sl-how__truck { position: absolute; right: 4cqw; bottom: 10cqh; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sl-accent-900); color: #fff; translate: 0 50%; }
.sl-how__scene .sl-how__arrive { position: absolute; right: calc(4cqw + 44px); bottom: 10cqh; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: #1E1E1C; white-space: nowrap; translate: 0 50%; }
.is-play .sl-how__roll { animation: sl-how-print 900ms cubic-bezier(0.45, 0, 0.3, 1) 200ms both, sl-how-part 800ms cubic-bezier(0.65, 0, 0.2, 1) calc(1250ms + var(--r) * 70ms) both; }
.is-play .sl-how__head { animation: sl-how-head 900ms cubic-bezier(0.45, 0, 0.3, 1) 200ms both; }
.is-play .sl-how__truck { animation: sl-how-drive 1000ms cubic-bezier(0.2, 0.75, 0.2, 1) 2000ms both; }
.is-play .sl-how__arrive { animation: sl-how-arrive 400ms var(--sl-ease) 2900ms both; }
@keyframes sl-how-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.sl-how .sl-how__nav { display: none; }
@keyframes sl-how-part { from { translate: 0 0; } }
@keyframes sl-how-head { 0% { opacity: 1; top: 0; } 92% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes sl-how-drive { from { opacity: 0; translate: -100cqw 50%; } }
@keyframes sl-how-arrive { from { opacity: 0; translate: 10px 50%; } }

@media (max-width: 899px) {
  /* Phones and narrow tablets: one row to swipe, the next card peeking in. */
  .sl-how__list { display: flex; gap: 12px; margin-inline: calc(-1 * var(--sl-gutter)); padding-inline: var(--sl-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sl-gutter); scrollbar-width: none; }
  .sl-how__list::-webkit-scrollbar { display: none; }
  .sl-how .sl-how__nav { display: flex; margin-left: auto; }
  .sl-how__step { flex: 0 0 min(88%, 360px); scroll-snap-align: start; padding: 8px; border-radius: 18px; }
  .sl-how__scene { height: 112px; border-radius: 12px; }
  .sl-how__copy { padding: 10px 4px 4px; }
  .sl-how__name { font-size: 1.0625rem; }
  .sl-how__text { padding-left: 0; font-size: 0.875rem; line-height: 1.5; }
  .sl-how__own { margin-top: 14px; font-size: 0.875rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-how *, .sl-how__step { transition: none !important; animation: none !important; }
}

.sl-split--reverse .sl-split__media { order: 2; }
@media (max-width: 899px) { .sl-split--reverse .sl-split__media { order: 0; } }
/* "Tapeta po vašoj slici" on the homepage (Andrej, 24.10.2026): oversized title, three idea lines that
   switch the photo (a thin bar fills while they take turns), the photo opens upward with a slow
   parallax. Word and photo motion waits for the section to come into view (.is-in from data-reveal). */
.sl-hm-own__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.sl-hm-own__title { margin: 14px 0 0; font-size: clamp(2.5rem, 1.1rem + 4.2vw, 5.75rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; color: var(--sl-text); }
.js .sl-hm-own:not(.is-in) .sl-pz-w > span,
.js .sl-hm-own:not(.is-in) .sl-hm-own__frame,
.js .sl-hm-own:not(.is-in) .sl-hm-own__img { animation-play-state: paused; }
.sl-hm-own__ideas { margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-hm-own__idea { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 15px 0; border-top: 1px solid var(--sl-line); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); font-weight: 300; letter-spacing: -0.02em; color: var(--sl-muted); cursor: default; transition: color 400ms var(--sl-ease); }
/* The arrow sits in a bordered circle like the lines in "Stikerlab je počeo od dečje sobe"; the active
   idea (hover or its turn) gets the same dark, turned circle as those lines on hover (Andrej, 24.10.2026). */
.sl-hm-own__arrow { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid var(--sl-line); border-radius: 50%; transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease), border-color 400ms var(--sl-ease), transform 500ms var(--sl-ease); }
.sl-hm-own__idea.is-active { color: var(--sl-text); }
.sl-hm-own__idea.is-active .sl-hm-own__arrow { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
/* While the ideas take turns, a thin bar runs under the active one for its 4 s. */
.sl-hm-own__idea::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; }
.sl-hm-own.is-cycling .sl-hm-own__idea.is-active::after { animation: sl-own-bar 4s linear forwards; }
@keyframes sl-own-bar { to { transform: scaleX(1); } }
.sl-hm-own__text { max-width: 52ch; margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-hm-own__cta { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); margin-top: clamp(24px, 3vw, 36px); }
/* Points up-right (to the page), and straightens on hover; extra class to beat the .sl-pz-seal rules later in the file. */
.sl-hm-own .sl-hm-own__seal .sl-hm-own__seal-arrow { transform: rotate(-45deg); }
.sl-hm-own .sl-hm-own__seal:hover .sl-hm-own__seal-arrow, .sl-hm-own .sl-hm-own__seal:focus-visible .sl-hm-own__seal-arrow { transform: rotate(0deg); }

.sl-hm-own__visual { position: relative; margin: 0; }
.sl-hm-own__frame { position: relative; display: block; aspect-ratio: 4 / 4.6; max-height: 80vh; overflow: hidden; border-radius: 28px; background: var(--sl-soft); clip-path: inset(100% 0 0 0 round 28px); animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
.sl-hm-own__img { position: absolute; left: 0; top: 0; width: 100%; height: 118%; object-fit: cover; opacity: 0; transform: translateY(var(--py, -6%)) scale(1.08); transition: opacity 800ms var(--sl-ease), scale 1400ms var(--sl-ease); scale: 1.06; }
.sl-hm-own__img.is-active { opacity: 1; scale: 1; }
.sl-hm-own__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 0.875rem; color: var(--sl-muted); }

@media (max-width: 899px) {
  .sl-hm-own__grid { grid-template-columns: 1fr; }
  .sl-hm-own__visual { order: -1; }
  .sl-hm-own__frame { aspect-ratio: 4 / 3.6; }
}
@media (max-width: 599px) {
  .sl-hm-own__idea { padding: 12px 0; }
  .sl-hm-own__cta { gap: 14px; }
  .sl-hm-own__cta .sl-pz-btn { min-height: 54px; padding-inline: 20px; font-size: 0.96875rem; }
  .sl-hm-own__seal { width: 82px; }
  .sl-hm-own__seal .sl-pz-seal__arrow { width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-hm-own .sl-pz-w > span { transform: none; animation: none !important; }
  .sl-hm-own__frame { clip-path: none; animation: none !important; }
  .sl-hm-own__img { transform: none; height: 100%; scale: 1; }
  .sl-hm-own__idea::after { display: none; }
}

/* Rooms: photo cards with the label under the image. */
.sl-hm-rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sl-hm-room { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.sl-hm-room__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sl-radius); background: var(--sl-soft); }
.sl-hm-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sl-ease); }
.sl-hm-room:hover img { transform: scale(1.04); }
.sl-hm-room__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
@media (max-width: 899px) { .sl-hm-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.sl-hm-kids__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* "Stikerlab je počeo od dečje sobe" on the homepage (Andrej, 24.10.2026, same photo): the photo on the
   left opens upward with a slow parallax and a white turning seal over its corner; on the right an
   outlined "2015" behind an oversized title whose words rise, and the three categories as big link
   lines. Motion waits for .is-in from data-reveal. */
.sl-kx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 104px); align-items: center; margin-bottom: calc(clamp(24px, 3vw, 48px) + 70px); } /* +70px to the rail below (Andrej, 24.10.2026) */
.sl-kx__visual { position: relative; margin: 0; }
.sl-kx__frame { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 28px; background: var(--sl-soft); clip-path: inset(100% 0 0 0 round 28px); animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
.sl-kx__img { position: absolute; left: 0; top: 0; width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--py, -6%)) scale(1.08); animation: sl-pz-settle 1600ms var(--sl-ease) 150ms both; }
.js .sl-kx:not(.is-in) .sl-kx__frame, .js .sl-kx:not(.is-in) .sl-kx__img, .js .sl-kx:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-kx .sl-kx__seal { position: absolute; right: clamp(-14px, -1vw, -8px); bottom: clamp(-30px, -2vw, -16px); width: 128px; border-radius: 50%; background: #fff; box-shadow: 0 22px 44px -22px rgb(30 30 28 / 0.45); }
.sl-kx .sl-kx__seal .sl-kx__heart, .sl-kx .sl-kx__seal:hover .sl-kx__heart { transform: none; background: var(--sl-soft); color: var(--sl-text); }
.sl-kx__heart svg { fill: currentColor; animation: sl-heartbeat 7s ease-in-out 2s infinite; }

.sl-kx__copy { position: relative; isolation: isolate; }
.sl-kx__year { position: absolute; z-index: -1; top: -0.42em; right: -0.04em; font-size: clamp(6rem, 3rem + 9vw, 13rem); font-weight: 300; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px var(--sl-line); pointer-events: none; user-select: none; }
.sl-kx__title { margin: 12px 0 0; font-size: clamp(2.375rem, 1.2rem + 3.4vw, 4.75rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-kx__text { max-width: 46ch; margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
/* Eight kinds of children's products (Andrej, 24.10.2026), so the lines are a little tighter. */
.sl-kx__links { margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-kx__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 9px 0; border-top: 1px solid var(--sl-line); color: var(--sl-text); font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 300; letter-spacing: -0.02em; text-decoration: none; }
/* A dark line runs under the row from the left on hover. */
.sl-kx__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--sl-ease); }
.sl-kx__link:hover::after, .sl-kx__link:focus-visible::after { transform: scaleX(1); }
.sl-kx__go { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid var(--sl-line); border-radius: 50%; transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease), border-color 400ms var(--sl-ease), transform 500ms var(--sl-ease); }
.sl-kx__link:hover .sl-kx__go, .sl-kx__link:focus-visible .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
.sl-kx__link:focus-visible { outline: none; }

@media (max-width: 899px) {
  .sl-kx { grid-template-columns: 1fr; }
  .sl-kx__frame { aspect-ratio: 4 / 3.2; }
  .sl-kx .sl-kx__seal { width: 96px; right: 12px; bottom: -24px; }
  .sl-kx .sl-kx__seal .sl-pz-seal__arrow { width: 40px; }
  .sl-kx__copy { padding-top: 12px; }
}
/* On a phone the outlined year would run into the seal and the title. */
@media (max-width: 599px) { .sl-kx__year { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sl-kx__frame { clip-path: none; animation: none !important; }
  .sl-kx__img { transform: none; height: 100%; animation: none !important; }
  .sl-kx .sl-pz-w > span { transform: none; animation: none !important; }
}

/* Materials and installation side by side. */
.sl-hm-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sl-hm-material { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); }
.sl-hm-material p { margin: 0; line-height: 1.6; color: var(--sl-text-2); }
.sl-hm-material .sl-material__price { color: var(--sl-accent); }
.sl-hm-material--note { border: 0; background: var(--sl-accent-50); }
.sl-hm-material__swatch { width: 56px; height: 56px; border-radius: var(--sl-pill); background: radial-gradient(circle at 30% 30%, #fff 0%, #E9E4DA 55%, #D8D1C3 100%); box-shadow: inset 0 0 0 1px var(--sl-line); }
.sl-hm-material__swatch--gloss { background: radial-gradient(circle at 30% 25%, #fff 0%, #fff 18%, var(--sl-accent-50) 55%, var(--sl-sand) 100%); }
@media (max-width: 899px) { .sl-hm-materials { grid-template-columns: 1fr; } }

/* FAQ: heading column on the left, answers on the right. */
.sl-hm-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--sl-space-6); align-items: start; }
.sl-hm-faq__head p { margin: 10px 0 0; }
@media (max-width: 899px) { .sl-hm-faq { grid-template-columns: 1fr; gap: var(--sl-space-4); } }

/* "Materijal i montaža" on the homepage (Andrej, 24.10.2026, awwwards style): oversized title whose
   words rise, then two big cards. The material card is a sheet of the montage photo's motif
   whose corner peels off and sticks back in a calm loop (Andrej, 24.10.2026: simple and neutral; --peel is a
   registered length, so it can be animated). The installation card is the montage photo opening from
   below under a dark gradient. Waits for .is-in. */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 0px; }
.js .sl-mx[data-reveal], .js .sl-qx[data-reveal] { opacity: 1; transform: none; }
.js .sl-mx:not(.is-in) .sl-pz-w > span, .js .sl-qx:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-mx__title, .sl-qx__title { margin: 0; font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-mx__title { margin-bottom: clamp(28px, 3.5vw, 56px); }
.sl-mx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 2vw, 28px); }
.sl-mx__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, 40vw, 580px); padding: clamp(26px, 3vw, 44px); overflow: hidden; border-radius: 28px; }
.sl-mx__copy { position: relative; z-index: 1; display: grid; justify-items: start; }
.sl-mx__eyebrow { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-mx__name { margin: 0 0 12px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.035em; }
.sl-mx__text { max-width: 40ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-mx__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 500; color: var(--sl-text); text-decoration: underline; text-underline-offset: 0.3em; }
.sl-mx__link:hover { text-decoration-thickness: 2px; }

.sl-mx__card--mat { background: var(--sl-soft); }
.sl-mx__visual { position: absolute; inset: 0 0 auto; display: grid; place-items: center; height: 60%; }
/* The sheet sits in the middle of the room between the card's top and its text (Andrej, 24.10.2026). */
.sl-mx__card--mat .sl-mx__visual { position: relative; inset: auto; flex: 1 1 auto; height: auto; min-height: 0; padding-bottom: clamp(26px, 3vw, 44px); }
.sl-mx__stage { --w: clamp(170px, 16vw, 240px); position: relative; width: var(--w); aspect-ratio: 4 / 4.8; }
.sl-mx__sheet { position: absolute; inset: 0; rotate: -4deg; filter: drop-shadow(0 18px 22px rgb(58 55 46 / 0.18)); animation: sl-mx-peel 5.6s cubic-bezier(0.65, 0, 0.35, 1) 400ms infinite; }
/* The montage photo's motif (set in front-page.php), cream while it loads. */
.sl-mx__print { position: absolute; inset: 0; border-radius: 6px; background: #F5F0E8 center / cover no-repeat; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%); }
/* The lifted corner: the light back of the vinyl folded over the print, with a soft shadow. */
.sl-mx__curl { position: absolute; right: 0; bottom: 0; width: var(--peel); height: var(--peel); filter: drop-shadow(-4px -4px 6px rgb(58 55 46 / 0.2)); }
.sl-mx__flap { position: absolute; inset: 0; background: linear-gradient(135deg, #fff 0%, #F7F3EC 45%, #E3DBCB 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }
@keyframes sl-mx-peel { 0%, 10% { --peel: 0px; } 38%, 52% { --peel: calc(var(--w) * 0.38); } 78%, 100% { --peel: 0px; } }
.js .sl-mx:not(.is-in) .sl-mx__sheet { animation-play-state: paused; }

.sl-mx__card--fit { background: var(--sl-accent-900); color: #fff; }
.sl-mx__card--fit .sl-mx__eyebrow { color: rgb(255 255 255 / 0.75); }
.sl-mx__card--fit .sl-mx__text { color: rgb(255 255 255 / 0.9); }
/* The photo is simply the card's background, no reveal from below (Andrej, 25.10.2026: the dark card showed first). */
.sl-mx__photo { position: absolute; inset: 0; }
.sl-mx__photo img { width: 100%; height: 100%; object-fit: cover; }
.sl-mx__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(30 30 28 / 0.85) 0%, rgb(30 30 28 / 0.4) 45%, rgb(30 30 28 / 0) 75%); }
.sl-mx__btn { margin-top: 24px; }

/* "Pre nego što poručite" (Andrej, 24.10.2026): sticky title and phone on the left, the questions as
   large lines on the right. Answers open smoothly where ::details-content and interpolate-size exist,
   instantly elsewhere. The lines rise one after another when the section comes into view. */
.sl-qx__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sl-qx__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-qx__help { margin: clamp(24px, 3vw, 40px) 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-qx__phone { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 300; letter-spacing: -0.02em; color: var(--sl-text); text-decoration: none; }
.sl-qx__phone-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sl-soft); transition: background-color 300ms var(--sl-ease), color 300ms var(--sl-ease); }
.sl-qx__phone:hover .sl-qx__phone-icon { background: var(--sl-text); color: #fff; }

.sl-faq--lines { display: block; border-bottom: 1px solid var(--sl-line); interpolate-size: allow-keywords; }
.sl-faq--lines .sl-faq__item { border: 0; border-top: 1px solid var(--sl-line); border-radius: 0; background: none; }
.sl-faq--lines .sl-faq__q { gap: 24px; min-height: 0; padding: clamp(20px, 2vw, 28px) 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; }
.sl-faq--lines .sl-faq__q::after { content: ""; width: 44px; height: 44px; border: 1px solid var(--sl-line); background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform 400ms var(--sl-ease), background-color 300ms var(--sl-ease), border-color 300ms var(--sl-ease), color 300ms var(--sl-ease); }
.sl-faq--lines .sl-faq__q:hover::after { border-color: var(--sl-text); }
/* Full background again: the base open rule (more specific than the closed one here) resets the cross. */
.sl-faq--lines .sl-faq__item[open] .sl-faq__q::after { content: ""; border-color: var(--sl-text); background: linear-gradient(#fff, #fff) center / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 14px no-repeat, var(--sl-text); color: #fff; transform: rotate(45deg); }
.sl-faq--lines .sl-faq__a { max-width: 62ch; padding: 0 68px 28px 0; font-size: 1.0625rem; }
.sl-faq--lines .sl-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 450ms var(--sl-ease), content-visibility 450ms allow-discrete; }
.sl-faq--lines .sl-faq__item[open]::details-content { block-size: auto; }
.js .sl-qx:not(.is-in) .sl-faq--lines .sl-faq__item { opacity: 0; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) 300ms both; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item:nth-child(2) { animation-delay: 380ms; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item:nth-child(3) { animation-delay: 460ms; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item:nth-child(4) { animation-delay: 540ms; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item:nth-child(5) { animation-delay: 620ms; }
.sl-qx.is-in .sl-faq--lines .sl-faq__item:nth-child(n + 6) { animation-delay: 700ms; }
@keyframes sl-stx-rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 899px) {
  .sl-mx__grid, .sl-qx__in { grid-template-columns: 1fr; }
  .sl-mx__card { min-height: 470px; }
  .sl-mx__visual { height: 50%; }
  .sl-mx__stage { --w: clamp(150px, 42vw, 190px); }
  .sl-qx__aside { position: static; }
  .sl-faq--lines .sl-faq__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-mx .sl-pz-w > span, .sl-qx .sl-pz-w > span { transform: none; animation: none !important; }
  /* A still sheet with its corner lifted a little. */
  .sl-mx__sheet { --peel: calc(var(--w) * 0.22); animation: none !important; }
  .js .sl-qx .sl-faq--lines .sl-faq__item { opacity: 1; animation: none !important; }
  .sl-faq--lines .sl-faq__item::details-content { transition: none; }
}

/* ---------- Category (archive-product.php, sl-cat-*) ---------- */

.sl-cat { padding-top: var(--sl-space-5); padding-bottom: var(--sl-space-6); }
.sl-cat__head { margin-bottom: var(--sl-space-5); }
.sl-cat__title { margin: 0 0 10px; font-size: var(--sl-fs-page); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.sl-cat__page { font-size: 0.5em; font-weight: 400; color: var(--sl-muted); letter-spacing: 0; }
.sl-cat__intro { margin: 0; }
.sl-cat__chips { margin-bottom: var(--sl-space-5); }
.sl-chip[aria-current="page"] { border-color: var(--sl-accent); background: var(--sl-accent-50); color: var(--sl-accent); }
.sl-chip--todo { color: var(--sl-muted); border-style: dashed; }

/* Sticker sizes: one strip above the grid, shoppers look for it before opening a motif. */
.sl-cat__sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: var(--sl-space-5); padding: 14px 18px; border-radius: var(--sl-radius); background: var(--sl-accent-50); }
.sl-cat__sizes-title { margin: 0; font-weight: 600; color: var(--sl-accent); }
.sl-cat__sizes ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.sl-cat__sizes strong { font-weight: 600; }

.sl-cat__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: var(--sl-space-5); padding-block: 12px; border-block: 1px solid var(--sl-line); }
.sl-cat__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
/* Room and sorting are "Dezen" switchers (.sl-ka-dz--pick, Andrej 25.10.2026): a short single-column panel
   under the button, right-aligned since they stand on the right. */
@media (min-width: 900px) { .sl-cat__sort > .sl-ka-dz.sl-ka-dz--pick .sl-ka-dz__panel { left: auto; right: 0; width: 280px; } }
.sl-ka-dz--pick .sl-ka-dz__list { grid-template-columns: 1fr; }
.sl-ka-dz--pick .sl-ka-dz__item { justify-content: space-between; padding: 4px 12px; }
.sl-cat__pick-more { display: none; }
/* Phones: room and sorting share one row, half each, and the keys are left to screen readers there; sorting
   alone has the full row and keeps "Sortiranje:" (Andrej, 26.10.2026). */
@media (max-width: 599px) {
  .sl-cat__sort { flex-wrap: nowrap; width: 100%; margin-left: 0; }
  .sl-cat__sort > .sl-ka-dz.sl-ka-dz--pick { flex: 1 1 0; min-width: 0; }
  .sl-cat__sort > .sl-ka-dz--pick .sl-ka-dz__btn.sl-ka-dz__btn { width: 100%; }
  .sl-cat__sort:has(> .sl-ka-dz--pick + .sl-ka-dz--pick) .sl-ka-dz__btn.sl-ka-dz__btn { padding: 0 10px 0 14px; font-size: 0.875rem; }
  .sl-cat__sort:has(> .sl-ka-dz--pick + .sl-ka-dz--pick) .sl-ka-dz__key { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sl-ka-dz--pick .sl-ka-dz__btn strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sl-cat__pick-more { display: inline; }
  .sl-ka-dz--pick .sl-ka-dz__chev { flex: none; margin-left: auto; }
}

.sl-cat__grid { margin: 0; padding: 0; list-style: none; }

/* "Send your own photo": one wide card after the eighth motif. */
.sl-cat__promo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: var(--sl-radius-lg); background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-cat__promo-media img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
.sl-cat__promo-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: clamp(22px, 3vw, 44px); }
.sl-cat__promo-title { margin: 0; max-width: 520px; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 500; line-height: 1.25; }
.sl-cat__promo .sl-btn--dark { background: #fff; color: var(--sl-text); }
.sl-cat__promo .sl-btn--dark:hover { background: var(--sl-soft); color: var(--sl-text); }
@media (max-width: 767px) {
  .sl-cat__promo { grid-template-columns: 1fr; }
  .sl-cat__promo-media img { max-height: 200px; }
}

.sl-pager { margin-top: var(--sl-space-7); }
.sl-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sl-pager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); font-weight: 500; text-decoration: none; }
.sl-pager a.page-numbers:hover { border-color: var(--sl-text); color: var(--sl-text); }
.sl-pager .page-numbers.current { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-pager .page-numbers.dots { border-color: transparent; }

.sl-cat__empty { margin-top: var(--sl-space-4); }

/* Text and questions under the grid, side by side on desktop. */
.sl-cat__below { border-top: 1px solid var(--sl-line); }
.sl-cat__below-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sl-space-7); align-items: start; }
.sl-cat__below-grid > :only-child { grid-column: 1 / -1; }
.sl-cat__text h2 { margin: 0 0 10px; font-size: 1.375rem; font-weight: 500; }
.sl-cat__text h2:not(:first-child) { margin-top: var(--sl-space-5); }
.sl-cat__text p { margin: 0 0 12px; line-height: 1.7; color: var(--sl-text-2); }
.sl-cat__old { color: var(--sl-text-2); line-height: 1.7; }
.sl-cat__faq .sl-hm-head__title { margin-bottom: var(--sl-space-4); }
@media (max-width: 899px) { .sl-cat__below-grid { grid-template-columns: 1fr; gap: var(--sl-space-6); } }

/* Sticker scene (template-parts/sticker-scene.php): the homepage's first hero slide and the
   /stikeri-za-zid/ hero; the poster scene is the homepage's second slide (wall-scene.php). The stage
   keeps the render's ratio (--ar) and covers its .sl-scene box like object-fit: cover; --fx/--fy pick
   the point kept in view. Stickers stick on and framed posters are hung one by one (longer than the
   300 ms rule, Andrej asked for the effect). */
.sl-scene { --fx: 0.5; --fy: 0.38; overflow: hidden; container-type: size; background: #E4E0D3; }
.sl-sh { position: relative; margin-bottom: var(--sl-space-5); overflow: hidden; border-radius: var(--sl-radius-lg); background: var(--sl-soft); }
.sl-sh__media { position: relative; height: clamp(460px, 46vw, 620px); }
.sl-sh__stage {
  --sw: max(100cqw, 100cqh * var(--ar, 2.7));
  --sh: calc(var(--sw) / var(--ar, 2.7));
  position: absolute;
  left: clamp(100cqw - var(--sw), 50cqw - var(--fx) * var(--sw), 0px);
  top: clamp(100cqh - var(--sh), 50cqh - var(--fy) * var(--sh), 0px);
  width: var(--sw);
  height: var(--sh);
}
.sl-sh__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-sh__s { position: absolute; left: var(--l); top: var(--t); width: var(--w); transform-origin: 50% 45%; }
.sl-sh__s img { display: block; width: 100%; height: auto; }
/* Light passing over fresh vinyl, masked to the sticker's own shape. */
.sl-sh__s::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat; opacity: 0; pointer-events: none; }
.sl-sh__tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: var(--sl-pill); background: #fff; box-shadow: var(--sl-shadow); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; color: var(--sl-text); }
.sl-sh__tag-arrow { transform: rotate(var(--ta, 150deg)); color: var(--sl-accent); }
.sl-sh__body { display: flex; flex-direction: column; gap: 14px; padding: 22px clamp(18px, 4vw, 32px) 26px; }
.sl-sh__title { margin: 0; font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; }
.sl-sh__text { margin: 0; font-size: var(--sl-fs-lead); line-height: 1.55; color: var(--sl-text-2); }
.sl-sh__name { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-sh__name a { font-weight: 500; color: var(--sl-text); }
.sl-sh__pill { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: var(--sl-pill); background: var(--sl-accent-900); color: var(--sl-on-dark); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
@media (min-width: 1100px) {
  /* Text sits on the empty left of the wall; the stickers start at 55% of the render. */
  .sl-sh__body { position: absolute; inset: 0 auto 0 0; z-index: 1; justify-content: center; width: 40%; padding: 40px 12px 40px clamp(28px, 3.5vw, 52px); }
  .sl-sh__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(244 242 235 / 0.7) 0%, rgb(244 242 235 / 0.4) 26%, rgb(244 242 235 / 0) 40%); pointer-events: none; }
}
@media (max-width: 1099px) {
  .sl-sh__media { --fx: 0.71; --fy: 0.4; height: clamp(260px, 62vw, 520px); }
}
@media (max-width: 479px) { .sl-sh__tag { display: none; } }

/* As homepage slides. On phones the stage keeps to the top and the floor tone fills the strip under
   it. The hero copy follows the slide's data-copy (main.js copies it to the hero): sticker copy,
   poster copy, or the wallpaper copy with the H1 for the photos; they share one grid cell and
   cross-fade. */
.sl-hero__scene { background: #E4E0D3; }
.sl-hero__copies { display: grid; }
.sl-hero__copy { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s 600ms; }
.sl-hero[data-copy="stikeri"] [data-copy-for="stikeri"],
.sl-hero[data-copy="posteri"] [data-copy-for="posteri"],
.sl-hero[data-copy="photos"] [data-copy-for="photos"] { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }
@media (min-width: 900px) and (max-width: 1199px) { .sl-hero__scene { --fx: 0.45; } .sl-hero__scene--posteri { --fx: 0.4; } }
@media (max-width: 899px) {
  /* The copy covers the lower ~390px of the hero, so the hero is taller here and the stage takes
     the top half: every sticker sits above the copy, and the stage fades into the floor tone. */
  .sl-hero { height: 620px; }
  .sl-hero__scene { --fx: 0.71; background: #C6A386; }
  .sl-hero__scene .sl-sh__stage { --sw: max(100cqw * 2.2, 100cqh * 1.35); top: 0; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
  .sl-hero__scene--posteri { --fx: 0.63; }
  .sl-hero__scene--posteri .sl-sh__stage { --sw: max(100cqw * 2.5, 100cqh * 1.4); }
  .sl-hero__copy { justify-content: flex-end; gap: 12px; }
}

.js .sl-sh__s, .js .sl-sh__tag { opacity: 0; }
[data-stick-hero].is-in .sl-sh__s { animation: sl-stick 900ms var(--sl-ease) var(--d) both; }
[data-stick-hero].is-in .sl-sh__s::after { animation: sl-shine 750ms ease-out calc(var(--d) + 560ms) both; }
[data-stick-hero].is-in .sl-sh__tag { animation: sl-tag 320ms var(--sl-ease) 2250ms both; }
/* Framed posters swing on their nail and settle; the light passes over the glass. */
.sl-sh__stage--hang .sl-sh__s { transform-origin: 50% 0; }
[data-stick-hero].is-in .sl-sh__stage--hang .sl-sh__s { animation: sl-hang 1100ms var(--sl-ease) var(--d) both; }
@keyframes sl-hang {
  0% { opacity: 0; transform: translateY(-9%) rotate(var(--r)); filter: drop-shadow(0 22px 18px rgb(60 48 24 / 0.28)); }
  30% { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * -0.6)); }
  55% { transform: rotate(calc(var(--r) * 0.3)); filter: drop-shadow(0 6px 6px rgb(60 48 24 / 0.2)); }
  78% { transform: rotate(calc(var(--r) * -0.12)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgb(60 48 24 / 0)); }
}
@keyframes sl-stick {
  0% { opacity: 0; transform: translateY(-12%) rotate(var(--r)) scale(1.16); filter: drop-shadow(0 26px 20px rgb(60 48 24 / 0.32)); }
  35% { opacity: 1; }
  68% { transform: rotate(0deg) scale(0.985); filter: drop-shadow(0 3px 3px rgb(60 48 24 / 0.22)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgb(60 48 24 / 0)); }
}
@keyframes sl-shine {
  0% { opacity: 1; background-position: 100% 0; }
  100% { opacity: 1; background-position: 0 0; }
}
@keyframes sl-tag {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ---------- GREENGUARD Gold band on the homepage (template-parts/safe-inks.php, Andrej 23.10.2026) ----------
   Pastel-green band with soft leaf branches behind it (the eco story). Editorial since 24.10.2026
   (Andrej): oversized title whose words rise, the three places as cards with a green icon circle that
   rise one after another, a tall photo that opens upward with a slow parallax and the turning seal over
   its corner; the leaves drift slowly. Text greens keep AA contrast on the band. */
.sl-safe__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: clamp(32px, 5vw, 88px) clamp(24px, 5vw, 88px);
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(24px, 3vw, 40px);
  background: linear-gradient(120deg, #EEF4EA 0%, #E2ECDC 55%, #D6E4CF 100%);
  color: #2D3B2A;
}
.js .sl-safe[data-reveal] { opacity: 1; transform: none; }
.js .sl-safe:not(.is-in) .sl-pz-w > span, .js .sl-safe:not(.is-in) .sl-safe__photo, .js .sl-safe:not(.is-in) .sl-safe__img { animation-play-state: paused; }
.sl-safe__leaves { position: absolute; z-index: -1; inset: -3%; width: 106%; height: 106%; color: #A9C29C; pointer-events: none; animation: sl-safe-drift 16s ease-in-out infinite alternate; }
@keyframes sl-safe-drift { to { transform: translate(-1.5%, 1.2%) rotate(-0.6deg); } }
.sl-safe__leaves path:not([fill="none"]) { fill: #BCD2B0; opacity: 0.4; }
.sl-safe__leaves path[fill="none"] { opacity: 0.35; }
.sl-safe__branch--b path:not([fill="none"]) { fill: #C7DABD; }
.sl-safe__leaves .sl-safe__leaf { fill: #B3CBA6; opacity: 0.25; }
.sl-safe__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2C4D23; }
.sl-safe__title { margin: 14px 0 0; font-size: clamp(2.5rem, 1.2rem + 4vw, 5.5rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; color: #111C0E; }
.sl-safe__title em { font-style: normal; font-weight: 500; letter-spacing: -0.05em; color: #3A6A2C; }
.sl-safe__lead { max-width: 58ch; margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: #1C2819; }
.sl-safe__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.sl-safe__place { display: grid; align-content: start; gap: 14px; padding: clamp(16px, 1.6vw, 22px); border: 1px solid rgb(45 59 42 / 0.14); border-radius: 20px; background: rgb(255 255 255 / 0.6); }
.js .sl-safe:not(.is-in) .sl-safe__place { opacity: 0; }
/* No hover effect on these cards (Andrej, 24.10.2026). */
.sl-safe.is-in .sl-safe__place { animation: sl-safe-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(450ms + var(--i) * 140ms) both; }
@keyframes sl-safe-rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
.sl-safe__icon { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 50%; background: #3A6A2C; color: #fff; }
.sl-safe__glyph { width: 26px; height: 26px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.sl-safe__place-label { font-size: 0.96875rem; font-weight: 600; line-height: 1.35; color: #111C0E; }
.sl-safe__note { max-width: 62ch; margin: 20px 0 0; font-size: 0.875rem; line-height: 1.5; color: #2C4425; }
.sl-safe__visual { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.sl-safe__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: #D6E4CF; box-shadow: 0 36px 70px -36px rgb(45 59 42 / 0.55); clip-path: inset(100% 0 0 0 round 28px); animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
.sl-safe__img { position: absolute; left: 0; top: 0; width: 100%; height: 118%; object-fit: cover; object-position: 50% 40%; transform: translateY(var(--py, -6%)) scale(1.08); animation: sl-pz-settle 1600ms var(--sl-ease) 150ms both; }
.sl-safe__seal { position: absolute; left: -52px; bottom: -22px; display: grid; place-items: center; width: 148px; aspect-ratio: 1; border-radius: 50%; background: #F6F9F3; color: #2D3B2A; box-shadow: 0 18px 36px -18px rgb(45 59 42 / 0.5); }
.sl-safe__ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: sl-safe-spin 28s linear infinite; }
.sl-safe__ring text { font-family: var(--sl-font); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; fill: #1F3A17; }
.sl-safe__logo { position: relative; display: grid; place-items: center; width: 78px; aspect-ratio: 1; border-radius: 50%; background: #fff; text-align: center; }
/* UL circle from the official GREENGUARD Gold mark as a mask, so it takes the band's green. */
.sl-safe__ul { width: 60px; height: 60px; background: #3A6A2C; -webkit-mask: url(../img/icons/greenguard-ul.png) center / contain no-repeat; mask: url(../img/icons/greenguard-ul.png) center / contain no-repeat; }
@keyframes sl-safe-spin { to { transform: rotate(360deg); } }
@media (max-width: 999px) {
  .sl-safe__list { grid-template-columns: 1fr; }
  .sl-safe__place { grid-template-columns: 52px minmax(0, 1fr); align-items: center; }
}
@media (max-width: 899px) {
  .sl-safe__box { grid-template-columns: 1fr; }
  .sl-safe__visual { justify-self: center; max-width: 320px; }
  .sl-safe__seal { left: -14px; width: 116px; }
  .sl-safe__logo { width: 64px; }
  .sl-safe__ul { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-safe__ring, .sl-safe__leaves { animation: none; }
  .sl-safe__photo { clip-path: none; animation: none !important; }
  .sl-safe__img { transform: none; height: 100%; animation: none !important; }
  .sl-safe .sl-pz-w > span { transform: none; animation: none !important; }
  .js .sl-safe .sl-safe__place { opacity: 1; animation: none !important; }
}

/* ---------- Landing pages (page-templates/*) ---------- */

/* Room photo across the screen, the copy in a white panel over its lower left corner. */
.sl-room-hero { position: relative; }
.sl-room-hero__media { height: clamp(420px, 72vh, 680px); overflow: hidden; background: var(--sl-soft-2); }
.sl-room-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sl-room-hero__in { position: absolute; inset: auto 0 clamp(24px, 4vw, 56px); pointer-events: none; }
.sl-room-hero__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--sl-radius-lg); background: rgb(255 255 255 / 0.96); box-shadow: var(--sl-shadow); pointer-events: auto; }
.sl-room-hero__panel .sl-breadcrumbs { margin: 0; }
.sl-room-hero__panel .sl-lead { margin: 0; }
.sl-room-hero__title { margin: 0; font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 767px) {
  .sl-room-hero__media { height: auto; aspect-ratio: 4 / 3; }
  /* Relative, not static: a static panel would be painted under the photo it overlaps. */
  .sl-room-hero__in { position: relative; inset: auto; margin-top: -40px; }
  .sl-room-hero__panel { max-width: none; }
}

.sl-pm-calc { justify-self: end; width: 100%; }
@media (max-width: 999px) { .sl-pm-calc { justify-self: stretch; } }

.sl-split--top { align-items: start; }
.sl-split__body > .sl-hm-head__title { margin: 0; }

.sl-rules { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; }
.sl-rules li { display: flex; align-items: center; gap: 12px; }
.sl-rules .sl-icon { flex: none; color: var(--sl-accent); }

.sl-sketch { margin: 0; padding: clamp(12px, 2vw, 24px); border-radius: 14px; background: #fff; border: 1px solid var(--sl-line); color: var(--sl-text); }
.sl-sketch svg { display: block; width: 100%; height: auto; }
.sl-dialog .sl-sketch { margin-block: 12px; }

/* Wall split into equal rolls, redrawn by the calculator (same marks as the homepage hero). */
.sl-rolls { position: relative; aspect-ratio: 3 / 2; margin: 18px 24px 0 0; border: 2px solid #fff; border-radius: 4px; background: url("../img/soba-dnevna-1200.webp") center / cover, var(--sl-soft-2); box-shadow: 0 0 0 1px var(--sl-line), var(--sl-shadow); }

.sl-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sl-table th, .sl-table td { padding: 12px 10px; border-bottom: 1px solid var(--sl-line); text-align: left; }
.sl-table th { font-weight: 600; color: var(--sl-muted); font-size: var(--sl-fs-small); }
.sl-table td:last-child { font-weight: 600; }

.sl-numbered { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: sl-step; }
.sl-numbered li { position: relative; padding-left: 48px; line-height: 1.6; color: var(--sl-text-2); counter-increment: sl-step; }
.sl-numbered li::before { content: counter(sl-step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--sl-pill); background: var(--sl-accent-50); color: var(--sl-accent); font-weight: 600; }


/* ---------- Tapete po želji (/tapete-po-zelji/, Andrej 24.10.2026) ----------
   Editorial landing around the photo inquiry form: oversized light type with words rising out of
   masks, a photo revealed upward with a slow parallax, a turning seal, a dark rounded form panel with
   line inputs and staggered idea tiles. Motion is longer than the 300 ms rule
   (asked for); all of it stops under prefers-reduced-motion. */

.sl-pz { overflow-x: clip; }

/* Hero */
.sl-pz-hero { padding: var(--sl-space-4) 0 clamp(48px, 7vw, 112px); }
.sl-pz-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(12px, 2vw, 28px); }
.sl-pz-hero__title { margin: 0; font-size: clamp(2.75rem, 1.1rem + 5.4vw, 7.25rem); font-weight: 300; line-height: 0.96; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-pz-line { display: block; }
/* The mask reaches 0.2em above the letters too, so carons on capitals (Č, Š, Ž) are not cut off, and a
   hidden word starts 135% low, so its caron does not peek over the lower edge before it rises. It also
   reaches 0.12em to the sides, or the last letter of a tight bold word is cut ("plaćanje", Andrej
   25.10.2026); the negative margin keeps the layout as it was. */
.sl-pz-w { display: inline-block; overflow: hidden; padding: 0.2em 0.12em 0.1em; margin: -0.2em -0.12em -0.1em; vertical-align: top; }
.sl-pz-w > span { display: inline-block; transform: translateY(135%); animation: sl-pz-rise 900ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(120ms + var(--i) * 70ms) forwards; }
.sl-pz-w--b { font-weight: 600; letter-spacing: -0.05em; }
@keyframes sl-pz-rise { to { transform: none; } }
.sl-pz-hero__lead { max-width: 54ch; margin: clamp(22px, 2.6vw, 36px) 0 0; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--sl-text-2); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 650ms forwards; }
.sl-pz-hero__cta { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(26px, 3vw, 44px); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 800ms forwards; }
@keyframes sl-pz-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.sl-pz-btn { min-height: 58px; padding-inline: 30px; font-size: 1.0625rem; }
.sl-pz-seal { position: relative; display: grid; place-items: center; flex: none; width: 118px; aspect-ratio: 1; border-radius: 50%; color: var(--sl-text); text-decoration: none; }
.sl-pz-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sl-pz-spin 22s linear infinite; }
.sl-pz-seal__ring text { font-family: var(--sl-font); font-size: 16.5px; font-weight: 600; letter-spacing: 0.14em; fill: currentColor; }
.sl-pz-seal__arrow { display: grid; place-items: center; width: 54px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); transform: rotate(90deg); transition: background-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease), transform 400ms var(--sl-ease); }
.sl-pz-seal:hover .sl-pz-seal__arrow, .sl-pz-seal:focus-visible .sl-pz-seal__arrow { background: var(--sl-text); color: #fff; transform: rotate(90deg); }
@keyframes sl-pz-spin { to { transform: rotate(360deg); } }

.sl-pz-hero__visual { position: relative; margin: 0; }
.sl-pz-hero__frame { display: block; aspect-ratio: 4 / 5; max-height: 78vh; margin-left: auto; overflow: hidden; border-radius: 28px; background: var(--sl-soft); clip-path: inset(100% 0 0 0 round 28px); animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
@keyframes sl-pz-clip { to { clip-path: inset(0 0 0 0 round 28px); } }
.sl-pz-hero__img { width: 100%; height: 118%; object-fit: cover; object-position: 58% 50%; transform: translateY(var(--py, -6%)) scale(1.08); animation: sl-pz-settle 1600ms var(--sl-ease) 150ms both; will-change: transform; }
@keyframes sl-pz-settle { from { scale: 1.12; } to { scale: 1; } }
.sl-pz-hero__cap { margin-top: 14px; font-size: 0.875rem; color: var(--sl-muted); text-align: right; }
.sl-pz-polaroid { position: absolute; left: -9%; bottom: 14%; width: min(42%, 240px); padding: 9px 9px 0; border-radius: 6px; background: #fff; box-shadow: 0 24px 48px -20px rgb(30 30 28 / 0.4); rotate: -7deg; opacity: 0; animation: sl-pz-drop 800ms cubic-bezier(0.2, 0.8, 0.25, 1.2) 1100ms forwards, sl-pz-float 7s ease-in-out 2s infinite; }
.sl-pz-polaroid__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--sl-soft); }
.sl-pz-polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.sl-pz-polaroid__cap { display: block; padding: 9px 2px 11px; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--sl-muted); text-align: center; }
@keyframes sl-pz-drop { from { opacity: 0; transform: translateY(-40px) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes sl-pz-float { 50% { translate: 0 -8px; } }

/* Form panel */
.sl-pz-form-sec { padding-bottom: clamp(48px, 7vw, 104px); scroll-margin-top: 80px; }
.sl-pz-panel { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 110px); padding: clamp(28px, 5vw, 88px); border-radius: clamp(24px, 3vw, 40px); background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-pz-panel__aside { align-self: start; position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-pz-panel__title { margin: 0; font-size: clamp(2.125rem, 1.2rem + 3vw, 4.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.sl-pz-panel__lead { max-width: 44ch; margin: 22px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-on-dark); }
.sl-pz-steps { display: grid; gap: 0; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; counter-reset: none; }
.sl-pz-steps li { padding: 16px 0; border-top: 1px solid rgb(236 235 222 / 0.18); }
.sl-pz-steps li:last-child { border-bottom: 1px solid rgb(236 235 222 / 0.18); }
.sl-pz-steps p { margin: 0; font-size: 0.96875rem; line-height: 1.55; }
.sl-pz-panel__call { margin: 24px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--sl-on-dark-muted); }
.sl-pz-panel__call a, .sl-pz-hint a { color: var(--sl-on-dark); text-underline-offset: 3px; }
.sl-pz-panel__call a:hover, .sl-pz-hint a:hover { color: #fff; }

.sl-pz-form { display: grid; gap: clamp(30px, 3.4vw, 48px); }
.sl-pz-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.sl-pz-group__label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-on-dark-muted); }
.sl-pz-group__label span { display: grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border: 1px solid rgb(236 235 222 / 0.35); border-radius: var(--sl-pill); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--sl-on-dark); }
.sl-pz-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
.sl-pz-field--full { grid-column: 1 / -1; }
.sl-pz-label { display: block; margin-bottom: 4px; font-size: 0.875rem; font-weight: 500; color: var(--sl-on-dark-muted); transition: color var(--sl-dur) var(--sl-ease); }
.sl-pz-label span { font-weight: 400; opacity: 0.8; }
.sl-pz-field:focus-within .sl-pz-label { color: #fff; }
/* Line inputs: the underline grows from the left on focus. */
.sl-pz-input { display: block; width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgb(236 235 222 / 0.38); border-radius: 0; background: linear-gradient(#fff, #fff) 0 100% / 0% 2px no-repeat; color: #fff; font: inherit; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); font-weight: 400; line-height: 1.4; transition: background-size 450ms var(--sl-ease), border-color var(--sl-dur) var(--sl-ease); }
.sl-pz-input::placeholder { color: rgb(236 235 222 / 0.42); font-size: 0.85em; }
.sl-pz-input:hover { border-bottom-color: rgb(236 235 222 / 0.7); }
.sl-pz-input:focus { outline: none; background-size: 100% 2px; }
.sl-pz-input:focus-visible { outline: none; }
.sl-pz-input--area { min-height: 128px; resize: vertical; }
.sl-pz-input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 100px var(--sl-accent-900); caret-color: #fff; }
.sl-pz-hint { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--sl-on-dark-muted); }
/* #F2A58E is 6.1:1 on the panel; the theme's error red would be too dark here. */
.sl-pz-err { margin: 8px 0 0; font-size: 0.875rem; font-weight: 500; color: #F2A58E; }
.sl-pz-err:empty { display: none; }
.sl-pz-field.is-invalid .sl-pz-input { border-bottom-color: #F2A58E; }
.sl-pz-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Drop zone: a dashed outline drawn in SVG, so the dashes can march while a file is dragged over. */
.sl-pz-drop { position: relative; display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 4vw, 56px) 20px; border-radius: 22px; background: rgb(255 255 255 / 0.04); text-align: center; cursor: pointer; transition: background-color 300ms var(--sl-ease); }
.sl-pz-drop__dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sl-pz-drop__dash rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: rgb(236 235 222 / 0.45); stroke-width: 1.5; stroke-dasharray: 8 8; transition: stroke 300ms var(--sl-ease); }
.sl-pz-drop:hover, .sl-pz-drop.is-over { background: rgb(255 255 255 / 0.08); }
.sl-pz-drop:hover .sl-pz-drop__dash rect, .sl-pz-drop.is-over .sl-pz-drop__dash rect { stroke: #fff; }
.sl-pz-drop.is-over .sl-pz-drop__dash rect { animation: sl-pz-march 600ms linear infinite; }
input:focus-visible + .sl-pz-drop { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes sl-pz-march { to { stroke-dashoffset: -16; } }
.sl-pz-drop__icon { display: grid; place-items: center; width: 64px; aspect-ratio: 1; margin-bottom: 4px; border-radius: 50%; background: var(--sl-on-dark); color: var(--sl-accent-900); transition: transform 500ms cubic-bezier(0.2, 0.8, 0.25, 1.3); }
.sl-pz-drop:hover .sl-pz-drop__icon, .sl-pz-drop.is-over .sl-pz-drop__icon { transform: rotate(-8deg); }
.sl-pz-drop__title { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem); font-weight: 500; color: #fff; }
.sl-pz-drop__title span { font-weight: 300; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sl-pz-drop__fine { font-size: 0.875rem; color: var(--sl-on-dark-muted); }
.sl-pz-field.is-invalid .sl-pz-drop__dash rect { stroke: #F2A58E; }

.sl-pz-file { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 12px 12px 12px; border: 1px solid rgb(236 235 222 / 0.25); border-radius: 22px; background: rgb(255 255 255 / 0.06); animation: sl-pz-fade 450ms var(--sl-ease); }
.sl-pz-file__thumb { display: grid; place-items: center; width: 76px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: rgb(255 255 255 / 0.1); color: var(--sl-on-dark); }
.sl-pz-file__thumb img { width: 100%; height: 100%; object-fit: cover; animation: sl-pz-zoom 900ms var(--sl-ease); }
@keyframes sl-pz-zoom { from { scale: 1.25; opacity: 0; } }
.sl-pz-file__meta { display: grid; gap: 4px; min-width: 0; }
.sl-pz-file__meta strong { overflow: hidden; font-weight: 500; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.sl-pz-file__meta span { font-size: 0.875rem; color: var(--sl-on-dark-muted); }
.sl-pz-file__swap { font-size: 0.9375rem; color: var(--sl-on-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sl-pz-file__swap:hover { color: #fff; }
.sl-pz-file__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(236 235 222 / 0.3); border-radius: 50%; background: transparent; color: var(--sl-on-dark); cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), transform 400ms var(--sl-ease); }
.sl-pz-file__x:hover { background: rgb(255 255 255 / 0.12); transform: rotate(90deg); }

/* Send button: the fill grows on hover and shows the upload progress while sending. */
.sl-pz-submit { display: grid; justify-items: start; gap: 14px; }
.sl-pz-send { position: relative; display: inline-flex; align-items: center; gap: 18px; min-height: 68px; padding: 0 10px 0 34px; overflow: hidden; border: 0; border-radius: var(--sl-pill); background: var(--sl-on-dark); color: var(--sl-text); font: inherit; font-size: 1.125rem; font-weight: 500; cursor: pointer; isolation: isolate; }
.sl-pz-send__fill { position: absolute; inset: 0; z-index: -1; width: 0; background: var(--sl-sand); transition: width 550ms var(--sl-ease); }
.sl-pz-send:hover .sl-pz-send__fill, .sl-pz-send:focus-visible .sl-pz-send__fill { width: 100%; }
.sl-pz-send.is-busy { cursor: progress; }
.sl-pz-send.is-busy .sl-pz-send__fill { width: var(--progress, 0%); transition: width 200ms linear; }
.sl-pz-send__arrow { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-text); color: #fff; transition: transform 450ms var(--sl-ease); }
.sl-pz-send:hover .sl-pz-send__arrow { transform: rotate(-45deg); }
.sl-pz-send.is-busy .sl-pz-send__arrow { animation: sl-pz-spin 1.1s linear infinite; }
.sl-pz-send:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sl-pz-fine { margin: 0; font-size: 0.8125rem; color: var(--sl-on-dark-muted); }
.sl-pz-err--form { margin: 0; font-size: 0.9375rem; }

/* Thank-you state replaces the form. */
.sl-pz-done { display: grid; justify-items: start; gap: 18px; align-content: center; min-height: 100%; outline: none; }
.sl-pz-done__mark svg { width: 88px; height: 88px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-pz-done__mark circle { stroke: rgb(236 235 222 / 0.35); stroke-dasharray: 151; stroke-dashoffset: 151; animation: sl-pz-draw 800ms var(--sl-ease) forwards; }
.sl-pz-done__mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sl-pz-draw 500ms var(--sl-ease) 600ms forwards; }
@keyframes sl-pz-draw { to { stroke-dashoffset: 0; } }
.sl-pz-done__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: #fff; animation: sl-pz-fade 700ms var(--sl-ease) 300ms both; }
.sl-pz-done__text { max-width: 46ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; animation: sl-pz-fade 700ms var(--sl-ease) 450ms both; }
.sl-pz-done .sl-btn { background: transparent; animation: sl-pz-fade 700ms var(--sl-ease) 600ms both; }
.sl-pz-done .sl-btn:hover { background: rgb(255 255 255 / 0.12); }

/* Ideas: four tiles, every other one set lower */
.sl-pz-ideas { padding-block: clamp(56px, 8vw, 128px) clamp(32px, 4vw, 64px); }
.sl-pz-ideas__head { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-bottom: clamp(28px, 4vw, 56px); }
.sl-pz-ideas__title { margin: 0; font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.sl-pz-ideas__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.sl-pz-idea { display: grid; gap: 12px; align-content: start; }
.sl-pz-idea:nth-child(even) { margin-top: clamp(32px, 6vw, 96px); }
.sl-pz-idea__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: var(--sl-soft); }
.sl-pz-idea__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sl-ease); }
.sl-pz-idea:hover .sl-pz-idea__media img { transform: scale(1.06); }
.sl-pz-idea__label { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.sl-pz-idea[data-reveal] { transition-duration: 700ms; }
.sl-pz-idea:nth-child(2)[data-reveal] { transition-delay: 90ms; }
.sl-pz-idea:nth-child(3)[data-reveal] { transition-delay: 180ms; }
.sl-pz-idea:nth-child(4)[data-reveal] { transition-delay: 270ms; }
.sl-pz-ideas__cta { margin: clamp(28px, 4vw, 56px) 0 0; text-align: center; }
.sl-pz-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 1.125rem; font-weight: 500; color: var(--sl-text); text-decoration: none; }

@media (max-width: 999px) {
  .sl-pz-hero__grid { grid-template-columns: 1fr; }
  .sl-pz-hero__visual { max-width: 560px; width: 88%; margin-left: auto; }
  .sl-pz-hero__frame { aspect-ratio: 4 / 4.4; }
  .sl-pz-panel { grid-template-columns: 1fr; }
  /* The form comes right after the heading on small screens; the steps follow it. */
  .sl-pz-panel { gap: 0; }
  .sl-pz-panel__aside { display: contents; }
  .sl-pz-panel__main { order: 1; margin-top: 36px; }
  .sl-pz-steps, .sl-pz-panel__call { order: 2; }
  .sl-pz-steps { margin-top: 44px; }
  .sl-pz-ideas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-pz-idea:nth-child(even) { margin-top: 48px; }
  .sl-pz-idea:nth-child(3) { margin-top: -24px; }
}
@media (max-width: 599px) {
  .sl-pz-hero__cta { gap: 14px; }
  .sl-pz-btn { min-height: 54px; padding-inline: 22px; font-size: 1rem; }
  .sl-pz-seal { width: 82px; }
  .sl-pz-seal__arrow { width: 38px; }
  .sl-pz-hero__visual { width: 92%; }
  .sl-pz-polaroid { left: -8%; width: 44%; }
  .sl-pz-hero__cap { text-align: left; }
  .sl-pz-panel { padding: 28px 20px 32px; margin-inline: calc(var(--sl-gutter) * -0.5); }
  .sl-pz-row { grid-template-columns: 1fr; }
  .sl-pz-file { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; }
  .sl-pz-file__thumb { width: 60px; }
  .sl-pz-file__swap { display: none; }
  .sl-pz-send { width: 100%; justify-content: space-between; }
  .sl-pz-ideas__list { gap: 12px; }
  .sl-pz-idea__label { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-pz-w > span, .sl-pz-hero__lead, .sl-pz-hero__cta, .sl-pz-polaroid { transform: none; opacity: 1; animation: none !important; }
  .sl-pz-hero__frame { clip-path: none; animation: none !important; }
  .sl-pz-hero__img { transform: none; animation: none !important; height: 100%; }
  .sl-pz-seal__ring { animation: none !important; }
}

/* ---------- Montaža tapeta (/montaza-tapeta-beograd/, Andrej 24.10.2026) ----------
   Same editorial language as "Tapete po želji" (sl-pz-*): rising words, the photo opening upward with
   a slow parallax, a turning seal. Below: Belgrade and the rest as two big cards, three
   numbered steps (the title announces them), payment, and a small loop for the preparation: the sofa
   moves away from the wall, the rolls go up, the sofa comes back. Sections with data-reveal wait for
   .is-in; all motion stops under reduced motion. */

.js .sl-mt > [data-reveal] { opacity: 1; transform: none; }
.js .sl-mt > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-mt-where { padding-top: calc(clamp(8px, 2vw, 32px) + 20px); } /* +20px, Andrej 24.10.2026 */
.sl-mt-steps, .sl-mt-pay, .sl-mt-prep, .sl-mt-faq { padding-top: clamp(64px, 9vw, 150px); }
.sl-mt-end { padding-block: clamp(64px, 9vw, 150px) 70px; }
.sl-mt-title { margin: 0 0 clamp(28px, 3.5vw, 56px); font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
@keyframes sl-mt-rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }

/* Hero: the installer stands left of the middle of the photo, so the tall crop keeps him in view. */
.sl-mt-hero__img { object-position: 34% 50%; }
.sl-mt-chip { position: absolute; left: -8%; bottom: 13%; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: var(--sl-pill); background: #fff; box-shadow: 0 24px 48px -20px rgb(30 30 28 / 0.4); rotate: -4deg; opacity: 0; animation: sl-pz-drop 800ms cubic-bezier(0.2, 0.8, 0.25, 1.2) 1100ms forwards, sl-pz-float 7s ease-in-out 2s infinite; }
.sl-mt-chip__icon { display: grid; place-items: center; flex: none; width: 46px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); }
.sl-mt-chip__text { font-size: 0.9375rem; line-height: 1.3; color: var(--sl-text-2); }
.sl-mt-chip__text strong { display: block; font-weight: 600; color: var(--sl-text); }

/* Belgrade and the rest of the country. */
.sl-mt-where__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sl-mt-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(26px, 3vw, 44px); overflow: hidden; border-radius: 28px; }
.sl-mt-card--city { background: var(--sl-soft); }
.sl-mt-card--away { background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-mt-card__copy { position: relative; z-index: 1; }
.sl-mt-eyebrow { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-mt-card--away .sl-mt-eyebrow { color: var(--sl-on-dark-muted); }
.sl-mt-card__name { max-width: 17ch; margin: 0 0 14px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.035em; }
.sl-mt-card__text { max-width: 46ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-mt-card--away .sl-mt-card__text { color: var(--sl-on-dark); }
.sl-mt-card__phone { display: inline-block; margin-top: 22px; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 300; letter-spacing: -0.02em; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.sl-mt-card__phone:hover { text-decoration-thickness: 2px; color: #fff; }
/* The phone number in bold here and in the homepage questions (Andrej, 24.10.2026). */
.sl-mt-card__phone, .sl-qx__phone { font-weight: 600; letter-spacing: -0.01em; }
.sl-mt-card__note { max-width: 52ch; margin: 18px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sl-on-dark-muted); }
/* Map of Serbia with Kosovo in both cards (Andrej, 24.10.2026, template-parts/serbia-map.php): when
   the section comes into view the border is drawn, then filled in sand (darker than the light card,
   lighter than the dark one). Belgrade then lights up with radiating rings and rays; on the other
   card the cities pop in one by one and the phone in the centre rings. Drawing plays once, the rings
   and the phone keep going. Positions are in % of the map box. From 1360px the map stands left of
   the copy (Andrej, 24.10.2026: less empty space in the cards); narrower, it sits above it. */
.sl-mt-map { position: relative; flex: none; height: clamp(280px, 26vw, 340px); aspect-ratio: 712 / 1024; margin: 0 auto clamp(20px, 2.4vw, 32px); }
.sl-mt-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-mt-map__land { fill: var(--sl-sand); stroke: var(--sl-accent); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-mt-map--away .sl-mt-map__land { stroke: var(--sl-on-dark); }
.js .sl-mt-where:not(.is-in) .sl-mt-map__land { stroke-dashoffset: 1; fill-opacity: 0; }
.sl-mt-where.is-in .sl-mt-map__land { animation: sl-mt-draw 2000ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both, sl-mt-fill 900ms var(--sl-ease) 1900ms both; }
@keyframes sl-mt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sl-mt-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }

.sl-mt-map__city { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 0; height: 0; }
.sl-mt-map__dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sl-accent-900); box-shadow: 0 0 0 2px #fff; translate: -50% -50%; }
.sl-mt-map__name { position: absolute; top: 0; padding: 1px 7px; border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.88); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--sl-text); }
.sl-mt-map__city--r .sl-mt-map__name { left: 9px; translate: 0 -50%; }
.sl-mt-map__city--l .sl-mt-map__name { right: 9px; translate: 0 -50%; }
.sl-mt-map__city--b .sl-mt-map__name { left: 0; top: 8px; translate: -50% 0; }
.sl-mt-map__city--t .sl-mt-map__name { left: 0; top: auto; bottom: 8px; translate: -50% 0; }
.js .sl-mt-where:not(.is-in) .sl-mt-map__city, .js .sl-mt-where:not(.is-in) .sl-mt-map__center { opacity: 0; }
.sl-mt-where.is-in .sl-mt-map__city { animation: sl-mt-pop 500ms cubic-bezier(0.2, 0.8, 0.25, 1.3) calc(2400ms + var(--n) * 90ms) both; }
.sl-mt-where.is-in .sl-mt-map__center { animation: sl-mt-pop 600ms cubic-bezier(0.2, 0.8, 0.25, 1.3) 2200ms both; }
@keyframes sl-mt-pop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

/* Belgrade: bigger dot, rings and short rays radiating from it. */
.sl-mt-map__city--hub .sl-mt-map__dot { width: 14px; height: 14px; background: var(--sl-accent); }
.sl-mt-map__city--hub .sl-mt-map__name { left: 14px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
.sl-mt-map__wave { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 1.5px solid var(--sl-accent); border-radius: 50%; opacity: 0; animation: sl-mt-wave 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.sl-mt-map__wave:nth-child(2) { animation-delay: 1.4s; }
.sl-mt-map__rays { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: repeating-conic-gradient(from -2deg, var(--sl-accent) 0deg 4deg, transparent 4deg 45deg); -webkit-mask: radial-gradient(circle closest-side, transparent 55%, #000 56% 99%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 55%, #000 56% 99%, transparent 100%); opacity: 0; animation: sl-mt-rays 2.8s ease-out 0.7s infinite; }
@keyframes sl-mt-wave { from { opacity: 0.7; scale: 0.15; } to { opacity: 0; scale: 1; } }
@keyframes sl-mt-rays { 0% { opacity: 0; scale: 0.6; } 25% { opacity: 1; } 70%, 100% { opacity: 0; scale: 1.5; } }

/* The phone in the centre of the second map. */
.sl-mt-map__center { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; }
.sl-mt-ring { position: relative; display: grid; place-items: center; width: 50px; aspect-ratio: 1; }
.sl-mt-ring__wave { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 1px solid var(--sl-accent-900); border-radius: 50%; opacity: 0; animation: sl-mt-wave 3.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.sl-mt-ring__wave:nth-child(2) { animation-delay: 1.6s; }
.sl-mt-ring__icon { position: relative; display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-accent-900); color: var(--sl-on-dark); box-shadow: 0 0 0 3px var(--sl-on-dark); animation: sl-mt-buzz 3.2s ease-in-out infinite; }
@keyframes sl-mt-buzz { 0%, 14%, 100% { rotate: 0deg; } 2% { rotate: -14deg; } 4% { rotate: 12deg; } 6% { rotate: -9deg; } 8% { rotate: 7deg; } 10% { rotate: -4deg; } 12% { rotate: 2deg; } }
.js .sl-mt-where:not(.is-in) .sl-mt-map * { animation-play-state: paused; }

/* Three steps: the title stays beside them, each line darkens from the left as its step rises. */
.sl-mt-steps__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sl-mt-steps__in .sl-mt-title { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-mt-steps__list { margin: 0; padding: 0; border-bottom: 1px solid var(--sl-line); list-style: none; }
.sl-mt-step { position: relative; display: grid; grid-template-columns: clamp(72px, 8vw, 132px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); padding: clamp(26px, 3vw, 44px) 0; border-top: 1px solid var(--sl-line); }
.sl-mt-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; }
.sl-mt-step__num { grid-row: span 2; font-size: clamp(3rem, 1.6rem + 4vw, 6rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px var(--sl-text); }
.sl-mt-step__title { margin: 4px 0 10px; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.sl-mt-step__text { max-width: 52ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-mt-steps:not(.is-in) .sl-mt-step { opacity: 0; }
.sl-mt-steps.is-in .sl-mt-step { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(300ms + var(--n) * 160ms) both; }
.sl-mt-steps.is-in .sl-mt-step::before { animation: sl-mt-line 1100ms cubic-bezier(0.7, 0, 0.2, 1) calc(500ms + var(--n) * 160ms) forwards; }
@keyframes sl-mt-line { to { transform: scaleX(1); } }

/* Payment: three cards, card payment marked as coming soon. */
.sl-mt-pay__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-mt-pay__item { display: grid; align-content: start; gap: 16px; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--sl-line); border-radius: 28px; transition: border-color 300ms var(--sl-ease); }
.sl-mt-pay__item:hover { border-color: var(--sl-khaki); }
.sl-mt-pay__item.is-soon { border-style: dashed; border-color: var(--sl-sand); }
.sl-mt-pay__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 10px 0 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.sl-mt-pay__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-mt-badge { padding: 5px 12px; border-radius: var(--sl-pill); background: var(--sl-text); color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; }
.js .sl-mt-pay:not(.is-in) .sl-mt-pay__item { opacity: 0; }
.sl-mt-pay.is-in .sl-mt-pay__item { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 120ms) both; }
/* Icons8 ios7 PNG as a mask in a soft circle (--icon set in the template). */
.sl-mt-icon { display: grid; place-items: center; flex: none; width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); }
.sl-mt-icon::before { content: ""; width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Preparation: the scene on the left, the two rules on the right. */
.sl-mt-prep__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sl-mt-prep__list { margin: 0; padding: 0; border-bottom: 1px solid var(--sl-line); list-style: none; }
.sl-mt-prep__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--sl-line); }
.sl-mt-prep__name { margin: 4px 0 8px; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.sl-mt-prep__name strong { font-weight: 600; }
.sl-mt-prep__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-mt-prep__note { max-width: 58ch; margin: 24px 0 0; line-height: 1.6; color: var(--sl-muted); }

/* 9 s loop: the sofa slides out of the picture, three rolls of one motif go up the wall from the
   ceiling, the sofa comes back in front of the new wallpaper, the rolls fade for the next round. */
.sl-mt-scene { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 28px; background: #F4F3EC; container-type: size; }
/* The scene is there at once with the wallpaper already on the wall (Andrej, 26.10.2026: it used to be uncovered
   first and then start from an empty wall, so the rolls came about 4 s late). Every loop starts 4.5 s in, at the
   finished wall; it waits, paused, until the section is on screen. */
.js .sl-mt-prep:not(.is-in) .sl-mt-scene * { animation-play-state: paused; }
.sl-mt-scene__wall { position: absolute; left: 10%; right: 10%; top: 0; bottom: 22%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-inline: 1.5px dashed rgb(138 130 107 / 0.5); }
.sl-mt-scene__roll { background-color: #DDE3D2; background-size: 300% auto; background-position: calc(var(--r) * 50%) 50%; box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.45); clip-path: inset(0 0 100% 0); animation: sl-mt-roll 9s cubic-bezier(0.65, 0, 0.25, 1) calc(var(--r) * 500ms - 4.5s) infinite; }
@keyframes sl-mt-roll { 0%, 28% { clip-path: inset(0 0 100% 0); opacity: 1; } 38%, 94% { clip-path: inset(0); opacity: 1; } 100% { clip-path: inset(0); opacity: 0; } }
.sl-mt-scene__floor { position: absolute; inset: auto 0 0; height: 22%; border-top: 6px solid #fff; background: linear-gradient(#D7D3BF, #CDC8B1); }
.sl-mt-sofa { position: absolute; left: 27%; bottom: 12%; width: 46%; height: 28%; filter: drop-shadow(0 10px 10px rgb(58 55 46 / 0.2)); animation: sl-mt-sofa 9s var(--sl-ease) -4.5s infinite; }
.sl-mt-sofa::before, .sl-mt-sofa::after { content: ""; position: absolute; top: 80%; width: 3%; height: 14%; border-radius: 2px; background: var(--sl-accent); }
.sl-mt-sofa::before { left: 11%; }
.sl-mt-sofa::after { right: 11%; }
.sl-mt-sofa__back { position: absolute; left: 8%; right: 8%; top: 0; height: 62%; border-radius: 18px 18px 6px 6px; background: #C1BAA1; }
.sl-mt-sofa__seat { position: absolute; left: 6%; right: 6%; top: 50%; height: 30%; border-radius: 10px; background: #B3AB91; }
.sl-mt-sofa__arm { position: absolute; top: 30%; width: 13%; height: 54%; border-radius: 14px; background: var(--sl-khaki); }
.sl-mt-sofa__arm--l { left: 0; }
.sl-mt-sofa__arm--r { right: 0; }
@keyframes sl-mt-sofa { 0%, 12% { transform: none; } 24%, 74% { transform: translateX(-80cqw); } 88%, 100% { transform: none; } }
.sl-mt-scene__tag { position: absolute; left: 50%; bottom: 6%; padding: 8px 16px; border-radius: var(--sl-pill); background: #fff; font-size: clamp(0.75rem, 0.6rem + 0.5vw, 0.9375rem); font-weight: 500; white-space: nowrap; color: var(--sl-text); transform: translateX(-50%); box-shadow: var(--sl-shadow); opacity: 0; animation: sl-mt-tag 9s var(--sl-ease) -4.5s infinite; }
@keyframes sl-mt-tag { 0%, 16% { opacity: 0; translate: 0 8px; } 24%, 68% { opacity: 1; translate: 0 0; } 74%, 100% { opacity: 0; translate: 0 0; } }

/* Closing band: dark panel with the motif drifting in from the right. */
.sl-mt-end__panel { position: relative; display: grid; justify-items: start; gap: clamp(28px, 3vw, 44px); padding: clamp(36px, 6vw, 104px); overflow: hidden; border-radius: clamp(24px, 3vw, 40px); background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-mt-end__panel::after { content: ""; position: absolute; right: -6%; top: -20%; width: 46%; height: 140%; background: url(../img/montaza-dezen.webp) center / cover no-repeat; opacity: 0.55; rotate: 6deg; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); animation: sl-pz-float 9s ease-in-out infinite; }
.sl-mt-end__title { position: relative; z-index: 1; margin: 0; font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: #fff; }
.sl-mt-end__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 1360px) {
  .sl-mt-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(44px, 3.5vw, 60px); }
  /* The left margin leaves room for the names that sit left of their dots. */
  .sl-mt-card .sl-mt-map { height: clamp(300px, 22vw, 360px); margin: 0 0 0 clamp(28px, 2.6vw, 44px); }
  .sl-mt-card__name { font-size: clamp(1.75rem, 0.9rem + 1.2vw, 2.25rem); }
}
@media (max-width: 899px) {
  .sl-mt-where__grid, .sl-mt-steps__in, .sl-mt-pay__list, .sl-mt-prep__in { grid-template-columns: 1fr; }
  .sl-mt-steps__in { gap: 0; }
  .sl-mt-steps__in .sl-mt-title { position: static; }
  /* On narrow screens it sits across the photo's bottom edge (Andrej, 24.10.2026), not over its left edge. */
  .sl-mt-chip { left: 5%; right: auto; bottom: -26px; max-width: 90%; }
  .sl-mt-end__panel::after { width: 80%; opacity: 0.5; }
}
@media (max-width: 599px) {
  /* "Montaža tapeta" on one line on phones (Andrej, 24.10.2026). */
  .sl-mt-hero .sl-pz-hero__title { font-size: min(2.75rem, 10.6vw); }
  .sl-mt-hero .sl-pz-line { display: inline; }
  .sl-mt-chip { gap: 10px; padding: 8px 16px 8px 8px; }
  .sl-mt-chip__icon { width: 38px; }
  .sl-mt-chip__text { font-size: 0.8125rem; }
  .sl-mt-step { grid-template-columns: 56px minmax(0, 1fr); }
  .sl-mt-prep__item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .sl-mt-icon { width: 52px; }
  .sl-mt-icon::before { width: 28px; height: 28px; }
  .sl-mt-map { height: 300px; }
  .sl-mt-map__name { padding: 0 5px; font-size: 10px; }
  .sl-mt-ring, .sl-mt-ring__icon { width: 42px; }
  .sl-mt-ring__wave { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .sl-mt-end__cta .sl-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-mt-chip { opacity: 1; animation: none !important; }
  .sl-mt-map__wave, .sl-mt-map__rays, .sl-mt-ring__wave { display: none; }
  .js .sl-mt-where .sl-mt-map__land { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
  .js .sl-mt-where .sl-mt-map__city, .js .sl-mt-where .sl-mt-map__center { opacity: 1; animation: none !important; }
  .sl-mt-ring__icon, .sl-mt-end__panel::after { animation: none !important; }
  .js .sl-mt .sl-mt-step, .js .sl-mt .sl-mt-pay__item { opacity: 1; animation: none !important; }
  .sl-mt-step::before { display: none; }
  .js .sl-mt-prep .sl-mt-scene { clip-path: none; animation: none !important; }
  .sl-mt-scene__roll { clip-path: none; animation: none !important; }
  .sl-mt-sofa { animation: none !important; }
  .sl-mt-scene__tag { display: none; }
}

/* ---------- Info pages (page.php, page-kontakt.php) ---------- */

.sl-info { padding-top: var(--sl-space-5); }
.sl-info__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.sl-info__body { max-width: 72ch; }
.sl-info__body > h1 { margin-bottom: var(--sl-space-5); }
.sl-info__body h2 { margin: var(--sl-space-6) 0 10px; font-size: 1.375rem; font-weight: 500; }
.sl-info__body p, .sl-info__body li { line-height: 1.7; color: var(--sl-text-2); }
.sl-info__body ol, .sl-info__body ul { display: grid; gap: 8px; }
.sl-info__body .sl-faq { margin-top: 12px; }
.sl-info__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 24px); transition: top 320ms var(--sl-ease); display: grid; gap: 10px; padding: 24px; border-radius: var(--sl-radius-lg); background: var(--sl-accent-50); }
.sl-info__aside p { margin: 0; line-height: 1.5; }
.sl-info__aside-title { font-size: 1.125rem; font-weight: 600; }
.sl-info__contact { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sl-accent); text-decoration: none; }
@media (max-width: 899px) {
  .sl-info__grid { grid-template-columns: 1fr; }
  .sl-info__aside { position: static; }
}

.sl-contact { display: grid; gap: 18px; margin: var(--sl-space-5) 0 0; padding: 0; list-style: none; }
.sl-contact li { display: flex; gap: 14px; align-items: flex-start; }
.sl-contact .sl-icon { flex: none; margin-top: 3px; color: var(--sl-accent); }
.sl-contact__label { display: block; font-size: var(--sl-fs-small); color: var(--sl-muted); }
.sl-contact a { font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.sl-contact-form { display: grid; gap: 14px; }
.sl-textarea { min-height: 130px; padding-block: 12px; resize: vertical; }
.sl-file { padding-block: 10px; }

/* Cart, checkout, account and wishlist pages. */
.sl-shop { padding-top: var(--sl-space-5); }
.sl-shop__title { margin-bottom: var(--sl-space-5); }

/* ---------- Cart and checkout (WooCommerce markup, inc/cart.php) ---------- */

/* WooCommerce's own stylesheet stays for structure; colours, buttons and fields follow the theme. */
.sl-shop .woocommerce a.button,
.sl-shop .woocommerce button.button,
.sl-shop .woocommerce input.button,
.sl-shop .woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid var(--sl-line);
  border-radius: var(--sl-pill);
  background: #fff;
  color: var(--sl-text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}
.sl-shop .woocommerce a.button:hover, .sl-shop .woocommerce button.button:hover { border-color: var(--sl-text); background: #fff; color: var(--sl-text); }
.sl-shop .woocommerce a.button.alt,
.sl-shop .woocommerce button.button.alt { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-shop .woocommerce a.button.alt:hover,
.sl-shop .woocommerce button.button.alt:hover { background: #000; color: #fff; }
.sl-shop .woocommerce .checkout-button.button { display: flex; width: 100%; min-height: 54px; font-size: 1.0625rem; }
.sl-shop .woocommerce #place_order { width: 100%; min-height: 56px; font-size: 1.125rem; font-weight: 600; float: none; }
.sl-shop .woocommerce button.button:disabled, .sl-shop .woocommerce button.button:disabled[disabled] { opacity: 0.5; padding: 0 22px; }

body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-message { margin: 0 0 var(--sl-space-5); padding: 14px 18px 14px 48px; border: 0; border-radius: var(--sl-radius); background: var(--sl-soft); color: var(--sl-text); font-size: 0.9375rem; list-style: none; }
body .woocommerce-error { background: #FBEDE8; color: var(--sl-error); }
body .woocommerce-message { background: var(--sl-accent-50); }
body .woocommerce-error::before, body .woocommerce-info::before, body .woocommerce-message::before { top: 14px; left: 18px; color: currentColor; }
body .woocommerce-error li { margin: 2px 0; }

.sl-shop .woocommerce table.shop_table { margin: 0 0 var(--sl-space-5); border: 1px solid var(--sl-line); border-radius: var(--sl-radius); border-collapse: separate; }
.sl-shop .woocommerce table.shop_table th { font-weight: 600; font-size: var(--sl-fs-small); color: var(--sl-muted); }
.sl-shop .woocommerce table.shop_table td, .sl-shop .woocommerce table.shop_table th { padding: 14px 16px; border-top-color: var(--sl-line); }
.sl-shop .woocommerce table.cart img { width: 72px; border-radius: var(--sl-radius-sm); }
.sl-shop .woocommerce table.cart .product-name a { font-weight: 500; text-decoration: none; }
/* Ordered items in the cart and on the checkout: the name 10% and the details 30% under the body size
   (Andrej, 23.10.2026). On the checkout the name is plain text in the cell, so the cell sets it. */
.sl-shop .woocommerce table.cart .product-name > a,
.sl-shop .woocommerce .woocommerce-checkout-review-order-table td.product-name { font-size: 0.9rem; }
.sl-shop .woocommerce table.shop_table .product-name dl.variation { font-size: 0.7rem; line-height: 1.45; }
.sl-shop .woocommerce table.shop_table .product-name dl.variation p { font-size: inherit; line-height: inherit; }
/* Checkout: the free delivery bar with the truck over the order table (sl_freeship_block()). */
/* Two classes: .sl-freeship sets its own margin later in this file. */
.sl-freeship.sl-freeship--checkout { margin: 0 0 39px; padding: 0 4px; } /* 25px more air above the table than the 14px before (Andrej, 23.10.2026) */
/* Thank-you page: a centered "order received" badge in the 100px above the title (Andrej, 23.10.2026).
   A soft disc pops in, then the animated Icons8 check draws its own ring and tick once (APNG in the
   accent colour), and a thin halo spreads out once when the tick is done. */
.sl-received { display: flex; align-items: center; justify-content: center; height: 100px; margin: 100px 0 50px; } /* 100px below the header, 50px more above the title (Andrej, 23.10.2026) */
.sl-received__badge { position: relative; display: grid; place-items: center; width: 88px; height: 88px; animation: sl-added-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both; }
.sl-received__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-received__ring circle { fill: var(--sl-soft); stroke: none; animation: sl-added-ring 800ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
.sl-received__badge::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--sl-khaki); border-radius: 50%; opacity: 0; animation: sl-received-halo 900ms ease-out 1250ms both; }
.sl-received__icon { position: relative; display: block; width: 60px; height: 60px; animation: sl-received-icon 600ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both; }
.sl-received__icon img { display: block; width: 100%; height: 100%; }
@keyframes sl-received-icon { from { opacity: 0; transform: translateY(-12px) scale(0.8); } }
@keyframes sl-received-halo {
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-received__badge, .sl-received__ring circle, .sl-received__icon { animation: none !important; }
  .sl-received__badge::after { display: none; }
}
/* Thank-you page for "Uplatom na račun" (Wooplatnica, its "Thank you strana" setting holds this markup):
   the IPS QR code and the payment slip side by side in two cards, stacked on phones (Andrej, 23.10.2026). */
.sl-pay { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 20px; margin: var(--sl-space-6) 0 calc(var(--sl-space-3) + 50px); } /* +50px above "Detalji porudžbine" (Andrej, 23.10.2026) */
.sl-pay__card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; border-radius: var(--sl-radius-lg); background: var(--sl-soft); }
.sl-pay__card p { margin: 0; }
.sl-pay__title { font-size: 1.125rem; font-weight: 600; }
.sl-pay__text { color: var(--sl-muted); font-size: var(--sl-fs-small); }
.sl-pay__card img.wooplatnica { display: block; max-width: 100%; height: auto; margin-top: 12px; border-radius: var(--sl-radius); background: #fff; }
.sl-pay__card img.ipsqr { width: 220px; padding: 14px; box-sizing: content-box; }
.sl-pay__card img.uplatnica { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid var(--sl-line); }
.sl-pay__note { margin: 0 0 var(--sl-space-6); color: var(--sl-muted); font-size: var(--sl-fs-small); }
@media (max-width: 899px) {
  .sl-pay { grid-template-columns: 1fr; }
}
/* Checkout coupon under the order table (inc/cart.php): a link with the coupon icon, then the field. */
.sl-coupon { margin: 4px 0 20px; }
.sl-coupon__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--sl-text); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--sl-khaki); text-underline-offset: 0.25em; cursor: pointer; }
.sl-coupon__toggle:hover { text-decoration-color: currentColor; }
.sl-coupon__icon { flex: none; width: 30px; height: 17px; background: currentColor; -webkit-mask: url(../img/icons/ticket-flat.png) center / contain no-repeat; mask: url(../img/icons/ticket-flat.png) center / contain no-repeat; transition: transform var(--sl-dur) var(--sl-ease); }
.sl-coupon__toggle:hover .sl-coupon__icon, .sl-coupon__toggle[aria-expanded="true"] .sl-coupon__icon { transform: rotate(-8deg) scale(1.08); }
.sl-coupon__panel { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sl-coupon__panel .sl-input { flex: 1 1 160px; min-width: 0; }
/* The code field: a dashed edge like a cut-out coupon, a touch lighter than the box, not white (Andrej, 23.10.2026). */
.sl-coupon .sl-input { border: 1.5px dashed var(--sl-line-strong); background: var(--sl-soft-2); }
.sl-coupon .sl-input:hover, .sl-coupon .sl-input:focus { border-color: var(--sl-text); background: var(--sl-soft-2); }
.sl-coupon__panel .sl-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.sl-coupon__msg:empty { display: none; }
.sl-coupon__msg { margin-top: 10px; }
/* Checkout order table: a rounded photo beside each item (woocommerce/checkout/review-order.php). */
.sl-review-item { display: flex; align-items: center; gap: 14px; }
.sl-review-item__thumb { flex: none; display: grid; place-items: center; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: var(--sl-radius); background: var(--sl-soft-2); }
.sl-shop .woocommerce .sl-review-item__thumb > img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.sl-review-item__thumb > .slc-thumb { max-width: 100%; }
.sl-review-item__text { min-width: 0; }
/* The order table is white on the beige box (Andrej, 23.10.2026). */
.sl-shop .woocommerce table.shop_table.woocommerce-checkout-review-order-table { background: #fff; }
/* Quantity and remove under each item (Andrej, 23.10.2026); the row dims while the table is redrawn. */
.sl-review-item__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.sl-review-item__edit .sl-qty__btn { width: 30px; height: 30px; font-size: 1rem; }
.sl-review-item__edit .sl-qty__num { font-size: 0.875rem; }
.sl-review-remove { padding: 4px 0; border: 0; background: none; color: var(--sl-muted); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.sl-review-remove:hover { color: var(--sl-error); }
.woocommerce-checkout-review-order-table tr.is-updating { opacity: 0.45; transition: opacity var(--sl-dur) var(--sl-ease); }
/* WooCommerce shrinks cart thumbnails to 32px; the wallpaper crop thumbnail (plugin) is 80px wide too. */
.sl-shop .woocommerce table.cart td.product-thumbnail { width: 96px; }
.sl-shop .woocommerce table.cart td.product-thumbnail > a > img { width: 80px; height: auto; border-radius: 8px; }
.sl-shop .woocommerce a.remove { color: var(--sl-muted) !important; }
.sl-shop .woocommerce a.remove:hover { background: var(--sl-soft); color: var(--sl-error) !important; }
.sl-shop .woocommerce .quantity .qty { width: 4.5em; min-height: 40px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius-sm); }
.sl-shop .woocommerce table.cart td.actions .coupon .input-text { width: 160px; min-height: 44px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius-md); }

/* Cart: items on the left, totals on the right, extra products under both. */
.woocommerce-cart .sl-shop .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }
.woocommerce-cart .sl-shop .woocommerce > :not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
.sl-shop .cart-collaterals .cart_totals { float: none; width: 100%; padding: 22px; border-radius: 14px; background: var(--sl-soft); }
.sl-shop .cart-collaterals .cart_totals h2 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; }
.sl-shop .cart_totals table.shop_table { border: 0; background: transparent; }
.sl-shop .cart_totals table.shop_table th, .sl-shop .cart_totals table.shop_table td { padding: 10px 0; }
.sl-shop .cart_totals .order-total td { font-size: 1.375rem; font-weight: 600; }
/* "Dostava" on the checkout: BESPLATNA in the prices' bold, spaced like the word in the free delivery line. */
.sl-ship-row .sl-ship-free { font-weight: 700; letter-spacing: 0.06em; }
.sl-shop .wc-proceed-to-checkout { padding-bottom: 0; }
.sl-shop .wc-proceed-to-checkout .sl-summary__fine { margin-top: 10px; }
.sl-cart-empty { grid-column: 1 / -1; }
@media (max-width: 899px) { .woocommerce-cart .sl-shop .woocommerce { grid-template-columns: 1fr; } }

.sl-freeship { margin-bottom: 14px; }
.sl-freeship__text { margin: 0 0 21px; font-size: 0.9375rem; font-weight: 500; color: var(--sl-accent); }
/* No track under the fill: the line grows out of the background itself (Andrej, 23.10.2026). */
.sl-freeship__bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--sl-pill); background: transparent; }
/* The rest of the way, from the truck to the end, is a pale line (Andrej, 23.10.2026); it moves with the fill. */
.sl-ship .sl-freeship__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pct, 0%); right: 0; border-radius: inherit; background: rgb(87 81 63 / 0.16); }
.sl-freeship__bar span { display: block; height: 100%; border-radius: inherit; background: var(--sl-accent); }

/* The delivery truck rides the free delivery bar (sl_freeship_track()): it pulls away nose up, bounces
   along with dust and speed lines behind it, brakes nose down and stops where the bar stops. The
   drive is 1.2 s with ease-in-out, so it starts and stops like a vehicle; the bar fills on the same
   curve. Andrej asked for this motion (23.10.2026), past the 300 ms rule. */
.sl-ship {
  --truck: 32px;
  --sl-ship-ease: cubic-bezier(0.65, 0, 0.25, 1);
  --sl-ship-dur: 1200ms;
  --sl-ship-delay: 250ms;
  position: relative;
  padding-top: 22px;
}
/* The filled part fades in from fully transparent on the left to the full accent at the truck (Andrej, 23.10.2026). */
.sl-freeship__bar .sl-ship__fill { width: var(--pct, 0%); background: linear-gradient(90deg, rgb(87 81 63 / 0), var(--sl-accent)); }
.sl-ship__truck { position: absolute; top: -4px; left: clamp(0px, calc(var(--pct, 0%) - var(--truck) + 4px), calc(100% - var(--truck))); width: var(--truck); height: 24px; }
.sl-ship__body {
  position: absolute;
  inset: -5px 0 -3px;
  background: var(--sl-text);
  -webkit-mask: url(../img/icons/truck.png) center / contain no-repeat;
  mask: url(../img/icons/truck.png) center / contain no-repeat;
  transform-origin: 50% 85%;
}
.sl-ship__dust i, .sl-ship__lines i { position: absolute; opacity: 0; pointer-events: none; }
.sl-ship__dust i { left: -2px; bottom: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--sl-sand); }
.sl-ship__lines i { right: calc(100% + 4px); height: 1.5px; border-radius: 2px; background: var(--sl-khaki); transform-origin: 100% 50%; }
.sl-ship__lines i:first-child { top: 7px; width: 14px; }
.sl-ship__lines i:last-child { top: 13px; width: 9px; }

.sl-ship__fill { animation: sl-ship-fill var(--sl-ship-dur) var(--sl-ship-ease) var(--sl-ship-delay) both; }
.sl-ship .sl-freeship__bar::after { animation: sl-ship-rest var(--sl-ship-dur) var(--sl-ship-ease) var(--sl-ship-delay) both; }
.sl-ship__truck { animation: sl-ship-drive var(--sl-ship-dur) var(--sl-ship-ease) var(--sl-ship-delay) both; }
/* After the stop the truck keeps idling: a small bounce, as if the engine were running (Andrej, 23.10.2026). */
.sl-ship__body { animation: sl-ship-ride var(--sl-ship-dur) linear var(--sl-ship-delay) both, sl-ship-idle 640ms ease-in-out calc(var(--sl-ship-delay) + var(--sl-ship-dur) + 150ms) infinite; }
/* After the stop the speed lines never rest: the two take turns, one coming as the other goes, as if
   the truck were still on the move (Andrej, 23.10.2026). */
.sl-ship__lines i { animation: sl-ship-lines var(--sl-ship-dur) linear var(--sl-ship-delay) both, sl-ship-lines-idle 900ms linear calc(var(--sl-ship-delay) + var(--sl-ship-dur) + 150ms) infinite; }
.sl-ship__lines i:last-child { animation-delay: calc(var(--sl-ship-delay) + 80ms), calc(var(--sl-ship-delay) + var(--sl-ship-dur) + 600ms); }
.sl-ship__dust i { animation: sl-ship-puff 460ms ease-out calc(var(--sl-ship-delay) + 120ms) 2 both; }
.sl-ship__dust i:nth-child(2) { animation-delay: calc(var(--sl-ship-delay) + 270ms); }
.sl-ship__dust i:nth-child(3) { animation-delay: calc(var(--sl-ship-delay) + 420ms); }

@keyframes sl-ship-fill { from { width: 0; } }
@keyframes sl-ship-rest { from { left: 0; } }
@keyframes sl-ship-idle {
  0%, 100% { transform: none; }
  25% { transform: translateY(-1.2px) rotate(-0.8deg); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-0.6px) rotate(0.4deg); }
}
@keyframes sl-ship-drive { from { left: 0; } }
@keyframes sl-ship-ride {
  0% { transform: none; }
  10% { transform: rotate(-6deg); }
  18% { transform: translateY(-2px) rotate(-3deg); }
  26% { transform: translateY(0) rotate(-1deg); }
  34% { transform: translateY(-2px); }
  42% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
  58% { transform: translateY(0); }
  66% { transform: translateY(-1px); }
  76% { transform: none; }
  86% { transform: rotate(6deg); }
  93% { transform: rotate(-2deg); }
  100% { transform: none; }
}
@keyframes sl-ship-lines-idle {
  0% { opacity: 0; transform: scaleX(0.2); }
  30% { opacity: 0.75; transform: scaleX(1); }
  70% { opacity: 0.4; transform: translateX(-5px) scaleX(1.1); }
  100% { opacity: 0; transform: translateX(-9px) scaleX(0.3); }
}
@keyframes sl-ship-lines {
  0%, 8% { opacity: 0; transform: scaleX(0.2); }
  22% { opacity: 0.8; transform: scaleX(1); }
  62% { opacity: 0.6; transform: scaleX(1.3); }
  80%, 100% { opacity: 0; transform: translateX(-6px) scaleX(0.3); }
}
@keyframes sl-ship-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-18px, -7px) scale(1.5); }
}

/* Free delivery reached (.sl-ship.is-free, Andrej 23.10.2026): the truck finishes its run, then it and
   the bar fade away and "Dostava je BESPLATNA" rises in their place, 20% larger than the line above
   the bar (15 -> 18px; 14 -> 16.8px in the dialog). Then a thumbs up pops out of a ring and wiggles
   (--sl-free-at); the word has no marker line under it anywhere (Andrej, 24.10.2026). With the motion off, the words simply stand
   there. The words fade by opacity, so the side cart can cross-fade them after a quantity change. */
.sl-ship__done {
  position: absolute;
  inset: 0;
  display: block;            /* not flex: flex drops the space between "Dostava je" and the word */
  margin: 0;
  color: var(--sl-accent);
  font-size: 1.125rem;
  line-height: 28px;         /* the height of the truck band and the bar */
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
.sl-ship.is-free {
  --sl-done-at: calc(var(--sl-ship-delay) + var(--sl-ship-dur));
  --sl-free-at: calc(var(--sl-done-at) + 450ms);
}
.sl-ship.is-free .sl-ship__done { opacity: 1; visibility: visible; animation: sl-ship-done 520ms var(--sl-ease) calc(var(--sl-done-at) + 180ms) both; }
.sl-ship.is-free .sl-ship__truck, .sl-ship.is-free .sl-freeship__bar { opacity: 0; }
/* Once delivery is free the line over the bar is empty; the bar says it. */
.sl-freeship__text:empty, .sl-added__ship:empty { display: none; }
/* With installation in the cart: the fee does not count toward free delivery (Andrej, 24.10.2026). */
.sl-freeship__note { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; color: var(--sl-text-2); }
/* The truck stays where it stopped and fades together with the bar (Andrej, 23.10.2026). */
.sl-ship.is-free .sl-ship__truck { animation: sl-ship-drive var(--sl-ship-dur) var(--sl-ship-ease) var(--sl-ship-delay) both, sl-ship-fade 400ms ease-in var(--sl-done-at) both; }
.sl-ship.is-free .sl-freeship__bar { animation: sl-ship-fade 400ms ease-in var(--sl-done-at) both; }
@keyframes sl-ship-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes sl-ship-done { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }

.sl-free {
  color: var(--sl-text);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sl-thumb { position: relative; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 0.4em; vertical-align: -0.3em; }
.sl-thumb::before, .sl-thumb::after { content: ""; position: absolute; inset: 0; }
.sl-thumb::before {
  background: var(--sl-text);
  -webkit-mask: url(../img/icons/thumb-up.png) center / contain no-repeat;
  mask: url(../img/icons/thumb-up.png) center / contain no-repeat;
  transform-origin: 30% 90%;
  animation: sl-thumb-pop 950ms cubic-bezier(0.25, 0.8, 0.3, 1) calc(var(--sl-free-at) + 60ms) both;
}
.sl-thumb::after { border: 1.5px solid var(--sl-khaki); border-radius: 50%; opacity: 0; animation: sl-thumb-ring 700ms ease-out calc(var(--sl-free-at) + 140ms) both; }

@keyframes sl-thumb-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.2) rotate(-35deg); }
  35% { opacity: 1; transform: translateY(-3px) scale(1.28) rotate(8deg); }
  52% { transform: scale(1.08) rotate(-16deg); }
  68% { transform: scale(1) rotate(9deg); }
  84% { transform: rotate(-4deg); }
  100% { transform: none; }
}
@keyframes sl-thumb-ring {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2); }
}

@media (max-width: 479px) {
  .sl-ship { --truck: 28px; padding-top: 18px; }
  .sl-ship__done { line-height: 24px; }
  .sl-ship__truck { height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-ship *, .sl-ship *::before, .sl-ship *::after, .sl-free, .sl-thumb::before, .sl-thumb::after { animation: none !important; }
}
.sl-upsell { padding-bottom: 0; }
.sl-upsell .sl-hm-head__title { margin-bottom: var(--sl-space-5); }

/* ---------- Checkout (Andrej, 24.10.2026) ----------
   Made to be read at a glance: the form on the left in three marked parts on white cards that end with
   the total and "Poruči", the order in a sticky beige box on the right. On phones the box folds into one
   line with the total above the form (woocommerce/checkout/form-checkout.php, main.js [data-co-side]).
   The header keeps only the logo, wishlist and cart here, so nothing leads away from the order. */
.woocommerce-checkout:not(.woocommerce-order-received) .sl-nav { display: none; }
.woocommerce-checkout:not(.woocommerce-order-received) .sl-header__row > .sl-search { visibility: hidden; }
.woocommerce-checkout:not(.woocommerce-order-received) .sl-header__row .sl-header__burger { visibility: hidden; }
@media (max-width: 1099px) {
  .woocommerce-checkout:not(.woocommerce-order-received) .sl-header__row > .sl-search { display: none; }
  .woocommerce-checkout:not(.woocommerce-order-received) .sl-header__row { padding-bottom: 14px; }
}

/* Where the buyer is: Korpa (done, links back), Podaci i plaćanje, Potvrda. */
.sl-co-head { margin: 0 0 clamp(28px, 3.4vw, 48px); }
.sl-co-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 clamp(22px, 2.6vw, 36px); padding: 0; list-style: none; color: var(--sl-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.sl-co-steps li { display: flex; align-items: center; }
.sl-co-steps li + li::before { content: ""; width: clamp(20px, 4vw, 56px); height: 1px; margin: 0 12px; background: var(--sl-line); }
.sl-co-steps a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.sl-co-steps a:hover { color: var(--sl-text); }
.sl-co-steps__dot { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border: 1.5px solid var(--sl-line-strong); border-radius: 50%; }
.sl-co-steps .is-done .sl-co-steps__dot { border-color: var(--sl-accent); background: var(--sl-accent); color: #fff; }
.sl-co-steps .is-done .sl-co-steps__dot .sl-icon { stroke-width: 2.6; }
.sl-co-steps .is-current { color: var(--sl-text); }
.sl-co-steps .is-current .sl-co-steps__dot { border-color: var(--sl-text); }
.sl-co-steps .is-current .sl-co-steps__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-text); }
.sl-co-title { margin: 0; font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-co-lead { margin: 14px 0 0; color: var(--sl-muted); font-size: var(--sl-fs-lead); }

.sl-shop form.checkout.sl-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 452px); gap: 0 clamp(28px, 4vw, 72px); align-items: start; }
.sl-shop form.checkout.sl-co > * { grid-column: 1 / -1; }
.sl-shop form.checkout.sl-co > .sl-co__main { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sl-shop form.checkout.sl-co > .sl-co__side { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--sl-header-offset, 0px) + 24px); display: flex; flex-direction: column; gap: 18px; transition: top 320ms var(--sl-ease); }

.sl-co-card { padding: clamp(22px, 2.6vw, 38px); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); background: #fff; }
.sl-co #customer_details .col-1, .sl-co #customer_details .col-2 { float: none; width: 100%; }
.sl-co .woocommerce-billing-fields > h3, .sl-co .woocommerce-additional-fields > h3 { display: none; }

/* Part titles: a round number that becomes a tick when the part is filled in (main.js). */
.sl-co { --sl-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --sl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15'/%3E%3Cpath d='m13.5 6 6 6-6 6'/%3E%3C/svg%3E"); }
.sl-co-legend { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.sl-shop .woocommerce form .form-row.sl-co-legend { width: 100%; margin-bottom: 20px; }
/* WooCommerce's clearfix on .form-row would be an empty flex item and push the content right. */
.sl-shop .woocommerce form .form-row.sl-co-legend::before, .sl-shop .woocommerce form .form-row.sl-co-legend::after,
.sl-shop .woocommerce form .form-row.sl-customer-type::before, .sl-shop .woocommerce form .form-row.sl-customer-type::after { content: none; }
.sl-co-legend__num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--sl-text); border-radius: 50%; font-size: 0.9375rem; font-weight: 600; transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-co-legend[data-n="1"] .sl-co-legend__num::before { content: "1"; }
.sl-co-legend[data-n="2"] .sl-co-legend__num::before { content: "2"; }
.sl-co-legend[data-n="3"] .sl-co-legend__num::before { content: "3"; }
.sl-co-legend.is-done .sl-co-legend__num { border-color: var(--sl-accent); background: var(--sl-accent); color: #fff; }
.sl-co-legend.is-done .sl-co-legend__num::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--sl-tick) center / contain no-repeat; mask: var(--sl-tick) center / contain no-repeat; animation: sl-co-tick 260ms var(--sl-ease); }
@keyframes sl-co-tick { from { opacity: 0; transform: scale(0.4); } }
.sl-co-legend__title { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.sl-shop .woocommerce form #sl-co-legend-2 { margin-top: 14px; padding-top: 30px; border-top: 1px solid var(--sl-line); }

/* Fields on every shop page ("Moj nalog" too). */
.sl-shop .woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.sl-shop .woocommerce form .form-row label { margin-bottom: 6px; font-size: var(--sl-fs-small); font-weight: 500; }
.sl-shop .woocommerce form .form-row .input-text,
.sl-shop .woocommerce form .form-row select { min-height: 48px; padding: 0 14px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius-md); background: #fff; font-size: 1.0625rem; }
.sl-shop .woocommerce form .form-row textarea.input-text { min-height: 96px; padding-block: 12px; }
.sl-shop .woocommerce form .form-row .input-text:focus { border-color: var(--sl-accent); outline: 2px solid var(--sl-accent-100); }
.sl-shop .woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--sl-error); }
.sl-shop .woocommerce form .form-row .description { margin-top: 6px; padding: 0; background: none; color: var(--sl-muted); font-size: 0.8125rem; }
.sl-shop .woocommerce form .form-row .description::before { display: none; }

/* Checkout fields: labels above, 54px tall, a tick once WooCommerce has checked a required field. */
.sl-shop .woocommerce form.sl-co .form-row { margin: 0 0 18px; padding: 0; }
.sl-shop .woocommerce form.sl-co .form-row label { margin-bottom: 7px; color: var(--sl-text); font-size: var(--sl-fs-small); font-weight: 500; line-height: 1.3; }
.sl-shop .woocommerce form.sl-co .form-row .required { color: var(--sl-muted); text-decoration: none; }
.sl-shop .woocommerce form.sl-co .form-row .input-text,
.sl-shop .woocommerce form.sl-co .form-row select { min-height: 54px; padding: 0 16px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius); background-color: #fff; font-size: 1.0625rem; transition: border-color var(--sl-dur) var(--sl-ease), box-shadow var(--sl-dur) var(--sl-ease); }
.sl-shop .woocommerce form.sl-co .form-row .input-text::placeholder { color: #9D978A; }
.sl-shop .woocommerce form.sl-co .form-row .input-text:hover { border-color: var(--sl-text); }
.sl-shop .woocommerce form.sl-co .form-row .input-text:focus { border-color: var(--sl-accent); outline: 0; box-shadow: 0 0 0 3px var(--sl-accent-100); }
.sl-shop .woocommerce form.sl-co .form-row.validate-required.woocommerce-validated .input-text:not(textarea) { padding-right: 46px; background: #fff no-repeat right 16px center / 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357513F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sl-shop .woocommerce form.sl-co .form-row textarea.input-text { min-height: 104px; padding-block: 14px; }
.sl-shop .woocommerce form.sl-co .form-row.woocommerce-invalid .input-text { border-color: var(--sl-error); background-color: #FFF8F5; background-image: none; }
.sl-shop .woocommerce form.sl-co .form-row.woocommerce-invalid label { color: var(--sl-error); }
.sl-shop .woocommerce form.sl-co .checkout-inline-error-message { margin: 7px 0 0; color: var(--sl-error); font-size: 0.8125rem; }
.sl-shop .woocommerce form.sl-co .form-row .description { margin-top: 7px; padding: 0; background: none; color: var(--sl-muted); font-size: 0.8125rem; }
.sl-shop .woocommerce form.sl-co .form-row .description::before { display: none; }
.sl-shop .sl-field-hidden { display: none !important; }

/* WooCommerce's address script sorts the rows by priority (inc/cart.php); flex order keeps the same
   order if it ever does not. */
.sl-shop .woocommerce-billing-fields__field-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
.sl-shop .woocommerce-billing-fields__field-wrapper > .form-row { float: none; width: 100%; }
.sl-shop .woocommerce-billing-fields__field-wrapper > .form-row-first,
.sl-shop .woocommerce-billing-fields__field-wrapper > .form-row-last { width: calc(50% - 8px); }
#sl-co-legend-1 { order: 1; }
#billing_first_name_field { order: 2; }
#billing_phone_field { order: 3; }
#billing_email_field { order: 4; }
#billing_customer_type_field { order: 5; }
#billing_company_field { order: 6; }
#billing_pib_field { order: 7; }
#sl-co-legend-2 { order: 8; }
#billing_address_1_field { order: 9; }
#billing_city_field { order: 10; }
#billing_postcode_field { order: 11; }
#billing_country_field { order: 12; }

/* Fizičko / pravno lice at the end of "Vaši podaci", then the company name and PIB for a company. */
.sl-shop .woocommerce form.sl-co .sl-customer-type { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sl-shop .woocommerce form.sl-co .sl-customer-type > label:first-child { margin: 0; color: var(--sl-muted); font-weight: 400; }
.sl-customer-type .optional, .sl-company-field .optional { display: none; }
.sl-customer-type .woocommerce-input-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-customer-type input.input-radio { position: absolute; opacity: 0; pointer-events: none; }
.sl-shop .sl-customer-type label.radio { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 18px; border: 1.5px solid var(--sl-line); border-radius: var(--sl-pill); background: #fff; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: border-color var(--sl-dur) var(--sl-ease), background-color var(--sl-dur) var(--sl-ease); }
.sl-shop .sl-customer-type label.radio:hover { border-color: var(--sl-text); }
.sl-customer-type input.input-radio:checked + label.radio { border-color: var(--sl-accent); background: var(--sl-accent-50); color: var(--sl-accent); }
.sl-customer-type input.input-radio:focus-visible + label.radio { outline: 2px solid var(--sl-accent); outline-offset: 2px; }

/* "Dodajte napomenu za kurira": the field opens on click (main.js). */
.sl-co-note { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 6px 0; border: 0; background: none; color: var(--sl-text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.sl-co-note__plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--sl-line-strong); border-radius: 50%; font-size: 1rem; line-height: 1; transition: transform var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease); }
.sl-co-note[aria-expanded="true"] .sl-co-note__plus { transform: rotate(45deg); }
.sl-co-note__opt { color: var(--sl-muted); font-weight: 400; }
.sl-co-note:hover .sl-co-note__plus { border-color: var(--sl-text); }
.js .woocommerce-additional-fields:not(.is-open) #order_comments_field { display: none; }
.sl-shop .woocommerce form.sl-co #order_comments_field { margin: 12px 0 0; }
/* The link above already says what the field is; the label stays for screen readers. */
.sl-shop .woocommerce form.sl-co #order_comments_field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .sl-co-note { display: none; }

/* Payment methods as large cards: a ring, the name and the method's icon (Icons8 iOS Outlined cash 2806,
   bill 4256); the text of the chosen one opens under its name. */
.sl-shop .sl-co #payment { border-radius: 0; background: transparent; }
.sl-shop .sl-co #payment ul.payment_methods { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; border: 0; }
.sl-shop .sl-co #payment ul.payment_methods::before, .sl-shop .sl-co #payment ul.payment_methods::after { display: none; }
.sl-shop .sl-co #payment ul.payment_methods li { position: relative; margin: 0; padding: 0; border: 1.5px solid var(--sl-line); border-radius: 14px; background: #fff; line-height: 1.4; transition: border-color var(--sl-dur) var(--sl-ease), background-color var(--sl-dur) var(--sl-ease); }
.sl-shop .sl-co #payment ul.payment_methods li:hover { border-color: var(--sl-line-strong); }
.sl-shop .sl-co #payment ul.payment_methods li:has(input:checked) { border-color: var(--sl-accent); background: var(--sl-soft-2); }
.sl-shop .sl-co #payment ul.payment_methods li > input.input-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sl-shop .sl-co #payment ul.payment_methods li > label { position: relative; display: flex; align-items: center; min-height: 66px; margin: 0; padding: 14px 64px 14px 58px; font-size: 1.0625rem; font-weight: 500; cursor: pointer; }
.sl-shop .sl-co #payment ul.payment_methods li > label::before { content: ""; position: absolute; top: 50%; left: 20px; width: 22px; height: 22px; margin-top: -11px; border: 1.5px solid var(--sl-line-strong); border-radius: 50%; background: #fff; transition: border-color var(--sl-dur) var(--sl-ease), box-shadow var(--sl-dur) var(--sl-ease); }
.sl-shop .sl-co #payment ul.payment_methods li > input:checked + label::before { border-color: var(--sl-accent); background: var(--sl-accent); box-shadow: inset 0 0 0 4.5px #fff; }
.sl-shop .sl-co #payment ul.payment_methods li > input:focus-visible + label { outline: 2px solid var(--sl-accent); outline-offset: 3px; border-radius: 12px; }
.sl-shop .sl-co #payment ul.payment_methods li > label::after { content: ""; position: absolute; top: 50%; right: 22px; width: 30px; height: 30px; margin-top: -15px; background: var(--sl-accent); -webkit-mask: var(--sl-pay-icon) center / contain no-repeat; mask: var(--sl-pay-icon) center / contain no-repeat; }
.sl-shop .sl-co #payment li.payment_method_cod { --sl-pay-icon: url(../img/icons/cash.png); }
.sl-shop .sl-co #payment li.payment_method_uplatnica, .sl-shop .sl-co #payment li.payment_method_bacs { --sl-pay-icon: url(../img/icons/bill.png); }
.sl-shop .sl-co #payment ul.payment_methods li > label img { display: none; }
.sl-shop .sl-co #payment div.payment_box { margin: -6px 0 0; padding: 0 22px 16px 58px; background: none; color: var(--sl-text-2); font-size: 0.9375rem; line-height: 1.55; }
.sl-shop .sl-co #payment div.payment_box::before { display: none; }
.sl-shop .sl-co #payment div.payment_box p:last-child { margin-bottom: 0; }
.sl-shop .sl-co #payment div.form-row.place-order { margin: 0; padding: 0; }

.sl-shop .sl-co .woocommerce-terms-and-conditions-wrapper { margin: 0 0 4px; font-size: 0.9375rem; }
.sl-shop .woocommerce form.sl-co .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
.sl-shop .woocommerce form.sl-co .woocommerce-terms-and-conditions-wrapper label.checkbox { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--sl-text-2); font-size: 0.9375rem; font-weight: 400; line-height: 1.5; cursor: pointer; }
.sl-co .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sl-accent); cursor: pointer; }
.sl-co .woocommerce-form__label-for-checkbox .required { display: none; }

/* The total right above the button, and the button itself: the largest thing on the page. */
.sl-co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 20px 0 16px; padding-top: 20px; border-top: 1px solid var(--sl-line); }
.sl-co-total__label { font-size: 1.0625rem; font-weight: 500; }
.sl-co-total__sum { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.sl-co-total__sum small { display: block; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; }
.sl-shop .woocommerce .sl-co #place_order { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; float: none; border: 0; border-radius: var(--sl-pill); background: var(--sl-text); color: #fff; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color var(--sl-dur) var(--sl-ease); }
.sl-shop .woocommerce .sl-co #place_order::after { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--sl-arrow) center / contain no-repeat; mask: var(--sl-arrow) center / contain no-repeat; }
.sl-shop .woocommerce .sl-co #place_order:hover { background: #000; color: #fff; }
/* WooCommerce floats #place_order: clear it, and space with padding, since a margin would be swallowed by the clearance. */
.sl-co-after { clear: both; margin: 0 0 6px; padding-top: 20px; color: var(--sl-muted); font-size: var(--sl-fs-small); text-align: center; }

/* The order box. */
.sl-co-fold { display: none; }
.sl-co-sum { padding: clamp(22px, 2.2vw, 32px); border-radius: var(--sl-radius-lg); background: var(--sl-soft); }
.sl-co-sum__title { margin: 0 0 22px; font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.sl-co .sl-freeship.sl-freeship--checkout { margin: 0 0 26px; padding: 0 2px; }
.sl-shop .woocommerce .sl-co table.shop_table.woocommerce-checkout-review-order-table { margin: 0; border: 0; border-radius: 0; background: transparent; }
.sl-co .woocommerce-checkout-review-order-table thead th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table td,
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table th { padding: 11px 0; border-top: 1px solid var(--sl-line); }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tbody tr:first-child td { border-top: 0; padding-top: 0; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tbody td { padding-block: 16px; vertical-align: top; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table td.product-total { padding-left: 12px; text-align: right; font-weight: 600; white-space: nowrap; }
.sl-co .sl-review-item { align-items: flex-start; }
.sl-co .sl-review-item__thumb { width: 68px; background: #fff; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tfoot th { color: var(--sl-text-2); font-size: 0.9375rem; font-weight: 400; text-align: left; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 500; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tr.order-total th,
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tr.order-total td { padding-top: 16px; border-top: 1px solid var(--sl-line-strong); color: var(--sl-text); }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tr.order-total th { font-size: 1rem; font-weight: 600; }
.sl-shop .woocommerce .sl-co .woocommerce-checkout-review-order-table tr.order-total td { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.sl-co .sl-coupon { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--sl-line); }
.sl-co .sl-coupon .sl-input { background: #fff; }

.sl-co-trust { display: grid; gap: 12px; margin: 0; padding: 0 6px; list-style: none; color: var(--sl-text-2); font-size: var(--sl-fs-small); line-height: 1.5; }
.sl-co-trust li { display: flex; align-items: flex-start; gap: 12px; }
.sl-co-trust .sl-icon { flex: none; margin-top: 1px; color: var(--sl-accent); }
.sl-co-trust a { color: var(--sl-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sl-khaki); text-underline-offset: 0.2em; }
.sl-co-trust--main { display: none; }

@media (max-width: 999px) {
  .sl-shop form.checkout.sl-co { grid-template-columns: 1fr; }
  .sl-shop form.checkout.sl-co > .sl-co__side { grid-column: 1; grid-row: 2; position: static; margin-bottom: 20px; gap: 0; }
  .sl-shop form.checkout.sl-co > .sl-co__main { grid-column: 1; grid-row: 3; }
  .sl-co-trust--side { display: none; }
  .sl-co-trust--main { display: grid; padding: 4px 4px 0; }
  /* The order folded into one line: "Vaša porudžbina · 2 proizvoda" and the total. */
  .js .sl-co-fold { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 12px 18px; border: 0; border-radius: var(--sl-radius-lg); background: var(--sl-soft); color: var(--sl-text); font: inherit; text-align: left; cursor: pointer; }
  .sl-co-fold__label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-weight: 500; }
  .sl-co-fold__label .sl-icon { flex: none; color: var(--sl-accent); }
  .sl-co-fold__count { display: block; color: var(--sl-muted); font-size: 0.8125rem; font-weight: 400; }
  .sl-co-fold__total { font-size: 1.125rem; font-weight: 600; white-space: nowrap; }
  .sl-co-fold__chev { display: grid; transition: transform var(--sl-dur) var(--sl-ease); }
  .sl-co__side.is-open .sl-co-fold { border-radius: var(--sl-radius-lg) var(--sl-radius-lg) 0 0; }
  .sl-co__side.is-open .sl-co-fold__chev { transform: rotate(180deg); }
  .js .sl-co__side:not(.is-open) .sl-co-sum { display: none; }
  .js .sl-co-sum { padding-top: 6px; border-radius: 0 0 var(--sl-radius-lg) var(--sl-radius-lg); }
  .js .sl-co-sum__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sl-co-sum .sl-freeship.sl-freeship--checkout { margin-top: 10px; }
}
@media (max-width: 599px) {
  .sl-co-card { padding: 22px 18px; }
  .sl-shop .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .sl-shop .woocommerce-billing-fields__field-wrapper > .form-row-last { width: 100%; }
  .sl-shop .woocommerce-billing-fields__field-wrapper > #billing_city_field { width: calc(60% - 6px); }
  .sl-shop .woocommerce-billing-fields__field-wrapper > #billing_postcode_field { width: calc(40% - 6px); }
  .sl-co-steps { font-size: 0.6875rem; letter-spacing: 0.04em; }
  .sl-co-steps li + li::before { width: 14px; margin: 0 8px; }
  .sl-co-steps__dot { width: 20px; height: 20px; margin-right: 6px; }
  .sl-shop .sl-co #payment ul.payment_methods li > label { padding-left: 54px; padding-right: 56px; font-size: 1rem; }
  .sl-shop .sl-co #payment div.payment_box { padding-left: 54px; padding-right: 18px; }
  .sl-co-total__label { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-co-legend.is-done .sl-co-legend__num::before { animation: none; }
}

/* After the order. */
.sl-shop .woocommerce-thankyou-order-received { font-size: 1.0625rem; line-height: 1.6; }
.sl-thanks__lead { display: block; margin-bottom: 6px; font-weight: 600; }
.sl-thanks__account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.sl-shop ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: var(--sl-space-5) 0; padding: 18px 22px; border-radius: var(--sl-radius); background: var(--sl-soft); }
.sl-shop ul.woocommerce-order-overview li { margin: 0; padding: 0; border: 0; }

/* ---------- Motif page ---------- */

.sl-pdp { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 999px) { .sl-pdp { grid-template-columns: 1fr; gap: 20px; } }

.sl-gallery { display: flex; flex-direction: column; gap: 12px; }
.sl-gallery__main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--sl-line); border-radius: 14px; background: var(--sl-soft); }
.sl-gallery__main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; touch-action: manipulation; transition: transform 700ms var(--sl-ease); }
/* Double-click zoom (main.js): slow on purpose, so the eye follows into the detail. */
.sl-gallery__main.is-zoomed img { cursor: zoom-out; }
.sl-gallery__main.is-zoomed .sl-gallery__label { opacity: 0; }
.sl-gallery__wall { position: absolute; left: 18px; bottom: 18px; }
.sl-gallery__fav { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; background: rgb(255 255 255 / 0.94); }
.sl-gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sl-gallery__thumb { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); background: var(--sl-soft); cursor: pointer; }
.sl-gallery__thumb[aria-current="true"] { border: 2px solid var(--sl-text); }
.sl-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Flat motifs show whole in the square (letterboxed on the section tone): a world map loses its sides when cropped. */
.sl-gallery__main img.is-whole, .sl-gallery__thumb img.is-whole { object-fit: contain; }
.sl-gallery__label { transition: opacity var(--sl-dur); position: absolute; left: 50%; top: 9%; z-index: 1; margin: 0; padding: 6px 14px; transform: translate(-50%, -50%); border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.7); color: var(--sl-text-2); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
@media (max-width: 520px) { .sl-gallery__label { font-size: 0.6875rem; padding: 5px 10px; } }
@media (max-width: 999px) { .sl-gallery__main { margin-inline: calc(-1 * var(--sl-gutter)); border-radius: 0; border-inline: 0; } }

.sl-pdp__title { margin: 0 0 8px; font-size: clamp(1.625rem, 1.4rem + 0.7vw, 2.125rem); font-weight: 600; line-height: 1.1; }
.sl-pdp__meta { margin: 0 0 10px; color: var(--sl-muted); }
.sl-pdp__intro { margin: 0; color: var(--sl-text-2); line-height: 1.6; }
.sl-pdp__config { display: flex; flex-direction: column; gap: 14px; }

.sl-box { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--sl-line); border-radius: 14px; background: #fff; }
.sl-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sl-box__title { margin: 0; font-size: 1.125rem; font-weight: 500; }
.sl-box__help { margin: 0; font-size: 0.84375rem; color: var(--sl-muted); }
.sl-box__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sl-box__info { margin: 0; padding: 10px 14px; border-radius: var(--sl-radius-md); background: var(--sl-accent-50); color: var(--sl-accent); font-size: 0.9375rem; font-weight: 500; }
/* The wall specification, one row each (Andrej, 24.10.2026), in the same tinted box as the hint before it. */
.sl-spec { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: var(--sl-radius-md); background: var(--sl-accent-50); font-size: 0.9375rem; }
.sl-spec > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.sl-spec dt { color: var(--sl-text-2); font-weight: 400; }
.sl-spec dd { margin: 0; color: var(--sl-accent); font-weight: 600; }

.sl-frame { position: relative; overflow: hidden; border-radius: var(--sl-radius-sm); background: var(--sl-soft); touch-action: none; }
.sl-frame > img { width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.sl-frame__box { position: absolute; box-shadow: 0 0 0 9999px rgb(255 255 255 / 0.62); outline: 2px solid var(--sl-text); outline-offset: -1px; cursor: grab; }
.sl-frame__box:active { cursor: grabbing; }
.sl-frame__seam { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--sl-todo); }
.sl-frame__moves { display: flex; justify-content: center; gap: 10px; }

/* "Vektor" motif, step 2: the wall keeps changing shape and the shapes move into a new layout (main.js).
   A longer movement than --sl-dur, like the other illustrations Andrej asked for. */
.sl-vector { display: flex; flex-direction: column; gap: 12px; }
.sl-vector__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--sl-radius-sm); background: var(--sl-soft); }
.sl-vector__wall { position: absolute; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgb(58 55 46 / 0.08), 0 10px 26px rgb(58 55 46 / 0.12); transition: left 700ms var(--sl-ease), top 700ms var(--sl-ease), width 700ms var(--sl-ease), height 700ms var(--sl-ease); }
.sl-vector__el { position: absolute; overflow: visible; fill: var(--sl-accent); transition: left 900ms cubic-bezier(0.65, 0, 0.35, 1), top 900ms cubic-bezier(0.65, 0, 0.35, 1), width 900ms cubic-bezier(0.65, 0, 0.35, 1), height 900ms cubic-bezier(0.65, 0, 0.35, 1), opacity 350ms ease; transition-delay: calc(var(--i) * 70ms); }
.sl-vector__el:nth-of-type(4n + 2) { fill: var(--sl-khaki); }
.sl-vector__el:nth-of-type(4n + 3) { fill: var(--sl-line-strong); }
.sl-vector__el:nth-of-type(4n) { fill: var(--sl-sand); }
.sl-vector__el.is-out { opacity: 0.25; transition-delay: 0ms; }
.sl-vector.is-static .sl-vector__wall, .sl-vector.is-static .sl-vector__el { transition: none; }
.sl-vector__note { margin: 0; padding: 14px 16px; border-radius: var(--sl-radius-sm); background: var(--sl-soft-2); font-size: 0.9375rem; color: var(--sl-text-2); }
@media (prefers-reduced-motion: reduce) {
  .sl-vector__wall, .sl-vector__el { transition: none; }
}
.sl-frame__moves .sl-btn { min-height: 40px; padding: 0 16px; font-size: 0.90625rem; }

.sl-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl-choice--stack { grid-template-columns: 1fr; gap: 8px; }
.sl-choice--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .sl-choice--three { grid-template-columns: 1fr; gap: 8px; } }
.sl-box.is-invalid { border-color: var(--sl-error); }
.sl-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sl-dur) var(--sl-ease), background-color var(--sl-dur) var(--sl-ease);
}
.sl-opt:hover { border-color: var(--sl-text); }
.sl-opt[aria-pressed="true"] { border: 2px solid var(--sl-accent); padding: 13px; background: var(--sl-accent-50); }
.sl-opt__name { font-size: 0.96875rem; font-weight: 600; }
.sl-opt__price { font-size: 0.9375rem; font-weight: 500; color: var(--sl-accent); }
.sl-opt__text { font-size: 0.8125rem; line-height: 1.45; color: var(--sl-muted); }
.sl-opt__total { font-size: 0.84375rem; font-weight: 600; }
.sl-opt--row { flex-direction: row; align-items: center; gap: 12px; min-height: 48px; padding-block: 0; font-size: 0.9375rem; }
.sl-opt--row[aria-pressed="true"] { padding-block: 0; }
.sl-opt__dot { flex: none; width: 18px; height: 18px; border: 2px solid var(--sl-accent); border-radius: var(--sl-pill); }
.sl-opt[aria-pressed="true"] .sl-opt__dot { background: var(--sl-accent); box-shadow: inset 0 0 0 3px #fff; }

.sl-summary { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--sl-soft); }
.sl-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
/* The amount never breaks before "din" (Andrej, 25.10.2026); the label wraps instead. */
.sl-summary__row strong { font-weight: 500; text-align: right; white-space: nowrap; }
.sl-summary__min { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--sl-text-2); white-space: nowrap; }
.sl-summary__line { height: 1px; background: var(--sl-line); }
.sl-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sl-summary__total span { font-weight: 500; }
.sl-summary__total strong { font-size: 1.75rem; font-weight: 600; }
.sl-summary__fine { margin: 0; font-size: 0.8125rem; color: var(--sl-muted); text-align: center; }

.sl-compare { padding: 56px 48px; border-radius: 18px; background: var(--sl-soft); }
.sl-compare__title { margin-bottom: var(--sl-space-5); font-weight: 400; }
.sl-compare__price { margin-bottom: 14px; font-size: 1.375rem; }
.sl-faq--single { grid-template-columns: 1fr; }
.sl-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; }
.sl-compare__card { padding: 22px 24px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); background: #fff; }
.sl-compare__card--pick { border: 2px solid var(--sl-accent); padding: 21px 23px; }
.sl-compare__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--sl-line); }
.sl-compare__row span:first-child { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-muted); }
@media (max-width: 899px) { .sl-compare { padding: 28px 20px; margin-inline: calc(-1 * var(--sl-gutter)); border-radius: 0; } .sl-compare__grid { grid-template-columns: 1fr; } }

.sl-tabs__list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--sl-line); }
.sl-tabs__tab { min-height: 52px; padding: 0 20px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 1rem; color: var(--sl-muted); cursor: pointer; }
.sl-tabs__tab[aria-selected="true"] { border-bottom-color: var(--sl-text); color: var(--sl-text); font-weight: 500; }
.sl-tabs__panel { max-width: 760px; padding: 28px 0; color: var(--sl-text-2); line-height: 1.7; }
.sl-tabs__panel[hidden] { display: none; }
@media (max-width: 599px) { .sl-tabs__list { flex-wrap: nowrap; overflow-x: auto; } .sl-tabs__tab { padding: 0 14px; white-space: nowrap; } }

/* Buy bar (Andrej, 24.10.2026): price and the buy button stay in reach. Phones: fixed at the bottom while
   the summary or the form is off screen; computers: a floating pill once the buy area is scrolled past
   (main.js toggles .is-on). A wallpaper that is not measured yet shows the price per m² and a button
   that takes the shopper to the wall measures. */
.sl-buybar { position: fixed; z-index: 30; display: flex; align-items: center; gap: 12px; visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity var(--sl-dur) var(--sl-ease), transform var(--sl-dur) var(--sl-ease), visibility 0s linear var(--sl-dur); }
.sl-buybar.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.sl-buybar__thumb, .sl-buybar__name { display: none; }
.sl-buybar__total { display: flex; flex-direction: column; line-height: 1.2; }
.sl-buybar__total span { font-size: 0.75rem; color: var(--sl-muted); }
.sl-buybar__total strong { font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.sl-buybar:has([data-buy]:disabled) .sl-buybar__total--sum,
.sl-buybar:has([data-buy]:disabled) [data-buy],
.sl-buybar:not(:has([data-buy]:disabled)) .sl-buybar__total--from,
.sl-buybar:not(:has([data-buy]:disabled)) .sl-buybar__go { display: none; }
@media (max-width: 999px) {
  .sl-buybar { left: 0; right: 0; bottom: 0; padding: 12px var(--sl-gutter) calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--sl-line); box-shadow: 0 -8px 24px rgb(30 30 28 / 0.08); }
  .sl-buybar .sl-btn { flex: 1; min-height: 52px; }
  .sl-buybar .sl-buybar__go { font-size: 1rem; }
  .sl-buybar .sl-btn--buy { font-size: 1.0625rem; }
  .sl-has-buybar .sl-footer { padding-bottom: 96px; }
}
@media (min-width: 1000px) {
  .sl-buybar { left: 50%; bottom: 20px; width: min(780px, calc(100% - 2 * var(--sl-gutter))); padding: 10px 10px 10px 12px; translate: -50% 0; border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.96); box-shadow: 0 0 0 1px var(--sl-line), 0 24px 50px -16px rgb(30 30 28 / 0.32); backdrop-filter: blur(10px); }
  .sl-buybar__thumb { display: block; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--sl-soft); }
  .sl-buybar__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sl-buybar__name { display: block; flex: 1; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .sl-buybar__total { padding-inline: 6px; }
  .sl-buybar .sl-btn { min-height: 52px; padding-inline: 26px; border-radius: var(--sl-pill); font-size: 1.0625rem; }
  .sl-buybar .sl-btn--buy { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { .sl-buybar { transition: none; } }

/* ---------- Forms ---------- */

.sl-field { display: flex; flex-direction: column; gap: 6px; }
.sl-label { padding: 0; font-size: 0.84375rem; font-weight: 500; color: var(--sl-text-2); }
.sl-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--sl-line-strong);
  border-radius: var(--sl-radius-md);
  background: #fff;
  font-size: 1.0625rem; /* 16px or more keeps iOS from zooming on focus */
  transition: border-color var(--sl-dur) var(--sl-ease), box-shadow var(--sl-dur) var(--sl-ease);
}
.sl-input::placeholder { color: #857D67; }
.sl-input:hover { border-color: var(--sl-text); }
.sl-input:focus { outline: none; border-color: var(--sl-accent); box-shadow: 0 0 0 3px var(--sl-accent-50); }
.sl-help { margin: 0; font-size: 0.84375rem; color: var(--sl-muted); }
.sl-error { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--sl-error); }
.sl-field.is-invalid .sl-input { border-color: var(--sl-error); }
.sl-check { display: inline-flex; align-items: flex-start; gap: var(--sl-space-3); cursor: pointer; }
.sl-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--sl-accent); }

/* ---------- Trust bar ---------- */

.sl-trust { padding-block: 28px; }
.sl-trust__list { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 16px 32px; margin: 0; padding: 22px 28px; list-style: none; border: 1px solid var(--sl-line); border-radius: 14px; }
.sl-trust__item { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.sl-trust__item a { text-decoration: none; }
.sl-trust__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--sl-pill); background: var(--sl-accent-50); color: var(--sl-accent); }
@media (min-width: 900px) and (max-width: 1199px) {
  .sl-trust__item { flex: 0 0 calc(50% - 16px); }
}
@media (max-width: 899px) {
  .sl-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; font-size: 0.84375rem; }
  .sl-trust__item { font-size: 0.84375rem; gap: 10px; white-space: normal; }
  .sl-trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sl-trust__icon { width: 38px; height: 38px; }
}

/* ---------- Footer ---------- */

.sl-footer { background: var(--sl-accent-900); color: var(--sl-on-dark); font-size: 0.9375rem; }
.sl-footer a { color: var(--sl-on-dark); text-decoration: none; }
.sl-footer a:hover { color: #fff; text-decoration: underline; }
.sl-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-block: 64px 48px; border-bottom: 1px solid rgb(236 235 222 / 0.15); }
.sl-footer__news { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.sl-footer__news .sl-eyebrow { color: var(--sl-on-dark-muted); }
.sl-footer__lead { margin: 0; font-size: 1.625rem; font-weight: 300; line-height: 1.3; }
.sl-newsletter { display: flex; flex: 1 1 420px; flex-wrap: wrap; gap: 10px; max-width: 540px; }
.sl-newsletter .sl-input { flex: 1 1 240px; border-color: rgb(236 235 222 / 0.3); border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.06); color: var(--sl-on-dark); padding-inline: 22px; }
.sl-newsletter .sl-input::placeholder { color: var(--sl-on-dark-muted); }
.sl-newsletter .sl-btn { min-height: 48px; background: #fff; color: var(--sl-accent-900); font-weight: 600; }
.sl-footer__cols { display: grid; grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 64px 48px; }
.sl-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.sl-footer__brand img { width: 180px; height: auto; }
.sl-footer__brand p { margin: 0; max-width: 240px; color: var(--sl-on-dark-muted); font-size: 0.875rem; line-height: 1.6; }
.sl-footer__title { margin: 0 0 16px; font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-on-dark-muted); }
.sl-footer__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px 32px; border-top: 1px solid rgb(236 235 222 / 0.15); color: var(--sl-on-dark-muted); font-size: 0.8125rem; }
.sl-footer__legal p { margin: 0; max-width: 900px; line-height: 1.6; }
.sl-footer .sl-footer__credit, .sl-footer .sl-footer__credit:hover { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--sl-on-dark-muted); text-decoration: none; opacity: 0.2; }
.sl-footer__credit::after { content: ""; order: 1; width: 1px; height: 18px; background: currentColor; }
.sl-footer__credit-logo { order: 2; width: 82px; height: 24px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
@media (max-width: 999px) {
  .sl-footer__top { padding-block: 40px 32px; }
  .sl-footer__lead { font-size: 1.25rem; }
  .sl-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-block: 40px 32px; }
  .sl-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Component kit (review page) ---------- */

.sl-kit { padding-block: var(--sl-space-7) var(--sl-space-8); }
.sl-kit__head { margin-bottom: var(--sl-space-6); }
.sl-kit__section { padding-block: var(--sl-space-6); border-top: 1px solid var(--sl-line); }
.sl-kit__h { margin-bottom: var(--sl-space-5); font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-muted); }
.sl-kit__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sl-space-4); margin: 0; padding: 0; list-style: none; }
.sl-kit__swatches li { display: grid; gap: 4px; font-size: var(--sl-fs-small); }
.sl-kit__swatch { display: block; height: 72px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-sm); }
.sl-kit__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-4); }
.sl-kit__row--dark { margin-top: var(--sl-space-4); padding: var(--sl-space-5); border-radius: var(--sl-radius); background: var(--sl-accent-900); }
.sl-kit__forms { display: grid; gap: var(--sl-space-5); max-width: 520px; }

/* ---------- "Dodato u korpu" dialog (template-parts/added-dialog.php) ---------- */

/* The entrance comes in steps: card, ring, bag, tick with a small burst, then the text and the
   buttons. Andrej asked for this motion (23.10.2026), so it runs past the 300 ms rule; main.js
   skips it under reduced motion. */
.sl-added {
  --sl-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sl-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  width: min(100vw - 32px, 480px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sl-text);
  overflow: visible;
}
.sl-added::backdrop { background: rgb(30 30 28 / 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sl-added__card {
  position: relative;
  display: grid;
  gap: 20px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 36px 32px 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgb(30 30 28 / 0.25);
  text-align: center;
}
.sl-added__close { position: absolute; top: 10px; right: 10px; }

.sl-added__badge { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto; }
.sl-added__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-added__ring circle { fill: var(--sl-soft); stroke: var(--sl-accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-added__bag { position: relative; width: 44px; height: 44px; background: var(--sl-text); -webkit-mask: url(../img/icons/shopping-bag.png) center / contain no-repeat; mask: url(../img/icons/shopping-bag.png) center / contain no-repeat; }
.sl-added__tick { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sl-text); box-shadow: 0 0 0 3px #fff; }
.sl-added__tick svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sl-added__tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-added__burst { position: absolute; inset: 0; pointer-events: none; }
.sl-added__burst i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--sl-khaki); opacity: 0; }
.sl-added__burst i:nth-child(even) { width: 4px; height: 4px; margin: -2px; background: var(--sl-accent); }

.sl-added__title { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-weight: 300; letter-spacing: -0.01em; }

.sl-added__item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); text-align: left; }
.sl-added__thumb { display: grid; place-items: center; width: 104px; aspect-ratio: 1; overflow: hidden; border-radius: var(--sl-radius); background: var(--sl-soft); }
.sl-added__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.sl-added__thumb > .slc-thumb { max-width: 100%; }
.sl-added__name { margin: 0 0 4px; font-weight: 600; line-height: 1.3; }
.sl-added__details { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: var(--sl-fs-small); line-height: 1.35; }
/* A detail as its label with the value on the next line (dialog and side cart). */
.sl-dl__label, .sl-dl__value { display: block; }
.sl-dl__label { color: var(--sl-muted); font-size: var(--sl-fs-xs); }
.sl-dl__value { color: var(--sl-text); font-weight: 500; overflow-wrap: anywhere; }
.sl-added__price { margin: 0; color: var(--sl-accent); font-weight: 600; }

.sl-added__cart { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--sl-radius-lg); background: var(--sl-soft); text-align: left; }
/* The free delivery line sits 15px further from the truck than at first (Andrej, 23.10.2026); under the bar the cart count and a small button. */
.sl-added__ship { margin: 0 0 13px; color: var(--sl-accent); font-size: var(--sl-fs-small); font-weight: 500; }
.sl-added__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--sl-line); }
.sl-added__sum p { margin: 0; font-size: var(--sl-fs-small); font-weight: 500; }
.sl-added__sum .sl-btn--sm { padding-inline: 14px; }
/* In the dialog the truck leaves after the card is in, and again on every opening. */
.sl-added .sl-ship { --sl-ship-delay: 720ms; }
.sl-added:not(.is-playing) .sl-ship *, .sl-added:not(.is-playing) .sl-ship .sl-freeship__bar::after { animation: none; }
.sl-added .sl-ship__done { font-size: 1.05rem; }
.sl-added:not(.is-playing) .sl-free, .sl-added:not(.is-playing) .sl-thumb::before, .sl-added:not(.is-playing) .sl-thumb::after { animation: none; }

.sl-added__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-added__actions .sl-btn { flex: 1 1 auto; padding-inline: 20px; }

@media (max-width: 479px) {
  .sl-added__card { gap: 16px; padding: 32px 18px 18px; }
  .sl-added__item { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .sl-added__thumb { width: 80px; }
  .sl-added__actions { flex-direction: column-reverse; }
}

/* Entrance */
.sl-added.is-playing::backdrop { animation: sl-added-fade 320ms ease both; }
.sl-added.is-playing .sl-added__card { animation: sl-added-card 640ms var(--sl-out) both; }
.sl-added.is-playing .sl-added__badge { animation: sl-added-pop 520ms var(--sl-back) 120ms both; }
.sl-added.is-playing .sl-added__ring circle { animation: sl-added-ring 760ms var(--sl-out) 180ms both; }
.sl-added.is-playing .sl-added__bag { animation: sl-added-bag 620ms var(--sl-out) 300ms both; }
.sl-added.is-playing .sl-added__tick { animation: sl-added-pop 420ms var(--sl-back) 640ms both; }
.sl-added.is-playing .sl-added__tick path { animation: sl-added-draw 340ms var(--sl-out) 780ms both; }
.sl-added.is-playing .sl-added__burst i { animation: sl-added-burst 700ms var(--sl-out) 660ms both; }
.sl-added.is-playing .sl-added__in { animation: sl-added-rise 620ms var(--sl-out) var(--d, 0ms) both; }
.sl-added.is-playing .sl-added__thumb > * { animation: sl-added-reveal 760ms var(--sl-out) 520ms both; }

/* Exit, after "Nastavite kupovinu", the cross, Escape or a click beside the card */
.sl-added.is-leaving::backdrop { animation: sl-added-fade 220ms ease-in reverse both; }
.sl-added.is-leaving .sl-added__card { animation: sl-added-out 220ms ease-in both; }

@keyframes sl-added-fade { from { opacity: 0; } }
@keyframes sl-added-card { from { opacity: 0; transform: translateY(36px) scale(0.94); } }
@keyframes sl-added-out { to { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes sl-added-pop { from { transform: scale(0); } }
@keyframes sl-added-ring { from { stroke-dashoffset: 1; fill-opacity: 0; } }
@keyframes sl-added-draw { from { stroke-dashoffset: 1; } }
@keyframes sl-added-bag {
  0% { opacity: 0; transform: translateY(-30px) rotate(-14deg) scale(0.6); }
  55% { opacity: 1; transform: translateY(3px) rotate(0) scale(1.08, 0.92); }
  78% { transform: translateY(-2px) scale(0.97, 1.04); }
  100% { transform: none; }
}
@keyframes sl-added-burst {
  0% { opacity: 0; transform: rotate(calc(var(--n) * 45deg)) translateY(-40px) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--n) * 45deg)) translateY(-70px) scale(0.3); }
}
@keyframes sl-added-rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
@keyframes sl-added-reveal { from { clip-path: inset(100% 0 0 0); transform: scale(1.18); } to { clip-path: inset(0); transform: none; } }

.single_add_to_cart_button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- Side cart (template-parts/side-cart.php) ---------- */

/* The panel slides in from the right, the lines follow one after another, then the truck drives
   (Andrej, 23.10.2026). After the entrance the bar slides to new values; closing slides it out. */
.sl-side {
  --sl-out: cubic-bezier(0.16, 1, 0.3, 1);
  inset: 0 0 0 auto;
  width: min(100vw, 440px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sl-text);
  overflow: visible;
}
.sl-side::backdrop { background: rgb(30 30 28 / 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sl-side__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: #fff; box-shadow: -24px 0 60px rgb(30 30 28 / 0.18); }
.sl-side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 12px 0 24px; border-bottom: 1px solid var(--sl-line); }
.sl-side__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.375rem; font-weight: 300; }
.sl-side__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--sl-pill); background: var(--sl-text); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.sl-side__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px; }

.sl-side__list { margin: 0; padding: 0; list-style: none; }
.sl-side__list[aria-busy="true"] { cursor: progress; }
.sl-side__item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px 30px 16px 0; border-bottom: 1px solid var(--sl-line); }
.sl-side__item:last-child { border-bottom: 0; }
.sl-side__thumb { display: grid; place-items: center; width: 84px; aspect-ratio: 1; overflow: hidden; border-radius: var(--sl-radius); background: var(--sl-soft); }
.sl-side__thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--sl-ease); }
.sl-side__thumb:hover > img { transform: scale(1.06); }
.sl-side__thumb > .slc-thumb { max-width: 100%; }
.sl-side__name { display: block; margin-bottom: 4px; color: var(--sl-text); font-weight: 600; line-height: 1.3; text-decoration: none; }
.sl-side__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sl-side__details { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: var(--sl-fs-small); line-height: 1.35; }
/* Values 25% under the 14px detail size (Andrej, 23.10.2026); the label stays a step smaller than its value. */
.sl-side__details .sl-dl__value { font-size: 0.65625rem; }
.sl-side__details .sl-dl__label { font-size: 0.625rem; }
.sl-side__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-side__price { color: var(--sl-accent); font-weight: 600; white-space: nowrap; }
.sl-side__remove { position: absolute; top: 12px; right: -8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--sl-muted); cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease), transform var(--sl-dur) var(--sl-ease); }
.sl-side__remove svg { width: 18px; height: 18px; }
.sl-side__remove:hover { background: var(--sl-soft); color: var(--sl-text); transform: rotate(90deg); }

.sl-qty { display: inline-flex; align-items: center; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); }
.sl-qty__btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--sl-text); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease); }
.sl-qty__btn:hover:not([disabled]) { background: var(--sl-soft); }
.sl-qty__btn[disabled] { opacity: 0.35; cursor: default; }
.sl-qty__num { min-width: 22px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.sl-side__loading { display: grid; gap: 16px; padding: 16px 0; }
.sl-side__loading span { height: 84px; border-radius: var(--sl-radius); background: linear-gradient(90deg, var(--sl-soft-2) 25%, var(--sl-soft) 50%, var(--sl-soft-2) 75%) 0 0 / 200% 100%; animation: sl-side-shimmer 1.2s linear infinite; }
/* Empty cart (Andrej, 26.10.2026): fills the panel, the cart and copy centered, the phone at the
   bottom. Showing it (hidden off) restarts every animation, so it plays on each opening. */
.sl-side__empty:not([hidden]) { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; padding: 24px 0 16px; }
.sl-se__main { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; padding: 8px 0 24px; text-align: center; }
.sl-se__art { position: relative; display: grid; place-items: center; width: 112px; aspect-ratio: 1; margin-bottom: 24px; border-radius: 50%; background: var(--sl-soft); }
.sl-se__ring { position: absolute; inset: -10px; border: 1px dashed var(--sl-sand); border-radius: 50%; animation: sl-added-fade 600ms ease 200ms both, sl-se-spin 40s linear infinite; }
.sl-se__cart { position: relative; z-index: 1; width: 52px; height: 52px; margin-top: -6px; background: var(--sl-text); transform-origin: 50% 90%; -webkit-mask: url(../img/icons/shopping-cart.png) center / contain no-repeat; mask: url(../img/icons/shopping-cart.png) center / contain no-repeat; animation: sl-se-roll 900ms cubic-bezier(0.3, 1.4, 0.5, 1) 150ms both, sl-se-rock 3.4s ease-in-out 1.2s infinite; }
.sl-se__ground { position: absolute; left: 50%; bottom: 26px; width: 48px; height: 6px; margin-left: -24px; border-radius: 50%; background: rgb(30 30 28 / 0.12); animation: sl-added-fade 400ms ease 700ms both, sl-se-ground 3.4s ease-in-out 1.2s infinite; }
.sl-se__title { margin: 0; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-se__title strong { font-weight: 600; letter-spacing: -0.05em; }
/* Each line rises out of a mask; the padding keeps the hooks on š and ž visible. */
.sl-se__w { display: block; overflow: hidden; margin: -0.18em -0.12em 0; padding: 0.18em 0.12em 0.04em; }
.sl-se__w > * { display: block; animation: sl-se-rise 800ms var(--sl-out) 250ms both; }
.sl-se__w + .sl-se__w > * { animation-delay: 340ms; }
.sl-se__text { max-width: 30ch; margin: 14px 0 0; color: var(--sl-text-2); line-height: 1.55; animation: sl-side-foot 600ms var(--sl-out) 480ms both; }
.sl-se__links { width: 100%; margin-top: 22px; text-align: left; }
.sl-se__links li { animation: sl-side-foot 600ms var(--sl-out) calc(580ms + var(--i, 0) * 80ms) both; }
.sl-se__links .sl-kx__link { padding: 10px 0; font-size: 1.3125rem; }
.sl-se__help { display: grid; justify-items: center; gap: 6px; padding: 20px 20px 18px; border-radius: 18px; background: var(--sl-soft); text-align: center; animation: sl-side-foot 600ms var(--sl-out) 820ms both; }
.sl-se__phone { display: inline-flex; align-items: center; gap: 12px; color: var(--sl-text); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.sl-se__phone:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.sl-se__phone-icon { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-text); color: #fff; }
.sl-se__phone-icon svg { animation: sl-se-call 4s ease-in-out 1.6s infinite; }
.sl-se__help p { max-width: 32ch; margin: 0; color: var(--sl-text-2); font-size: var(--sl-fs-small); line-height: 1.5; }

@keyframes sl-se-roll { from { opacity: 0; transform: translateX(-96px) rotate(-12deg); } 40% { opacity: 1; } }
@keyframes sl-se-rock { 0%, 100% { transform: none; } 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }
@keyframes sl-se-ground { 0%, 100% { transform: none; } 25%, 75% { transform: scaleX(0.82); } }
@keyframes sl-se-spin { to { transform: rotate(360deg); } }
@keyframes sl-se-rise { from { transform: translateY(110%); } }
/* A short ring every few seconds: two quick shakes, then still. */
@keyframes sl-se-call { 0%, 14%, 100% { transform: none; } 2%, 6%, 10% { transform: rotate(-14deg); } 4%, 8%, 12% { transform: rotate(14deg); } }

.sl-side .sl-ship { --sl-ship-delay: 420ms; }
.sl-side__foot { display: grid; gap: 12px; margin: 0; padding: 18px 24px 24px; border-top: 1px solid var(--sl-line); background: var(--sl-soft); }
.sl-side__foot .sl-freeship__text { margin: 0 0 9px; }
/* A thin line between delivery and the total; the beige foot needs the sand tone, the usual line
   would vanish on it (Andrej, 24.10.2026). */
.sl-side__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 0; padding-top: 14px; border-top: 1px solid var(--sl-sand); font-weight: 500; }
.sl-side__sum strong { font-size: 1.375rem; font-weight: 600; }
.sl-side__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-side__actions .sl-btn { flex: 1 1 auto; padding-inline: 18px; }

/* Entrance and exit */
.sl-side[open] .sl-side__panel { animation: sl-side-in 560ms var(--sl-out) both; }
.sl-side[open]::backdrop { animation: sl-added-fade 320ms ease both; }
.sl-side.is-playing .sl-side__item { animation: sl-side-item 560ms var(--sl-out) calc(120ms + var(--i, 0) * 70ms) both; }
.sl-side.is-playing .sl-side__foot { animation: sl-side-foot 560ms var(--sl-out) 200ms both; }
.sl-side.is-leaving .sl-side__panel { animation: sl-side-out 300ms cubic-bezier(0.7, 0, 0.84, 0) both; }
.sl-side.is-leaving::backdrop { animation: sl-added-fade 300ms ease-in reverse both; }
.sl-side__item.is-removing { animation: sl-side-remove 320ms var(--sl-ease) both; }

/* The truck and the thumbs up play on opening; afterwards the bar slides to each new value. */
.sl-side:not(.is-playing) .sl-ship *, .sl-side:not(.is-playing) .sl-ship .sl-freeship__bar::after { animation: none; }
.sl-side:not(.is-playing) .sl-ship .sl-ship__body { animation: sl-ship-idle 640ms ease-in-out infinite; } /* keeps idling after the entrance */
.sl-side:not(.is-playing) .sl-ship .sl-ship__lines i { animation: sl-ship-lines-idle 900ms linear infinite; }
.sl-side:not(.is-playing) .sl-ship .sl-ship__lines i:last-child { animation-delay: 450ms; }
.sl-side:not(.is-playing) .sl-ship__truck { transition: left 700ms var(--sl-ship-ease), opacity 360ms ease 700ms; }
.sl-side:not(.is-playing) .sl-ship__fill { transition: width 700ms var(--sl-ship-ease); }
.sl-side:not(.is-playing) .sl-ship .sl-freeship__bar::after { transition: left 700ms var(--sl-ship-ease); }
.sl-side:not(.is-playing) .sl-freeship__bar { transition: opacity 360ms ease 700ms; }
.sl-side:not(.is-playing) .sl-ship__done { transition: opacity 400ms ease, visibility 0s linear 400ms; }
.sl-side:not(.is-playing) .sl-ship.is-free .sl-ship__done { transition: opacity 400ms ease 900ms, visibility 0s linear 900ms; }

@keyframes sl-side-in { from { transform: translateX(100%); } }
@keyframes sl-side-out { to { transform: translateX(100%); } }
@keyframes sl-side-item { from { opacity: 0; transform: translateX(28px); } }
@keyframes sl-side-foot { from { opacity: 0; transform: translateY(16px); } }
@keyframes sl-side-remove { to { opacity: 0; transform: translateX(48px); } }
@keyframes sl-side-shimmer { to { background-position: -200% 0; } }

@media (max-width: 479px) {
  .sl-side__head { padding-left: 18px; }
  .sl-side__body { padding: 4px 18px; }
  .sl-side__foot { padding: 16px 18px 20px; }
  .sl-side__item { grid-template-columns: 72px minmax(0, 1fr); }
  .sl-side__thumb { width: 72px; }
  .sl-side__actions { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-side__panel, .sl-side__item, .sl-side__foot, .sl-side::backdrop, .sl-side__empty * { animation: none !important; }
}

/* ---------- O nama (page-o-nama.php, sl-ab-*) ---------- */
/* Editorial page in the vocabulary of "Tapete po želji" and "Montaža tapeta" (Andrej, 24.10.2026): the
   slogan as an oversized title with rising words, the photo opened from below with a slow parallax, an
   outlined "2015" behind it, numbers that count up, the story from the homepage (sl-kx), principles as
   large lines, staggered category tiles, contacts as link lines and the dark closing panel. Sections
   with data-reveal wait for .is-in; all motion stops under reduced motion. */

.js .sl-ab > [data-reveal] { opacity: 1; transform: none; }
.js .sl-ab > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-ab-story { padding-top: clamp(64px, 9vw, 140px); }
.sl-ab-way, .sl-ab-range, .sl-ab-firm { padding-top: clamp(64px, 9vw, 150px); }
.sl-ab .sl-kx { margin-bottom: 0; }

/* Hero: the H1 is the small label, the slogan is the display line. */
.sl-ab-hero__eyebrow { margin-bottom: clamp(14px, 1.6vw, 22px); font-size: 0.8125rem; letter-spacing: 0.16em; }
.sl-ab-hero .sl-pz-hero__visual { isolation: isolate; }
.sl-ab-hero__img { object-position: 66% 50%; }
/* The photo sits 20 px lower (Andrej, 24.10.2026). */
.sl-ab-hero .sl-pz-hero__frame { margin-top: 20px; }
/* Foto tapete and Dečje tapete side by side, the seal after them (Andrej, 24.10.2026). */
.sl-ab-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-ab-chip__icon svg { fill: currentColor; animation: sl-heartbeat 7s ease-in-out 2.5s infinite; }

/* Numbers between thin lines; the values count up once (main.js, [data-count]). */
.sl-ab-stats { padding-top: clamp(8px, 2vw, 32px); }
.sl-ab-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--sl-line); }
.sl-ab-stat { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 48px) clamp(16px, 2vw, 36px); border-left: 1px solid var(--sl-line); }
.sl-ab-stat:first-child { padding-left: 0; border-left: 0; }
/* One size for all four values (words included, Andrej 24.10.2026), capped so "Bezbednost" (about 4.3em)
   fits its column: --stat-col is the column's text width in container units of the list. */
.sl-ab-stats__list { container-type: inline-size; --stat-col: calc(25cqi - 2 * clamp(16px, 2vw, 36px)); }
.sl-ab-stat__num { font-size: min(clamp(2.5rem, 1.3rem + 3.4vw, 5.25rem), calc(var(--stat-col) / 4.5)); font-weight: 300; line-height: 1; letter-spacing: -0.05em; color: var(--sl-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-ab-stat__label { max-width: 24ch; font-size: 0.9375rem; line-height: 1.5; color: var(--sl-text-2); }
.js .sl-ab-stats:not(.is-in) .sl-ab-stat { opacity: 0; }
.sl-ab-stats.is-in .sl-ab-stat { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(100ms + var(--n) * 110ms) both; }

/* How we work: sticky title on the left, the principles as large lines that rise one by one. */
.sl-ab-way__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.sl-ab-way__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-ab-way__lead { max-width: 44ch; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-ab-way__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-ab-way__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: start; padding: clamp(22px, 2.6vw, 38px) 0; border-top: 1px solid var(--sl-line); }
.sl-ab-way__icon { display: grid; place-items: center; flex: none; width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease); }
.sl-ab-way__item:hover .sl-ab-way__icon { background: var(--sl-text); color: #fff; }
.sl-ab-way__name { margin: 6px 0 10px; font-size: clamp(1.375rem, 0.95rem + 1.1vw, 2.125rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--sl-text); }
.sl-ab-way__text { max-width: 54ch; margin: 0; font-size: 1rem; line-height: 1.65; color: var(--sl-text-2); }
.js .sl-ab-way:not(.is-in) .sl-ab-way__item { opacity: 0; }
.sl-ab-way.is-in .sl-ab-way__item { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 110ms) both; }

/* What we make: four category tiles, every second one a little lower on wide screens. */
.sl-ab-range__head { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 6vw, 110px); align-items: end; margin-bottom: clamp(32px, 4vw, 64px); }
.sl-ab-range__head .sl-mt-title { margin: 0; }
.sl-ab-range__text { max-width: 62ch; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-ab-range__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-ab-tile { display: block; color: var(--sl-text); text-decoration: none; }
.sl-ab-tile__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: var(--sl-soft); }
.sl-ab-tile__media .sl-ab-tile__img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--sl-ease); }
.sl-ab-tile:hover .sl-ab-tile__img { scale: 1.05; }
.sl-ab-tile__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 300; letter-spacing: -0.02em; }
.sl-ab-tile:hover .sl-kx__go, .sl-ab-tile:focus-visible .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
.js .sl-ab-range:not(.is-in) .sl-ab-range__grid > li { opacity: 0; }
.sl-ab-range.is-in .sl-ab-range__grid > li { animation: sl-mt-rise 900ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(200ms + var(--n) * 120ms) both; }
@media (min-width: 900px) { .sl-ab-range__grid > li:nth-child(even) { margin-top: clamp(32px, 4vw, 72px); } }

/* Contacts as link lines (sl-kx__link) and the company card. */
.sl-ab-firm__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 110px); align-items: end; }
.sl-ab-firm__lead { max-width: 46ch; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-ab-firm__links { margin-top: clamp(24px, 3vw, 40px); }
.sl-ab .sl-ab-firm__link { grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; padding: 14px 0; }
.sl-ab-firm__label { display: flex; align-items: center; gap: 14px; }
.sl-ab-firm__icon { display: grid; place-items: center; color: var(--sl-accent); }
.sl-ab-firm__value { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--sl-text-2); }
.sl-ab-card { padding: clamp(28px, 3.4vw, 52px); border-radius: 28px; background: var(--sl-soft); }
.sl-ab-card__name { margin: 0; font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-ab-card__list { margin: clamp(22px, 2.6vw, 32px) 0 0; }
.sl-ab-card__list div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgb(30 30 28 / 0.12); }
.sl-ab-card__list dt { color: var(--sl-text-2); }
.sl-ab-card__list dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--sl-text); }
.sl-ab-card__note { margin: 18px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--sl-muted); }

.sl-ab-end__text { position: relative; z-index: 1; max-width: 46ch; margin: 0; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--sl-on-dark); }

@media (max-width: 899px) {
  .sl-ab-way__in, .sl-ab-range__head, .sl-ab-firm__in { grid-template-columns: 1fr; }
  .sl-ab-way__aside { position: static; }
  .sl-ab-way__in { gap: 8px; }
  .sl-ab-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); --stat-col: calc(50cqi - 2 * clamp(16px, 2vw, 36px)); }
  .sl-ab-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sl-ab-stat:nth-child(n + 3) { border-top: 1px solid var(--sl-line); }
  .sl-ab-range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .sl-ab-stat { padding-right: 12px; }
  .sl-ab-stats__list { --stat-col: calc(50cqi - 28px); }
  .sl-ab-way__icon { width: 52px; }
  .sl-ab-way__icon.sl-mt-icon::before { width: 28px; height: 28px; }
  .sl-ab .sl-ab-firm__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .sl-ab-firm__value { grid-column: 1; grid-row: 2; padding-left: 34px; font-size: 0.9375rem; }
  .sl-ab-firm__link .sl-kx__go { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sl-ab-stats .sl-ab-stat, .js .sl-ab-way .sl-ab-way__item, .js .sl-ab-range .sl-ab-range__grid > li { opacity: 1; animation: none !important; }
  .sl-ab .sl-pz-w > span { transform: none; animation: none !important; }
  .sl-ab-tile:hover .sl-ab-tile__img { scale: 1; }
}

/* ---------- Placeholder blocks ---------- */

.sl-placeholder { padding-block: var(--sl-space-8); }

/* ---------- Motion ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 300ms var(--sl-ease), transform 300ms var(--sl-ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sl-gallery__main img { transition: none; }
  .sl-wish-link.is-wished svg, [data-fav].is-popping svg { animation: none; }
  [data-fav].is-popping::after { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .sl-sh__s, .js .sl-sh__tag { opacity: 1; animation: none !important; }
  .sl-sh__s::after { animation: none !important; }
  .sl-btn--buy { transform: none; }
  .sl-header, .sl-info__aside { transition: none; }
  .sl-card__link:hover .sl-card__img, .sl-hm-room:hover img, .sl-hm-tile:hover .sl-hm-tile__img,
  .sl-mega__in--one .sl-mega__motifs li > a:hover .sl-mega__thumb { transform: none; }
}

/* Omiljeni (WCBoost Wishlist page): rounded thumbnails like the rest of the shop. */
.wishlist_table .product-thumbnail img { border-radius: var(--sl-radius-md); }

/* ---------- Product page: stickers, height charts, posters, gifts (template-parts/product.php) ---------- */
.sl-product__price { margin: 4px 0 10px; font-size: 1.5rem; font-weight: 600; color: var(--sl-accent); }
.sl-product__help { margin: 0; }
.sl-product__help a { font-weight: 500; color: var(--sl-text); }
/* Grid, not flex: a plugin sets "form.cart { flex-wrap: wrap !important }", which stretched a flex column. */
.sl-product form.cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
.sl-variant__title,
.sl-product .wapf-field-label label { display: block; margin: 0 0 8px; font-size: 0.9375rem; font-weight: 600; color: var(--sl-text); }
.sl-variant__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sl-variant__opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 8px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); background: #fff; cursor: pointer; transition: border-color var(--sl-dur) var(--sl-ease), background-color var(--sl-dur) var(--sl-ease); }
.sl-variant__opt:hover { border-color: var(--sl-text); }
.sl-variant__opt[aria-pressed="true"] { padding: 10px 7px; border: 2px solid var(--sl-accent); background: var(--sl-accent-50); }
.sl-variant__name { font-size: 0.84375rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--sl-text); }
.sl-variant__price { font-size: 0.8125rem; font-weight: 500; color: var(--sl-accent); }
/* WooCommerce's own variation price, the reset link and the wishlist button are replaced by the theme. */
.sl-product .woocommerce-variation-price,
.sl-product .reset_variations,
.sl-product .wcboost-wishlist-single-button { display: none !important; }
.sl-product .woocommerce-variation-availability p { margin: 0; font-size: 0.875rem; color: var(--sl-muted); }
/* APF personalisation fields (script choice, name), in the configurator's option style. */
.sl-product .wapf-field-group,
.sl-product .wapf-field-container { margin: 0 0 14px; padding: 0; }
.sl-product .wapf-field-label abbr,
.sl-product .sl-req { color: var(--sl-error); text-decoration: none; }
.sl-product .wapf-radios { display: grid; gap: 8px; }
.sl-product .wapf-radio .wapf-input-label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); background: #fff; font-size: 0.9375rem; cursor: pointer; }
.sl-product .wapf-radio .wapf-input-label:hover { border-color: var(--sl-text); }
.sl-product .wapf-radio .wapf-input-label:has(input:checked) { padding: 0 13px; border: 2px solid var(--sl-accent); background: var(--sl-accent-50); }
.sl-product .wapf-field-input input[type="text"],
.sl-product .wapf-field-input textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius-md); background: #fff; font-size: 1.0625rem; }
.sl-product .wapf-field-input input[type="text"]:focus { outline: none; border-color: var(--sl-accent); box-shadow: 0 0 0 3px var(--sl-accent-50); }
.sl-product .sl-pers-err { margin-top: 6px; font-size: 0.875rem; font-weight: 500; color: var(--sl-error); }
/* Quantity and the buy button on one row; the personalisation block above takes the full width. */
.sl-product .variations_button,
.sl-product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.sl-product .wapf,
.sl-product .wapf-product-totals { flex: 1 0 100%; }
.sl-product .quantity input.qty { width: 74px; height: 58px; padding: 0 6px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius); background: #fff; font-size: 1.0625rem; text-align: center; }
/* Specific enough to beat ".woocommerce button.button.alt" (purple) from WooCommerce's stylesheet. */
body .sl-product form.cart button.single_add_to_cart_button.button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sl-space-2); min-height: 58px; padding: 0 16px; border: 0; white-space: nowrap; border-radius: var(--sl-radius); background: var(--sl-buy); color: var(--sl-buy-text); font-size: 1.425rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; cursor: pointer; }
/* WooCommerce prints the button text escaped, so the cart icon of the wallpaper button (sl_icon('cart')) comes in as a mask. */
body .sl-product form.cart button.single_add_to_cart_button.button::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3Z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3Z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .sl-product form.cart button.single_add_to_cart_button.button:hover { background: var(--sl-buy-hover); color: var(--sl-buy-text); }
body .sl-product form.cart button.single_add_to_cart_button.button.disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Kako se lepi foto tapeta (page-templates/lepljenje.php) ----------
   Andrej 24.10.2026, in the editorial language of /montaza-tapeta-beograd/: rising words, photos that
   open from the bottom, numbered steps (the title announces them). The tool photo carries a dot per tool; the matching line below names it on hover or
   focus. On desktop the step photo sits in a sticky frame and changes with the step in the middle of
   the screen; below 900 px every step carries its own photo. */

.js .sl-lp > [data-reveal] { opacity: 1; transform: none; }
.js .sl-lp > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-lp-sec { padding-top: clamp(64px, 9vw, 150px); }
.sl-lp-lead { max-width: 60ch; margin: calc(clamp(28px, 3.5vw, 56px) * -0.5) 0 clamp(28px, 3.5vw, 56px); font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--sl-text-2); }

.sl-lp-hero .sl-pz-hero__img { object-position: 50% 40%; }
.sl-lp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(40px, 5vw, 80px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-line); }
.sl-lp-fact { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 32px) clamp(12px, 2vw, 32px) 0 0; opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) calc(900ms + var(--n) * 120ms) forwards; }
.sl-lp-fact + .sl-lp-fact { padding-left: clamp(12px, 2vw, 32px); border-left: 1px solid var(--sl-line); }
.sl-lp-fact strong { font-size: clamp(1.75rem, 1.1rem + 2vw, 3.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--sl-text); }
.sl-lp-fact span { font-size: 0.9375rem; line-height: 1.45; color: var(--sl-muted); }

/* Tools: one photo, a dot on every tool, names in lines below. */
.sl-lp-tools__stage { position: relative; margin: 0; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: var(--sl-soft); clip-path: inset(100% 0 0 0 round 32px); }
.sl-lp-tools.is-in .sl-lp-tools__stage { animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
.sl-lp-tools__img { display: block; width: 100%; height: auto; scale: 1.08; transition: scale 1600ms var(--sl-ease); }
.sl-lp-tools.is-in .sl-lp-tools__img { scale: 1; }
.sl-lp-pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px; translate: -11px -50%; pointer-events: none; }
.sl-lp-pin__dot { position: relative; flex: none; width: 22px; height: 22px; border: 6px solid #fff; border-radius: 50%; background: var(--sl-text); box-shadow: 0 6px 18px -6px rgb(30 30 28 / 0.6); scale: 0; transition: background-color 300ms var(--sl-ease); }
.sl-lp-pin__dot::after { content: ""; position: absolute; inset: -12px; border: 1.5px solid #fff; border-radius: 50%; opacity: 0; }
.sl-lp-tools.is-in .sl-lp-pin__dot { animation: sl-lp-pop 600ms cubic-bezier(0.2, 0.8, 0.25, 1.3) calc(900ms + var(--n) * 80ms) forwards; }
.sl-lp-tools.is-in .sl-lp-pin__dot::after { animation: sl-lp-ping 2.6s ease-out calc(1800ms + var(--n) * 260ms) infinite; }
.sl-lp-pin__label { padding: 8px 15px; border-radius: var(--sl-pill); background: #fff; box-shadow: 0 18px 36px -18px rgb(30 30 28 / 0.55); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; color: var(--sl-text); opacity: 0; translate: -6px 0; transition: opacity 250ms var(--sl-ease), translate 250ms var(--sl-ease); }
.sl-lp-pin--l { flex-direction: row-reverse; translate: calc(-100% + 11px) -50%; }
.sl-lp-pin--l .sl-lp-pin__label { translate: 6px 0; }
.sl-lp-pin.is-on .sl-lp-pin__label { opacity: 1; translate: 0 0; }
.sl-lp-pin.is-on .sl-lp-pin__dot { background: var(--sl-accent); }
@keyframes sl-lp-pop { to { scale: 1; } }
@keyframes sl-lp-ping { 0% { opacity: 0.9; scale: 0.6; } 70%, 100% { opacity: 0; scale: 1.5; } }
.sl-lp-tools__in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sl-lp-tools__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.sl-lp-tool { position: relative; display: grid; align-content: start; gap: 4px; padding: 16px 0 18px; border-top: 1px solid var(--sl-line); outline: none; }
.sl-lp-tool::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--sl-ease); }
.sl-lp-tool:hover::before, .sl-lp-tool:focus-visible::before, .sl-lp-tool.is-on::before { transform: scaleX(1); }
.sl-lp-tool:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 4px; border-radius: 4px; }
.sl-lp-tool__name { font-size: 1.0625rem; font-weight: 500; color: var(--sl-text); }
.sl-lp-tool__use { font-size: 0.9375rem; line-height: 1.5; color: var(--sl-muted); }
.js .sl-lp-tools:not(.is-in) .sl-lp-tool { opacity: 0; }
.sl-lp-tools.is-in .sl-lp-tool { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(400ms + var(--n) * 60ms) both; }

/* Before you start: sticky title, rules as large lines. */
.sl-lp-prep__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sl-lp-prep__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-lp-prep__aside .sl-mt-title { margin-bottom: 0; }
.sl-lp-prep__aside .sl-lp-lead { margin: clamp(20px, 2.4vw, 32px) 0 0; }
.sl-lp-prep__list { margin: 0; padding: 0; border-bottom: 1px solid var(--sl-line); list-style: none; }
.sl-lp-prep__item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; padding: clamp(22px, 2.6vw, 36px) 0; border-top: 1px solid var(--sl-line); }
.sl-lp-prep__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; }
.sl-lp-prep__name { margin: 6px 0 8px; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.sl-lp-prep__name strong { font-weight: 600; }
.sl-lp-prep__text { max-width: 58ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-lp-prep:not(.is-in) .sl-lp-prep__item { opacity: 0; }
.sl-lp-prep.is-in .sl-lp-prep__item { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 120ms) both; }
.sl-lp-prep.is-in .sl-lp-prep__item::before { animation: sl-mt-line 1100ms cubic-bezier(0.7, 0, 0.2, 1) calc(450ms + var(--n) * 120ms) forwards; }

/* Steps: sticky photo frame on the left, steps on the right; the step in the middle of the screen is active. */
.sl-lp-steps__in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sl-lp-steps__media { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); height: min(calc(100vh - var(--sl-header-offset, 0px) - 64px), 820px); overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: var(--sl-soft); transition: top 320ms var(--sl-ease), height 320ms var(--sl-ease); }
.sl-lp-shot { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.sl-lp-shot img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
.sl-lp-shot:first-child { clip-path: inset(0 0 0 0); }
.sl-lp-shot:first-child img { scale: 1; }
.sl-lp-shot.is-was { z-index: 1; clip-path: inset(0 0 0 0); }
.sl-lp-shot.is-was img { scale: 1; }
.sl-lp-shot.is-on { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(0.7, 0, 0.2, 1); }
.sl-lp-shot.is-on img { scale: 1; transition: scale 1400ms var(--sl-ease); }
.sl-lp-shot__cap { position: absolute; left: 18px; bottom: 18px; z-index: 1; max-width: calc(100% - 36px); padding: 8px 16px; border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.92); font-size: 0.875rem; font-weight: 500; color: var(--sl-text); }
.sl-lp-steps__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-lp-step { position: relative; display: grid; grid-template-columns: clamp(64px, 7vw, 120px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); align-content: start; padding: clamp(40px, 9vh, 112px) 0; border-top: 1px solid var(--sl-line); }
.sl-lp-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.7, 0, 0.2, 1); }
.sl-lp-step.is-active::before, .sl-lp-step.is-done::before { transform: scaleX(1); }
.sl-lp-step__num { font-size: clamp(3rem, 1.6rem + 4vw, 6rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px var(--sl-text); transition: color 500ms var(--sl-ease); }
.sl-lp-step.is-active .sl-lp-step__num { color: var(--sl-text); }
.sl-lp-step__title { margin: 4px 0 12px; font-size: clamp(1.5rem, 1.05rem + 1.2vw, 2.25rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; }
.sl-lp-step__text { max-width: 54ch; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-lp-step__text + .sl-lp-step__text { margin-top: 12px; }
.sl-lp-step__tip { display: flex; gap: 14px; max-width: 54ch; margin: 20px 0 0; padding: 16px 20px; border-radius: 18px; background: var(--sl-soft); font-size: 0.9375rem; line-height: 1.55; color: var(--sl-text-2); }
.sl-lp-step__tip strong { flex: none; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 2.2; text-transform: uppercase; color: var(--sl-text); }
.sl-lp-step__shot { display: none; }
.js .sl-lp-step { transition: opacity 500ms var(--sl-ease); }
.js .sl-lp-steps__in.is-live .sl-lp-step:not(.is-active) { opacity: 0.38; }

/* When something goes wrong: cards. */
.sl-lp-fix__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-lp-fix__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--sl-line); border-radius: 28px; transition: border-color 300ms var(--sl-ease); }
.sl-lp-fix__item:hover { border-color: var(--sl-khaki); }
.sl-lp-fix__name { margin: 6px 0 10px; font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.03em; }
.sl-lp-fix__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-lp-fix:not(.is-in) .sl-lp-fix__item { opacity: 0; }
.sl-lp-fix.is-in .sl-lp-fix__item { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 110ms) both; }

/* Finished wall with the way to installation. */
.sl-lp-end { padding-block: clamp(64px, 9vw, 150px) 70px; }
.sl-lp-end__panel { position: relative; display: grid; align-content: end; min-height: clamp(460px, 56vw, 760px); padding: clamp(28px, 5vw, 80px); overflow: hidden; border-radius: clamp(24px, 3vw, 40px); background: var(--sl-accent-900); color: #fff; isolation: isolate; }
.sl-lp-end__frame { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sl-lp-end__img { width: 100%; height: 118%; object-fit: cover; object-position: 60% 50%; transform: translateY(var(--py, -6%)); }
.sl-lp-end__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(30 30 28 / 0.78) 0%, rgb(30 30 28 / 0.45) 45%, rgb(30 30 28 / 0) 75%), linear-gradient(0deg, rgb(30 30 28 / 0.5) 0%, rgb(30 30 28 / 0) 50%); }
.sl-lp-end__title { max-width: 14ch; margin: 0; font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: #fff; }
.sl-lp-end__text { max-width: 46ch; margin: 20px 0 0; font-size: 1.0625rem; line-height: 1.6; color: rgb(255 255 255 / 0.88); }
.sl-lp-end__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.js .sl-lp-end:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }

@media (max-width: 1099px) {
  .sl-lp-tools__in { grid-template-columns: minmax(0, 1fr); }
  .sl-lp-tools__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sl-lp-prep__in, .sl-lp-steps__in { grid-template-columns: minmax(0, 1fr); }
  .sl-lp-prep__aside { position: static; }
  .sl-lp-steps__media { display: none; }
  .sl-lp-step { grid-template-columns: 56px minmax(0, 1fr); padding: 28px 0 40px; }
  .sl-lp-step__num { grid-row: auto; font-size: 2.75rem; color: var(--sl-text); }
  .sl-lp-step__shot { display: block; grid-column: 1 / -1; order: -1; margin: 0 0 24px; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 5; background: var(--sl-soft); }
  .sl-lp-step__shot img { width: 100%; height: 100%; object-fit: cover; }
  .sl-lp-step__body { grid-column: 2; }
  .js .sl-lp-steps__in.is-live .sl-lp-step:not(.is-active) { opacity: 1; }
  .sl-lp-fix__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .sl-lp-facts { grid-template-columns: minmax(0, 1fr); }
  .sl-lp-fact + .sl-lp-fact { margin-top: 20px; padding-left: 0; border-left: 0; border-top: 1px solid var(--sl-line); }
  .sl-lp-tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-lp-pin__label { display: none; }
  .sl-lp-pin, .sl-lp-pin--l { translate: -8px -50%; }
  .sl-lp-pin__dot { width: 16px; height: 16px; border-width: 4px; }
  .sl-lp-pin__dot::after { inset: -9px; }
  .sl-lp-step { grid-template-columns: minmax(0, 1fr); }
  .sl-lp-step__num { font-size: 2.25rem; margin-bottom: 10px; }
  .sl-lp-step__body { grid-column: 1; }
  .sl-lp-prep__item, .sl-lp-fix__item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .sl-lp-prep__item .sl-mt-icon, .sl-lp-fix__item .sl-mt-icon { width: 52px; }
  .sl-lp-end__panel { min-height: 600px; }
  .sl-lp-end__panel::before { background: linear-gradient(0deg, rgb(30 30 28 / 0.88) 0%, rgb(30 30 28 / 0.6) 55%, rgb(30 30 28 / 0.1) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-lp .sl-pz-w > span { transform: none; animation: none !important; }
  .sl-lp-tools__stage, .sl-lp-shot, .sl-lp-shot.is-on, .sl-lp-shot.is-was { clip-path: none !important; animation: none !important; transition: none !important; }
  .sl-lp-shot { opacity: 0; }
  .sl-lp-shot.is-on { opacity: 1; }
  .sl-lp-tools__img, .sl-lp-shot img { scale: 1 !important; }
  .sl-lp-pin__dot { scale: 1; animation: none !important; }
  .sl-lp-pin__dot::after { display: none; }
  .js .sl-lp .sl-lp-fact, .js .sl-lp .sl-lp-tool, .js .sl-lp .sl-lp-prep__item, .js .sl-lp .sl-lp-fix__item { opacity: 1; animation: none !important; }
  .sl-lp-prep__item::before { display: none; }
}

/* ---------- Kako izmeriti zid (page-kako-izmeriti-zid.php) ----------
   Andrej 24.10.2026, the same editorial language as /kako-se-lepi-foto-tapeta/ (sl-lp-* steps with a
   sticky picture), but the pictures are drawings of one slightly crooked wall. Hero: a tape measure
   pulls across at three heights. Steps: the three lines draw one after another and the longest one is
   marked; in "cut" the print covers the window and door; in "rolls" the overlaps show. The drawings
   loop only while their step is the active one; without JS or under reduced motion they stand in
   their final state. */

.sl-iz-scene { display: block; width: 100%; height: 100%; font-family: var(--sl-font); }
.sl-iz-floor { fill: var(--sl-line); }
.sl-iz-wall { fill: #fff; stroke: var(--sl-text); stroke-width: 2; stroke-linejoin: round; }
.sl-iz-edge { fill: none; stroke: var(--sl-text); stroke-width: 2; stroke-linejoin: round; }
.sl-iz-window { fill: var(--sl-soft-2); stroke: var(--sl-line-strong); stroke-width: 1.5; }
.sl-iz-window__bars { stroke: var(--sl-line-strong); stroke-width: 1.5; }
.sl-iz-door { fill: var(--sl-soft); stroke: var(--sl-line-strong); stroke-width: 1.5; }
.sl-iz-door__knob { fill: var(--sl-line-strong); }
.sl-iz-socket { fill: #fff; stroke: var(--sl-line-strong); stroke-width: 1.5; }

.sl-iz-line__run { fill: none; stroke: var(--sl-line-strong); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-iz-line__tick { fill: none; stroke: var(--sl-line-strong); stroke-width: 2; stroke-linecap: round; }
.sl-iz-line.is-max .sl-iz-line__run { stroke: var(--sl-accent); stroke-width: 4; }
.sl-iz-line.is-max .sl-iz-line__tick { stroke: var(--sl-accent); stroke-width: 3; }
.sl-iz-pill rect { fill: #fff; stroke: var(--sl-line); stroke-width: 1; }
.sl-iz-pill text { font-size: 15px; font-weight: 500; text-anchor: middle; fill: var(--sl-text); }
.sl-iz-pill.is-max rect { fill: var(--sl-accent); stroke: none; }
.sl-iz-pill.is-max text { fill: #fff; font-weight: 600; }

.sl-iz-cutlines rect { fill: rgb(255 255 255 / 0.28); stroke: #fff; stroke-width: 2.5; stroke-dasharray: 0.025 0.018; }
.sl-iz-seam__band { fill: rgb(255 255 255 / 0.5); }
.sl-iz-seam__line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 6 5; }

/* Steps: the drawing loops while its step is active (7 s). Every element shares the cycle; --n offsets
   the three lines and their labels, and fill-mode "both" keeps each one hidden until its turn. */
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-line__run { animation: sl-iz-draw 7s cubic-bezier(0.6, 0, 0.2, 1) calc(var(--n) * 0.55s) infinite both; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-line__tick { animation: sl-iz-tick 7s ease calc(var(--n) * 0.55s) infinite both; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-line.is-max .sl-iz-line__run { animation-name: sl-iz-draw-max; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-line.is-max .sl-iz-line__tick { animation-name: sl-iz-tick-max; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-pill { animation: sl-iz-pill 7s ease 0s infinite both; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-pill.is-n1 { animation-delay: 0.55s; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-pill.is-n2 { animation-delay: 1.1s; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-pill.is-max { animation-name: sl-iz-pill-max; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-scene--cut .sl-iz-print { animation: sl-iz-print 7s ease infinite both; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-cutlines rect { animation: sl-iz-cut 7s linear infinite both; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-scene--cut .sl-iz-pill.is-max { animation-name: sl-iz-pill-cut; }
:is(.sl-lp-shot.is-on, .sl-lp-step.is-active) .sl-iz-seams > g { animation: sl-iz-seam 7s ease calc(var(--n) * 0.3s) infinite both; }
@keyframes sl-iz-draw { 0%, 4% { stroke-dashoffset: 1; opacity: 1; } 16%, 86% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sl-iz-draw-max { 0%, 4% { stroke-dashoffset: 1; opacity: 1; stroke: var(--sl-line-strong); stroke-width: 2.5; } 16%, 22% { stroke-dashoffset: 0; stroke: var(--sl-line-strong); stroke-width: 2.5; } 28%, 86% { stroke-dashoffset: 0; opacity: 1; stroke: var(--sl-accent); stroke-width: 4; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; stroke: var(--sl-accent); stroke-width: 4; } }
@keyframes sl-iz-tick { 0%, 3% { opacity: 0; } 6%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sl-iz-tick-max { 0%, 3% { opacity: 0; stroke: var(--sl-line-strong); } 6%, 22% { opacity: 1; stroke: var(--sl-line-strong); } 28%, 86% { opacity: 1; stroke: var(--sl-accent); } 94%, 100% { opacity: 0; stroke: var(--sl-accent); } }
@keyframes sl-iz-pill { 0%, 12% { opacity: 0; translate: 0 6px; } 18%, 86% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sl-iz-pill-max { 0%, 36% { opacity: 0; translate: 0 6px; } 42%, 86% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sl-iz-print { 0%, 8% { opacity: 0; } 26%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sl-iz-cut { 0%, 30% { opacity: 0; stroke-dashoffset: 0; } 36%, 90% { opacity: 1; } 98%, 100% { opacity: 0; stroke-dashoffset: -0.32; } }
@keyframes sl-iz-pill-cut { 0%, 40% { opacity: 0; translate: 0 6px; } 46%, 88% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sl-iz-seam { 0%, 10% { opacity: 0; } 20%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Hero: one tape measure at a time, at the ceiling, in the middle, at the floor (9 s). */
.sl-iz-hero__frame { display: grid; place-items: center; aspect-ratio: 4 / 3.5; padding: clamp(12px, 2vw, 28px); }
.sl-iz-tape__band rect { fill: var(--sl-soft); stroke: var(--sl-line-strong); stroke-width: 1.2; }
.sl-iz-tape__band path { fill: none; stroke: var(--sl-line-strong); stroke-width: 1.2; }
.sl-iz-tape__hook { fill: var(--sl-text); translate: var(--len) 0; }
.sl-iz-tape__case { fill: var(--sl-text); }
.sl-iz-tape__dot { fill: var(--sl-khaki); }
.sl-iz-tape { opacity: 0; animation: sl-iz-tape 9s ease calc(var(--n) * 3s) infinite both; }
.sl-iz-tape:last-of-type { opacity: 1; }
.sl-iz-tape__band { animation: sl-iz-band 9s cubic-bezier(0.6, 0, 0.2, 1) calc(var(--n) * 3s) infinite both; }
.sl-iz-tape__pill > * { animation: sl-iz-tapepill 9s ease calc(var(--n) * 3s) infinite both; }
.sl-iz-hero .sl-mt-chip { top: 9%; bottom: auto; }
.sl-iz-tape__hook { animation: sl-iz-hook 9s cubic-bezier(0.6, 0, 0.2, 1) calc(var(--n) * 3s) infinite both; }
@keyframes sl-iz-tape { 0% { opacity: 0; } 2%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes sl-iz-band { 0%, 3% { clip-path: inset(0 100% 0 0); } 12%, 27% { clip-path: inset(0 0 0 0); } 31%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes sl-iz-tapepill { 0%, 12% { opacity: 0; translate: 0 6px; } 15%, 27% { opacity: 1; translate: 0 0; } 30%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sl-iz-hook { 0%, 3% { translate: 0 0; } 12%, 27% { translate: var(--len) 0; } 31%, 100% { translate: 0 0; } }

/* Where the measures go: the sketch and a picture of the configurator fields, marked as an example. */
.sl-iz-where__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sl-iz-where__copy .sl-lp-lead { margin-top: 0; }
.sl-iz-where__card { display: grid; gap: clamp(16px, 2vw, 24px); padding: clamp(16px, 2.4vw, 32px); border-radius: clamp(20px, 2.4vw, 32px); background: var(--sl-soft); }
.sl-iz-where__card .sl-sketch { border: 0; }
.sl-iz-example { display: grid; justify-items: start; gap: 12px; }
.sl-iz-example__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--sl-pill); background: var(--sl-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
/* A tilted, shadowed picture of the first configurator step: filled in, no caret, nothing to click. */
.sl-iz-example__shot { display: grid; gap: 12px; width: 100%; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 22px 44px -26px rgb(30 30 28 / 0.55); rotate: -1.5deg; pointer-events: none; user-select: none; }
.sl-iz-example__title { font-size: 1rem; font-weight: 600; color: var(--sl-text); }
.sl-iz-example__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sl-iz-example__field { display: grid; gap: 6px; }
.sl-iz-example__label { font-size: 0.8125rem; color: var(--sl-muted); }
.sl-iz-example__value { padding: 9px 14px; border: 1px solid var(--sl-line); border-radius: 10px; background: var(--sl-soft-2); font-size: 1rem; font-weight: 500; color: var(--sl-text); }
.sl-iz-example__info { padding: 9px 14px; border-radius: 10px; background: var(--sl-soft); font-size: 0.875rem; line-height: 1.4; color: var(--sl-accent); }
.js .sl-iz-where:not(.is-in) .sl-iz-where__card { opacity: 0; }
.sl-iz-where.is-in .sl-iz-where__card { animation: sl-mt-rise 900ms cubic-bezier(0.2, 0.75, 0.1, 1) 250ms both; }

/* Drawings in the sticky frame (room at the bottom for the caption) and in the steps below 900 px.
   The frame is shorter than the photo frame of the gluing guide, so the drawing fills it. */
.sl-lp-steps__media.sl-iz-media { height: auto; aspect-ratio: 1 / 0.92; max-height: calc(100vh - var(--sl-header-offset, 0px) - 64px); }
.sl-iz-shot { display: grid; place-items: center; padding: clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px) 72px; background: var(--sl-soft); }

@media (max-width: 899px) {
  .sl-iz-where__in { grid-template-columns: minmax(0, 1fr); }
  .sl-lp-step__shot.sl-iz-step__shot { aspect-ratio: 4 / 3; padding: 14px; }
}
@media (max-width: 479px) {
  .sl-iz-example__shot { padding: 14px 16px; rotate: -1deg; }
  .sl-iz-example__pair { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-iz-scene * { animation: none !important; }
  .js .sl-iz-where .sl-iz-where__card { opacity: 1; animation: none !important; }
}

/* ---------- "Kako se lepe stikeri" (page-uputstvo-kako-zalepiti-stikere-nalepnice.php, Andrej 24.10.2026).
   Built on the sl-lp guide parts; only what is new is here. ---------- */
.sl-st-hero .sl-pz-hero__img { object-position: 50% 42%; }

/* The three layers of a sticker, pulled apart in 3D once in view; foil and sticker then lift off the
   paper together and settle again. Hovering a line on the right picks its layer out. */
.sl-st-layers__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sl-st-layers__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: radial-gradient(circle at 50% 42%, #fff 0%, var(--sl-soft) 72%); perspective: 1600px; }
.sl-st-stack { --gap: clamp(48px, 6vw, 96px); position: relative; width: 44%; aspect-ratio: 3 / 4.4; transform-style: preserve-3d; transform: translateX(10%) rotateY(-32deg) rotateX(8deg); }
.sl-st-layer { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; transform: translateZ(calc(var(--z) * 2px)); transition: transform 1300ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--z) * 140ms), opacity 300ms var(--sl-ease), box-shadow 300ms var(--sl-ease); }
.sl-st-layers.is-in .sl-st-layer { transform: translateZ(calc(var(--z) * var(--gap))); }
.sl-st-layer--paper { border: 1px solid var(--sl-line); background: #fff; box-shadow: -30px 40px 60px -30px rgb(30 30 28 / 0.35); }
.sl-st-layer--sticker img { width: 64%; height: auto; filter: drop-shadow(-6px 10px 8px rgb(30 30 28 / 0.22)); }
.sl-st-layer--foil { border: 1.5px solid rgb(165 157 132 / 0.55); background: linear-gradient(120deg, rgb(255 255 255 / 0.65) 0%, rgb(255 255 255 / 0.1) 34%, rgb(255 255 255 / 0.7) 48%, rgb(255 255 255 / 0.08) 64%, rgb(255 255 255 / 0.4) 100%) 0 0 / 260% 260%, rgb(193 186 161 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), -18px 24px 40px -28px rgb(30 30 28 / 0.35); }
.sl-st-layers.is-in .sl-st-layer--foil { animation: sl-st-sheen 6s ease-in-out 1.6s infinite, sl-st-lift 5.6s ease-in-out 1.8s infinite; }
.sl-st-layers.is-in .sl-st-layer--sticker { animation: sl-st-lift 5.6s ease-in-out 1.8s infinite; }
@keyframes sl-st-sheen { 50% { background-position: 100% 100%; } }
@keyframes sl-st-lift { 50% { translate: 0 0 26px; } }
.sl-st-layers:has([data-layer]:is(:hover, :focus-visible)) .sl-st-layer { opacity: 0.28; }
.sl-st-layers:has([data-layer="foil"]:is(:hover, :focus-visible)) .sl-st-layer--foil,
.sl-st-layers:has([data-layer="sticker"]:is(:hover, :focus-visible)) .sl-st-layer--sticker,
.sl-st-layers:has([data-layer="paper"]:is(:hover, :focus-visible)) .sl-st-layer--paper { opacity: 1; box-shadow: 0 0 0 2px var(--sl-accent); }
.sl-st-layers__copy .sl-mt-title { margin-bottom: 0; }
.sl-st-layers__copy .sl-lp-lead { margin: clamp(20px, 2.4vw, 32px) 0 clamp(24px, 3vw, 40px); }
.sl-st-layers__list { margin: 0; padding: 0; border-bottom: 1px solid var(--sl-line); list-style: none; }
.sl-st-layers__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: clamp(16px, 2vw, 24px); row-gap: 4px; padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--sl-line); outline: none; cursor: default; }
.sl-st-layers__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--sl-ease); }
.sl-st-layers__item:hover::before, .sl-st-layers__item:focus-visible::before { transform: scaleX(1); }
.sl-st-layers__item:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 4px; border-radius: 4px; }
.sl-st-swatch { grid-row: 1 / span 2; width: 48px; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--sl-line); }
.sl-st-swatch--foil { border-color: var(--sl-sand); background: linear-gradient(135deg, #fff 0%, rgb(236 235 222 / 0.5) 45%, #fff 55%, rgb(236 235 222 / 0.6) 100%); }
.sl-st-swatch--sticker { background: url(../img/stiker-zirafa.webp) 30% 12% / 190% auto no-repeat, var(--sl-soft); }
.sl-st-swatch--paper { background: #fff; box-shadow: 0 8px 18px -12px rgb(30 30 28 / 0.4); }
.sl-st-layers__name { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--sl-text); }
.sl-st-layers__text { max-width: 52ch; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-st-layers:not(.is-in) .sl-st-layers__item { opacity: 0; }
.sl-st-layers.is-in .sl-st-layers__item { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(400ms + var(--n) * 120ms) both; }

/* What you do not need: glue and tools, struck through as the section comes in. */
.sl-st-without { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(20px, 2.4vw, 32px) 0 0; }
.sl-st-without__item { display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border: 1px dashed var(--sl-sand); border-radius: var(--sl-pill); font-size: 1.0625rem; color: var(--sl-muted); }
.sl-st-without__icon { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-muted); }
.sl-st-without__icon::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.sl-st-without s { position: relative; text-decoration: none; }
.sl-st-without s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 1.5px; background: var(--sl-text); transform-origin: left; }
.js .sl-st-tools:not(.is-in) .sl-st-without s::after { transform: scaleX(0); }
.sl-st-tools.is-in .sl-st-without s::after { transform: scaleX(0); animation: sl-mt-line 600ms cubic-bezier(0.7, 0, 0.2, 1) 900ms forwards; }
.sl-st-tools.is-in .sl-st-without__item + .sl-st-without__item s::after { animation-delay: 1100ms; }

/* Step seven: the finished room. */
.sl-st-done__in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sl-st-done__visual { margin: 0; }
.sl-st-done__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--sl-soft); clip-path: inset(100% 0 0 0 round 28px); }
.sl-st-done.is-in .sl-st-done__frame { animation: sl-pz-clip 1100ms cubic-bezier(0.7, 0, 0.2, 1) 150ms forwards; }
.sl-st-done__img { width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--py, -6%)); }
.sl-st-done__num { display: block; font-size: clamp(4rem, 2rem + 6vw, 9rem); font-weight: 300; line-height: 0.85; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px var(--sl-text); }
.sl-st-done__title { position: relative; display: inline-block; margin: clamp(18px, 2vw, 30px) 0 0; font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-st-done__text { max-width: 46ch; margin: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.4vw, 28px); font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-st-burst { position: absolute; right: 0.6em; bottom: 0.45em; width: 0; height: 0; pointer-events: none; }
.sl-st-burst i { --a: calc(var(--b) * 36deg - 90deg); position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sl-khaki); opacity: 0; }
.sl-st-burst i:nth-child(3n + 2) { border-radius: 2px; background: #E2A33B; }
.sl-st-burst i:nth-child(3n) { background: #A8B79A; }
.sl-st-burst i:nth-child(even) { --d: 0.9em; }
.sl-st-done.is-in .sl-st-burst i { animation: sl-st-pop 1100ms cubic-bezier(0.2, 0.8, 0.3, 1) 1300ms both; }
@keyframes sl-st-pop {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d, 1.3em)) rotate(120deg) scale(1); }
}

/* Closing panel: die-cut stickers (no backing, cut along the drawing) stuck on the dark wall one by one
   as the panel comes in, arranged as a scene, not a grid (Andrej, 24.10.2026): the giraffe is the lead
   and stands taller than the panel, its head out over the top edge; sun and cloud sit over the top
   edge; the elephant sits at its feet; the cloud drifts. No lion and no pointer effects (Andrej).
   Transform carries the animations and rotate the resting tilt, so the two never fight. */
.sl-st-end .sl-mt-end__panel { min-height: clamp(400px, 34vw, 500px); align-content: center; overflow: visible; }
.sl-st-end .sl-mt-end__panel::after { content: none; }
.sl-st-wall { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; pointer-events: none; }
.sl-st-wall__s { position: absolute; z-index: var(--z, 1); width: auto; height: auto; rotate: var(--r, 0deg); filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.2)); }
.sl-st-wall__s--sunce { --z: 1; right: -2%; top: -15%; width: 21%; }
.sl-st-wall__s--oblak { --z: 2; right: 41%; top: calc(-7% + 70px); width: 22%; }
.sl-st-wall__s--zirafa { --z: 3; --r: 2deg; right: 10%; bottom: 5%; height: 118%; transform-origin: 50% 100%; }
.sl-st-wall__s--slon { --z: 5; --r: 6deg; left: 33%; bottom: 3%; height: 45%; }
.js .sl-st-end:not(.is-in) .sl-st-wall__s { opacity: 0; }
.sl-st-end.is-in .sl-st-wall__s { animation: sl-st-stick 700ms cubic-bezier(0.2, 0.8, 0.25, 1.15) var(--delay, 0ms) both; }
.sl-st-end.is-in .sl-st-wall__s--sunce { animation: sl-st-stick 700ms cubic-bezier(0.2, 0.8, 0.25, 1.15) 300ms both, sl-st-spin 60s linear 1s infinite; }
.sl-st-end.is-in .sl-st-wall__s--oblak { animation: sl-st-stick 700ms cubic-bezier(0.2, 0.8, 0.25, 1.15) 500ms both, sl-st-drift 9s ease-in-out 1.2s infinite alternate; }
.sl-st-end.is-in .sl-st-wall__s--zirafa { animation: sl-st-stick 800ms cubic-bezier(0.2, 0.8, 0.25, 1.15) 700ms both, sl-st-sway 6s ease-in-out 1.6s infinite; }
.sl-st-end.is-in .sl-st-wall__s--slon { --delay: 1200ms; }
@keyframes sl-st-stick { from { opacity: 0; transform: translateY(-22px) scale(1.12) rotate(7deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sl-st-spin { to { transform: rotate(360deg); } }
@keyframes sl-st-drift { to { transform: translateX(40px); } }
@keyframes sl-st-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2deg); } }
@media (min-width: 700px) and (max-width: 1199px) {
  .sl-st-wall { width: 54%; }
  .sl-st-wall__s--oblak { right: 42%; top: calc(-5% + 70px); width: 20%; }
}

@media (max-width: 899px) {
  .sl-st-layers__in, .sl-st-done__in { grid-template-columns: minmax(0, 1fr); }
  .sl-st-layers__stage { aspect-ratio: 4 / 3.4; }
  .sl-st-stack { width: 34%; }
  .sl-st-done__frame { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 699px) {
  .sl-st-stack { width: 40%; }
  /* One group under the buttons: giraffe on the right with the sun behind its head, the cloud left of
     the head, the elephant against its front legs (Andrej, 24.10.2026). */
  .sl-st-end .sl-mt-end__panel { min-height: 0; padding-bottom: 350px; }
  .sl-st-wall { top: auto; left: 0; width: 100%; height: 320px; }
  .sl-st-wall__s--sunce { right: -3%; top: 3%; width: 27%; }
  .sl-st-wall__s--oblak { right: auto; left: 4%; top: 13%; width: 34%; }
  .sl-st-wall__s--zirafa { right: 8%; bottom: 5%; height: 96%; }
  .sl-st-wall__s--slon { left: 12%; bottom: 5%; height: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-st-layer { transition: none; transform: translateZ(calc(var(--z) * var(--gap))) !important; }
  .sl-st-layers.is-in .sl-st-layer { animation: none !important; }
  .js .sl-st .sl-st-layers__item { opacity: 1; animation: none !important; }
  .sl-st-tools .sl-st-without s::after { transform: none !important; animation: none !important; }
  .sl-st-done__frame { clip-path: none !important; animation: none !important; }
  .js .sl-st-end .sl-st-wall__s { opacity: 1; animation: none !important; }
  .sl-st-burst { display: none; }
}

/* ---------- Dostava i plaćanje (page-dostava-i-placanje-porucenih-proizvoda.php, sl-dp-*) ----------
   Editorial page in the language of "Montaža tapeta" and "O nama" (Andrej, 24.10.2026): the parcel photo
   opening upward, the way from the order to the door with a truck that follows the scroll (main.js,
   [data-dp-route] sets --p), a delivery price calculator ([data-dp-calc]), three ways to pay with a small
   loop each (notes rising from the parcel, a QR code being scanned, a fan of the cards coming soon) and
   the questions. Sections wait for .is-in; all motion stops under reduced motion. */

.js .sl-dp > [data-reveal] { opacity: 1; transform: none; }
.js .sl-dp > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-dp-route { padding-top: calc(clamp(8px, 2vw, 32px) + 20px); }
.sl-dp-price, .sl-dp-pay, .sl-dp-faq { padding-top: clamp(64px, 9vw, 150px); }
/* The box runs from the lower left (near end with the logo) to the upper right; keep its near end in the
   crop and put the chip at the top, over the floor, so it does not cover the logo. */
.sl-dp-hero__img { object-position: 18% 80%; }
@media (min-width: 900px) { .sl-dp-chip { top: 9%; bottom: auto; } }
.sl-dp-chip__icon::before { content: ""; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Mask icons used on this page. */
.sl-dp-stop__icon, .sl-dp-road__truck, .sl-dp-calc__truck, .sl-dp-cash__icon, .sl-dp-firm__icon::before { background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* The way of a parcel: dots in a row, the road under them; the fill and the truck follow --p (0..1),
   and a stop lights up once the fill reaches its dot (.is-on). */
.sl-dp-road { --p: 0; --dot: 76px; --road: 128px; --gap: clamp(16px, 2.4vw, 40px); position: relative; }
.sl-dp-road__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.sl-dp-road__track { position: absolute; left: calc(var(--dot) / 2); right: calc((100% - 3 * var(--gap)) / 4 - var(--dot) / 2); top: calc(var(--road) + 5px); height: 2px; background: var(--sl-line); }
.sl-dp-road__fill { position: absolute; inset: 0; background: var(--sl-text); transform: scaleX(var(--p)); transform-origin: left; }
/* 5 px above the line, so the wheels never cut it (Andrej, 24.10.2026). */
.sl-dp-road__truck { position: absolute; left: calc(var(--p) * 100%); bottom: 3px; width: 48px; height: 48px; color: var(--sl-text); translate: -70% 0; }
.sl-dp-road.is-moving .sl-dp-road__truck { animation: sl-ship-idle 640ms ease-in-out infinite; }
/* Stops on every station (Andrej, 24.10.2026, like the homepage "Kako radi"): the title and the road stick
   while the runway scrolls past, one gesture moves one station, and the truck and the line drive to the
   next dot in 900 ms instead of following the scroll. The header is held away meanwhile (sl-header-hold). */
.sl-dp-route { --dp-step: 45svh; }
.sl-dp-route.is-stepped:not(.is-static) .sl-dp-route__pin { position: sticky; top: 28px; }
.sl-dp-route.is-stepped:not(.is-static) .sl-dp-route__runway { height: calc(3 * var(--dp-step)); }
.sl-dp-route.is-stepped .sl-dp-road__fill { transition: transform 900ms cubic-bezier(0.65, 0, 0.25, 1); }
.sl-dp-route.is-stepped .sl-dp-road__truck { transition: left 900ms cubic-bezier(0.65, 0, 0.25, 1); }
.sl-dp-stop { display: grid; align-content: start; }
.sl-dp-stop__dot { display: grid; place-items: center; width: var(--dot); aspect-ratio: 1; margin-bottom: calc(var(--road) - var(--dot) + 30px); border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease), scale 400ms var(--sl-ease); }
.sl-dp-stop__icon { width: 36px; height: 36px; }
.sl-dp-stop.is-on .sl-dp-stop__dot { background: var(--sl-accent-900); color: var(--sl-on-dark); scale: 1.06; }
.sl-dp-stop__name { margin-bottom: 8px; }
.sl-dp-stop__when { margin: 0 0 10px; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; }
.sl-dp-stop__text { max-width: 34ch; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-dp-route:not(.is-in) .sl-dp-stop { opacity: 0; }
.sl-dp-route.is-in .sl-dp-stop { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 120ms) both; }

/* Delivery price: the two rates as large type, and beside them a dark card where a truck drives to the
   free delivery threshold on its own while the cart amount counts up (main.js, [data-dp-calc]). */
.sl-dp-price__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sl-dp-rates { margin: 0; border-bottom: 1px solid var(--sl-line); }
.sl-dp-rate { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: clamp(18px, 2vw, 28px) 0; border-top: 1px solid var(--sl-line); }
.sl-dp-rate dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-dp-rate dd { margin: 0; font-size: clamp(2.25rem, 1.3rem + 3vw, 4.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sl-dp-rate--free dd { font-weight: 600; letter-spacing: -0.045em; }
.sl-dp-price__note { max-width: 52ch; margin: 22px 0 0; line-height: 1.6; color: var(--sl-muted); }

.sl-dp-calc { display: grid; gap: 8px; overflow: hidden; padding: clamp(26px, 3.4vw, 52px); border-radius: 28px; background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-dp-calc__label { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-on-dark-muted); }
.sl-dp-calc__amount { margin: 0; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #fff; }
/* --v is how far the truck has come, as a share of the way to the threshold line at --goal (1 = on the
   line, about 1.6 = out of the card, which clips it). */
.sl-dp-calc__road { --v: 1.6; --goal: 0.8; position: relative; display: block; height: 104px; margin-top: 14px; }
.sl-dp-calc__road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(236 235 222 / 0.22); }
.sl-dp-calc__fill { position: absolute; left: 0; bottom: 0; width: min(100%, calc(var(--v) * var(--goal) * 100%)); height: 2px; background: var(--sl-on-dark); }
.sl-dp-calc__flag { position: absolute; left: calc(var(--goal) * 100%); top: 0; bottom: 0; border-left: 1.5px dashed var(--sl-on-dark-muted); transition: border-color 300ms var(--sl-ease); }
/* The tags sit left of the threshold line, so they stay inside the card: the threshold at the top, and
   "Besplatna isporuka" lower, in the space the truck has just left (Andrej, 24.10.2026). */
.sl-dp-calc__tag { position: absolute; right: 10px; top: 0; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; line-height: 22px; text-transform: uppercase; white-space: nowrap; transition: opacity 400ms var(--sl-ease), translate 400ms var(--sl-ease); }
.sl-dp-calc__tag--goal { color: var(--sl-on-dark); }
.sl-dp-calc__tag--free { top: 36px; gap: 12px; color: #fff; font-size: 1.21875rem; opacity: 0; translate: 0 10px; } /* 30% larger (Andrej, 24.10.2026) */
.sl-dp-calc__thumb { flex: none; width: 34px; height: 34px; transform-origin: 40% 80%; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.sl-dp-calc.is-free .sl-dp-calc__flag { border-left-color: #fff; }
.sl-dp-calc.is-free .sl-dp-calc__tag--goal { opacity: 0; translate: 0 -10px; }
.sl-dp-calc.is-free .sl-dp-calc__tag--free { opacity: 1; translate: 0 0; transition-delay: 450ms; }
/* The thumb pops up, then keeps giving a small nod while delivery is free. */
.sl-dp-calc.is-free .sl-dp-calc__thumb { animation: sl-dp-thumb 760ms cubic-bezier(0.25, 0.8, 0.3, 1.4) 650ms both, sl-dp-nod 1.6s ease-in-out 1.5s infinite; }
@keyframes sl-dp-thumb { 0% { scale: 0; rotate: -35deg; } 60% { scale: 1.25; rotate: 12deg; } 80% { rotate: -6deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes sl-dp-nod { 0%, 60%, 100% { rotate: 0deg; translate: 0 0; } 20% { rotate: -16deg; translate: 0 -2px; } 40% { rotate: 6deg; translate: 0 0; } }
/* The truck drives past the threshold line and out of the card. */
.sl-dp-calc__truck { position: absolute; left: max(52px, calc(var(--v) * var(--goal) * 100%)); bottom: 5px; width: 52px; height: 52px; color: #fff; translate: -96% 0; animation: sl-ship-idle 640ms ease-in-out infinite; }
.sl-dp-calc__result { min-height: 3.2em; margin: 6px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-on-dark); }
.sl-dp-calc__result strong { font-weight: 600; color: #fff; }
/* Between rounds the road and the numbers fade out, rewind, and fade back in. */
.sl-dp-calc__amount, .sl-dp-calc__road, .sl-dp-calc__result { transition: opacity 320ms var(--sl-ease); }
.sl-dp-calc.is-rewind .sl-dp-calc__amount, .sl-dp-calc.is-rewind .sl-dp-calc__road, .sl-dp-calc.is-rewind .sl-dp-calc__result { opacity: 0; }
.js .sl-dp-price:not(.is-in) .sl-dp-calc, .js .sl-dp-price:not(.is-in) .sl-dp-rate { opacity: 0; }
.sl-dp-price.is-in .sl-dp-rate { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) 300ms both; }
.sl-dp-price.is-in .sl-dp-rate + .sl-dp-rate { animation-delay: 420ms; }
.sl-dp-price.is-in .sl-dp-calc { animation: sl-mt-rise 900ms cubic-bezier(0.2, 0.75, 0.1, 1) 250ms both; }

/* Ways to pay: three cards, each with its own small loop on a soft ground. */
.sl-dp-pay__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-dp-way { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 14px; padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) clamp(24px, 2.6vw, 36px); border: 1px solid var(--sl-line); border-radius: 28px; transition: border-color 300ms var(--sl-ease); }
.sl-dp-way:hover { border-color: var(--sl-khaki); }
.sl-dp-way.is-soon { border-style: dashed; border-color: var(--sl-sand); }
.sl-dp-way > :not(.sl-dp-way__visual) { margin-inline: clamp(8px, 1vw, 16px); }
.sl-dp-way .sl-mt-pay__name { margin-top: 12px; }
.sl-dp-way__visual { position: relative; display: grid; place-items: center; height: clamp(190px, 16vw, 240px); overflow: hidden; border-radius: 20px; background: var(--sl-soft); }
.js .sl-dp-pay:not(.is-in) .sl-dp-way { opacity: 0; }
.sl-dp-pay.is-in .sl-dp-way { animation: sl-mt-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 120ms) both; }
.js .sl-dp-pay:not(.is-in) .sl-dp-way__visual * { animation-play-state: paused; }

/* Cash on delivery: two notes rise from the parcel, in turn. */
.sl-dp-cash { position: relative; display: grid; place-items: center; width: 120px; height: 120px; translate: 0 18px; }
.sl-dp-cash__box { position: relative; z-index: 1; display: grid; place-items: center; width: 104px; aspect-ratio: 1; border-radius: 26px; background: #fff; color: var(--sl-accent); box-shadow: 0 18px 36px -18px rgb(58 55 46 / 0.4); }
.sl-dp-cash__icon { width: 54px; height: 54px; }
.sl-dp-cash__note { position: absolute; left: 50%; top: 30%; width: 82px; height: 44px; margin-left: -41px; border-radius: 7px; background: var(--sl-sand) radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.55) 0 9px, transparent 10px); box-shadow: inset 0 0 0 4px var(--sl-sand), inset 0 0 0 5px rgb(255 255 255 / 0.6); opacity: 0; animation: sl-dp-note 4s cubic-bezier(0.3, 0.6, 0.3, 1) infinite; }
.sl-dp-cash__note + .sl-dp-cash__note { background-color: var(--sl-khaki); box-shadow: inset 0 0 0 4px var(--sl-khaki), inset 0 0 0 5px rgb(255 255 255 / 0.6); animation-delay: 2s; }
@keyframes sl-dp-note { 0% { opacity: 0; transform: translateY(20px) rotate(0deg); } 15% { opacity: 1; } 55% { opacity: 1; transform: translateY(-74px) rotate(-10deg); } 75%, 100% { opacity: 0; transform: translateY(-90px) rotate(-14deg); } }

/* Bank transfer: a QR code drawn from the top, then a scan line passing over it. */
.sl-dp-qr { position: relative; display: block; width: clamp(132px, 11vw, 160px); aspect-ratio: 1; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 18px 36px -18px rgb(58 55 46 / 0.4); }
.sl-dp-qr__svg { display: block; width: 100%; height: 100%; fill: var(--sl-text); }
.sl-dp-pay.is-in .sl-dp-qr__svg { animation: sl-dp-qr 1200ms cubic-bezier(0.65, 0, 0.35, 1) 500ms both; }
@keyframes sl-dp-qr { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.sl-dp-qr__scan { position: absolute; left: -8px; right: -8px; top: 0; height: 3px; border-radius: 3px; background: var(--sl-khaki); box-shadow: 0 0 18px 4px rgb(165 157 132 / 0.5); opacity: 0; animation: sl-dp-scan 2.8s ease-in-out 1.8s infinite; }
@keyframes sl-dp-scan { 0% { top: 6%; opacity: 0; } 10%, 90% { opacity: 1; } 50% { top: 92%; } 100% { top: 6%; opacity: 0; } }

/* Cards (coming soon): a stack that fans out once in view and a little further on hover; the first card
   lies on top, so the marks in the corners of the ones behind stay visible (DinaCard first, Mastercard
   and Maestro show their circles only; all names are in the list below). The marks are drawn here until the bank sends the official logo kit. */
.sl-dp-fan { position: relative; display: block; width: 132px; height: 84px; translate: 0 14px; }
.sl-dp-cc { --o: calc(var(--c) - 1.5); position: absolute; inset: 0; z-index: calc(10 - var(--c)); display: block; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 14px 28px -14px rgb(30 30 28 / 0.45), inset 0 0 0 1px rgb(30 30 28 / 0.06); transform-origin: 50% 190%; transition: rotate 900ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(400ms + var(--c) * 80ms), translate 900ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(400ms + var(--c) * 80ms); }
.sl-dp-pay.is-in .sl-dp-cc { rotate: calc(var(--o) * 7deg); translate: calc(var(--o) * 48px) 0; }
.sl-dp-pay.is-in .sl-dp-way--card:hover .sl-dp-cc { rotate: calc(var(--o) * 9deg); translate: calc(var(--o) * 52px) 0; transition-delay: 0ms; }
.sl-dp-cc__chip { position: absolute; left: 14px; top: 16px; width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #E3D3A1, #C9B47A); }
.sl-dp-cc__mark { position: absolute; right: 12px; bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.sl-dp-cc__rings { position: absolute; right: 9px; bottom: 10px; width: 38px; height: 24px; }
.sl-dp-cc--visa { background: #1A1F71; color: #fff; }
.sl-dp-cc--visa .sl-dp-cc__mark { bottom: 8px; right: 10px; font-size: 18px; font-style: italic; font-weight: 700; letter-spacing: 0.01em; }
.sl-dp-cc--mastercard { background: #1E1E1C; color: #fff; }
.sl-dp-cc--mastercard circle:first-of-type { fill: #EB001B; }
.sl-dp-cc--mastercard circle:last-of-type { fill: #F79E1B; }
.sl-dp-cc--mastercard path { fill: #FF5F00; }
.sl-dp-cc--maestro { color: var(--sl-text); }
.sl-dp-cc--maestro circle:first-of-type { fill: #EB001B; }
.sl-dp-cc--maestro circle:last-of-type { fill: #00A2E5; }
.sl-dp-cc--maestro path { fill: #7375CF; }
.sl-dp-cc--dina { background: #F4F3EC; color: #1A3E7A; }
.sl-dp-cc--dina .sl-dp-cc__mark { font-size: 16px; }
.sl-dp-cc--dina .sl-dp-cc__mark b { font-weight: 700; }
/* align-content: the list takes the free height of the card (1fr row), the pills must not stretch with it. */
.sl-dp-brands { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 8px; margin-top: 2px; margin-bottom: 0; padding: 0; list-style: none; }
.sl-dp-brands li { padding: 5px 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); font-size: 0.8125rem; font-weight: 500; color: var(--sl-text-2); }

.sl-dp-firm { display: flex; align-items: center; gap: 16px; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 20px 24px; border-radius: 20px; background: var(--sl-soft); font-size: 1rem; line-height: 1.55; color: var(--sl-text-2); }
.sl-dp-firm strong { font-weight: 600; color: var(--sl-text); }
.sl-dp-firm__icon { display: grid; place-items: center; flex: none; width: 48px; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--sl-accent); }
.sl-dp-firm__icon::before { content: ""; width: 26px; height: 26px; }

.sl-dp-faq__more { margin: 18px 0 0; color: var(--sl-muted); }

@media (max-width: 1199px) {
  .sl-dp-pay__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-dp-way--card { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .sl-dp-price__in, .sl-dp-pay__list { grid-template-columns: minmax(0, 1fr); }
  /* The road turns vertical: dots on the left, the line through them, no truck. */
  .sl-dp-road { --dot: 56px; }
  .sl-dp-road__list { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sl-dp-road__track { left: calc(var(--dot) / 2 - 1px); right: auto; top: calc(var(--dot) / 2); width: 2px; height: var(--len, 80%); }
  .sl-dp-road__fill { transform: scaleY(var(--p)); transform-origin: top; }
  .sl-dp-road__truck { display: none; }
  .sl-dp-stop { position: relative; padding-left: calc(var(--dot) + 20px); min-height: var(--dot); }
  .sl-dp-stop__dot { position: absolute; left: 0; top: 0; margin: 0; }
  .sl-dp-stop__icon { width: 28px; height: 28px; }
  .sl-dp-stop__name { margin-top: 4px; }
  .sl-dp-way--card { grid-column: auto; }
  /* On phones the stuck panel shows the text of the current station only, so it fits the screen. */
  .sl-dp-route.is-stepped:not(.is-static) .sl-dp-route__pin { top: 12px; }
  .sl-dp-route { --dp-step: 40svh; }
  .sl-dp-route.is-stepped .sl-dp-road__list { gap: 22px; }
  .sl-dp-route.is-stepped .sl-dp-stop:not(.is-current) .sl-dp-stop__text { display: none; }
  .sl-dp-chip { left: 5%; right: auto; bottom: -26px; max-width: 90%; }
}
@media (max-width: 599px) {
  .sl-dp-hero .sl-pz-hero__title { font-size: min(2.75rem, 11vw); }
  .sl-dp-rate dd { font-size: 2.5rem; }
  .sl-dp-firm { align-items: flex-start; padding: 18px; }
  /* The flag label goes left of its line, so it stays inside the card. */
  .sl-dp-calc__tag { font-size: 0.75rem; }
  /* On phones the larger label breaks into two lines, so it stays left of the line. */
  .sl-dp-calc__tag--free { top: 26px; width: 9.5em; justify-content: flex-end; font-size: 1.05625rem; line-height: 1.2; text-align: right; white-space: normal; }
  .sl-dp-calc__thumb { width: 30px; height: 30px; }
  .sl-dp-pay.is-in .sl-dp-cc { rotate: calc(var(--o) * 6deg); translate: calc(var(--o) * 42px) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-dp-road__truck, .sl-dp-calc__truck, .sl-dp-cash__note, .sl-dp-qr__svg, .sl-dp-qr__scan { animation: none !important; }
  .sl-dp-cash__note, .sl-dp-qr__scan { display: none; }
  .sl-dp-calc__thumb { animation: none !important; }
  .sl-dp-cc, .sl-dp-calc__tag, .sl-dp-stop__dot, .sl-dp-route.is-stepped .sl-dp-road__fill, .sl-dp-route.is-stepped .sl-dp-road__truck { transition: none; }
  .js .sl-dp .sl-dp-stop, .js .sl-dp .sl-dp-way, .js .sl-dp .sl-dp-calc, .js .sl-dp .sl-dp-rate { opacity: 1; animation: none !important; }
}

/* "Česta pitanja" (page-cesto-postavljana-pitanja.php, Andrej 24.10.2026): the title with a chat over
   a room photo beside it, sticky topics beside the questions. */
.sl-fq-hero__grid { align-items: center; }
.sl-fq-hero .sl-pz-hero__frame { aspect-ratio: 4 / 4.6; }

/* Hero visual: the bedroom photo opens upward, a glass chat window overlaps its lower left corner and
   a white seal with a question mark turns on its upper right corner. Decorative, aria-hidden; the
   real questions are in the list below. */
.sl-fq-visual { position: relative; }
.sl-fq-visual__img { object-position: 40% 50%; }
.sl-fq-seal { position: absolute; z-index: 3; top: 7%; right: -5%; display: grid; place-items: center; width: 136px; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--sl-text); box-shadow: 0 26px 50px -26px rgb(30 30 28 / 0.55); opacity: 0; animation: sl-fq-pop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 1300ms forwards; }
.sl-fq-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sl-pz-spin 22s linear infinite; }
.sl-fq-seal__ring text { font-family: var(--sl-font); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; fill: currentColor; }
.sl-fq-seal__q { width: 32px; height: auto; fill: currentColor; animation: sl-fq-bob 3.6s ease-in-out 2.2s infinite; }
@keyframes sl-fq-bob { 50% { translate: 0 -5px; rotate: 8deg; } }
@keyframes sl-fq-pop { from { opacity: 0; translate: 0 36px; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }

.sl-fq-chat { position: absolute; z-index: 2; left: -15%; bottom: 7%; width: min(410px, 100%); padding: 16px 16px 18px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 26px; background: rgb(255 255 255 / 0.76); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 44px 80px -38px rgb(30 30 28 / 0.6), 0 2px 6px rgb(30 30 28 / 0.06); opacity: 0; animation: sl-fq-pop 1000ms cubic-bezier(0.2, 0.8, 0.25, 1.1) 1000ms forwards; }
.sl-fq-chat__head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 2px 4px 14px; border-bottom: 1px solid rgb(30 30 28 / 0.08); }
.sl-fq-chat__avatar { display: grid; place-items: center; flex: none; width: 44px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-accent-900); font-size: 1.25rem; font-weight: 600; color: var(--sl-on-dark); }
.sl-fq-chat__who { display: grid; gap: 2px; line-height: 1.2; }
.sl-fq-chat__who strong { font-size: 1rem; font-weight: 600; color: var(--sl-text); }
.sl-fq-chat__status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--sl-muted); }
.sl-fq-chat__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-accent); animation: sl-fq-pulse 2.4s ease-out infinite; }
@keyframes sl-fq-pulse { 0% { box-shadow: 0 0 0 0 rgb(87 81 63 / 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgb(87 81 63 / 0); } }

/* The thread is anchored to its bottom: a new message opens its row and pushes the older ones up,
   where they fade out under the mask. */
.sl-fq-thread { position: relative; height: 272px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 8%, #000 50%); mask-image: linear-gradient(to bottom, transparent 0, transparent 8%, #000 50%); }
.sl-fq-thread__list { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.sl-fq-msg { display: grid; grid-template-rows: 1fr; }
.js .sl-fq-msg { grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--sl-ease); }
.js .sl-fq-msg.is-in { grid-template-rows: 1fr; }
.sl-fq-msg__in { display: flex; min-height: 0; overflow: hidden; padding-top: 10px; }
.sl-fq-msg--q .sl-fq-msg__in { justify-content: flex-end; }
.sl-fq-msg__bub { max-width: 84%; margin: 0; padding: 11px 15px; font-size: 0.96875rem; line-height: 1.4; }
.sl-fq-msg--q .sl-fq-msg__bub { border-radius: 18px 18px 5px 18px; background: #fff; font-weight: 500; color: var(--sl-text); box-shadow: 0 10px 22px -16px rgb(30 30 28 / 0.5); }
.sl-fq-msg--a .sl-fq-msg__bub { border-radius: 18px 18px 18px 5px; background: var(--sl-accent-900); color: var(--sl-on-dark); }
.js .sl-fq-msg .sl-fq-msg__bub { opacity: 0; translate: 0 12px; scale: 0.92; transition: opacity 380ms var(--sl-ease) 120ms, translate 560ms cubic-bezier(0.34, 1.4, 0.64, 1) 120ms, scale 560ms cubic-bezier(0.34, 1.4, 0.64, 1) 120ms; }
.js .sl-fq-msg--q .sl-fq-msg__bub { transform-origin: right bottom; }
.js .sl-fq-msg--a .sl-fq-msg__bub { transform-origin: left bottom; }
.js .sl-fq-msg.is-in .sl-fq-msg__bub { opacity: 1; translate: 0 0; scale: 1; }
.sl-fq-msg__text { display: block; animation: sl-fq-text 420ms var(--sl-ease) both; }
@keyframes sl-fq-text { from { opacity: 0; } }
.sl-fq-dots { display: flex; gap: 5px; padding: 6px 2px; }
.sl-fq-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-on-dark); animation: sl-fq-type 1s ease-in-out infinite; }
.sl-fq-dots i:nth-child(2) { animation-delay: 150ms; }
.sl-fq-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes sl-fq-type { 0%, 60%, 100% { opacity: 0.4; translate: 0 0; } 30% { opacity: 1; translate: 0 -4px; } }

/* Topics and questions. */
.sl-fq-body { padding-top: clamp(24px, 4vw, 64px); }
.sl-fq-body__in { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.sl-fq-side { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-fq-nav__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-fq-nav__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--sl-line); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); font-weight: 300; letter-spacing: -0.01em; color: var(--sl-muted); text-decoration: none; transition: color 400ms var(--sl-ease); }
.sl-fq-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sl-text); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--sl-ease); }
.sl-fq-nav__go { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border: 1px solid var(--sl-line); border-radius: 50%; transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease), border-color 400ms var(--sl-ease), rotate 400ms var(--sl-ease); }
.sl-fq-nav__link:hover, .sl-fq-nav__link:focus-visible, .sl-fq-nav__link.is-active { color: var(--sl-text); }
.sl-fq-nav__link.is-active { font-weight: 500; }
.sl-fq-nav__link.is-active::after { transform: scaleX(1); }
.sl-fq-nav__link:hover .sl-fq-nav__go, .sl-fq-nav__link:focus-visible .sl-fq-nav__go, .sl-fq-nav__link.is-active .sl-fq-nav__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; rotate: 90deg; }
.sl-fq-nav__link:focus-visible { outline: none; }
.sl-fq-side__help .sl-qx__help { margin-top: clamp(28px, 3vw, 44px); }
.sl-fq-group { scroll-margin-top: calc(var(--sl-header-offset, 0px) + 24px); }
.sl-fq-group + .sl-fq-group { margin-top: clamp(56px, 7vw, 110px); }
.sl-fq-group__title { margin: 0 0 clamp(16px, 2vw, 28px); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-fq .sl-faq__item { scroll-margin-top: calc(var(--sl-header-offset, 0px) + 24px); }
.sl-fq .sl-faq__a a { color: var(--sl-accent); text-decoration: underline; text-underline-offset: 3px; }
.js .sl-fq-group:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.js .sl-fq-group:not(.is-in) .sl-faq__item { opacity: 0; }
.sl-fq-group.is-in .sl-faq__item { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + min(var(--k), 6) * 70ms) both; }

/* Closing panel with the contact lines on the dark ground. */
.sl-fq-end__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; justify-items: stretch; column-gap: clamp(32px, 6vw, 110px); }
.sl-fq-end__panel::after { opacity: 0.3; }
.sl-fq-end__copy { position: relative; z-index: 1; }
.sl-fq-end__text { max-width: 44ch; margin: clamp(18px, 2vw, 28px) 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sl-on-dark); }
.sl-fq-end__links { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgb(236 235 222 / 0.22); }
.sl-fq-end__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid rgb(236 235 222 / 0.22); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 300; color: #fff; text-decoration: none; }
.sl-fq-end__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--sl-ease); }
.sl-fq-end__link:hover::after, .sl-fq-end__link:focus-visible::after { transform: scaleX(1); }
.sl-fq-end__link:focus-visible { outline: none; }
.sl-fq-end__label { display: flex; align-items: center; gap: 14px; }
.sl-fq-end__icon { display: grid; place-items: center; color: var(--sl-on-dark-muted); }
.sl-fq-end__value { font-size: 1rem; font-weight: 500; color: var(--sl-on-dark); }
.sl-fq-end__go { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border: 1px solid rgb(236 235 222 / 0.35); border-radius: 50%; transition: background-color 400ms var(--sl-ease), color 400ms var(--sl-ease), rotate 400ms var(--sl-ease); }
.sl-fq-end__link:hover .sl-fq-end__go, .sl-fq-end__link:focus-visible .sl-fq-end__go { background: #fff; color: var(--sl-text); rotate: -45deg; }
.js .sl-fq-end:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }

@media (max-width: 999px) {
  .sl-fq-visual { margin-bottom: 40px; }
  .sl-fq-chat { left: -9%; bottom: -40px; width: min(390px, 96%); }
  .sl-fq-seal { right: -3%; }
  .sl-fq-end__panel { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .sl-fq-body__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Topics become a sliding row of pills that stays under the header. */
  .sl-fq-side { z-index: 5; margin-inline: calc(var(--sl-gutter) * -1); padding: 10px var(--sl-gutter); background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); top: var(--sl-header-offset, 0px); }
  .sl-fq-nav__label, .sl-fq-side__help, .sl-fq-nav__go { display: none; }
  .sl-fq-nav__list { display: flex; gap: 8px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .sl-fq-nav__list::-webkit-scrollbar { display: none; }
  .sl-fq-nav__link { display: block; padding: 9px 16px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; color: var(--sl-text-2); }
  .sl-fq-nav__link::after { display: none; }
  .sl-fq-nav__link.is-active { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
  .sl-fq-group { scroll-margin-top: calc(var(--sl-header-offset, 0px) + 76px); }
  .sl-fq .sl-faq__item { scroll-margin-top: calc(var(--sl-header-offset, 0px) + 76px); }
}
@media (max-width: 599px) {
  .sl-fq-visual { margin-bottom: 104px; }
  .sl-fq-chat { left: -6%; bottom: -104px; width: 100%; padding: 12px 12px 14px; border-radius: 22px; }
  .sl-fq-thread { height: 188px; }
  .sl-fq-seal { top: 5%; width: 96px; }
  .sl-fq-seal__ring text { font-size: 16.5px; }
  .sl-fq-seal__q { width: 23px; }
  .sl-fq-end__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 14px 0; }
  .sl-fq-end__value { grid-column: 1; grid-row: 2; padding-left: 34px; font-size: 0.9375rem; }
  .sl-fq-end__go { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-fq-chat, .sl-fq-seal { opacity: 1; animation: none !important; }
  .sl-fq-seal__ring, .sl-fq-seal__q, .sl-fq-chat__status i, .sl-fq-dots i, .sl-fq-msg__text { animation: none !important; }
  .js .sl-fq-msg, .js .sl-fq-msg .sl-fq-msg__bub { transition: none; }
  .sl-fq-group .sl-pz-w > span, .sl-fq-end .sl-pz-w > span { transform: none; animation: none !important; }
  .js .sl-fq-group .sl-faq__item { opacity: 1; animation: none !important; }
}

/* ---------- Legal page: Reklamacije i povraćaj (Andrej, 24.10.2026) ----------
   The text lives in the page content (page.php, sl-info); these classes only dress it: a lead, a
   table of contents, the seller card, highlighted notes and the withdrawal form with blank lines. */
.sl-info__body .sl-legal-lead { font-size: 1.125rem; line-height: 1.65; color: var(--sl-text); }
.sl-info__body:has(.sl-legal-lead) h2[id] { scroll-margin-top: calc(var(--sl-header-offset, 0px) + 24px); margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--sl-line); }
.sl-legal-toc { margin: 28px 0 8px; padding: 20px 24px; border-radius: var(--sl-radius-lg); background: var(--sl-accent-50); }
.sl-info__body .sl-legal-toc__title { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-muted); }
.sl-info__body .sl-legal-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.sl-info__body .sl-legal-toc li { line-height: 1.4; }
.sl-legal-toc a { color: var(--sl-accent); font-weight: 500; text-decoration: none; }
.sl-legal-toc a:hover, .sl-legal-toc a:focus-visible { text-decoration: underline; }
.sl-info__body:has(.sl-legal-lead) a { color: var(--sl-accent); }
.sl-legal-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 0; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); overflow: hidden; }
.sl-legal-card > div { padding: 14px 20px; border-bottom: 1px solid var(--sl-line); }
.sl-legal-card > div:nth-child(odd) { border-right: 1px solid var(--sl-line); }
.sl-legal-card > div:nth-last-child(-n+2):nth-child(odd), .sl-legal-card > div:last-child { border-bottom: 0; }
.sl-legal-card > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.sl-legal-card dt { margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.35; color: var(--sl-muted); }
.sl-legal-card dd { margin: 0; font-weight: 600; line-height: 1.45; color: var(--sl-text); }
.sl-legal-card dd a { text-decoration: none; }
.sl-legal-note { margin: 16px 0; padding: 16px 20px; border-left: 3px solid var(--sl-accent); border-radius: 0 var(--sl-radius) var(--sl-radius) 0; background: var(--sl-soft-2); }
.sl-legal-note > p { margin: 0; }
.sl-info__body .sl-legal-note, .sl-info__body .sl-legal-note p { color: var(--sl-text); }
.sl-legal-note--soft { border-left-color: var(--sl-khaki); }
.sl-legal-form { display: grid; gap: 4px; margin: 16px 0; padding: 24px 28px 28px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius-lg); }
.sl-legal-form > p { margin: 0 0 8px; }
.sl-info__body .sl-legal-form__to { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--sl-line); color: var(--sl-text); }
.sl-legal-form__to span { font-weight: 600; }
.sl-info__body .sl-legal-form__field { margin: 6px 0 0; padding-bottom: 30px; border-bottom: 1px solid var(--sl-line-strong); font-size: 0.875rem; font-weight: 600; color: var(--sl-text); }
.sl-info__body .sl-legal-small { font-size: 0.875rem; color: var(--sl-muted); }
@media (max-width: 599px) {
  .sl-info__body .sl-legal-toc ul, .sl-legal-card { grid-template-columns: 1fr; }
  .sl-legal-card > div:nth-child(odd) { border-right: 0; }
  .sl-legal-card > div:nth-last-child(-n+2):nth-child(odd):not(:last-child) { border-bottom: 1px solid var(--sl-line); }
  .sl-legal-form { padding: 20px; }
}
@media print {
  .sl-legal-toc { display: none; }
}

/* ---------- Product page, editorial (Andrej, 24.10.2026) ----------
   The buy area keeps its job (one main button, price in view, help by phone); the head gets the light
   Jost headline of the other pages, the configurator steps get round numbers that turn into checks, and
   the dry tabs under it became sections: the story of the design with the whole design as a sample,
   the facts, sticking or installation, delivery and the questions. Words rise as on the other pages. */
@media (min-width: 1000px) {
  .sl-gallery--sticky { position: sticky; top: calc(var(--sl-header-offset, 0px) + 24px); transition: top 320ms var(--sl-ease); }
  /* On a short screen the square shrinks as a whole (a height cap would flatten it, Andrej: always 1:1). */
  .sl-gallery--sticky .sl-gallery__main { width: min(100%, calc(100svh - 190px)); }
  /* The left column is as wide as the square, so a smaller square widens the buy column instead of
     leaving an empty strip; about 60px between the photo and the buy column (Andrej, 24.10.2026: first
     80px, then 20px closer). The photo keeps the width it had with the 80px gap. */
  .sl-pdp:has(.sl-gallery--sticky) {
    --pdp-gap: clamp(40px, 5.5vw, 80px);
    grid-template-columns: minmax(0, min(calc((100% - var(--pdp-gap)) * 0.608), calc(100svh - 190px))) minmax(0, 1fr);
    gap: calc(var(--pdp-gap) - 20px);
  }
  .sl-gallery--sticky .sl-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(76px, 92px)); }
}

.sl-pd-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-pd-eyebrow a { color: inherit; text-decoration: none; }
.sl-pd-eyebrow a:hover { color: var(--sl-text); text-decoration: underline; text-underline-offset: 0.3em; }
/* Product head, editorial (Andrej, 24.10.2026: "sterile and pale, too much text"). The title's words
   rise like the other editorial pages, all in the light weight; the price is one big figure with the
   product code beside it (no "od" while there is one material; .sl-pd-price__from is for when it comes
   back), the short description stops after three lines and the facts are pills with icons. The text
   stays in the HTML for search engines. */
.sl-pd-head { display: grid; justify-items: start; gap: 18px; padding-bottom: 10px; }
.sl-pd-head__title { margin: 2px 0 0; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.875rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.sl-pd-buyline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; width: 100%; padding-top: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--sl-line); animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) 350ms both; }
.sl-pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; color: var(--sl-text); }
.sl-pd-price__from { font-size: 0.9375rem; color: var(--sl-muted); }
.sl-pd-price strong { font-size: clamp(2.25rem, 1.8rem + 1.3vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
.sl-pd-price__unit { font-size: 1.125rem; font-weight: 500; color: var(--sl-text-2); }
/* Stickers: main.js rewrites the price as plain text when a size is picked. */
.sl-product__price.sl-pd-price { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--sl-text); }
.sl-pd-sku { margin: 0 0 4px; padding: 6px 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-muted); white-space: nowrap; }
.sl-pd-sku span { margin-left: 4px; font-weight: 700; letter-spacing: 0.06em; color: var(--sl-text); }
.sl-pd-intro { display: -webkit-box; margin: 0; overflow: hidden; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) 450ms both; }
/* Facts as pills: a pill moves to the next line as a whole, its text never breaks (Andrej, 24.10.2026). */
.sl-pd-usp { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.sl-pd-usp li { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: var(--sl-text); animation: sl-stx-rise 700ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(500ms + var(--n, 0) * 90ms) both; }
.sl-pd-usp__icon { display: grid; place-items: center; flex: none; width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); }
.sl-pd-usp__icon::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
@media (max-width: 380px) { .sl-pd-usp li { padding-right: 12px; font-size: 0.8125rem; } }

/* Google Safe Browsing under the buy box: the small logo alone, centred; the report opens in a new tab. */
.sl-safe-badge { display: flex; justify-content: center; padding: 4px 2px; }
/* Two classes: WooCommerce's .woocommerce img { height: auto } would otherwise win (lesson #28). */
.sl-safe-badge .sl-safe-badge__logo { flex: none; width: 108px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .sl-pd-head .sl-pz-w > span { transform: none; animation: none !important; }
  .sl-pd-buyline, .sl-pd-intro, .sl-pd-usp li { animation: none !important; }
}

.sl-box, .sl-box__title { scroll-margin-top: calc(var(--sl-header-h, 80px) + 24px); }
.sl-box__head { align-items: center; }
.sl-box__title { display: flex; align-items: center; gap: 12px; }
.sl-box__num { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sl-text); color: #fff; font-size: 0.875rem; font-weight: 600; transition: background-color var(--sl-dur) var(--sl-ease); }
.sl-box__num::before, .sl-box__num .sl-icon { transition: opacity var(--sl-dur) var(--sl-ease), transform var(--sl-dur) var(--sl-ease); }
.sl-box__num .sl-icon { position: absolute; opacity: 0; transform: scale(0.5); stroke-width: 2.4; }
.sl-box.is-done .sl-box__num { background: var(--sl-accent); }
.sl-box__num::before { content: attr(data-n); }
.sl-box.is-done .sl-box__num::before { opacity: 0; transform: scale(0.5); }
.sl-box.is-done .sl-box__num .sl-icon { opacity: 1; transform: none; }
.sl-summary__total strong { font-size: 2rem; letter-spacing: -0.02em; }

.sl-pd-trust { display: grid; gap: 10px; margin: 6px 0 0; padding: 18px 20px; border: 1px solid var(--sl-line); border-radius: 14px; background: #fff; list-style: none; font-size: 0.90625rem; color: var(--sl-text-2); }
.sl-pd-trust li { display: flex; align-items: center; gap: 12px; }
.sl-pd-trust .sl-icon { flex: none; color: var(--sl-accent); }
.sl-pd-trust a { color: var(--sl-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sl-pd-trust a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sl-product .sl-pd-trust { margin-top: 0; }
/* Stickers and the rest: the choices (size, text, name) and the trust list as beige cards straight on
   the white page, no outer frame (Andrej, 25.10.2026; on 24.10. the area was beige and the cards white). A picked size stays white with the dark outline, so it does not melt into the card. */
.sl-pd-buy { display: flex; flex-direction: column; gap: 14px; }
.sl-pd-buy .sl-product__form { padding: 0; border: 0; border-radius: 0; background: none; }
.sl-pd-buy .sl-variant,
.sl-pd-buy .wapf-wrapper,
.sl-pd-buy .sl-pd-trust { padding: 18px 20px; border: 0; border-radius: 14px; background: var(--sl-soft); }
.sl-pd-buy .sl-variant__opt[aria-pressed="true"] { background: #fff; }
/* The wallpaper configurator the same way (Andrej, 25.10.2026): the steps and the summary as beige
   cards on the white page, no outer frame. Steps keep a transparent border, so .is-invalid still shows red;
   the info line, the spec and a picked option turn white, or they would melt into the card. */
form[data-quote-mode="pdp"] .sl-box { border-color: transparent; background: var(--sl-soft); }
/* 10px more air between the cards (Andrej, 25.10.2026): 24px everywhere, stickers and wallpaper. */
.sl-pd-buy,
.sl-pd-buy form.cart,
form[data-quote-mode="pdp"] { gap: 24px; }
form[data-quote-mode="pdp"] .sl-box.is-invalid { border-color: var(--sl-error); }
form[data-quote-mode="pdp"] .sl-box__info,
form[data-quote-mode="pdp"] .sl-spec,
form[data-quote-mode="pdp"] .sl-opt[aria-pressed="true"] { background: #fff; }
form[data-quote-mode="pdp"] .sl-vector__stage { background: var(--sl-soft-2); }
/* APF gives its wrapper margin: 0 0 20px -5px, which pushed the card 5px out of line (Andrej, 24.10.2026). */
.sl-pd-buy .wapf .wapf-wrapper { margin: 0 0 14px; }
/* APF prints the product price again above the button ("390 din"). None of the personalisation
   fields (groups 27602-27606) changes the price, and the price is already at the top (Andrej, 24.10.2026). */
.sl-pd-buy .wapf-product-totals { display: none; }
/* The cart prints "Dostava za {adresa}." or an empty line under the delivery method; neither is wanted (inc/cart.php). */
.woocommerce-cart .woocommerce-shipping-destination { display: none; }
/* Space only between fields, so a hidden name field leaves no gap at the bottom of the card. */
.sl-pd-buy .wapf-wrapper .wapf-field-group,
.sl-pd-buy .wapf-wrapper .wapf-field-container { margin: 0; }
.sl-pd-buy .wapf-field-group + .wapf-field-group .wapf-field-container,
.sl-pd-buy .wapf-field-container + .wapf-field-container { margin-top: 14px; }

.sl-pd { padding-top: clamp(64px, 8vw, 130px); }
.sl-pd > section + section { margin-top: clamp(88px, 9vw, 150px); }
.js .sl-pd > [data-reveal] { opacity: 1; transform: none; }
.js .sl-pd > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-pd-title { margin: 0; font-size: clamp(2.375rem, 1.2rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }

/* The story: the title and the whole design as a printed sample stay on the left, the description reads on the right. */
.sl-pd-story__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.sl-pd-story__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); display: grid; justify-items: start; gap: 18px; transition: top 320ms var(--sl-ease); }
.sl-pd-swatch { width: min(100%, 400px); margin: 22px 0 0; }
.sl-pd-swatch__card { display: block; padding: 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--sl-line), 0 34px 60px -30px rgb(58 55 46 / 0.5); rotate: -3deg; transition: rotate 600ms var(--sl-ease); }
.sl-pd-swatch:hover .sl-pd-swatch__card { rotate: -1deg; }
.sl-pd-swatch__card img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; border-radius: 3px; }
.sl-pd-prose { max-width: 66ch; font-size: 1.0625rem; line-height: 1.75; color: var(--sl-text-2); }
.sl-pd-prose > p { margin: 0 0 1.1em; }
.sl-pd-prose > p:first-child { margin-bottom: 1.1em; font-size: clamp(1.3125rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 300; line-height: 1.45; letter-spacing: -0.015em; color: var(--sl-text); }
.sl-pd-prose a { color: var(--sl-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.sl-pd-prose a:hover { text-decoration-thickness: 2px; }
.js .sl-pd-story:not(.is-in) .sl-pd-swatch__card, .js .sl-pd-story:not(.is-in) .sl-pd-prose > * { opacity: 0; }
.sl-pd-story.is-in .sl-pd-swatch__card { animation: sl-stx-rise 900ms cubic-bezier(0.2, 0.75, 0.1, 1) 300ms both; }
.sl-pd-story.is-in .sl-pd-prose > * { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) 200ms both; }
.sl-pd-story.is-in .sl-pd-prose > :nth-child(2) { animation-delay: 300ms; }
.sl-pd-story.is-in .sl-pd-prose > :nth-child(n + 3) { animation-delay: 400ms; }

/* The facts: white cards on the section tone, coming up one after another. */
.sl-pd-feat { padding-block: clamp(56px, 7vw, 110px); background: var(--sl-soft); }
.sl-pd-feat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(36px, 4vw, 64px); }
.sl-pd-feat__head .sl-pd-feat__title { margin-bottom: 0; }
/* Arrows only where the cards scroll sideways (phones and tablets, below). */
.sl-pd-feat .sl-pd-feat__nav { display: none; }
.sl-pd-feat__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.sl-pd-feat__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-pd-feat__item { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 26px 24px 30px; border-radius: 22px; background: #fff; }
.sl-pd-feat__item .sl-mt-icon { background: var(--sl-soft-2); }
/* A crossed-out icon (the paint brush on "Samolepljiva"): the line draws over it once the card has risen. */
.sl-pd-no { position: relative; }
.sl-pd-no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 2px var(--sl-soft-2); transform: translate(-50%, -50%) rotate(45deg); transition: transform 500ms cubic-bezier(0.7, 0, 0.2, 1) calc(900ms + var(--n, 0) * 90ms); }
.js .sl-pd-feat:not(.is-in) .sl-pd-no::after { transform: translate(-50%, -50%) rotate(45deg) scaleX(0); }
@media (max-width: 899px) { .sl-pd-no::after { width: 38px; } }
@media (prefers-reduced-motion: reduce) { .sl-pd-no::after { transition: none; } }
.sl-pd-feat__name { margin: 10px 0 0; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.sl-pd-feat__text { margin: 0; line-height: 1.6; color: var(--sl-text-2); }
.js .sl-pd-feat:not(.is-in) .sl-pd-feat__item { opacity: 0; }
.sl-pd-feat.is-in .sl-pd-feat__item { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n) * 90ms) both; }

/* Sticking and installation reuse the homepage cards; the peeling sheet carries this product's design. */
.sl-pd-mx__grid--one { grid-template-columns: minmax(0, 720px); }
.sl-pd-mx__card--sticker .sl-mx__print { background-color: #fff; background-size: contain; }
/* Wallpaper: four rolls of the flat motif, apart at first, slide together sideways one after another into
   the whole picture, hold, and part again (Andrej, 24.10.2026: horizontal only). Joining snaps in with a
   small overshoot, parting speeds up and slows down (6.4 s loop, waits for .is-in; still and whole
   under reduced motion). */
.sl-pd-rolls { --w: min(clamp(240px, 30vw, 440px), calc(clamp(190px, 22vw, 300px) * var(--ratio))); --gap: clamp(10px, 1.4vw, 18px); position: relative; display: block; width: var(--w); aspect-ratio: var(--ratio); }
.sl-pd-rolls__roll { --apart: translateX(calc((var(--k) - 1.5) * var(--gap) * 2)); position: absolute; top: 0; bottom: 0; left: calc(var(--k) * 25%); width: 25.2%; border-radius: 2px; background: #F5F0E8 var(--img) no-repeat; background-size: 400% 100%; background-position: calc(var(--k) * 100% / 3) 0; box-shadow: 0 16px 24px -14px rgb(58 55 46 / 0.45); transform: var(--apart); animation: sl-pd-roll 6.4s linear calc(var(--k) * 110ms) infinite; }
.sl-pd-rolls__roll:first-child { border-radius: 4px 2px 2px 4px; }
.sl-pd-rolls__roll:last-child { width: 25%; border-radius: 2px 4px 4px 2px; }
@keyframes sl-pd-roll {
  0%, 14% { transform: var(--apart); box-shadow: 0 16px 24px -14px rgb(58 55 46 / 0.45); animation-timing-function: cubic-bezier(0.3, 1.45, 0.45, 1); }
  38%, 70% { transform: none; box-shadow: 0 16px 24px -14px rgb(58 55 46 / 0.2); animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1); }
  92%, 100% { transform: var(--apart); box-shadow: 0 16px 24px -14px rgb(58 55 46 / 0.45); }
}
.js .sl-mx:not(.is-in) .sl-pd-rolls__roll { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sl-pd-rolls__roll { transform: none; animation: none !important; } }
.sl-pd-mx__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 24px; }
.sl-pd-mx__cta .sl-mx__btn, .sl-pd-mx__cta .sl-mx__link { margin-top: 0; }
.sl-pd-mx__more { color: #fff; }

/* From the order to the door: a dashed road the truck drives along once, the stops under it. */
/* The same band as the facts above (Andrej, 24.10.2026); line, dots and labels in the accent, 6.6:1 on it. */
.sl-pd-ship { --ship-bg: var(--sl-soft); padding-block: clamp(56px, 7vw, 110px); background: var(--ship-bg); }
.sl-pd-ship .sl-pd-eyebrow { color: var(--sl-accent); }
.sl-pd-ship__head, .sl-pd-similar__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(32px, 4vw, 60px); }
.sl-pd-ship__head .sl-mx__link, .sl-pd-similar__head .sl-mx__link { margin-top: 0; }
.sl-pd-ship__road { position: relative; height: 46px; }
.sl-pd-ship__line { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: repeating-linear-gradient(to right, var(--sl-accent) 0 10px, transparent 10px 18px); }
.sl-pd-ship__truck { position: absolute; left: calc(100% - 44px); bottom: 10px; width: 44px; height: 44px; background: var(--sl-text); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.js .sl-pd-ship:not(.is-in) .sl-pd-ship__truck { left: 0; }
.sl-pd-ship.is-in .sl-pd-ship__truck { animation: sl-pd-drive 8.4s cubic-bezier(0.45, 0, 0.2, 1) 500ms both; }
@keyframes sl-pd-drive { from { left: 0; } to { left: calc(100% - 44px); } }
.sl-pd-ship__list { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); margin: 0; padding: 0; list-style: none; }
.sl-pd-ship__item { position: relative; padding-top: 30px; }
.sl-pd-ship__dot { position: absolute; left: 0; top: -13px; width: 12px; height: 12px; border-radius: 50%; background: var(--sl-accent); box-shadow: 0 0 0 5px var(--ship-bg); }
.sl-pd-ship__name { margin: 10px 0 12px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.sl-pd-ship__text { max-width: 40ch; margin: 0; line-height: 1.65; color: var(--sl-text-2); }

.sl-pd-faq__note { margin: 12px 0 0; font-size: 0.9375rem; color: var(--sl-muted); }
.sl-pd-similar { padding-bottom: 20px; }
/* Arrows for the similar rail only on phones, in their own row under the link (Andrej, 25.10.2026). */

@media (max-width: 1199px) {
  .sl-pd-feat__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sl-pd-story__in { grid-template-columns: 1fr; gap: 28px; }
  .sl-pd-story__aside { position: static; }
  .sl-pd-swatch { width: min(78%, 360px); margin-top: 8px; }
  /* Phones: the facts scroll sideways instead of stacking into a long column. */
  .sl-pd-feat__list, .sl-pd-feat__list--3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sl-gutter); scroll-behavior: smooth; margin-inline: calc(-1 * var(--sl-gutter)); padding: 4px var(--sl-gutter) 8px; scrollbar-width: none; }
  .sl-pd-feat .sl-pd-feat__nav { display: flex; flex-shrink: 0; }
  .sl-pd-feat__item { scroll-snap-align: start; }
  .sl-pd-ship__road { display: none; }
  .sl-pd-ship__list { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid rgb(87 81 63 / 0.3); }
  .sl-pd-ship__item { padding: 22px 0 24px; border-top: 1px solid rgb(87 81 63 / 0.3); }
  .sl-pd-ship__dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-pd .sl-pz-w > span { transform: none; animation: none !important; }
  .js .sl-pd-story .sl-pd-swatch__card, .js .sl-pd-story .sl-pd-prose > *, .js .sl-pd-feat .sl-pd-feat__item { opacity: 1; animation: none !important; }
  .js .sl-pd-ship .sl-pd-ship__truck { left: calc(100% - 44px); animation: none !important; }
  .sl-pd-swatch__card, .sl-gallery--sticky { transition: none; }
}

/* ---------- Editorial category (archive-product.php, copy with 'editorial', sl-ka-*) ----------
   Tapete za dečiju sobu, Andrej 24.10.2026: hero with the room photo, quick filters in a toolbar that
   sticks under the header, cards rising in four at a time, a dark "send a drawing" card after the
   eighth card and a light "name on the wallpaper" card after the twentieth, a larger pager, the text
   as an index of sections, the questions as lines and a dark closing panel with two stickers. */
.sl-ka-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin: clamp(8px, 1.5vw, 20px) 0 clamp(28px, 3vw, 48px); }
.sl-ka-hero__eyebrow { margin: 0 0 18px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-ka-hero__title { margin: 0; font-size: clamp(2.75rem, 1.2rem + 4.6vw, 6.25rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-ka-hero__lead { max-width: 52ch; margin: clamp(20px, 2.2vw, 30px) 0 0; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; color: var(--sl-text-2); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 550ms forwards; }
.sl-ka-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 2.6vw, 36px); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 700ms forwards; }
.sl-ka-down { rotate: 90deg; }
.sl-ka-hero__link { font-weight: 500; color: var(--sl-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color var(--sl-dur) var(--sl-ease); }
.sl-ka-hero__link:hover { color: var(--sl-accent); }
.sl-ka-hero .sl-pd-usp { margin-top: clamp(22px, 2.4vw, 32px); }
.sl-ka-hero__visual { position: relative; margin: 0; }
.sl-ka-hero__frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 28px; background: var(--sl-soft); clip-path: inset(14% 0 0 0 round 28px); animation: sl-ka-clip 1000ms cubic-bezier(0.7, 0, 0.2, 1) 100ms forwards; }
@keyframes sl-ka-clip { to { clip-path: inset(0 0 0 0 round 28px); } }
.sl-ka-hero__frame .sl-ka-hero__img { display: block; width: 100%; height: 118%; object-fit: cover; object-position: 50% 60%; transform: translateY(var(--py, -6%)); animation: sl-pz-settle 1600ms var(--sl-ease) 100ms both; will-change: transform; }
.sl-ka-hero__tag { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--sl-pill); background: rgb(255 255 255 / 0.94); box-shadow: var(--sl-shadow); font-size: 0.9375rem; font-weight: 500; color: var(--sl-text); text-decoration: none; opacity: 0; animation: sl-pz-fade 600ms var(--sl-ease) 1100ms forwards; transition: background-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-ka-hero__tag:hover { background: var(--sl-text); color: #fff; }
.sl-ka-hero__seal { position: absolute; left: -44px; bottom: -40px; width: 128px; background: #fff; }
/* A note under the photo ("*Ramovi ne dolaze uz postere"), on the right so the seal stays clear. */
.sl-ka-hero__note { position: absolute; top: calc(100% + 10px); right: 0; font-size: 0.8125rem; color: var(--sl-text-2); }
/* The homepage's room scene in the photo frame (wall-scene.php): the stage covers the frame and keeps
   the products in view. Neither the scene's own label nor a pill goes over it (Andrej, 25.10.2026). */
/* The whole frame shows from the start (Andrej, 25.10.2026): opening it from the top edge hid the
   first stickers and the posters while they were hung. */
.sl-ka-hero__scene { position: relative; --fx: 0.7; --fy: 0.4; clip-path: none; animation: none; }
.sl-ka-hero__scene--posteri { --fx: 0.63; }
.sl-ka-hero__scene .sl-sh__tag { display: none; }

/* The toolbar sticks under the header (which hides on the way down), so sorting and the quick
   filters stay at hand through 48 cards. */
.sl-ka-bar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sl-header-offset, 0px)); z-index: 30; margin-inline: calc(var(--sl-gutter) * -1); padding: 10px var(--sl-gutter); border-top: 0; background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scroll-margin-top: 12px; transition: top 320ms var(--sl-ease); }
.sl-ka-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sl-ka-filter::-webkit-scrollbar { display: none; }
.sl-ka-filter__pill { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--sl-line); border-radius: var(--sl-pill); background: #fff; font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: var(--sl-text); text-decoration: none; transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-ka-filter__pill:hover { border-color: var(--sl-text); color: var(--sl-text); }
.sl-ka-filter__pill[aria-current="page"] { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-ka-head { margin-bottom: var(--sl-space-4); }
/* "Dezen" switcher in the toolbar (Andrej, 24.10.2026, in place of a sideways row of 22 pills): one
   pill that opens a panel with every subcategory A to Z under the button; below 900 px a sheet from the
   bottom of the screen with large rows. */
.sl-ka-dz { position: relative; }
.sl-ka-dz__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px 0 18px; border: 1px solid var(--sl-text); border-radius: var(--sl-pill); background: #fff; font: inherit; font-size: 0.9375rem; color: var(--sl-text); cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-ka-dz__btn:hover, .sl-ka-dz__btn[aria-expanded="true"] { background: var(--sl-text); color: #fff; }
.sl-ka-dz__key { color: inherit; opacity: 0.7; }
.sl-ka-dz__btn strong { font-weight: 600; }
.sl-ka-dz__chev { transition: rotate 240ms var(--sl-ease); }
.sl-ka-dz__btn[aria-expanded="true"] .sl-ka-dz__chev { rotate: 180deg; }
.sl-ka-dz__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 35; width: min(820px, calc(100vw - 2 * var(--sl-gutter))); max-height: min(70vh, 620px); overflow: auto; padding: 18px 20px 20px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg); background: #fff; box-shadow: 0 24px 60px -18px rgb(30 30 28 / 0.28); opacity: 0; translate: 0 -6px; transition: opacity 200ms var(--sl-ease), translate 200ms var(--sl-ease); }
.sl-ka-dz.is-open .sl-ka-dz__panel { opacity: 1; translate: none; }
.sl-ka-dz__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sl-ka-dz__title { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-ka-dz__close { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sl-soft); color: var(--sl-text); cursor: pointer; }
.sl-ka-dz__all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 12px 14px; border-radius: var(--sl-radius); background: var(--sl-soft); font-weight: 600; color: var(--sl-text); text-decoration: none; }
.sl-ka-dz__all:hover { background: var(--sl-soft-2); color: var(--sl-text); }
.sl-ka-dz__all[aria-current="page"] { background: var(--sl-text); color: #fff; }
.sl-ka-dz__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.sl-ka-dz__item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px 4px 4px; border-radius: var(--sl-radius); font-size: 0.9375rem; color: var(--sl-text); text-decoration: none; }
.sl-ka-dz__item:hover { background: var(--sl-soft); color: var(--sl-text); }
.sl-ka-dz__item[aria-current="page"] { background: var(--sl-soft); font-weight: 600; }
.sl-ka-dz__item .sl-ka-dz__img { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--sl-soft-2); }
.sl-ka-dz__backdrop { display: none; }
@media (max-width: 1099px) { .sl-ka-dz__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .sl-ka-dz__backdrop { position: fixed; inset: 0; z-index: 60; display: block; background: rgb(30 30 28 / 0.45); opacity: 0; transition: opacity 220ms var(--sl-ease); }
  .sl-ka-dz.is-open .sl-ka-dz__backdrop { opacity: 1; }
  .sl-ka-dz__backdrop[hidden] { display: none; }
  .sl-ka-dz__panel { position: fixed; inset: auto 0 0 0; top: auto; z-index: 61; width: auto; max-height: 82vh; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; translate: 0 100%; transition: translate 280ms var(--sl-ease), opacity 200ms var(--sl-ease); }
  .sl-ka-dz__close { display: grid; }
  .sl-ka-dz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-ka-dz__item { min-height: 52px; }
  .sl-ka-dz__item .sl-ka-dz__img { width: 44px; height: 44px; }
  body.sl-ka-dz-lock { overflow: hidden; }
}
/* On phones the switcher is a full row above room and order. */
@media (max-width: 599px) {
  .sl-ka-bar .sl-ka-dz { flex: 1 1 100%; }
  .sl-ka-dz__btn { justify-content: space-between; width: 100%; }
  .sl-ka-dz__btn .sl-ka-dz__chev { margin-left: auto; }
}

/* Dezen tiles on /foto-tapete/ only: room photos 3:4 in one row with arrows, most chosen first. */
.sl-ka-tiles { margin-bottom: clamp(20px, 2.4vw, 36px); }
.sl-ka-tiles__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sl-ka-tiles__title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 300; letter-spacing: -0.03em; }
.sl-ka-tiles__nav { display: flex; gap: 8px; }
.sl-ka-tiles__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--sl-line); border-radius: 50%; background: #fff; color: var(--sl-text); cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease); }
.sl-ka-tiles__arrow:hover:not(:disabled) { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-ka-tiles__arrow:disabled { opacity: 0.35; cursor: default; }
.sl-ka-tiles__row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 14px) / 7.3); gap: 14px; margin: 0; padding: 0 0 4px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.sl-ka-tiles__row::-webkit-scrollbar { display: none; }
.sl-ka-tiles__row > li { scroll-snap-align: start; }
.sl-ka-tile { display: block; color: var(--sl-text); text-decoration: none; }
.sl-ka-tile__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sl-radius-lg); background: var(--sl-soft); }
.sl-ka-tile__media .sl-ka-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 300ms var(--sl-ease); }
@media (hover: hover) { .sl-ka-tile:hover .sl-ka-tile__img { scale: 1.05; } }
.sl-ka-tile__name { display: block; margin-top: 8px; font-size: 0.9375rem; font-weight: 500; text-align: center; }
.sl-ka-tile:hover { color: var(--sl-accent); }
@media (max-width: 1099px) { .sl-ka-tiles__row { grid-auto-columns: calc((100% - 4 * 12px) / 4.4); gap: 12px; } }
@media (max-width: 699px) {
  .sl-ka-tiles__row { grid-auto-columns: 36%; margin-inline: calc(var(--sl-gutter) * -1); padding-inline: var(--sl-gutter); scroll-padding-inline: var(--sl-gutter); }
}
@media (prefers-reduced-motion: reduce) { .sl-ka-tiles__row { scroll-behavior: auto; } .sl-ka-dz__panel, .sl-ka-dz__backdrop { transition: none; } }

.js .sl-ka-grid > li[data-reveal] { transform: translateY(28px); transition: opacity 600ms var(--sl-ease) calc(var(--c, 0) * 70ms), transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(var(--c, 0) * 70ms); }
.js .sl-ka-grid > li[data-reveal].is-in { transform: none; }
.js .sl-ka [data-reveal]:not(.is-in) .sl-pz-w > span,
.js .sl-ka-text:not(.is-in) .sl-pz-w > span,
.js .sl-ka-faq:not(.is-in) .sl-pz-w > span,
.js .sl-ka-end:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }

/* Banners in the grid (Andrej, 24.10.2026): never wider than half the grid. A banner is the size of
   one card, photo under a dark gradient and the text at the bottom; from 1100 px the wide one takes two
   of the four columns, text on the dark left half and the photo on the right. Rows keep their height. */
.sl-ka-ban { min-width: 0; }
.sl-ka-ban__link { position: relative; display: block; height: 100%; min-height: 280px; overflow: hidden; border-radius: var(--sl-radius); background: var(--sl-accent-900); color: #fff; text-decoration: none; isolation: isolate; }
.sl-ka-ban__link:hover { color: #fff; }
.sl-ka-ban__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sl-ka-ban__media .sl-ka-ban__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale 300ms var(--sl-ease); }
.sl-ka-ban__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(30 30 28 / 0.9) 0%, rgb(30 30 28 / 0.55) 42%, rgb(30 30 28 / 0) 72%); }
@media (hover: hover) { .sl-ka-ban__link:hover .sl-ka-ban__img { scale: 1.04; } }
.sl-ka-ban__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; height: 100%; padding: clamp(14px, 1.6vw, 24px); }
.sl-ka-ban__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.82); }
.sl-ka-ban__title { display: flex; flex-direction: column; font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.875rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.035em; }
.sl-ka-ban__title strong { font-weight: 600; letter-spacing: -0.04em; }
.sl-ka-ban__text { display: none; max-width: 40ch; font-size: 0.9375rem; line-height: 1.55; color: rgb(255 255 255 / 0.85); }
.sl-ka-ban__btn { min-height: 42px; margin-top: 4px; padding: 0 18px; font-size: 0.875rem; }
.sl-ka-ban__link:hover .sl-ka-ban__btn { background: var(--sl-soft); color: var(--sl-text); }
@media (min-width: 1100px) {
  .sl-ka-ban--wide { grid-column: span 2; }
  .sl-ka-ban--wide .sl-ka-ban__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sl-ka-ban--wide .sl-ka-ban__media { position: relative; inset: auto; z-index: 0; grid-area: 1 / 2; margin: 12px 12px 12px 0; border-radius: calc(var(--sl-radius) - 4px); }
  .sl-ka-ban--wide .sl-ka-ban__media::after { content: none; }
  .sl-ka-ban--wide .sl-ka-ban__copy { grid-area: 1 / 1; justify-content: center; gap: 14px; padding: clamp(24px, 2.2vw, 40px); }
  .sl-ka-ban--wide .sl-ka-ban__title { font-size: clamp(1.875rem, 0.9rem + 1.5vw, 2.625rem); }
  .sl-ka-ban--wide .sl-ka-ban__text { display: block; }
  .sl-ka-ban--wide .sl-ka-ban__btn { min-height: 48px; padding: 0 22px; font-size: 0.9375rem; }
}
@media (min-width: 1100px) and (max-width: 1299px) { .sl-ka-ban--wide .sl-ka-ban__text { display: none; } }
@media (max-width: 599px) {
  .sl-ka-ban__copy { gap: 7px; padding: 12px; }
  .sl-ka-ban__eyebrow { font-size: 0.625rem; letter-spacing: 0.1em; }
  .sl-ka-ban__btn { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
}

.sl-ka-pager { display: grid; justify-items: center; gap: 18px; margin-top: clamp(48px, 6vw, 88px); }
.sl-ka-pager__next { min-width: min(100%, 300px); }
.sl-ka-pager__info { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }

.js .sl-ka-text[data-reveal], .js .sl-ka-faq[data-reveal], .js .sl-ka-end[data-reveal] { opacity: 1; transform: none; }
.sl-ka-text { padding-top: clamp(56px, 7vw, 120px); }
.sl-ka-text__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sl-ka-text__aside { position: sticky; top: calc(var(--sl-header-offset, 0px) + 32px); transition: top 320ms var(--sl-ease); }
.sl-ka-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-line); }
.sl-ka-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sl-line); font-size: 1.0625rem; color: var(--sl-text); text-decoration: none; }
.sl-ka-links__arrow { display: grid; place-items: center; flex: none; width: 38px; aspect-ratio: 1; border: 1px solid var(--sl-line); border-radius: 50%; transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease), rotate 400ms var(--sl-ease); }
.sl-ka-links a:hover .sl-ka-links__arrow, .sl-ka-links a:focus-visible .sl-ka-links__arrow { border-color: var(--sl-text); background: var(--sl-text); color: #fff; rotate: -45deg; }
.sl-ka-text__item { padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--sl-line); }
.sl-ka-text__item:first-child { padding-top: 0; }
.sl-ka-text__item h3 { margin: 0 0 12px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.sl-ka-text__item p { max-width: 62ch; margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--sl-text-2); }
.js .sl-ka-text:not(.is-in) .sl-ka-text__item { opacity: 0; }
.sl-ka-text.is-in .sl-ka-text__item { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(250ms + var(--n, 0) * 110ms) both; }
.sl-ka-faq { padding-top: clamp(64px, 9vw, 150px); }

/* The giraffe's head rises over the top edge, as on the sticker guide's closing panel. */
.sl-ka-end__panel { min-height: clamp(380px, 32vw, 480px); align-content: center; }
.sl-ka-end__panel--art { overflow: visible; }
.sl-ka-end__panel--art::after { content: none; }
.sl-ka-end__panel--art .sl-mt-end__title, .sl-ka-end__panel--art .sl-ka-end__text, .sl-ka-end__panel--art .sl-mt-end__cta { max-width: 62%; }
.sl-ka-end__panel .sl-ka-end__text { max-width: 52ch; }
.sl-ka-end__text { position: relative; z-index: 1; margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--sl-on-dark); }
.sl-ka-end__art { position: absolute; inset: 0 0 0 auto; width: 36%; pointer-events: none; }
/* Two classes: WooCommerce's ".woocommerce img { height: auto }" would win over one (lesson #28). */
.sl-ka-end__art .sl-ka-end__giraffe { position: absolute; right: 14%; bottom: 0; width: auto; height: 110%; transform-origin: 50% 100%; animation: sl-ka-sway 6s ease-in-out infinite; }
.sl-ka-end__art .sl-ka-end__sun { position: absolute; right: 80%; top: 16%; width: clamp(84px, 9vw, 140px); height: auto; animation: sl-pz-spin 40s linear infinite; }
@keyframes sl-ka-sway { 50% { rotate: 2.5deg; } }
.sl-ka-end__art img { transition: opacity 700ms var(--sl-ease) 400ms, translate 900ms cubic-bezier(0.2, 0.75, 0.1, 1) 400ms; }
.js .sl-ka-end:not(.is-in) .sl-ka-end__art img { opacity: 0; translate: 0 30px; }

@media (max-width: 1099px) {
  .sl-ka-hero__seal { display: none; }
}
@media (max-width: 899px) {
  .sl-ka-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sl-ka-hero__frame { aspect-ratio: 16 / 9; }
  .sl-ka-bar { position: static; margin-inline: 0; padding-inline: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sl-ka-filter { order: 3; width: 100%; }
  .sl-ka-bar { gap: 10px 12px; padding-block: 8px; }
  .sl-ka-text__in { grid-template-columns: 1fr; }
  .sl-ka-text__aside { position: static; }
  .sl-ka-end__panel--art .sl-mt-end__title, .sl-ka-end__panel--art .sl-ka-end__text, .sl-ka-end__panel--art .sl-mt-end__cta { max-width: none; }
  .sl-ka-end__panel--art { padding-bottom: 310px; }
  .sl-ka-end__art { inset: auto 0 0 0; width: 100%; height: 290px; }
  .sl-ka-end__art .sl-ka-end__giraffe { right: 10%; height: 100%; }
  .sl-ka-end__art .sl-ka-end__sun { right: auto; left: 12%; top: 18%; }
}
@media (max-width: 699px) {
  .sl-ka-hero__visual { display: none; }
  /* On phones the cards follow right after the hero, so the button that scrolls to them is left out;
     the "send a drawing" card in the grid carries the second link. */
  .sl-ka-hero__cta { display: none; }
  .sl-ka-hero__eyebrow { margin-bottom: 12px; }
  .sl-ka-hero .sl-pd-usp { margin-top: 18px; }
  .sl-ka-hero .sl-pd-usp { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sl-gutter) * -1); padding-inline: var(--sl-gutter); scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-ka-hero__lead, .sl-ka-hero__cta, .sl-ka-hero__tag { opacity: 1; animation: none !important; }
  .sl-ka-hero__frame { clip-path: none; animation: none !important; }
  .sl-ka-hero__frame .sl-ka-hero__img { height: 100%; transform: none; animation: none !important; }
  .sl-ka .sl-pz-w > span, .sl-ka-text .sl-pz-w > span, .sl-ka-faq .sl-pz-w > span, .sl-ka-end .sl-pz-w > span { transform: none; animation: none !important; }
  .js .sl-ka-grid > li[data-reveal] { transform: none; transition: none; }
  .js .sl-ka-text .sl-ka-text__item { opacity: 1; animation: none !important; }
  .sl-ka-ban__img, .sl-ka-end__art img { transition: none; }
  .sl-ka-end__giraffe, .sl-ka-end__sun { animation: none !important; }
}

/* ---------- Shop categories: stickers, posters, "beba u autu" (Andrej, 24.10.2026) ---------- */

/* Scene hero of /stikeri-za-zid/ and /posteri/: a button down to the products. */
.sl-sh__cta { margin: 6px 0 0; }
@media (max-width: 1099px) { .sl-sh--posteri .sl-sh__media { --fx: 0.63; } }
@media (max-width: 699px) { .sl-sh__cta { display: none; } }

/* Kinds of stickers as tiles: five fit in one row, so they are wider and need no arrows there. */
@media (min-width: 1100px) {
  .sl-ka-tiles--few .sl-ka-tiles__row { grid-auto-columns: calc((100% - 5 * 14px) / 6); }
  .sl-ka-tiles--few .sl-ka-tiles__nav { display: none; }
}

/* "Beba u autu" hero: three best sellers on their white card photos, fanned out. */
.sl-ka-hero__visual--fan { aspect-ratio: 3 / 2; border-radius: 28px; background: var(--sl-soft); }
.sl-ka-fan { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; }
.sl-ka-fan__card { position: absolute; left: 50%; top: 52%; width: 31%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 26px 50px -22px rgb(30 30 28 / 0.38); transform-origin: 50% 130%; translate: calc(-50% + (var(--n) - 1) * 78%) -50%; rotate: calc((var(--n) - 1) * 9deg); animation: sl-ka-fan 900ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(150ms + var(--n) * 120ms) both; }
.sl-ka-fan__card:nth-child(2) { z-index: 1; width: 34%; }
/* Two classes: WooCommerce's ".woocommerce img { height: auto }" would win over one (lesson #28). */
.sl-ka-fan__card .sl-ka-fan__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes sl-ka-fan { from { opacity: 0; translate: -50% -42%; rotate: 0deg; } }

/* Gifts hero (template-parts/mug-scene.php, Andrej 25.10.2026): the jungle mug is turned back and forth
   to show its print, and the name on the board changes at each end. 100cqw is the mug's width; the wrap
   is one turn, 314.159cqw (π × width), and 100cqw high. Each slice shows the wrap at its angle --th,
   squeezed by --cos, so the print bends around the cylinder. The name (on the board, 45.2 % into the
   wrap) and the handle (in the middle of the clear gap, 87.6 %) sit on the same cylinder, at angles from
   --mug-t. The swing keeps the print in front: at 0.18 the board is behind the right side and the handle
   on the left, which is when the name changes; at 0.62 the handle is at the back on the right. */
@property --mug-t { syntax: '<number>'; inherits: true; initial-value: 0.5; }
.sl-ka-hero__visual--mug { background: radial-gradient(circle at 47% 56%, #F8F6EF 0 31%, rgb(248 246 239 / 0) 31.3%), var(--sl-soft); }
.sl-mug { --pn: calc((-0.5 - var(--mug-t)) * 1turn); --ph: calc((-0.0764 - var(--mug-t)) * 1turn); position: absolute; left: 31%; top: 25%; width: 34%; aspect-ratio: 1 / 1.12; container-type: inline-size; animation: sl-mug-in 1000ms cubic-bezier(0.2, 0.75, 0.1, 1) 150ms both, sl-mug-turn 5.5s cubic-bezier(0.55, 0, 0.45, 1) 1s infinite alternate both; }
.sl-mug.is-paused { animation-play-state: paused; }
@keyframes sl-mug-in { from { opacity: 0; transform: translateY(28px) scale(0.96); } }
@keyframes sl-mug-turn { from { --mug-t: 0.18; } to { --mug-t: 0.62; } }
.sl-mug__body { position: absolute; inset: 0; border-radius: 1.5cqw 1.5cqw 50% 50% / 1.5cqw 1.5cqw 6cqw 6cqw; background: #fff; }
/* The rim, seen a little from above, and the inside of the mug. */
.sl-mug__body::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -5cqw; height: 10cqw; box-sizing: border-box; border: 1.6cqw solid #fff; border-radius: 50%; background: radial-gradient(ellipse at 50% 25%, #C9C1AF, #EAE6DB 72%); }
/* Light from the upper left: darker sides, a soft highlight. */
.sl-mug__body::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(58 50 36 / 0.32) 0%, rgb(58 50 36 / 0.08) 13%, rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0.5) 30%, rgb(255 255 255 / 0) 39%, rgb(58 50 36 / 0) 62%, rgb(58 50 36 / 0.12) 82%, rgb(58 50 36 / 0.36) 100%); pointer-events: none; }
.sl-mug__print { position: absolute; left: 0; right: 0; top: 6cqw; height: 100cqw; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 3cqw 3cqw; }
.sl-mug__slice { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100cqw / 24); width: calc(100cqw / 24 + 1px); background: var(--img) repeat-x; background-size: calc(314.159cqw * var(--cos)) 100%; background-position: calc(100cqw / 48 - (var(--th) * 50cqw + (0.9521 + var(--mug-t)) * 314.159cqw) * var(--cos)) 0; }
.sl-mug__name { position: absolute; z-index: 1; left: calc(50cqw + sin(var(--pn)) * 50cqw); top: 83.8cqw; font-size: 10cqw; font-weight: 600; line-height: 1; letter-spacing: 0.03em; color: #F7A823; white-space: nowrap; text-shadow: 0 0.35cqw 0 rgb(90 45 10 / 0.45); transform: translate(-50%, -50%) scaleX(cos(var(--pn))) rotate(6deg); opacity: clamp(0, cos(var(--pn)) * 4, 1); }
.sl-mug__handle { position: absolute; top: 24cqw; left: calc(50cqw + sin(var(--ph)) * 48cqw); width: 32cqw; height: 60cqw; box-sizing: border-box; border: 8cqw solid #fff; border-left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; transform-origin: 0 50%; transform: scaleX(sin(var(--ph))); }
.sl-mug__handle--back { z-index: 0; border-color: #E2DDD0; opacity: clamp(0, cos(var(--ph)) * -50, 1); }
.sl-mug__handle--front { z-index: 4; opacity: clamp(0, cos(var(--ph)) * 50, 1); filter: drop-shadow(0 0.8cqw 1.2cqw rgb(58 50 36 / 0.22)); }
.sl-mug__shadow { position: absolute; z-index: -1; left: -10cqw; right: -10cqw; bottom: -8cqw; height: 16cqw; border-radius: 50%; background: radial-gradient(closest-side, rgb(58 55 46 / 0.3), rgb(58 55 46 / 0)); }
.sl-mug__steam { position: absolute; left: 22%; bottom: 103%; width: 56%; overflow: visible; stroke: #fff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgb(58 50 36 / 0.18)); }
.sl-mug__steam path { opacity: 0; animation: sl-mug-steam 3.6s ease-in-out infinite; }
.sl-mug__steam path:nth-child(2) { animation-delay: 1.2s; }
.sl-mug__steam path:nth-child(3) { animation-delay: 2.4s; }
@keyframes sl-mug-steam { 0% { opacity: 0; transform: translateY(14px); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) {
  .sl-mug { --mug-t: 0.5; animation: none; }
  .sl-mug__steam path { opacity: 0.6; animation: none; }
}

/* Buy button under the price of every card (inc/quick-buy.php): the buy colour for "U korpu", an
   outline for products whose name or caption is chosen on their own page. */
.sl-card--buy .sl-card__body { padding-bottom: 72px; }
.sl-card__buy { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 1px solid var(--sl-buy); border-radius: var(--sl-radius-sm); background: var(--sl-buy); color: var(--sl-buy-text); font: inherit; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-card__buy:hover { border-color: var(--sl-buy-hover); background: var(--sl-buy-hover); color: var(--sl-buy-text); }
.sl-card__buy[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.sl-card__buy--link { border-color: var(--sl-line-strong); background: #fff; color: var(--sl-text); }
.sl-card__buy--link:hover { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
@media (max-width: 599px) {
  .sl-card--buy .sl-card__body { padding-bottom: 62px; }
  .sl-card__buy { left: 8px; right: 8px; bottom: 8px; min-height: 46px; gap: 6px; padding: 0 6px; font-size: 0.8125rem; letter-spacing: 0.03em; }
  .sl-card__buy svg { width: 17px; height: 17px; }
  .sl-card__buy--link .sl-icon--arrow { display: none; }
}

/* Size dialog of the quick buy: in the middle on computers, a sheet from the bottom on phones. */
.sl-qb { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto; border: 0; border-radius: var(--sl-radius-lg); background: #fff; color: var(--sl-text); box-shadow: 0 30px 80px -20px rgb(30 30 28 / 0.45); }
.sl-qb::backdrop { background: rgb(30 30 28 / 0.45); }
.sl-qb[open] { animation: sl-qb-in 260ms var(--sl-ease); }
@keyframes sl-qb-in { from { opacity: 0; translate: 0 16px; } }
.sl-qb__card { position: relative; display: grid; gap: 20px; padding: 24px; }
.sl-qb__close { position: absolute; top: 12px; right: 12px; }
.sl-qb__head { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.sl-qb__thumb { flex: none; width: 80px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--sl-soft); }
.sl-qb .sl-qb__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-qb__name { margin: 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.25; }
.sl-qb__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.875rem; color: var(--sl-text-2); text-decoration: underline; text-underline-offset: 4px; }
.sl-qb__more:hover { color: var(--sl-text); }
.sl-qb__groups { display: grid; gap: 18px; }
.sl-qb__loading { margin: 0; color: var(--sl-muted); }
.sl-qb__label { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-qb__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sl-qb__opt { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-radius); background: #fff; font: inherit; font-size: 0.9375rem; line-height: 1.25; text-align: center; color: var(--sl-text); cursor: pointer; transition: background-color var(--sl-dur) var(--sl-ease), border-color var(--sl-dur) var(--sl-ease), color var(--sl-dur) var(--sl-ease); }
.sl-qb__opt small { font-size: 0.8125rem; font-weight: 600; color: var(--sl-accent); }
.sl-qb__opt:hover:not(:disabled) { border-color: var(--sl-text); }
.sl-qb__opt[aria-pressed="true"] { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-qb__opt[aria-pressed="true"] small { color: var(--sl-on-dark); }
.sl-qb__opt:disabled { opacity: 0.4; cursor: not-allowed; }
.sl-qb__error { margin: 0; padding: 10px 14px; border-radius: var(--sl-radius-sm); background: #FBEDE8; font-size: 0.9375rem; color: #8A2E16; }
.sl-qb__foot { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sl-line); }
.sl-qb__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--sl-text-2); }
.sl-qb__price strong { font-size: 1.5rem; font-weight: 600; color: var(--sl-text); }
.sl-qb__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; text-align: center; color: var(--sl-muted); }
@media (max-width: 599px) {
  .sl-qb { width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .sl-qb[open] { animation-name: sl-qb-up; }
  .sl-qb__card { gap: 16px; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
  .sl-qb__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-qb .sl-btn--buy { font-size: 1.1875rem; }
}
@keyframes sl-qb-up { from { translate: 0 100%; } }
@media (prefers-reduced-motion: reduce) {
  .sl-qb[open] { animation: none; }
  .sl-ka-fan__card { animation: none; }
}

/* -------------------------------------------------------------------------------------------------
   /kontakt/ (page-kontakt.php, Andrej 25.10.2026): a postcard to the shop in the hero (the stamp gets
   its postmark, the address writes itself), four ways to reach us as large cards that fill dark on
   hover, the message form in the dark panel of "Tapete po želji", the map of Serbia next to the company
   card and the help links. Classes sl-ct-*, next to sl-pz-*, sl-mt-*, sl-ab-* and sl-kx*.
   ------------------------------------------------------------------------------------------------- */
.js .sl-ct > [data-reveal] { opacity: 1; transform: none; }
.js .sl-ct > [data-reveal]:not(.is-in) .sl-pz-w > span { animation-play-state: paused; }
.sl-ct-hero__grid { align-items: center; }


/* Postcard: sizes inside the written side follow its width (container units). */
.sl-ct-post { position: relative; width: min(100%, 660px); aspect-ratio: 1 / 0.9; margin: 0 0 0 auto; }
.sl-ct-post__photo { position: absolute; left: 0; top: 2%; width: 72%; aspect-ratio: 3 / 2; padding: 10px; border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -30px rgb(30 30 28 / 0.5); rotate: -7deg; opacity: 0; animation: sl-ct-drop 900ms cubic-bezier(0.2, 0.8, 0.25, 1.05) 200ms forwards; }
.sl-ct-post__photo img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.sl-ct-post__card { position: absolute; right: 0; bottom: 4%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 86%; aspect-ratio: 3 / 2; padding: clamp(16px, 3.4%, 30px); border-radius: 8px; background: #FBFAF6; box-shadow: 0 44px 80px -34px rgb(30 30 28 / 0.55), 0 2px 6px rgb(30 30 28 / 0.06); container-type: inline-size; rotate: 3deg; opacity: 0; animation: sl-ct-rise 1000ms cubic-bezier(0.2, 0.8, 0.25, 1.05) 450ms forwards; }
@keyframes sl-ct-drop { from { opacity: 0; transform: translateY(-36px) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes sl-ct-rise { from { opacity: 0; transform: translateY(44px) rotate(5deg); } to { opacity: 1; transform: none; } }
.sl-ct-post__msg { display: flex; flex-direction: column; gap: 3cqw; min-width: 0; padding-right: 4.5cqw; border-right: 1px solid var(--sl-line); }
.sl-ct-post__hello { font-size: 7cqw; font-weight: 300; line-height: 1; letter-spacing: -0.035em; color: var(--sl-text); }
.sl-ct-post__text { font-size: 3.5cqw; line-height: 1.5; color: var(--sl-text-2); }
.sl-ct-post__sign { margin-top: auto; font-size: 4cqw; font-weight: 600; letter-spacing: -0.02em; color: var(--sl-accent); }
.sl-ct-post__side { position: relative; display: flex; flex-direction: column; min-width: 0; padding-left: 5cqw; }

/* Stamp: perforated edge from a mask, half circles punched along every side. */
.sl-ct-post__stamp { align-self: flex-end; width: 19cqw; filter: drop-shadow(0 1px 2px rgb(30 30 28 / 0.28)); rotate: 4deg; }
.sl-ct-post__stamp-img { --r: 0.8cqw; display: block; aspect-ratio: 4 / 5; padding: 1.6cqw; background: #fff;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 95%, #000) calc(var(--r) * -1.25) calc(var(--r) * -1.25) / calc(var(--r) * 2.5) calc(var(--r) * 2.5);
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 95%, #000) calc(var(--r) * -1.25) calc(var(--r) * -1.25) / calc(var(--r) * 2.5) calc(var(--r) * 2.5); }
.sl-ct-post__stamp-img::before { content: ""; display: block; width: 100%; height: 100%; background: var(--sl-soft) url(../img/montaza-dezen.webp) center / cover no-repeat; }

/* Postmark: lands on the stamp with a small bounce once the cards are down. */
.sl-ct-post__mark { position: absolute; top: 11cqw; right: 7cqw; width: 34cqw; overflow: visible; fill: none; stroke: var(--sl-accent); stroke-width: 2; opacity: 0; rotate: -12deg; transform-origin: 68% 50%; animation: sl-ct-stamp 650ms cubic-bezier(0.3, 1.4, 0.5, 1) 1500ms forwards; mix-blend-mode: multiply; }
.sl-ct-post__mark text { fill: var(--sl-accent); stroke: none; font-family: var(--sl-font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; }
.sl-ct-post__mark .sl-ct-post__year { font-size: 17px; font-weight: 500; letter-spacing: 0.04em; }
@keyframes sl-ct-stamp { 0% { opacity: 0; scale: 1.6; } 55% { opacity: 0.85; scale: 0.94; } 100% { opacity: 0.72; scale: 1; } }

/* Address: lines on the card, the words write themselves from the left. */
.sl-ct-post__to { display: grid; gap: 2.2cqw; margin-top: auto; }
.sl-ct-post__to span { padding-bottom: 1.1cqw; border-bottom: 1px solid var(--sl-line); font-size: 3.6cqw; line-height: 1.3; white-space: nowrap;
  background: linear-gradient(90deg, var(--sl-text) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sl-ct-write 700ms cubic-bezier(0.45, 0, 0.3, 1) calc(1900ms + var(--n) * 320ms) forwards; }
.sl-ct-post__to span:first-child { font-weight: 600; }
@keyframes sl-ct-write { to { background-position: 0 0; } }

.sl-ct .sl-ct-chip { left: -5%; bottom: auto; top: calc(50% + 100px); z-index: 3; } /* 100px lower than first set, clear of the message (Andrej, 25.10.2026) */

/* Ways to reach us: the dark fill grows from the arrow corner; nothing moves on hover. */
.sl-ct-ways { margin-top: clamp(16px, 3vw, 48px); }
.sl-ct-ways__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.sl-ct-way { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(290px, 24vw, 360px); padding: clamp(22px, 2.2vw, 32px); overflow: hidden; border: 1px solid var(--sl-line); border-radius: 28px; background: #fff; color: var(--sl-text); transition: color 450ms var(--sl-ease), border-color 450ms var(--sl-ease); }
.sl-ct-way--phone { border-color: var(--sl-soft); background: var(--sl-soft); }
.sl-ct-way::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--sl-accent-900); clip-path: circle(0% at 88% 88%); transition: clip-path 700ms cubic-bezier(0.7, 0, 0.2, 1); }
.sl-ct-way:hover::before, .sl-ct-way:focus-within::before { clip-path: circle(150% at 88% 88%); }
.sl-ct-way:hover, .sl-ct-way:focus-within { border-color: var(--sl-accent-900); color: #fff; }
.sl-ct-way__icon { display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); transition: background-color 450ms var(--sl-ease), color 450ms var(--sl-ease); }
.sl-ct-way--phone .sl-ct-way__icon { background: #fff; }
.sl-ct-way:hover .sl-ct-way__icon, .sl-ct-way:focus-within .sl-ct-way__icon { background: rgb(255 255 255 / 0.1); color: #fff; }
.sl-ct-way__eyebrow { margin: auto 0 8px; padding-top: 28px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); transition: color 450ms var(--sl-ease); }
.sl-ct-way .sl-ct-way__link, .sl-ct-way .sl-ct-way__link:hover { color: inherit; text-decoration: none; }
.sl-ct-way__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.sl-ct-way__link:focus-visible { outline: none; }
.sl-ct-way:has(.sl-ct-way__link:focus-visible) { outline: 2px solid var(--sl-text); outline-offset: 3px; }
.sl-ct-way__value { display: block; font-size: clamp(1.5rem, 0.95rem + 1.2vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sl-ct-way--phone .sl-ct-way__value { font-weight: 600; letter-spacing: -0.02em; }
.sl-ct-way--mail .sl-ct-way__value { font-size: clamp(1.25rem, 0.85rem + 0.8vw, 1.75rem); }
.sl-ct-way__hint { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--sl-text-2); transition: color 450ms var(--sl-ease); }
.sl-ct-way:hover .sl-ct-way__eyebrow, .sl-ct-way:focus-within .sl-ct-way__eyebrow { color: var(--sl-on-dark-muted); }
.sl-ct-way:hover .sl-ct-way__hint, .sl-ct-way:focus-within .sl-ct-way__hint { color: var(--sl-on-dark); }
.sl-ct-way__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.sl-ct-way:hover .sl-ct-way__go, .sl-ct-way:focus-within .sl-ct-way__go { border-color: #fff; background: #fff; color: var(--sl-text); transform: rotate(-45deg); }
.sl-ct-way__copy { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-right: auto; padding: 0 16px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-pill); background: transparent; color: inherit; font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 300ms var(--sl-ease), border-color 300ms var(--sl-ease); }
.sl-ct-way__copy svg { display: none; }
.sl-ct-way__copy.is-done svg { display: block; }
.sl-ct-way:hover .sl-ct-way__copy, .sl-ct-way:focus-within .sl-ct-way__copy { border-color: rgb(236 235 222 / 0.45); }
.sl-ct-way__copy:hover { background: rgb(255 255 255 / 0.12); }
.sl-ct-way__copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.js .sl-ct-ways:not(.is-in) .sl-ct-way { opacity: 0; }
.sl-ct-ways.is-in .sl-ct-way { animation: sl-pz-fade 700ms var(--sl-ease) calc(150ms + var(--n) * 90ms) both; }

/* Message form: the dark panel of /tapete-po-zelji/, with a lower drop zone for the optional file. */
.sl-ct-form-sec { margin-top: clamp(64px, 9vw, 140px); }
.sl-ct-form__aside-note { margin: 24px 0 0; padding: 16px 20px; border: 1px solid rgb(236 235 222 / 0.25); border-radius: 18px; font-size: 0.9375rem; line-height: 1.55; color: var(--sl-on-dark); }
.sl-ct-form__aside-note a { color: #fff; text-underline-offset: 3px; }
.sl-ct-attach .sl-pz-label { margin-bottom: 12px; }
.sl-pz-drop.sl-ct-drop { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 18px; padding: 20px 22px; text-align: left; }
.sl-ct-drop .sl-pz-drop__icon { width: 52px; margin: 0; }
.sl-ct-drop__copy { display: grid; gap: 4px; }

/* Map and company card. */
.sl-ct-where__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(14px, 1.6vw, 24px); }
.sl-ct-where__map { display: flex; align-items: center; gap: clamp(28px, 4vw, 72px); padding: clamp(26px, 3.4vw, 56px); border-radius: 28px; background: var(--sl-soft); }
.sl-ct .sl-ct-map { height: clamp(260px, 24vw, 340px); margin: 0; }
.js .sl-ct-where:not(.is-in) .sl-mt-map__land { stroke-dashoffset: 1; fill-opacity: 0; }
.sl-ct-where.is-in .sl-mt-map__land { animation: sl-mt-draw 2000ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both, sl-mt-fill 900ms var(--sl-ease) 1900ms both; }
.js .sl-ct-where:not(.is-in) .sl-mt-map__city { opacity: 0; }
.sl-ct-where.is-in .sl-mt-map__city { animation: sl-mt-pop 500ms cubic-bezier(0.2, 0.8, 0.25, 1.3) 2300ms both; }
.sl-ct-where .sl-mt-title { margin-bottom: 18px; font-size: clamp(2.125rem, 1.2rem + 2.4vw, 3.75rem); }
.sl-ct-where__text { max-width: 40ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-ct-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.sl-ct-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-pill); font-weight: 500; color: var(--sl-text); text-decoration: none; transition: background-color 300ms var(--sl-ease), color 300ms var(--sl-ease), border-color 300ms var(--sl-ease); }
.sl-ct-social a:hover, .sl-ct-social a:focus-visible { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-ab-card.sl-ct-card { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--sl-line); background: #fff; }
.sl-ct-card dd a { color: inherit; text-underline-offset: 3px; }

/* Help links. */
.sl-ct-help { margin-top: clamp(64px, 9vw, 140px); margin-bottom: 70px; }
.sl-ct-help__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.sl-ct-help .sl-mt-title { margin-bottom: 18px; }
.sl-ct-help__text { max-width: 40ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sl-text-2); }
.sl-ct-help__links { margin-top: 0; }

@media (max-width: 1099px) {
  .sl-ct-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-ct-where__in { grid-template-columns: 1fr; }
}
@media (max-width: 999px) {
  .sl-ct-post { width: 92%; margin: 12px 0 0 auto; }
  .sl-ct-form__aside-note { order: 2; }
  .sl-ct-help__in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 699px) {
  .sl-ct-post { width: 100%; aspect-ratio: 1 / 0.86; }
  .sl-ct-post__photo { width: 78%; }
  .sl-ct-post__card { bottom: 2%; width: 96%; }
  .sl-ct-post__text { font-size: 4cqw; }
  .sl-ct .sl-ct-chip { display: none; } /* Andrej, 25.10.2026: not on phones */
  .sl-ct-where__map { flex-direction: column; align-items: stretch; }
  .sl-ct .sl-ct-map { height: 240px; margin: 0 auto; }
}
@media (max-width: 599px) {
  .sl-ct-ways__grid { grid-template-columns: 1fr; }
  /* Phones: each way is one compact row, icon left and arrow right; the mailto link does the copying job. */
  .sl-ct-way { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 0; padding: 18px 18px 18px 20px; border-radius: 22px; }
  .sl-ct-way__icon { grid-row: 1 / 4; width: 52px; }
  .sl-ct-way__eyebrow { margin: 0 0 4px; padding: 0; }
  .sl-ct-way__value { font-size: 1.375rem; }
  .sl-ct-way--mail .sl-ct-way__value { font-size: 1.1875rem; }
  .sl-ct-way__hint { margin-top: 4px; font-size: 0.875rem; }
  .sl-ct-way__foot { grid-column: 3; grid-row: 1 / 4; margin: 0; }
  .sl-ct-way__copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-ct-post__photo, .sl-ct-post__card, .sl-ct-ways.is-in .sl-ct-way, .js .sl-ct-ways:not(.is-in) .sl-ct-way { opacity: 1; animation: none; }
  .sl-ct-post__mark { opacity: 0.72; animation: none; }
  .sl-ct-post__to span { background-position: 0 0; animation: none; }
  .sl-ct .sl-ct-chip { animation: none; opacity: 1; }
  .sl-ct-way::before { transition: none; }
  .sl-ct-where .sl-mt-map__land, .sl-ct-where .sl-mt-map__city { animation: none; opacity: 1; stroke-dashoffset: 0; fill-opacity: 1; }
}

/* ---------- Account: header icon and panel, "Moj nalog" (Andrej, 26.10.2026) ---------- */

/* The account icon sits in the same filled circle as the heart, one shade darker on hover (Andrej, 26.10.2026). */
.sl-header .sl-acct__link { background: var(--sl-soft-2); }
.sl-header .sl-acct__link:hover, .sl-acct:focus-within .sl-acct__link { background: var(--sl-soft); }
.sl-acct { position: relative; }
/* Phones and tablets: no room beside the cart, "Moj nalog" is a line in the drawer (inc/nav.php). */
@media (max-width: 899px) { .sl-header .sl-acct { display: none; } }

/* The panel opens on hover or focus (wide screens with a pointer); padding-top bridges the gap, and
   visibility waits for the fade, so a short slip of the pointer does not close it. */
.sl-acct__panel { position: absolute; z-index: 60; top: 100%; right: -64px; width: 352px; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 200ms var(--sl-ease), transform 200ms var(--sl-ease), visibility 0s linear 200ms; }
@media (hover: hover) and (min-width: 900px) {
  .sl-acct:hover .sl-acct__panel, .sl-acct:focus-within .sl-acct__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.sl-acct.is-closed .sl-acct__panel { opacity: 0; visibility: hidden; transition: none; }
.woocommerce-account .sl-acct__panel { display: none; } /* the page itself is the form */
.sl-acct__card { position: relative; padding: 24px 26px 22px; overflow: hidden; border: 1px solid var(--sl-line); border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -28px rgb(30 30 28 / 0.35), 0 2px 6px rgb(30 30 28 / 0.05); }
.sl-acct__card::before { content: ""; position: absolute; top: -70px; right: -70px; width: 170px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft); pointer-events: none; }
.sl-acct__eyebrow, .sl-ac__eyebrow { position: relative; margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-acct__title { position: relative; margin: 0 0 18px; font-size: 1.875rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.04em; color: var(--sl-text); }
.sl-acct__title strong { font-weight: 600; letter-spacing: -0.05em; }
.sl-acct__block[hidden], .js .sl-acct.is-pending .sl-acct__block { display: none; }
/* While wc-ajax=sl_account answers: a thin line that runs under the eyebrow. */
.js .sl-acct.is-pending .sl-acct__eyebrow::after { content: ""; display: block; width: 100%; height: 2px; margin: 18px 0 4px; background: linear-gradient(90deg, transparent, var(--sl-sand), transparent) 0 0 / 40% 100% no-repeat var(--sl-soft-2); animation: sl-acct-load 1.1s linear infinite; }
@keyframes sl-acct-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.sl-acct__form { display: grid; gap: 12px; }
.sl-acct__field { display: grid; gap: 2px; }
.sl-acct__field span { font-size: 0.8125rem; font-weight: 500; color: var(--sl-muted); }
.sl-acct__field input { width: 100%; padding: 8px 0 9px; border: 0; border-bottom: 1px solid var(--sl-line-strong); border-radius: 0; background: linear-gradient(var(--sl-text), var(--sl-text)) 0 100% / 0% 2px no-repeat; color: var(--sl-text); font: inherit; font-size: 1.0625rem; transition: background-size 450ms var(--sl-ease); }
.sl-acct__field input:focus { outline: none; background-size: 100% 2px; }
.sl-acct__form .sl-btn { margin-top: 6px; }
.sl-acct__lost { justify-self: center; font-size: 0.875rem; color: var(--sl-muted); text-underline-offset: 3px; }
.sl-acct__lost:hover { color: var(--sl-text); }
.sl-acct__reg { margin: 18px -26px -22px; padding: 16px 26px 18px; background: var(--sl-soft-2); font-size: 0.875rem; line-height: 1.5; color: var(--sl-text-2); }
.sl-acct__reg a { font-weight: 600; color: var(--sl-text); text-underline-offset: 3px; }
.sl-acct__links { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sl-line); }
.sl-acct__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 0; border-top: 1px solid var(--sl-line); color: var(--sl-text); font-size: 1.25rem; font-weight: 300; letter-spacing: -0.02em; text-decoration: none; }
.sl-acct__line .sl-kx__go { width: 34px; }
.sl-acct__line:hover .sl-kx__go, .sl-acct__line:focus-visible .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
.sl-acct__out { display: inline-block; margin-top: 16px; font-size: 0.875rem; font-weight: 500; color: var(--sl-muted); text-underline-offset: 3px; }
.sl-acct__out:hover { color: var(--sl-error); }

/* "Moj nalog" page: a big light heading, then sign-in on a white card and a new account in the dark panel. */
.sl-ac { padding-bottom: 70px; }
.sl-ac__head { margin: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 52px); }
.sl-ac__title { margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-ac__lead { max-width: 52ch; margin: 18px 0 0; font-size: var(--sl-fs-lead); line-height: 1.6; color: var(--sl-text-2); }
.sl-ac__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.sl-ac__grid--one { grid-template-columns: minmax(0, 560px); }
.sl-ac__card { padding: clamp(26px, 3.4vw, 52px); border: 1px solid var(--sl-line); border-radius: clamp(22px, 2.6vw, 32px); background: #fff; }
.sl-ac__h { margin: 0 0 24px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 400; letter-spacing: -0.03em; }
.sl-shop .woocommerce .sl-ac__form .form-row { margin-bottom: 18px; }
/* WooCommerce frames form.login and form.register; here the card and the panel are the frame. */
.sl-shop .woocommerce form.sl-ac__form { margin: 0; padding: 0; border: 0; border-radius: 0; }
.sl-shop .woocommerce form.sl-ac__form--dark { margin-top: auto; padding-top: clamp(28px, 3vw, 40px); }
.sl-ac__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 4px 0 22px; }
.sl-ac__check { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; cursor: pointer; }
.sl-ac__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sl-text); }
.sl-ac__lost { font-size: 0.9375rem; color: var(--sl-muted); text-underline-offset: 3px; }
.sl-ac__lost:hover { color: var(--sl-text); }
.sl-shop .woocommerce .sl-ac__submit { min-height: 58px; font-size: 1.0625rem; }
.sl-ac__fine { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--sl-line); font-size: 0.875rem; line-height: 1.55; color: var(--sl-muted); }

.sl-ac__panel { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 52px); overflow: hidden; border-radius: clamp(22px, 2.6vw, 32px); background: var(--sl-accent-900); color: var(--sl-on-dark); scroll-margin-top: 100px; }
.sl-ac__panel::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -18%; width: 42%; height: 136%; background: url(../img/montaza-dezen.webp) center / cover no-repeat; opacity: 0.4; rotate: 6deg; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent); animation: sl-pz-float 9s ease-in-out infinite; pointer-events: none; }
.sl-ac__panel-title { max-width: 14ch; margin: 0; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: #fff; }
.sl-ac__panel-title strong { display: block; font-weight: 600; letter-spacing: -0.05em; }
.sl-ac__panel-lead { max-width: 40ch; margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.6; }
.sl-ac__perks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--sl-on-dark); }
.sl-ac__perks li { display: flex; align-items: center; gap: 12px; }
.sl-ac__perks .sl-icon { flex: none; color: var(--sl-on-dark-muted); }
.sl-ac__form--dark { display: grid; gap: 22px; max-width: 520px; margin-top: auto; padding-top: clamp(28px, 3vw, 40px); }
.sl-ac__form--dark .woocommerce-privacy-policy-text p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--sl-on-dark-muted); }
.sl-ac__form--dark .woocommerce-privacy-policy-text a { color: var(--sl-on-dark); text-underline-offset: 3px; }
.sl-shop .woocommerce .sl-ac__form--dark .sl-btn { justify-self: start; min-height: 58px; padding: 0 30px; border: 0; background: var(--sl-on-dark); color: var(--sl-text); font-size: 1.0625rem; }
.sl-shop .woocommerce .sl-ac__form--dark .sl-btn:hover { background: #fff; color: var(--sl-text); }

/* Signed in: the menu as lines on the left, the content on the right. */
.sl-ac__layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.sl-ac__nav { position: sticky; top: calc(var(--sl-header-offset, 0px) + 24px); transition: top 320ms var(--sl-ease); }
.sl-ac__nav .sl-kx__links { margin: 0; }
.sl-ac__nav .sl-kx__link { padding: 12px 0; font-size: 1.3125rem; }
.sl-ac__nav .sl-kx__link.is-current { font-weight: 500; }
.sl-ac__nav .sl-kx__link.is-current .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; }
.sl-ac__nav .woocommerce-MyAccount-navigation-link--customer-logout .sl-kx__link { color: var(--sl-muted); font-size: 1rem; }
.sl-ac__nav .woocommerce-MyAccount-navigation-link--customer-logout .sl-kx__go { display: none; }
.sl-ac__content { min-width: 0; }
/* woocommerce-layout.css floats these at 30 % and 68 %; the grid places them here. */
.woocommerce-account .sl-ac .woocommerce-MyAccount-navigation, .woocommerce-account .sl-ac .woocommerce-MyAccount-content { float: none; width: auto; }
.sl-ac__content > p:first-child { margin-top: 0; }
.sl-ac-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sl-ac-tile { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 210px; padding: 24px 24px 22px; border: 1px solid var(--sl-line); border-radius: 22px; background: #fff; color: var(--sl-text); text-decoration: none; transition: border-color var(--sl-dur) var(--sl-ease), background-color var(--sl-dur) var(--sl-ease); }
.sl-ac-tile:hover { border-color: var(--sl-text); background: var(--sl-soft-2); color: var(--sl-text); }
.sl-ac-tile__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
.sl-ac-tile__big { margin-top: auto; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.sl-ac-tile__big--sm { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; }
.sl-ac-tile__text { padding-right: 44px; font-size: 0.875rem; line-height: 1.5; color: var(--sl-muted); }
.sl-ac-tile .sl-kx__go { position: absolute; right: 20px; bottom: 20px; }
.sl-ac-tile:hover .sl-kx__go, .sl-ac-tile:focus-visible .sl-kx__go { border-color: var(--sl-text); background: var(--sl-text); color: #fff; transform: rotate(-45deg); }
.sl-ac-back { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; margin-top: 16px; padding: clamp(26px, 3vw, 44px); overflow: hidden; border-radius: 22px; background: var(--sl-accent-900); color: var(--sl-on-dark); }
.sl-ac-back::after { content: ""; position: absolute; z-index: -1; right: -4%; top: -40%; width: 30%; height: 180%; background: url(../img/montaza-dezen.webp) center / cover no-repeat; opacity: 0.35; rotate: 6deg; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent); pointer-events: none; }
.sl-ac-back__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.sl-ac-back__title strong { font-weight: 600; letter-spacing: -0.05em; }
.sl-ac-back__cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* WooCommerce's own account sections (orders, addresses, account details) in the same tone. */
.sl-ac__content .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sl-ac__content .woocommerce-Addresses::before, .sl-ac__content .woocommerce-Addresses::after { content: none; }
.sl-ac__content .woocommerce-Address { float: none; width: auto; max-width: none; padding: 24px; border: 1px solid var(--sl-line); border-radius: 22px; }
.sl-ac__content .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.sl-ac__content .woocommerce-Address-title h2, .sl-ac__content h2 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; }
.sl-ac__content address { font-style: normal; line-height: 1.6; }
.sl-ac__content fieldset { margin: 24px 0; padding: 20px 22px 6px; border: 1px solid var(--sl-line); border-radius: 18px; }
.sl-ac__content legend { padding: 0 8px; font-weight: 500; }
.sl-ac__content .woocommerce-orders-table { background: #fff; }

@media (max-width: 999px) {
  .sl-ac__grid, .sl-ac__layout { grid-template-columns: minmax(0, 1fr); }
  .sl-ac__nav { position: static; }
  .sl-ac-tile { min-height: 0; }
}
@media (max-width: 599px) {
  .sl-ac__panel::after { width: 60%; opacity: 0.25; }
  .sl-ac-back__cta .sl-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-ac .sl-pz-w > span { transform: none; animation: none !important; }
  .sl-ac__panel::after { animation: none; }
  .js .sl-acct.is-pending .sl-acct__eyebrow::after { animation: none; }
  .sl-acct__panel { transition: none; }
}

/* ---------- Shop page /prodavnica/ (Andrej, 26.10.2026) ---------- */

/* The H1 large on the left, the lead and the promises on the right, then every category as a mosaic. */
.sl-shp-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin: clamp(8px, 1.5vw, 20px) 0 clamp(28px, 3.4vw, 52px); }
.sl-shp-hero__title { max-width: 12ch; }
.sl-shp-hero__side { padding-bottom: 6px; }
.sl-shp-hero__side .sl-ka-hero__lead { margin-top: 0; }
.sl-shp-cats { margin-bottom: clamp(40px, 5vw, 80px); }
.sl-shp-cats__title { margin-bottom: 16px; }
.sl-shp-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 17vw, 270px); grid-auto-flow: dense; gap: clamp(10px, 1.1vw, 16px); margin: 0; padding: 0; list-style: none; }
.sl-shp-cat { animation: sl-stx-rise 800ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(200ms + var(--c, 0) * 70ms) both; }
.sl-shp-cat--big { grid-column: span 2; }
.sl-shp-cat--big:first-child { grid-row: span 2; }
.sl-shp-cat__link { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: 100%; padding: clamp(16px, 1.6vw, 26px); overflow: hidden; border-radius: clamp(18px, 1.8vw, 26px); background: var(--sl-soft); color: #fff; text-decoration: none; }
/* The global link hover would turn the white name grey on light photos (Andrej, 26.10.2026), so it stays white. */
.sl-shp-cat__link:hover, .sl-shp-cat__link:focus-visible { color: #fff; }
.sl-shp-cat__link::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgb(30 30 28 / 0.78) 0%, rgb(30 30 28 / 0.3) 40%, transparent 72%); }
.sl-shp-cat__media { position: absolute; z-index: -2; inset: 0; }
.sl-shp-cat__media .sl-shp-cat__img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--sl-ease); }
.sl-shp-cat__link:hover .sl-shp-cat__img, .sl-shp-cat__link:focus-visible .sl-shp-cat__img { scale: 1.05; }
.sl-shp-cat__copy { display: grid; gap: 4px; padding-right: 48px; text-shadow: 0 1px 12px rgb(30 30 28 / 0.35); }
.sl-shp-cat__name { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; }
.sl-shp-cat--big .sl-shp-cat__name { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.75rem); letter-spacing: -0.045em; }
.sl-shp-cat--big:first-child .sl-shp-cat__name { font-weight: 600; letter-spacing: -0.05em; }
.sl-shp-cat__note { font-size: 0.875rem; line-height: 1.4; color: rgb(255 255 255 / 0.86); }
.sl-shp-cat .sl-shp-cat__go { position: absolute; right: clamp(14px, 1.4vw, 22px); bottom: clamp(14px, 1.4vw, 22px); border-color: rgb(255 255 255 / 0.6); color: #fff; }
.sl-shp-cat__link:hover .sl-shp-cat__go, .sl-shp-cat__link:focus-visible .sl-shp-cat__go { border-color: #fff; background: #fff; color: var(--sl-text); transform: rotate(-45deg); }
.sl-shp-cat__link:focus-visible { outline: 2px solid var(--sl-text); outline-offset: 3px; }
.sl-shp-reset { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--sl-muted); text-underline-offset: 3px; }
.sl-shp-reset:hover { color: var(--sl-text); }

@media (max-width: 899px) {
  .sl-shp-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sl-shp-hero__title { max-width: none; }
}
@media (max-width: 699px) {
  .sl-shp-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .sl-shp-cat--big:first-child { grid-row: span 1; }
  .sl-shp-cat--big { grid-row: span 1; }
  .sl-shp-cat__copy { padding-right: 0; }
  .sl-shp-cat:not(.sl-shp-cat--big) .sl-shp-cat__go { display: none; }
  .sl-shp-cat:not(.sl-shp-cat--big) .sl-shp-cat__note { font-size: 0.8125rem; }
  .sl-shp-cat--big .sl-shp-cat__copy { padding-right: 48px; }
  .sl-shp-reset { order: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-shp-cat { animation: none; }
  .sl-shp-cat__media .sl-shp-cat__img { transition: none; }
}
/* Second switcher on the shop page (Andrej, 26.10.2026): dezeni or kinds of the chosen group, with room photos;
   the 21 photo wallpaper dezeni sit in two columns. On phones group and dezen share a row, sorting gets its own. */
.sl-shp-sub .sl-ka-dz__item { justify-content: flex-start; }
.sl-shp-sub .sl-ka-dz__item > .sl-icon { margin-left: auto; }
.sl-shp-sub--many .sl-ka-dz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sl-cat__sort > .sl-ka-dz.sl-shp-sub--many .sl-ka-dz__panel { width: 540px; } }
@media (max-width: 599px) {
  .sl-cat__sort:has(> .sl-shp-sub) { flex-wrap: wrap; }
  .sl-cat__sort:has(> .sl-shp-sub) > .sl-ka-dz--pick:last-child { flex-basis: 100%; }
}

/* Omiljeni proizvodi, /wishlist/ (page-wishlist.php, Andrej 27.10.2026): editorial title, the shop's own
   cards rising in one after another, and an empty state with a heart that sends small hearts upward. */
.sl-wl { --sl-out: cubic-bezier(0.16, 1, 0.3, 1); }
.sl-wl-hero { padding: var(--sl-space-4) 0 clamp(32px, 4.5vw, 64px); }
.sl-wl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 5vw, 96px); align-items: end; margin-top: clamp(12px, 2vw, 28px); }
.sl-wl-hero__title { margin: 0; font-size: clamp(2.75rem, 1.2rem + 5vw, 6.5rem); font-weight: 300; line-height: 0.96; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-wl-hero__side { padding-bottom: 0.4em; }
.sl-wl-hero__side .sl-wl-hero__lead { margin-top: 18px; }
.sl-wl-count { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 1.125rem; color: var(--sl-text); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 500ms forwards; }
.sl-wl-count strong { font-weight: 600; }
.sl-wl-count__heart { display: grid; place-items: center; flex: none; width: 46px; aspect-ratio: 1; border-radius: 50%; background: var(--sl-soft-2); color: var(--sl-heart); }
.sl-wl-count__heart svg { fill: currentColor; animation: sl-heartbeat 7s ease-in-out 1.5s infinite; }
.sl-wl-list { padding-bottom: 70px; }
.sl-wl-grid > li { animation: sl-wl-in 800ms var(--sl-out) calc(450ms + var(--n, 0) * 70ms) both; }
.sl-wl-grid > li.is-leaving { pointer-events: none; animation: sl-wl-out 360ms var(--sl-ease) forwards; }
@keyframes sl-wl-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sl-wl-out { to { opacity: 0; transform: scale(0.92); } }
.sl-wl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--sl-line); }
.sl-wl-foot .sl-btn { margin-left: auto; }
.sl-wl-foot__note { max-width: 56ch; margin: 0; color: var(--sl-text-2); line-height: 1.55; }
.sl-wl-foot__note a { color: var(--sl-text); font-weight: 500; text-underline-offset: 0.18em; }
.sl-wl-empty { padding-bottom: 70px; }
.sl-wl-empty__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 56px); border-radius: clamp(20px, 2.4vw, 32px); background: var(--sl-soft); }
.sl-wl-empty__art { position: relative; display: grid; place-items: center; width: 170px; aspect-ratio: 1; margin: 12px; border-radius: 50%; background: #fff; opacity: 0; animation: sl-pz-fade 800ms var(--sl-ease) 200ms forwards; }
.sl-wl-empty__ring { position: absolute; inset: -10px; border: 1px dashed var(--sl-sand); border-radius: 50%; animation: sl-se-spin 40s linear infinite; }
.sl-wl-empty__heart { display: grid; color: var(--sl-text); }
.sl-wl-empty__heart svg { width: 58px; height: 58px; stroke-width: 1.2; animation: sl-heartbeat 6s ease-in-out 1.4s infinite; }
.sl-wl-empty__float { position: absolute; left: var(--x); bottom: 46%; color: var(--sl-accent); opacity: 0; animation: sl-wl-float 4.8s ease-in var(--d) infinite; }
.sl-wl-empty__float svg { fill: currentColor; }
@keyframes sl-wl-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  18% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-70px) scale(1) rotate(var(--r)); }
}
.sl-wl-empty__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--sl-text); }
.sl-wl-empty__text { max-width: 60ch; margin: 10px 0 0; font-size: 1rem; line-height: 1.6; color: var(--sl-text-2); opacity: 0; animation: sl-pz-fade 700ms var(--sl-ease) 650ms forwards; }
.sl-wl-empty .sl-kx__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 18px; }
.sl-wl-empty .sl-kx__link { padding: 6px 0; font-size: 1.0625rem; }
.sl-wl-empty .sl-kx__go { width: 32px; }
.sl-wl-empty .sl-kx__links li { animation: sl-pz-fade 600ms var(--sl-out) calc(750ms + var(--i, 0) * 80ms) both; }
@media (max-width: 899px) {
  .sl-wl-hero__grid, .sl-wl-empty__in { grid-template-columns: minmax(0, 1fr); }
  .sl-wl-hero__side { padding-bottom: 0; }
  .sl-wl-empty__art { width: 120px; }
  .sl-wl-empty__heart svg { width: 44px; height: 44px; }
  .sl-wl-foot .sl-btn { width: 100%; margin-left: 0; }
}
@media (max-width: 599px) { .sl-wl-empty .sl-kx__links { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .sl-wl-grid > li, .sl-wl-grid > li.is-leaving, .sl-wl-empty__float, .sl-wl-empty__ring, .sl-wl-empty__heart svg, .sl-wl-count__heart svg { animation: none; }
  .sl-wl-empty__float { display: none; }
  .sl-wl-count, .sl-wl-empty__art, .sl-wl-empty__text, .sl-wl-empty .sl-kx__links li { animation: none; opacity: 1; }
}