/* ═══════════════════════════════════════════════════════════════════════════
   TPC City Maribor – AFFILIATE KATALOG (javna stran)
   Mobile-first. Barve prevzame iz style.css, poudarno barvo nastavi partner
   prek spremenljivke --aff na .aff-page.
   ═══════════════════════════════════════════════════════════════════════════ */

.aff-page {
  /* Odmika lepljivih delov. Privzetka veljata, dokler jih JS ne izmeri
     (glej »Odmiki lepljivih delov« v includes/affiliate_cats.php).
     Zapisana sta na :root, zato ju tu samo uporabljamo. */
  --aff: #d42b24;
  --aff-dk: color-mix(in srgb, var(--aff) 82%, #000);
  --aff-lt: color-mix(in srgb, var(--aff) 10%, #fff);
  padding-bottom: 84px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .aff-page, .aff-inq { --aff-dk: #b01e18; --aff-lt: #fce8e7; }
}

/* ── Gumbi ───────────────────────────────────────────────────────────────── */
.btn-aff {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-md);
  background: var(--aff); color: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--aff) 32%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-align: center; line-height: 1.2;
}
/* Pomembno: --aff-dk ima rezervo var(--aff). Gumb lahko stoji tudi zunaj
   .aff-page (npr. v oknu za povpraševanje, ki visi na koncu dokumenta); tam
   --aff-dk ni določen in brez rezerve bi bilo ozadje ob prehodu z miško
   prosojno – bel napis na beli podlagi. */
.btn-aff:hover { background: var(--aff-dk, var(--aff)); transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--aff) 40%, transparent); color:#fff; }
.btn-aff:active { transform: translateY(0); }
.btn-aff-lg    { min-height: 58px; padding: 0 30px; font-size: 1.05rem; border-radius: var(--r-lg); }
.btn-aff-sm    { min-height: 44px; padding: 0 18px; font-size: .88rem; }
.btn-aff-block { width: 100%; }
.btn-aff-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .92rem; transition: var(--transition);
}
.btn-aff-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.aff-hero {
  margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 0;
  background: linear-gradient(135deg, var(--nav), var(--nav-2));
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
@media (min-width: 980px) { .aff-hero { grid-template-columns: 1.6fr 1fr; margin-top: 18px; } }

/* ── Zložena glava v pogledu kategorije ────────────────────────────────────
   Predstavitev trgovine je obiskovalec videl na prvi strani kataloga. Ko
   gleda kategorijo ali zadetke iskanja, mu ista glava vzame pol zaslona in
   do izdelkov se mora pomikati – zato je takrat zložena na eno vrstico.
   Izmerjeno: 526 px → pod 150 px. */
.aff-hero.is-ozka { grid-template-columns: 1fr; }
@media (min-width: 980px) { .aff-hero.is-ozka { grid-template-columns: 1fr; margin-top: 14px; } }

.aff-hero.is-ozka .aff-hero-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 18px;
}
@media (min-width: 700px) { .aff-hero.is-ozka .aff-hero-main { padding: 16px 24px; } }

.aff-hero.is-ozka .aff-hero-brand { margin: 0; flex: 1 1 260px; min-width: 0; gap: 12px; }
.aff-hero.is-ozka .aff-hero-logo { width: 46px; height: 46px; padding: 5px; flex: 0 0 auto; }
.aff-hero.is-ozka .aff-eyebrow { font-size: .66rem; margin-bottom: 1px; }
.aff-hero.is-ozka h1 {
  font-size: clamp(1.05rem, .8rem + 1vw, 1.4rem); line-height: 1.2; margin: 0;
}
.aff-hero.is-ozka .aff-hero-vrsta {
  flex: 1 1 100%; margin: 0; order: 3;
  font-size: .82rem; color: rgba(255,255,255,.72);
}
.aff-hero.is-ozka .aff-hero-vrsta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.aff-hero.is-ozka .aff-hero-cta { margin: 0; flex: 0 0 auto; }
.aff-hero.is-ozka .aff-hero-cta .btn-aff { min-height: 44px; font-size: .92rem; padding: 0 20px; }
.aff-hero.is-ozka .aff-badge-top { position: static; margin: 0; align-self: center; }

@media (max-width: 560px) {
  .aff-hero.is-ozka .aff-hero-cta { flex: 1 1 100%; }
  .aff-hero.is-ozka .aff-hero-cta .btn-aff { width: 100%; }
}
.aff-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--aff) 34%, transparent), transparent 46%),
    radial-gradient(circle at 8% 96%, rgba(120,180,255,.16), transparent 44%);
}
.aff-hero-main { position: relative; z-index: 1; padding: 24px 20px 26px; color: #fff; }
@media (min-width: 700px)  { .aff-hero-main { padding: 34px 30px; } }
@media (min-width: 1100px) { .aff-hero-main { padding: 46px 44px; } }

.aff-badge-top {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 7px 15px; border-radius: 999px; background: var(--aff); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--aff) 40%, transparent);
}
.aff-hero-brand { display: flex; align-items: center; gap: 16px; }
.aff-hero-brand { align-items: center; }
.aff-hero-logo {
  height: 88px; min-width: 88px; max-width: 240px; flex: 0 0 auto;
  border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.24);
  display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden;
}
@media (max-width: 560px) { .aff-hero-logo { height: 72px; min-width: 72px; max-width: 180px; padding: 8px; } }
/* Slika se prilagodi škatli: kvadratna maskota in širok logotip sta oba poravnana */
.aff-hero-logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.aff-eyebrow {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--aff) 70%, #fff);
  margin-bottom: 5px;
}
.aff-hero h1 { font-size: clamp(1.45rem, 4.6vw, 2.6rem); color: #fff; line-height: 1.08; }
.aff-hero-intro { color: rgba(255,255,255,.8); font-size: clamp(.92rem, 2vw, 1.06rem); line-height: 1.7; margin-top: 14px; max-width: 56ch; }
.aff-hero-intro strong { color: #fff; }
.aff-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.aff-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 0; }
.aff-trust li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: .85rem; font-weight: 500; }
.aff-trust li span {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.12); font-size: .68rem; color: #7ee2b0;
}

.aff-hero-side { position: relative; z-index: 1; padding: 0 20px 24px; }
@media (min-width: 700px)  { .aff-hero-side { padding: 0 30px 30px; } }
@media (min-width: 980px)  { .aff-hero-side { padding: 46px 40px 46px 0; display: flex; align-items: center; } }
.aff-side-card {
  width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: 20px; backdrop-filter: blur(6px);
}
.aff-side-card h2 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.aff-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; }
.aff-steps li { display: flex; gap: 12px; align-items: flex-start; }
.aff-steps b {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--aff); color: #fff; font-family: var(--font-head); font-size: .8rem; font-weight: 800;
}
.aff-steps strong { display: block; color: #fff; font-family: var(--font-head); font-size: .9rem; }
.aff-steps span { display: block; color: rgba(255,255,255,.65); font-size: .82rem; line-height: 1.5; margin-top: 2px; }
.aff-side-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.6;
}

/* ── Obvestilo o odgovornosti ────────────────────────────────────────────── */
.aff-legal {
  margin-top: 12px; display: flex; gap: 14px; align-items: flex-start;
  background: #fffaf0; border: 1px solid #e3cd9c;
  border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.aff-legal-ic { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
/* Samo naslov obvestila je v svoji vrstici. Prej je pravilo veljalo za vsak
   <strong> v bloku, zato je poudarjeno ime trgovca sredi povedi prelomilo
   vrstico in vejica za njim je pristala na začetku naslednje. */
.aff-legal > div > strong:first-child {
  display: block; font-family: var(--font-head); font-size: .97rem; color: #6b4a08;
}
.aff-legal p strong { font-weight: 700; color: #6b4a08; }
.aff-legal p { color: #7a6236; font-size: .86rem; line-height: 1.65; margin-top: 5px; }

/* Privzeta odmika, dokler jih JS ne izmeri. */
:root { --aff-glava: 82px; --aff-filtri: 64px; }

/* Koliko prostora zasedeta glava in vrstica s filtri skupaj – po tem se
   ravnata lepljiv stranski stolpec in skok na sidro. */
:root { --aff-vrh: calc(var(--aff-glava) + var(--aff-filtri) + 10px); }

/* ── Filtri ──────────────────────────────────────────────────────────────── */
.aff-filters {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm);
  position: sticky; top: var(--aff-glava); z-index: 40;
  /* Skok na #izdelki mora pristati POD glavo, ne za njo. */
  scroll-margin-top: calc(var(--aff-glava) + 8px);
}
@media (min-width: 700px) { .aff-filters { padding: 16px 18px; } }
.aff-filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aff-search { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.aff-search svg {
  position: absolute; left: 12px; width: 18px; height: 18px; fill: none;
  stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.aff-search input {
  width: 100%; min-height: 46px; padding: 0 14px 0 38px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: .93rem;
}
.aff-search input:focus { outline: 2px solid color-mix(in srgb, var(--aff) 45%, transparent); outline-offset: 1px; background: #fff; }
.aff-filters select {
  min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--text); max-width: 100%;
}
.aff-clear { align-self: center; font-size: .85rem; font-weight: 600; color: var(--muted); padding: 0 6px; }
.aff-clear:hover { color: var(--aff); }
/* Stoji pod lepljivo vrstico s filtri (ne v njej), zato ima svoj odmik. */
.aff-result-count {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 12px 2px 0; font-size: .84rem; color: var(--muted); font-weight: 600;
}

/* Izbira števila izdelkov na stran – drobna, ob številu zadetkov. */
.aff-perpage { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.aff-perpage-lab { font-weight: 600; color: var(--muted); }
.aff-perpage a, .aff-perpage b {
  display: inline-block; min-width: 30px; padding: 3px 8px; border-radius: 999px;
  text-align: center; font-size: .82rem; font-weight: 700; text-decoration: none;
  color: var(--muted); background: var(--surface, #f2f4f8);
}
.aff-perpage a:hover { background: var(--aff-lt, #fce8e7); color: var(--aff, #d42b24); }
.aff-perpage b { background: var(--aff, #d42b24); color: #fff; }
@media (max-width: 560px) { .aff-perpage { margin-left: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SPROTNO ISKANJE
   ---------------------------------------------------------------------------
   Zadetki padejo pod polje, s sliko in ceno. Slika je tu bistvena: pri
   metlicah brisalcev je razlika med modeli vidna prej na sliki kot v nazivu.
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-isk-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--surface, #f2f4f8); color: var(--muted, #6b6b76);
  font-size: .8rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.aff-isk-x:hover { background: #e6e9ef; color: var(--ink, #1b1b1f); }

.aff-isk-panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(66vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e6ea);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(15, 25, 40, .16);
  scrollbar-width: thin;
}
.aff-isk-panel[hidden] { display: none !important; }
.aff-isk-panel::-webkit-scrollbar { width: 8px; }
.aff-isk-panel::-webkit-scrollbar-thumb { background: #d8d8de; border-radius: 4px; }

.aff-isk-vrst {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--line, #eef0f4);
}
.aff-isk-vrst:last-child { border-bottom: 0; }
.aff-isk-vrst:hover, .aff-isk-vrst.is-on { background: var(--aff-lt, #fce8e7); }

.aff-isk-sl {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 9px;
  background: #f5f5f8; overflow: hidden; display: grid; place-items: center;
}
.aff-isk-sl img { width: 100%; height: 100%; object-fit: contain; }
.aff-isk-sl.is-prazna::after { content: '🛍️'; font-size: 1.1rem; opacity: .5; }

.aff-isk-txt { min-width: 0; flex: 1 1 auto; }
.aff-isk-naz {
  display: block; font-size: .88rem; font-weight: 600; line-height: 1.35; color: var(--ink, #1b1b1f);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aff-isk-pod { display: block; font-size: .74rem; color: var(--muted, #6b6b76); margin-top: 2px; }
.aff-isk-des { flex: 0 0 auto; text-align: right; }
.aff-isk-cen { display: block; font-weight: 800; font-size: .92rem; color: var(--aff, #d42b24); white-space: nowrap; }
.aff-isk-zal { display: block; font-size: .7rem; color: var(--muted, #6b6b76); white-space: nowrap; }
.aff-isk-zal.je { color: #0d7a52; }

.aff-isk-noga {
  display: block; padding: 10px 12px; text-align: center; font-size: .84rem; font-weight: 700;
  color: var(--aff, #d42b24); text-decoration: none; background: var(--surface, #f8f9fb);
  border-top: 1px solid var(--line, #e6e6ea); position: sticky; bottom: 0;
}
.aff-isk-noga:hover { text-decoration: underline; }
.aff-isk-prazno, .aff-isk-caka {
  padding: 16px 14px; text-align: center; font-size: .85rem; color: var(--muted, #6b6b76);
}
.aff-isk-oznaka { background: color-mix(in srgb, var(--aff, #d42b24) 14%, #fff); border-radius: 3px; }

@media (max-width: 560px) {
  .aff-isk-panel { max-height: 62vh; }
  .aff-isk-sl { width: 42px; height: 42px; }
}

/* ── Mreža izdelkov ──────────────────────────────────────────────────────── */
.aff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 620px)  { .aff-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px)  { .aff-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1300px) { .aff-grid { grid-template-columns: repeat(5, 1fr); } }

.aff-card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.aff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--aff) 35%, var(--line)); }

.aff-card-media {
  position: relative; aspect-ratio: 1 / 1; background: #fff;
  display: grid; place-items: center; padding: 10px; border-bottom: 1px solid var(--line); overflow: hidden;
}
.aff-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s ease; }
.aff-card:hover .aff-card-media img { transform: scale(1.05); }
.aff-card-media.is-noimg::after { content: '🛍️'; font-size: 2rem; opacity: .3; }
.aff-noimg { font-size: 2rem; opacity: .3; }
.aff-tag-disc {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--aff); color: #fff; border-radius: 999px; padding: 4px 11px;
  font-family: var(--font-head); font-weight: 800; font-size: .76rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--aff) 40%, transparent);
}
.aff-quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.94);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--nav);
  cursor: pointer; opacity: 0; transform: translateY(6px); transition: .18s ease;
}
.aff-card:hover .aff-quick { opacity: 1; transform: translateY(0); }
@media (hover: none) { .aff-quick { opacity: 1; transform: none; } }

.aff-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 700px) { .aff-card-body { padding: 14px; } }
.aff-brand {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.aff-name {
  font-size: .92rem; line-height: 1.32; font-weight: 700; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aff-name a { color: inherit; }
.aff-name a:hover { color: var(--aff); }
a.aff-card-media { text-decoration: none; }
.aff-card-more {
  display: block; text-align: center; margin-top: 8px; font-size: .78rem; font-weight: 700;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.aff-card-more:hover { color: var(--aff); }
.aff-quick { pointer-events: none; display: grid; place-items: center; }
.aff-short {
  font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aff-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.aff-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: #eef3f8; border: 1px solid #dde5ee; font-size: .71rem; font-weight: 600; color: #48607a;
}
.aff-chip-ok { background: #e9f7f0; border-color: #b6e0cb; color: #14724d; }
.aff-chip-no { background: #fdeeed; border-color: #f0c4c0; color: #9c2e26; }
a.aff-chip:hover { border-color: var(--aff); color: var(--aff); }

.aff-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.aff-price { font-family: var(--font-head); font-weight: 800; font-size: 1.24rem; color: var(--text); }
.aff-price-old { font-size: .86rem; color: var(--muted); }
.aff-price-note { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }

.aff-card-cta { padding: 0 12px 12px; }
@media (min-width: 700px) { .aff-card-cta { padding: 0 14px 14px; } }
.aff-cta-note { display: block; text-align: center; font-size: .69rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* ── Prazno stanje ───────────────────────────────────────────────────────── */
.aff-empty { text-align: center; padding: 50px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: 14px; }
.aff-empty-ic { font-size: 2.6rem; margin-bottom: 12px; }
.aff-empty h2 { font-size: 1.25rem; margin-bottom: 6px; }
.aff-empty p { color: var(--muted); margin-bottom: 18px; }

/* ── Strani ──────────────────────────────────────────────────────────────── */
.aff-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.aff-pager a {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--text); transition: var(--transition);
}
.aff-pager a:hover { border-color: var(--aff); color: var(--aff); }
.aff-pager a.is-current { background: var(--aff); border-color: var(--aff); color: #fff; }
.aff-dots { align-self: center; color: var(--muted); padding: 0 4px; }

/* ── Zaključni CTA ───────────────────────────────────────────────────────── */
.aff-final {
  margin-top: 22px; display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(135deg, var(--nav), var(--nav-2)); color: #fff;
  border-radius: var(--r-xl); padding: 26px 20px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
@media (min-width: 860px) { .aff-final { flex-direction: row; align-items: center; justify-content: space-between; padding: 34px 36px; } }
.aff-final::after {
  content: ''; position: absolute; right: -70px; bottom: -110px; width: 300px; height: 300px;
  border-radius: 50%; background: color-mix(in srgb, var(--aff) 22%, transparent);
}
.aff-final > * { position: relative; z-index: 1; }
.aff-final h2 { color: #fff; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.aff-final p { color: rgba(255,255,255,.75); margin-top: 8px; font-size: .93rem; line-height: 1.65; max-width: 52ch; }
.aff-final-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Pravno v nogi ───────────────────────────────────────────────────────── */
.aff-legal-foot {
  margin-top: 16px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  font-size: .81rem; color: var(--muted); line-height: 1.7;
}
.aff-legal-foot strong { color: var(--text); }
p.aff-legal-date { margin-top: 8px; }
.aff-legal-date { display: block; margin-top: 8px; font-size: .76rem; opacity: .85; }

/* ── Lepljivi CTA ────────────────────────────────────────────────────────── */
.aff-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: rgba(15,31,48,.97); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -8px 30px rgba(0,0,0,.28);
  transform: translateY(110%); transition: transform .28s ease;
}
.aff-sticky.is-on { transform: translateY(0); }
.aff-sticky-txt strong { display: block; color: #fff; font-family: var(--font-head); font-size: .92rem; line-height: 1.2; }
.aff-sticky-txt span { display: block; color: rgba(255,255,255,.6); font-size: .76rem; }
.aff-sticky .btn-aff { min-height: 44px; padding: 0 18px; font-size: .88rem; white-space: nowrap; }
@media (min-width: 980px) { .aff-sticky { left: auto; right: 22px; bottom: 22px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); min-width: 330px; } }

/* ── Hitri pogled ────────────────────────────────────────────────────────── */
.aff-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(10,20,32,.72); backdrop-filter: blur(4px);
}
.aff-modal.is-open { display: flex; }
.aff-modal-box {
  position: relative; width: 100%; max-width: 860px; max-height: 90vh; overflow: auto;
  background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .aff-modal-box { grid-template-columns: 1fr 1fr; } }
.aff-modal-x {
  position: absolute; top: 10px; right: 12px; z-index: 3; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--text);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.aff-modal-x:hover { background: var(--surface); }
.aff-modal-media { background: #fff; display: grid; place-items: center; padding: 26px; min-height: 220px; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .aff-modal-media { border-bottom: 0; border-right: 1px solid var(--line); } }
.aff-modal-media img { max-width: 100%; max-height: 340px; object-fit: contain; }
.aff-modal-body { padding: 22px; display: flex; flex-direction: column; }
.aff-modal-body h3 { font-size: 1.22rem; line-height: 1.28; margin-bottom: 10px; }
.aff-modal-desc {
  color: var(--muted); font-size: .88rem; line-height: 1.72; margin: 12px 0 18px;
  max-height: 220px; overflow: auto;
}
.aff-modal-note { font-size: .76rem; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.5; }

/* ── Tisk ────────────────────────────────────────────────────────────────── */
@media print {
  .aff-sticky, .aff-quick, .aff-filters, .aff-modal, .aff-hero-cta { display: none !important; }
  .aff-card { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Promo blok na strani trgovine (/trgovina/<slug>)
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-promo {
  --aff: #d42b24;
  margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 0;
  background: linear-gradient(135deg, var(--nav), var(--nav-2));
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
@media (min-width: 900px) { .aff-promo { grid-template-columns: 1.25fr 1fr; align-items: center; } }
.aff-promo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--aff) 30%, transparent), transparent 48%);
}
.aff-promo-txt { position: relative; z-index: 1; padding: 22px 20px; color: #fff; }
@media (min-width: 700px) { .aff-promo-txt { padding: 30px 30px; } }
.aff-promo-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.aff-promo h2 { color: #fff; font-size: clamp(1.2rem, 3.2vw, 1.85rem); line-height: 1.15; }
.aff-promo p { color: rgba(255,255,255,.76); font-size: .93rem; line-height: 1.7; margin-top: 10px; max-width: 52ch; }
.aff-promo p strong { color: #fff; }
.aff-promo-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.aff-promo-link { color: rgba(255,255,255,.8); font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.aff-promo-link:hover { color: #fff; }

/* Kartica ima zaobljene vogale in overflow:hidden, zato mora imeti trak
   slik ob vsakem robu vsaj toliko prostora, kolikor meri polmer zaobljenosti
   (--r-xl, do 22 px) – sicer lok odreže vogal skrajne slike. Prav to se je
   videlo na strani trgovine: slike v vrsti so bile ob robu odrezane.

   Zato odmiki niso več stalne številke, ampak najmanj polmer zaobljenosti. */
.aff-promo-strip {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 0 max(20px, var(--r-xl)) max(22px, var(--r-xl));
  min-width: 0;
}
@media (min-width: 700px) {
  .aff-promo-strip { padding: 0 max(30px, var(--r-xl)) max(30px, var(--r-xl)); }
}
@media (min-width: 900px) {
  /* Na širokem zaslonu je trak desni stolpec kartice: levo se dotika besedila
     (tam vogala ni in odmik ni potreben), zgoraj, desno in spodaj pa se
     dotika roba. */
  .aff-promo-strip {
    padding: max(24px, var(--r-xl)) max(30px, var(--r-xl)) max(24px, var(--r-xl)) 0;
    align-content: center;
  }
}
.aff-promo-thumb {
  aspect-ratio: 1/1; background: #fff; border-radius: var(--r-md); padding: 8px;
  display: grid; place-items: center; overflow: hidden; transition: transform .18s ease;
  min-width: 0;
}
.aff-promo-thumb:hover { transform: translateY(-3px); }
/* width/height 100% + object-fit: slika se ne razteza in ne uhaja iz ploščice
   niti takrat, kadar je iz vira prišla zelo široka ali zelo visoka. */
.aff-promo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   Stran posameznega izdelka  /katalog/<trgovina>/<naziv>-p<id>
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-pd {
  margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow);
}
@media (min-width: 860px) { .aff-pd { grid-template-columns: 1fr 1fr; margin-top: 18px; } }

.aff-pd-media {
  position: relative; background: #fff; display: grid; place-items: center;
  padding: 26px; min-height: 300px; border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .aff-pd-media { border-bottom: 0; border-right: 1px solid var(--line); min-height: 420px; } }
.aff-pd-media img { max-width: 100%; max-height: 440px; object-fit: contain; }
.aff-pd-media.is-noimg::after { content: '🛍️'; font-size: 3rem; opacity: .28; }

.aff-pd-info { padding: 22px 20px 24px; display: flex; flex-direction: column; }
@media (min-width: 700px) { .aff-pd-info { padding: 30px 28px; } }
.aff-pd-title { font-size: clamp(1.25rem, 3.2vw, 1.9rem); line-height: 1.2; margin-top: 4px; }
.aff-pd-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.aff-pd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.aff-pd-price .aff-price { font-size: 1.9rem; }
.aff-pd-cta { margin-top: 20px; }
.aff-pd-specs { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.aff-pd-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .86rem; }
.aff-pd-specs dt { color: var(--muted); }
.aff-pd-specs dd { font-family: var(--font-head); font-weight: 700; text-align: right; }

.aff-pd-desc {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) { .aff-pd-desc { padding: 24px 26px; } }
.aff-pd-desc h2 { font-size: 1.1rem; margin-bottom: 10px; }
.aff-pd-desc p { color: var(--muted); font-size: .93rem; line-height: 1.8; margin-bottom: 10px; max-width: 78ch; }
.aff-pd-desc p:last-child { margin-bottom: 0; }

.aff-pd-rel { margin-top: 22px; }
.aff-pd-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.aff-pd-rel-head h2 { font-size: clamp(1.05rem, 2.6vw, 1.35rem); }
.btn-aff-link { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--aff); }
.btn-aff-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Uvodni odstavek na strani izdelka */
.aff-pd-lead {
  margin: 2px 0 10px; font-size: 1rem; line-height: 1.6; color: #4a5c6f;
}


/* ═══════════════════════════════════════════════════════════════════════
   STRAN IZDELKA – galerija, gumb nazaj, dvostolpična postavitev
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Gumb nazaj na kategorijo ─────────────────────────────────────────── */
.aff-pd-back { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.aff-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  color: var(--ink, #16232e); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.aff-back-btn:hover { border-color: var(--aff); transform: translateX(-2px); }
.aff-back-btn span { font-size: 1.05rem; line-height: 1; }
.aff-back-alt { font-size: .84rem; color: var(--muted); text-decoration: none; }
.aff-back-alt:hover { color: var(--aff); text-decoration: underline; }

/* ── Galerija slik ────────────────────────────────────────────────────── */
.aff-pd-gal { display: flex; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .aff-pd-gal { border-bottom: 0; border-right: 1px solid var(--line); } }
.aff-pd-gal .aff-pd-media { border-bottom: 0; border-right: 0; flex: 1 1 auto; }

.aff-pd-thumbs {
  display: flex; gap: 10px; padding: 14px 16px 16px; overflow-x: auto;
  scrollbar-width: thin;
  /* Brez tega je vrstica prilepljena na glavno sliko. */
  margin-top: 2px;
}
@media (min-width: 700px) { .aff-pd-thumbs { padding: 16px 22px 20px; } }
.aff-thumb {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 5px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 11px;
  display: grid; place-items: center; transition: border-color .15s, transform .15s;
}
.aff-thumb:hover { border-color: #9fb2c6; transform: translateY(-1px); }
/* Obroč izbrane sličice rišemo NAVZNOTER (outline z negativnim odmikom).
   Prej je box-shadow segal 2 px čez okvir, jedel razmik do sosede in se ob
   robu vrstice odrezal – zato so bili razmiki videti neenaki. */
.aff-thumb.is-on {
  border-color: var(--aff);
  outline: 2px solid color-mix(in srgb, var(--aff) 35%, transparent);
  outline-offset: -1px;
}
.aff-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ── Opis z drugo sliko ob strani ─────────────────────────────────────── */
.aff-pd-desc.has-img { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 780px) {
  .aff-pd-desc.has-img { grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr); gap: 26px; }
}
.aff-pd-desc-txt { min-width: 0; }
.aff-pd-desc-txt .btn-aff { margin-top: 14px; }
.aff-pd-desc-img { margin: 0; }
.aff-pd-desc-img img {
  display: block; width: 100%; max-height: 280px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px;
}
.aff-pd-desc-img figcaption {
  margin-top: 8px; font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.5;
}

/* ── Dvostolpična postavitev: stranski meni kategorij + izdelek ───────── */
.aff-pd-wrap { display: block; }
.aff-pd-main { min-width: 0; }

@media (min-width: 1000px) {
  .aff-pd-sidebar .aff-pd-wrap {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start;
  }
  /* v ožjem stolpcu slika in podatki drug pod drugim berejo bolje */
  .aff-pd-sidebar .aff-pd { grid-template-columns: 1fr; }
  .aff-pd-sidebar .aff-pd-gal { border-right: 0; border-bottom: 1px solid var(--line); }
  .aff-pd-sidebar .aff-pd-media { min-height: 340px; }
}
@media (min-width: 1240px) {
  .aff-pd-sidebar .aff-pd { grid-template-columns: 1fr 1fr; }
  .aff-pd-sidebar .aff-pd-gal { border-right: 1px solid var(--line); border-bottom: 0; }
}

.aff-pd-side { display: grid; gap: 14px; margin-top: 12px; }
/* Na strani izdelka ni vrstice s filtri, je pa lepljiva glava (top: 8px,
   ~74px visoka) – stolpec se ustavi tik pod njo. */
@media (min-width: 1000px) { .aff-pd-side { margin-top: 18px; position: sticky; top: calc(var(--aff-glava) + 12px); } }
.aff-side-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 15px; box-shadow: var(--shadow-sm);
}
.aff-side-title { font-size: .95rem; margin: 0 0 10px; }
.aff-side-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 460px; overflow-y: auto; }
.aff-side-cats a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px; text-decoration: none;
  font-size: .87rem; color: var(--ink, #16232e); line-height: 1.35;
}
.aff-side-cats a:hover { background: #f2f6fa; }
.aff-side-cats a.is-on { background: color-mix(in srgb, var(--aff) 10%, #fff); color: var(--aff); font-weight: 700; }
.aff-side-cats a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aff-side-cats a b { flex: 0 0 auto; font-size: .74rem; font-weight: 600; color: var(--muted); }
.aff-side-cats a.is-on b { color: var(--aff); }
.aff-side-cta strong { display: block; font-family: var(--font-head); font-size: .95rem; }
.aff-side-cta p { margin: 5px 0 11px; font-size: .82rem; color: var(--muted); line-height: 1.55; }

.btn-aff-sm { padding: 9px 18px; font-size: .86rem; }

/* ═══════════════════════════════════════════════════════════════════════
   KLIC TRGOVCU IN ZNAKI ZAUPANJA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kartica za klic (stran izdelka) – nizka in kompaktna ────────────── */
.aff-call {
  display: flex; align-items: center; gap: 11px; margin-top: 14px;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--aff) 28%, #dfe7ee);
  background: color-mix(in srgb, var(--aff) 5%, #fff);
}
.aff-call-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--aff);
}
.aff-call-ic svg { width: 16px; height: 16px; }
.aff-call-txt { min-width: 0; }
.aff-call-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0;
}
.aff-call-lead { font-size: .82rem; color: var(--muted); }
.aff-call-num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; line-height: 1.25;
  color: var(--aff); text-decoration: none; letter-spacing: .01em; white-space: nowrap;
}
.aff-call-num:hover { text-decoration: underline; }
.aff-call-sub {
  margin: 1px 0 0; font-size: .74rem; color: var(--muted); line-height: 1.45;
}

/* ── Klic v stranski kartici kataloga ─────────────────────────────────── */
/* Napis in številka stojita v isti vrstici (ovoj .aff-call-row), kartica pa
   je široka toliko, kot je vsebina – ne čez ves stolpec. Prej je bila vsaka
   postavka v svoji vrstici in kartica je bila po nepotrebnem visoka in
   razpotegnjena. */
.aff-side-call {
  display: flex; flex-direction: column; gap: 3px;
  width: fit-content; max-width: 100%;
  margin-top: 14px; padding: 10px 13px; border-radius: var(--r-md, 12px);
  border: 1px solid color-mix(in srgb, var(--aff) 24%, #e2e8f0);
  background: color-mix(in srgb, var(--aff) 5%, #fff);
}
.aff-side-call .aff-call-num { font-size: 1.15rem; }

/* ── Znaki zaupanja ───────────────────────────────────────────────────── */
.aff-bdgs { list-style: none; margin: 0; padding: 0; }
.aff-bdg-ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* na strani izdelka – kvadratne, nizke ploščice: ikona zgoraj, napis spodaj.
   Širina je nastavljena tako, da gre v vrsto 4–5 znakov. */
.aff-bdgs-wrap { margin-top: 16px; }
.aff-bdgs-card {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
.aff-bdgs-card li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-width: 0; aspect-ratio: 1 / 1; max-height: 92px;
  padding: 7px 5px; border-radius: 11px;
  border: 1px solid var(--line); background: #fff; text-align: center;
}
.aff-bdgs-card li .aff-bdg-ic { width: 24px; height: 24px; color: var(--aff); }
.aff-bdgs-card li span {
  font-size: .68rem; line-height: 1.22; color: var(--ink, #16232e);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; hyphens: auto;
}
.aff-bdgs-note { display: block; margin-top: 7px; font-size: .74rem; color: var(--muted); }

/* v glavi kataloga – svetle značke na temni podlagi */
.aff-bdgs-hero { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.aff-bdgs-hero li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .81rem; font-weight: 500;
}
.aff-bdgs-hero .aff-bdg-ic { width: 17px; height: 17px; opacity: .92; }

@media (max-width: 460px) {
  .aff-bdgs-card { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .aff-bdgs-card li { max-height: 82px; padding: 6px 3px; }
  .aff-bdgs-card li .aff-bdg-ic { width: 21px; height: 21px; }
  .aff-bdgs-card li span { font-size: .63rem; }
  .aff-call-num { font-size: 1.18rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   POSTAVITEV – varovala, da se stran ne stisne
   ═══════════════════════════════════════════════════════════════════════ */

/* Dvostolpična mreža velja SAMO, kadar stranski stolpec res obstaja.
   :has() je dodatno varovalo, če bi kdaj razred ostal na ovoju brez stolpca. */
@media (min-width: 1000px) {
  .aff-pd-sidebar .aff-pd-wrap:not(:has(.aff-pd-side)) { display: block; }
}

/* Izdelek brez slike: praznega stolpca sploh ne prikažemo. */
.aff-pd-noimg .aff-pd { grid-template-columns: 1fr; }
.aff-pd-noimg .aff-pd-gal { display: none; }

/* Gumbi in besedila se v ozkem stolpcu ne smejo izliti iz kartice. */
.aff-pd, .aff-pd-info, .aff-pd-gal, .aff-pd-main, .aff-pd-wrap { min-width: 0; }
.btn-aff { max-width: 100%; overflow-wrap: anywhere; }
.btn-aff-block { width: 100%; box-sizing: border-box; }
.aff-pd-title, .aff-price-note, .aff-cta-note { overflow-wrap: anywhere; }
.aff-pd-specs dd { overflow-wrap: anywhere; }


/* ═══════════════════════════════════════════════════════════════════════
   BOGATO BESEDILO OPISA (ohranjeno oblikovanje iz vira)
   ═══════════════════════════════════════════════════════════════════════ */
.aff-rich { color: var(--muted); font-size: .93rem; line-height: 1.8; max-width: 78ch; }
.aff-rich > *:first-child { margin-top: 0; }
.aff-rich > *:last-child  { margin-bottom: 0; }
.aff-rich p { margin: 0 0 12px; }
.aff-rich strong, .aff-rich b { color: var(--ink, #16232e); font-weight: 700; }
.aff-rich em, .aff-rich i { font-style: italic; }
.aff-rich h3, .aff-rich h4, .aff-rich h5, .aff-rich h6 {
  margin: 18px 0 8px; color: var(--ink, #16232e); font-family: var(--font-head);
  font-size: 1rem; line-height: 1.35;
}
.aff-rich ul, .aff-rich ol { margin: 0 0 12px; padding-left: 22px; }
.aff-rich li { margin-bottom: 5px; }
.aff-rich li::marker { color: var(--aff); }
.aff-rich dl { margin: 0 0 12px; }
.aff-rich dt { font-weight: 700; color: var(--ink, #16232e); margin-top: 8px; }
.aff-rich dd { margin: 2px 0 0 16px; }
.aff-rich blockquote {
  margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--aff);
  background: #f7fafc; border-radius: 0 8px 8px 0;
}
.aff-rich hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.aff-rich pre, .aff-rich code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em;
}
.aff-rich pre { background: #f4f7fa; padding: 12px 14px; border-radius: 9px; overflow-x: auto; }
.aff-rich img { max-width: 100%; height: auto; border-radius: 9px; margin: 6px 0; }
.aff-rich figure { margin: 10px 0; }
.aff-rich figcaption { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 5px; }

/* Povezave v opisu – vidne in klikljive */
.aff-rich a {
  color: var(--aff); text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.aff-rich a:hover { text-decoration-thickness: 2px; }

/* Tabele iz vira: berljive in z lastnim drsnikom, da ne razbijejo strani */
.aff-rich table {
  width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: .88rem;
  display: block; overflow-x: auto; max-width: 100%;
}
.aff-rich table caption {
  caption-side: top; text-align: left; font-weight: 700;
  color: var(--ink, #16232e); padding-bottom: 6px;
}
.aff-rich th, .aff-rich td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
}
.aff-rich th { background: #f4f7fa; color: var(--ink, #16232e); font-weight: 700; white-space: nowrap; }
.aff-rich tr:nth-child(even) td { background: #fbfcfe; }

/* ═══════════════════════════════════════════════════════════════════════
   STRAN »KATALOGI« – kartice trgovin
   ═══════════════════════════════════════════════════════════════════════ */
.kat-hero {
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start;
  margin-top: 12px; padding: 24px 22px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #16283c 0%, #1e364f 55%, #24405e 100%);
  color: #fff; box-shadow: var(--shadow);
}
@media (min-width: 900px) { .kat-hero { grid-template-columns: 1fr 300px; gap: 26px; padding: 30px 28px; } }
.kat-hero h1 { font-size: clamp(1.4rem, 3.4vw, 2.05rem); line-height: 1.18; margin: 6px 0 10px; color: #fff; }
.kat-hero p { color: rgba(255,255,255,.8); font-size: .94rem; line-height: 1.7; max-width: 62ch; margin: 0 0 12px; }
.kat-hero .aff-eyebrow { color: rgba(255,255,255,.62); }

.kat-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; }
.kat-stats li {
  display: flex; flex-direction: column; gap: 1px; min-width: 96px;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.kat-stats b { font-family: var(--font-head); font-size: 1.32rem; line-height: 1.15; color: #fff; }
.kat-stats span { font-size: .76rem; color: rgba(255,255,255,.72); }

.kat-hero-side {
  padding: 18px 18px 16px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
}
.kat-hero-ic { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.kat-hero-side strong { display: block; font-family: var(--font-head); font-size: 1rem; color: #fff; }
.kat-hero-side p { font-size: .84rem; margin: 6px 0 12px; color: rgba(255,255,255,.78); }
.kat-hero-side .btn-aff { background: #fff; color: #16283c; }
.kat-hero-side .btn-aff:hover { background: #f0f4f8; }

.kat-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kat-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.kat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #c9d6e3; }

.kat-card-head {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; text-decoration: none;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--aff) 7%, #fff), #fff);
}
.kat-logo {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; padding: 6px;
  background: #fff; border: 1px solid var(--line); object-fit: contain;
  display: grid; place-items: center;
}
.kat-logo-txt {
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  color: var(--aff); letter-spacing: .02em;
}
.kat-head-txt { min-width: 0; }
.kat-head-txt h2 {
  font-size: 1.02rem; line-height: 1.3; margin: 0; color: var(--ink, #16232e);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kat-merchant {
  display: block; font-size: .78rem; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kat-coupon-tag {
  position: absolute; top: 11px; right: 12px;
  padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: #fff2d6; border: 1px solid #f0cf8a; color: #7a5500;
}

.kat-card-body { padding: 14px 16px; flex: 1 1 auto; }
.kat-intro { font-size: .86rem; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.kat-facts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.kat-facts li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #3a5068; }
.kat-facts b { color: var(--ink, #16232e); }
.kat-facts span { flex: 0 0 auto; opacity: .8; }

.kat-card-cta { padding: 0 16px 14px; display: grid; gap: 8px; }
.kat-more { text-align: center; font-size: .82rem; color: var(--muted); text-decoration: none; }
.kat-more:hover { color: var(--aff); text-decoration: underline; }
.kat-updated {
  margin: 0; padding: 8px 16px; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--muted); background: #fbfcfe;
}

/* drobne značke zaupanja na kartici kataloga */
.aff-bdgs-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.aff-bdgs-mini li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: #f2f6fa; border: 1px solid #e2e9f0;
  font-size: .71rem; color: #3a5068; line-height: 1.3;
}
.aff-bdgs-mini .aff-bdg-ic { width: 14px; height: 14px; color: var(--aff); }
.aff-bdgs-more { font-weight: 700; color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   KUPONI
   ═══════════════════════════════════════════════════════════════════════ */
.kat-hero-cpn { background: linear-gradient(135deg, #4a2a10 0%, #7a4a16 55%, #a06a20 100%); }
.cpn-steps { margin: 8px 0 0; padding-left: 18px; font-size: .84rem; color: rgba(255,255,255,.82); line-height: 1.6; }
.cpn-steps li { margin-bottom: 5px; }

.cpn-grid {
  display: grid; gap: 18px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* vodoravni kuponi – skrbnik izbere 3 ali 4 v vrsti */
.cpn-grid-trak { gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .cpn-grid-trak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cpn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cpn-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .cpn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Kupon kot papirnati listek ────────────────────────────────────────
   Celotna kartica je kupon. Izsek naredimo z masko, senco pa z
   drop-shadow na zunanjem ovoju, da senca sledi izrezani obliki.
   Vsi bloki imajo najmanjšo višino in omejeno število vrstic, zato so
   deli kupona pri vseh kuponih v isti višini in se nič ne prekriva.    */
.cpn {
  --cpn-tear: 118px;          /* razdalja perforacije od vrha (kartica) */
  --cpn-notch: 15px;          /* polmer izseka */
  --cpn-a: #d4453c;
  --cpn-b: #a8261f;
  filter: drop-shadow(0 8px 20px rgba(16, 32, 48, .13));
  transition: transform .16s ease, filter .16s ease;
}
.cpn:hover { transform: translateY(-2px); filter: drop-shadow(0 12px 26px rgba(16, 32, 48, .18)); }
/* Izpostavljen kupon obdrži barvo svojega trgovca – doda le zlat obroč
   in trak, da barvna oznaka trgovca ostane prepoznavna. */
.cpn-top .cpn-inner { box-shadow: inset 0 0 0 2px #e8bf55; }

.cpn-inner {
  position: relative; overflow: hidden;
  background: var(--card, #fff); border-radius: 18px;
  display: flex; flex-direction: column; height: 100%;
}

/* izseka ob straneh – pokončni kupon */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .cpn-kartica .cpn-inner {
    -webkit-mask-image:
      radial-gradient(circle at left  var(--cpn-tear), rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px)),
      radial-gradient(circle at right var(--cpn-tear), rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px));
            mask-image:
      radial-gradient(circle at left  var(--cpn-tear), rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px)),
      radial-gradient(circle at right var(--cpn-tear), rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px));
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* ── zgornji, barvni del ──────────────────────────────────────────── */
.cpn-head {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; color: #fff;
  background: linear-gradient(145deg, var(--cpn-a), var(--cpn-b));
}
.cpn-kartica .cpn-head { height: var(--cpn-tear); padding: 14px 46px 16px; }
.cpn-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image:
    radial-gradient(circle at 18% 22%, #fff 1.4px, transparent 1.6px),
    radial-gradient(circle at 72% 68%, #fff 1.2px, transparent 1.4px);
  background-size: 26px 26px, 34px 34px;
}
.cpn-val {
  position: relative; font-family: var(--font-head); font-weight: 800;
  font-size: 2.1rem; line-height: 1.05; letter-spacing: -.02em;
  overflow-wrap: break-word; word-break: normal; hyphens: none; max-width: 100%;
  text-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.cpn-val.is-mid   { font-size: 1.62rem; }
.cpn-val.is-long  { font-size: 1.2rem;  line-height: 1.2; }
.cpn-val.is-xlong { font-size: .98rem;  line-height: 1.28; }
.cpn-kind {
  position: relative; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
}
/* ── Veljavnost – velik, vedno enako postavljen datum ─────────────── */
/* Oznaka in značka dni sta v prvi vrstici, datum pa sam v drugi – tako je
   datum vedno izpisan v celoti in velik, tudi pri ozkih kuponih. */
.cpn-until {
  display: grid; grid-template-columns: 1fr auto; align-content: center;
  gap: 1px 8px; margin: 0 0 10px; padding: 7px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--cpn-a) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--cpn-a) 24%, #e2e8f0);
  height: 58px; overflow: hidden;
}
.cpn-until-lab {
  grid-column: 1; grid-row: 1; align-self: center;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.cpn-until-date {
  grid-column: 1 / -1; grid-row: 2;
  font-family: var(--font-head); font-weight: 800; font-size: 1.22rem;
  line-height: 1.18; color: var(--cpn-b); white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cpn-until-days {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: end;
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--cpn-a) 13%, #fff);
  color: var(--cpn-b); border: 1px solid color-mix(in srgb, var(--cpn-a) 26%, transparent);
}
/* zadnji dnevi – opozorilna barva, ne glede na barvo trgovca */
.cpn-until.is-urgent {
  background: #fdf0ee; border-color: #f2c4bd;
}
.cpn-until.is-urgent .cpn-until-date { color: #b3261e; }
.cpn-until.is-urgent .cpn-until-days {
  background: #b3261e; color: #fff; border-color: #b3261e;
}
/* izpostavljen kupon: trak na vrhu, vsebina se umakne pod njega */
.cpn-kartica.cpn-top .cpn-head { padding-top: 34px; }
.cpn-ribbon {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  white-space: nowrap;
}

/* ── perforacija ──────────────────────────────────────────────────── */
.cpn-tear { position: relative; flex: 0 0 auto; }
.cpn-kartica .cpn-tear {
  height: 0; margin: 0 calc(var(--cpn-notch) + 4px);
  border-top: 2px dashed color-mix(in srgb, var(--cpn-b) 26%, #d8e0e8);
}

/* ── vsebina ──────────────────────────────────────────────────────── */
.cpn-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cpn-kartica .cpn-body { padding: 18px 17px 15px; }
.cpn-main { min-width: 0; display: flex; flex-direction: column; }

.cpn-store { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; min-height: 36px; }
.cpn-logo {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; padding: 3px;
  background: #fff; border: 1px solid var(--line); object-fit: contain;
  display: grid; place-items: center;
}
.cpn-logo-txt { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--cpn-b); }
.cpn-store-txt { min-width: 0; display: flex; flex-direction: column; }
.cpn-store-txt strong {
  font-size: .88rem; color: var(--ink, #16232e);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpn-store-txt span {
  font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Naslov in opis imata omejeno število vrstic in najmanjšo višino –
   zato so kode, navodila in gumbi pri vseh kuponih v isti višini. */
.cpn-title {
  font-size: 1.02rem; line-height: 1.35; margin: 0 0 6px; color: var(--ink, #16232e);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.35em * 2);
}
.cpn-desc {
  font-size: .85rem; color: var(--muted); line-height: 1.6; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.6em * 2);
}
.cpn-desc.is-empty::before { content: "\00a0"; }

/* koda */
.cpn-code {
  /* stalna višina, da so navodila in gumbi pri vseh kuponih v isti višini –
     tudi pri kuponu brez kode */
  display: flex; align-items: stretch; margin: 0 0 11px; height: 50px; flex: 0 0 auto;
  border: 2px dashed color-mix(in srgb, var(--cpn-a) 42%, #c9d6e3);
  border-radius: 11px; background: color-mix(in srgb, var(--cpn-a) 5%, #fff);
  overflow: hidden;
}
.cpn-code-val {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 11px 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.06rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink, #16232e); overflow-wrap: anywhere; user-select: all;
}
.cpn-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; cursor: pointer; border: 0;
  border-left: 2px dashed color-mix(in srgb, var(--cpn-a) 42%, #c9d6e3);
  background: transparent; color: var(--cpn-b);
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  transition: background .15s, color .15s;
}
.cpn-copy:hover { background: color-mix(in srgb, var(--cpn-a) 12%, #fff); }
.cpn-copy svg { width: 15px; height: 15px; }
.cpn-code.is-copied { border-color: #16a37b; background: #eaf8f2; }
.cpn-code.is-copied .cpn-copy { border-left-color: #16a37b; color: #0d7a52; }
/* kupon brez kode – enako visoko polje, da poravnava ostane */
.cpn-code-none {
  align-items: center; justify-content: center; text-align: center;
  border-style: dashed; border-color: #d8e0e8; background: #fafbfc;
}
.cpn-code-none span {
  padding: 0 12px; font-size: .76rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Navodila imajo stalno višino in največ dve vrstici – tako so pogoji in
   gumbi pri vseh kuponih točno v isti višini, tudi pri daljšem besedilu. */
.cpn-howto {
  display: flex; gap: 7px; align-items: flex-start; margin: 0 0 9px;
  padding: 9px 11px; border-radius: 9px; background: #f4f7fa;
  font-size: .78rem; color: #3a5068; line-height: 1.55;
  height: 58px; flex: 0 0 auto; overflow: hidden;
}
.cpn-howto > span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpn-terms { margin: 0 0 12px; min-height: 24px; }
.cpn-terms summary {
  cursor: pointer; font-size: .78rem; color: var(--muted); padding: 3px 0; list-style: none;
}
.cpn-terms summary::-webkit-details-marker { display: none; }
.cpn-terms summary::before { content: "▸ "; }
.cpn-terms[open] summary::before { content: "▾ "; }
.cpn-terms summary:hover { color: var(--cpn-b); }
.cpn-terms p { margin: 5px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.6; }
.cpn-terms-none { min-height: 24px; }

/* gumbi so pripeti na dno, da so kartice v vrsti poravnane */
.cpn-side { display: flex; flex-direction: column; gap: 7px; }
.cpn-kartica .cpn-side { margin-top: auto; }
.cpn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 18px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(145deg, var(--cpn-a), var(--cpn-b)); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .96rem; text-align: center;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cpn-a) 30%, transparent);
  transition: filter .15s, transform .15s;
}
.cpn-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cpn-link { text-align: center; font-size: .81rem; color: var(--muted); text-decoration: none; }
.cpn-link:hover { color: var(--cpn-b); text-decoration: underline; }
.cpn-legal { margin: 0; font-size: .7rem; color: var(--muted); line-height: 1.5; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   PODOLGOVATA POSTAVITEV – manjši ležeči kuponi, 3–4 v vrsti
   Barvni del je ozek pas ob levem robu, perforacija je navpična,
   izseka pa sta na vrhu in na dnu te črte.
   ═══════════════════════════════════════════════════════════════════════ */
.cpn-trak { --cpn-tear: 96px; --cpn-notch: 12px; }

.cpn-trak .cpn-inner {
  display: grid; grid-template-columns: var(--cpn-tear) minmax(0, 1fr);
  align-items: stretch;
}

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .cpn-trak .cpn-inner {
    -webkit-mask-image:
      radial-gradient(circle at var(--cpn-tear) top,    rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px)),
      radial-gradient(circle at var(--cpn-tear) bottom, rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px));
            mask-image:
      radial-gradient(circle at var(--cpn-tear) top,    rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px)),
      radial-gradient(circle at var(--cpn-tear) bottom, rgba(0,0,0,0) var(--cpn-notch), #000 calc(var(--cpn-notch) + .5px));
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* vsi trije deli so v isti vrstici – brez izrecne vrstice bi glava
   samodejno padla v drugo vrstico in kupon bi se raztegnil navzdol */
.cpn-trak .cpn-head { grid-column: 1; grid-row: 1; padding: 16px 8px; gap: 3px; }
.cpn-trak.cpn-top .cpn-head { padding-top: 34px; }
.cpn-trak .cpn-val { font-size: 1.28rem; line-height: 1.1; }
.cpn-trak .cpn-val.is-mid   { font-size: 1.02rem; }
.cpn-trak .cpn-val.is-long  { font-size: .86rem; line-height: 1.22; }
.cpn-trak .cpn-val.is-xlong { font-size: .74rem; line-height: 1.3; }
.cpn-trak .cpn-kind { font-size: .58rem; letter-spacing: .06em; }
.cpn-trak .cpn-days { font-size: .63rem; padding: 2px 7px; }
.cpn-trak .cpn-ribbon {
  top: 9px; left: 50%; font-size: .52rem; padding: 2px 6px; letter-spacing: .04em;
}

/* navpična perforacija med barvnim pasom in vsebino */
.cpn-trak .cpn-tear {
  grid-column: 1; grid-row: 1; justify-self: end; width: 0; height: auto;
  margin: calc(var(--cpn-notch) + 3px) 0;
  border-left: 2px dashed rgba(255, 255, 255, .45);
}

/* Ležeč kupon je nizek, zato pokažemo samo bistvo: trgovca, naslov, kodo
   in gumb. Opis in navodila sta na tej postavitvi skrita – navodila so pod
   »Pogoji in navodila«, pravno obvestilo pa je enkrat na dnu strani.
   Vsi deli so sredinsko poravnani in imajo med sabo stalen razmik. */
.cpn-trak .cpn-body {
  grid-column: 2; grid-row: 1; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.cpn-trak .cpn-main { align-items: center; text-align: center; width: 100%; }
.cpn-trak .cpn-until { justify-content: center; width: 100%; }
.cpn-trak .cpn-store { justify-content: center; width: 100%; }
.cpn-trak .cpn-title { text-align: center; width: 100%; }
.cpn-trak .cpn-code  { width: 100%; }
.cpn-trak .cpn-terms { text-align: center; width: 100%; }
.cpn-trak .cpn-side  { width: 100%; align-items: stretch; }
.cpn-trak .cpn-until { margin-bottom: 8px; padding: 6px 10px; height: 54px; }
.cpn-trak .cpn-until-lab { font-size: .61rem; }
.cpn-trak .cpn-until-date { font-size: 1.1rem; }
.cpn-trak .cpn-until-days { font-size: .64rem; padding: 1px 7px; }
.cpn-trak .cpn-store { margin-bottom: 7px; min-height: 30px; }
.cpn-trak .cpn-logo { width: 30px; height: 30px; border-radius: 8px; }
.cpn-trak .cpn-store-txt strong { font-size: .84rem; }
.cpn-trak .cpn-store-txt span { font-size: .71rem; }
.cpn-trak .cpn-title {
  font-size: .92rem; line-height: 1.3; margin-bottom: 8px;
  -webkit-line-clamp: 2; min-height: calc(1.3em * 2);
}
.cpn-trak .cpn-desc,
.cpn-trak .cpn-howto,
.cpn-trak .cpn-legal { display: none; }
.cpn-trak .cpn-code  { height: 42px; margin-bottom: 8px; }
.cpn-trak .cpn-code-val { font-size: .94rem; letter-spacing: .07em; }
.cpn-trak .cpn-copy { padding: 0 10px; font-size: .74rem; }
.cpn-trak .cpn-code-none span { font-size: .72rem; }
.cpn-trak .cpn-terms { margin-bottom: 8px; min-height: 22px; }
.cpn-trak .cpn-terms-none { min-height: 22px; margin-bottom: 8px; }
.cpn-trak .cpn-terms summary { font-size: .74rem; }
.cpn-trak .cpn-side { margin-top: auto; gap: 5px; }
.cpn-trak .cpn-btn { min-height: 40px; padding: 9px 14px; font-size: .88rem; border-radius: 10px; }
.cpn-trak .cpn-link { font-size: .75rem; }

@media (max-width: 380px) {
  .cpn-trak { --cpn-tear: 84px; }
  .cpn-trak .cpn-val { font-size: 1.14rem; }
}

@media (max-width: 420px) {
  .cpn { --cpn-tear: 106px; --cpn-notch: 13px; }
  .cpn-val { font-size: 1.85rem; }
  .cpn-val.is-mid { font-size: 1.42rem; }
  .cpn-code-val { font-size: .96rem; letter-spacing: .07em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOKALNI SEO – »Kje lahko izdelek kupite?«
   ═══════════════════════════════════════════════════════════════════════ */
.aff-local {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
}
.aff-local-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.aff-local-head h2 { font-size: 1.05rem; margin: 0; }
.aff-local-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; font-size: 1rem;
  background: color-mix(in srgb, var(--aff) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--aff) 22%, var(--line));
}
.aff-local-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .aff-local-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aff-local-box {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 13px 14px; border-radius: 11px;
  background: #f8fafc; border: 1px solid var(--line);
}
.aff-local-lab {
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.aff-local-box strong { font-size: .95rem; color: var(--ink, #16232e); line-height: 1.35; }
.aff-local-sub { font-size: .82rem; color: var(--muted); line-height: 1.55; }
/* Pojasnilo pod urnikom centra – da nihče ne bere urnika centra kot urnika trgovine. */
.aff-local-note { font-size: .76rem; opacity: .85; font-style: italic; }
.aff-local-link {
  margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--aff); text-decoration: none;
}
.aff-local-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   POGOSTA VPRAŠANJA IN POVZETEK DEJSTEV
   ---------------------------------------------------------------------------
   Namenjeno obiskovalcu in hkrati jezikovnim modelom (ChatGPT, Perplexity …).
   Odgovori so v HTML-ju vedno prisotni – <details> skrije le prikaz, ne
   vsebine, zato jih pajek prebere tudi zaprte.
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-faq {
  margin: 26px 0 0; padding: 20px 22px;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e6ea); border-radius: 16px;
}
.aff-faq > h2 {
  margin: 0 0 12px; font-family: var(--font-head); font-size: 1.08rem; color: var(--ink, #1b1b1f);
}
.aff-faq-i {
  border-top: 1px solid var(--line, #e6e6ea);
}
.aff-faq-i:first-of-type { border-top: 0; }
.aff-faq-i > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 13px 34px 13px 0;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.45;
  color: var(--ink, #1b1b1f);
}
.aff-faq-i > summary::-webkit-details-marker { display: none; }
.aff-faq-i > summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--aff, #d42b24); border-bottom: 2px solid var(--aff, #d42b24);
  transform: rotate(45deg); transition: transform .18s ease;
}
.aff-faq-i[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.aff-faq-i > summary:hover { color: var(--aff, #d42b24); }
.aff-faq-a { padding: 0 34px 15px 0; }
.aff-faq-a p {
  margin: 0; font-size: .9rem; line-height: 1.65; color: var(--muted, #5b5b66);
}

/* Povzetek dejstev – kratke, citljive vrednosti v dveh stolpcih. */
.aff-facts {
  margin: 22px 0 0; padding: 18px 20px;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e6ea); border-radius: 16px;
}
.aff-facts-h {
  margin: 0 0 10px; font-family: var(--font-head); font-size: 1rem; color: var(--ink, #1b1b1f);
}
.aff-facts-lead {
  margin: 0 0 14px; font-size: .93rem; line-height: 1.65; color: var(--ink, #1b1b1f);
}
.aff-facts-dl {
  margin: 0; display: grid;
  /* Presledek med stolpci je nujen: brez njega se dolga vrednost (npr. polno
     ime podjetja) stakne z oznako sosednjega stolpca in nastane »TIMMLUX,
     trgovina inCena«. */
  column-gap: 30px; row-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.aff-facts-dl > div {
  display: flex; gap: 12px; align-items: baseline;
  min-width: 0;                     /* da se vsebina lahko skrči, ne prelije */
  padding: 9px 0; border-top: 1px solid var(--line, #ececed);
}
.aff-facts-dl dt {
  flex: 0 0 38%; min-width: 88px; max-width: 150px;
  font-size: .8rem; color: var(--muted, #5b5b66); line-height: 1.5;
}
.aff-facts-dl dd {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .88rem; font-weight: 600; line-height: 1.5;
  color: var(--ink, #1b1b1f); overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .aff-faq   { padding: 16px 16px; }
  .aff-facts { padding: 15px 16px; }
}

@media print {
  .aff-faq-a { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGAMENI KATEGORIJ
   ---------------------------------------------------------------------------
   Krovne kategorije v stolpcu, podkategorije v polju, ki se odpre ob strani.
   Na širokem zaslonu je polje »flyout« desno od menija, na ožjem pa se
   razpre pod postavko – flyout bi tam segal čez rob zaslona.

   Podkategorije so vedno v HTML-ju; skrivamo jih samo vizualno.
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-mm { position: relative; }
.aff-mm-list { list-style: none; margin: 0; padding: 0; }
.aff-mm-item { position: relative; }

.aff-mm-top {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .87rem; color: var(--ink, #1b1b1f);
  text-align: left; text-decoration: none; border-radius: 9px;
  transition: background .14s ease, color .14s ease;
}
.aff-mm-top > span { flex: 1 1 auto; min-width: 0; }
.aff-mm-top > b {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700;
  color: var(--muted, #6b6b76); background: #f1f1f4;
  border-radius: 999px; padding: 2px 7px;
}
.aff-mm-top:hover, .aff-mm-top:focus-visible { background: #f4f4f7; color: var(--aff, #d42b24); }
.aff-mm-top.is-on { background: color-mix(in srgb, var(--aff, #d42b24) 10%, #fff); color: var(--aff, #d42b24); font-weight: 600; }
.aff-mm-top.is-on > b { background: color-mix(in srgb, var(--aff, #d42b24) 16%, #fff); color: var(--aff, #d42b24); }
.aff-mm-all { font-weight: 600; }

/* Puščica pove, da se postavka odpre. */
.aff-mm-arr {
  flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .5; transition: transform .16s ease, opacity .16s ease;
}
.aff-mm-has.is-open > .aff-mm-top .aff-mm-arr { opacity: 1; }

/* ── Odprto polje s podkategorijami ─────────────────────────────────────── */
.aff-mm-panel {
  display: none;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e6e6ea);
  border-radius: 12px;
}
.aff-mm-has.is-open > .aff-mm-panel { display: block; }

.aff-mm-head {
  display: none;
  padding: 12px 14px 8px;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b6b76);
}
.aff-mm-sub { list-style: none; margin: 0; padding: 6px; }
.aff-mm-sub a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: .84rem; color: var(--ink, #1b1b1f); text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.aff-mm-sub a > span { flex: 1 1 auto; min-width: 0; }
.aff-mm-sub a > b {
  flex: 0 0 auto; font-size: .7rem; font-weight: 700;
  color: var(--muted, #6b6b76); background: #f1f1f4; border-radius: 999px; padding: 2px 7px;
}
.aff-mm-sub a:hover, .aff-mm-sub a:focus-visible { background: #f4f4f7; color: var(--aff, #d42b24); }
.aff-mm-sub a.is-on { background: color-mix(in srgb, var(--aff, #d42b24) 10%, #fff); color: var(--aff, #d42b24); font-weight: 600; }

/* Široki zaslon: polje odplava desno od menija. */
@media (min-width: 1000px) and (hover: hover) {
  .aff-mm-panel {
    position: absolute; top: -6px; left: calc(100% + 10px); z-index: 60;
    min-width: 240px; max-width: 340px;
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 14px 40px rgba(20, 20, 40, .14);
  }
  .aff-mm-head { display: block; }

  /* Nevidni most čez režo med menijem in poljem – brez njega se polje zapre,
     medtem ko miška potuje proti njemu. */
  .aff-mm-panel::before {
    content: ''; position: absolute; top: 0; left: -12px; width: 12px; height: 100%;
  }
}

/* Ožji zaslon: podkategorije se razprejo pod postavko. */
@media (max-width: 999px), (hover: none) {
  .aff-mm-panel {
    margin: 2px 0 6px 10px; border-radius: 10px;
    border-width: 0 0 0 2px; border-left-color: color-mix(in srgb, var(--aff, #d42b24) 40%, #fff);
    background: none;
  }
  .aff-mm-sub { padding: 2px 0 2px 4px; }
}

@media print {
  .aff-mm-panel { display: block !important; }
}

/* Odprto polje megamenija mora biti nad kartico izdelka.
   .aff-pd-side je »sticky« in s tem svoja plast; brez z-index bi ga
   .aff-pd-media (position: relative, kasneje v HTML-ju) prekril. */
.aff-pd-side { z-index: 30; }
.aff-pd-side .aff-side-box { overflow: visible; }

/* V zloženem načinu puščica pokaže odprto stanje (obrne se navzdol). */
@media (max-width: 999px), (hover: none) {
  .aff-mm-has.is-open > .aff-mm-top .aff-mm-arr { transform: rotate(45deg); }
}

/* ── Stran kataloga: megameni ob izdelkih ──────────────────────────────── */
.aff-kat-wrap { display: block; }
.aff-kat-main { min-width: 0; }
.aff-kat-side { margin: 0 0 14px; }

@media (min-width: 1000px) {
  .aff-kat-wrap {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px; align-items: start;
  }
  /* Lepljiv stolpec se mora ustaviti POD lepljivo vrstico s filtri, sicer
     se prekrivata in naslov »Kategorije« izgine za iskalnim poljem. Višina
     filtrov ni stalna (pri ožjem oknu se prelomijo v dve vrstici), zato je
     odmik izmerjen, ne zapisan s številko.
     Tudi z-index mora biti nižji od filtrov (40), da filtri vedno ostanejo
     vidni – prej sta imela oba 40 in je stolpec, ker je v HTML-ju kasneje,
     prekril iskalno polje. */
  .aff-kat-side { position: sticky; top: var(--aff-vrh); z-index: 30; margin: 0; }
}

/* ── Dolg meni v lepljivem stolpcu ─────────────────────────────────────────
   Katalog z dvajsetimi kategorijami naredi meni višji od zaslona; lepljiv
   stolpec se takrat ne more več premikati in del menija ostane nedosegljiv.
   Zato se seznam znotraj sebe pomika, kartica trgovca pa ostane vidna.

   Pomikanje reže absolutno postavljene otroke, zato se odprto polje s
   podkategorijami postavi s position: fixed (JS mu izračuna mesto). */
@media (min-width: 1000px) {
  .aff-mm-list {
    max-height: calc(100vh - var(--aff-vrh) - 60px);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
  }
  .aff-mm-list::-webkit-scrollbar { width: 8px; }
  .aff-mm-list::-webkit-scrollbar-thumb { background: #d8d8de; border-radius: 4px; }

  .aff-mm-has.is-open > .aff-mm-panel {
    position: fixed; left: auto; top: auto;   /* mesto in višino določi JS */
    z-index: 120;
    overflow-y: auto;                          /* dolg seznam se pomika v polju */
    overscroll-behavior: contain;              /* pomik se ne prenese na stran */
    box-shadow: 0 18px 44px rgba(15, 25, 40, .18);
    scrollbar-width: thin;
  }
  .aff-mm-has.is-open > .aff-mm-panel::-webkit-scrollbar { width: 8px; }
  .aff-mm-has.is-open > .aff-mm-panel::-webkit-scrollbar-thumb {
    background: #d8d8de; border-radius: 4px;
  }

  /* Naslov polja ostane viden tudi med pomikanjem po dolgem seznamu. */
  .aff-mm-has.is-open > .aff-mm-panel > .aff-mm-head {
    position: sticky; top: 0; z-index: 1;
    background: var(--card, #fff); border-radius: 12px 12px 0 0;
  }

  /* Dokler je polje odprto, stolpec stopi nad lepljivo vrstico s filtri.
     Brez tega z-index polja (120) ne pomaga nič: velja samo znotraj plasti
     stolpca, ta pa je z z-index 30 pod filtri (40) – in polje je bilo
     prerezano z iskalnim poljem. Ko se polje zapre, se plast vrne. */
  .aff-kat-side.aff-mm-nad, .aff-pd-side.aff-mm-nad { z-index: 130; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KATEGORIJE KOT KARTICE
   ---------------------------------------------------------------------------
   Mreža majhnih kartic s sliko pravega izdelka iz kategorije. Seznam imen se
   bere, mreža se pregleda z enim pogledom – kupec kategorijo prepozna po
   sliki, preden prebere naziv.

   Kartice so nizke namenoma: v eno vrstico jih gre pet ali šest, tako da je
   celotna ponudba vidna brez pomikanja.
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-catcards {
  margin: 14px 0 0; padding: 16px 18px;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e6ea);
  border-radius: var(--r-lg, 16px); box-shadow: var(--shadow-sm);
}
.aff-catcards-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.aff-catcards-head h2 {
  margin: 0; font-family: var(--font-head); font-size: 1.02rem; color: var(--ink, #1b1b1f);
}
.aff-catcards-up {
  font-size: .84rem; font-weight: 600; color: var(--aff, #d42b24); text-decoration: none;
}
.aff-catcards-up:hover { text-decoration: underline; }

.aff-catcards-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.aff-catcard > a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  height: 100%; padding: 10px 8px 11px;
  border: 1px solid var(--line, #e6e6ea); border-radius: 12px;
  background: var(--card, #fff); text-decoration: none; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.aff-catcard > a:hover, .aff-catcard > a:focus-visible {
  border-color: var(--aff, #d42b24);
  box-shadow: 0 6px 18px rgba(20, 20, 40, .10);
  transform: translateY(-2px);
}
.aff-catcard.is-on > a {
  border-color: var(--aff, #d42b24);
  background: color-mix(in srgb, var(--aff, #d42b24) 7%, #fff);
}

.aff-catcard-img {
  width: 100%; aspect-ratio: 1 / 1; max-height: 92px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: #f5f5f8;
}
.aff-catcard-img img { width: 100%; height: 100%; object-fit: contain; }
/* Brez slike: ploščica z začetnico, da mreža ostane enakomerna. */
.aff-catcard-img b, .aff-catcard-img.is-noimg::after {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;
  color: color-mix(in srgb, var(--aff, #d42b24) 55%, #9aa0ab);
}
.aff-catcard-img.is-noimg::after { content: '🛍️'; font-size: 1.4rem; }

.aff-catcard-txt {
  font-size: .81rem; font-weight: 600; line-height: 1.35; color: var(--ink, #1b1b1f);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  /* Prostor za dve vrstici rezerviramo tudi pri enovrstičnem nazivu, sicer
     število izdelkov pri vsaki kartici lebdi na drugi višini in vrstica je
     videti razmetana. */
  min-height: calc(.81rem * 1.35 * 2);
}
.aff-catcard-n {
  font-size: .72rem; color: var(--muted, #6b6b76);
  margin-top: auto;                /* vedno na dnu kartice */
}
.aff-catcard > a:hover .aff-catcard-txt { color: var(--aff, #d42b24); }

@media (max-width: 560px) {
  .aff-catcards { padding: 13px 13px; }
  .aff-catcards-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .aff-catcard-img { max-height: 74px; }
}

/* ── Zložene kartice kategorij ─────────────────────────────────────────────
   Velja samo, ko je kategorija že izbrana in obiskovalec gleda njene izdelke.
   Sestrske kategorije so takrat postranske: stisnjene so v eno vrstico, ki se
   pomika vodoravno, da izdelki ostanejo takoj pod filtri.
   Izmerjeno pri 390 px: 1088 px → pod 160 px. */
.aff-catcards.is-ozka { padding: 12px 0 12px 14px; }
.aff-catcards.is-ozka .aff-catcards-head { margin-bottom: 9px; padding-right: 14px; }
.aff-catcards.is-ozka .aff-catcards-head h2 { font-size: .92rem; }

.aff-catcards.is-ozka .aff-catcards-grid {
  display: flex; gap: 8px;
  grid-template-columns: none;          /* razveljavi mrežo iz osnovnega sloga */
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Zadnja kartica naj se ne dotika roba kartona. */
  padding: 2px 14px 6px 0;
  scrollbar-width: thin;
}
.aff-catcards.is-ozka .aff-catcards-grid:focus-visible {
  outline: 2px solid var(--aff, #d42b24); outline-offset: 2px;
}
.aff-catcards.is-ozka .aff-catcard {
  flex: 0 0 114px; scroll-snap-align: start;
}
.aff-catcards.is-ozka .aff-catcard > a { padding: 8px 7px 9px; gap: 5px; }
.aff-catcards.is-ozka .aff-catcard-img { max-height: 56px; border-radius: 8px; }
.aff-catcards.is-ozka .aff-catcard-img b { font-size: 1.15rem; }
.aff-catcards.is-ozka .aff-catcard-txt {
  font-size: .76rem; line-height: 1.3; min-height: calc(.76rem * 1.3 * 2);
}
.aff-catcards.is-ozka .aff-catcard-n { font-size: .68rem; }

@media (max-width: 560px) {
  .aff-catcards.is-ozka { padding: 11px 0 11px 12px; }
  .aff-catcards.is-ozka .aff-catcards-head { padding-right: 12px; }
  .aff-catcards.is-ozka .aff-catcard { flex: 0 0 104px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIRST: KATALOG IN STRAN IZDELKA
   ---------------------------------------------------------------------------
   Na telefonu sta bili obe strani zgrajeni za namizje in šele nato stisnjeni:
   lepljiva vrstica s filtri je zasedla četrtino zaslona, razgrnjen seznam
   kategorij pa je stal pred izdelki – obiskovalec je moral pred izdelkom, po
   katerem je prišel, prevoziti skoraj tisoč slikovnih točk menija.

   Pravilo je zdaj obratno: privzeto velja telefon, dodatki za namizje pa so
   v @media (min-width: 1000px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Filtri niso lepljivi na telefonu ──────────────────────────────────
   Nad njimi je že lepljiva glava strani; dve lepljivi vrstici na 844 px
   visokem zaslonu pustita za izdelke premalo prostora. */
@media (max-width: 999px) {
  .aff-filters { position: static; top: auto; z-index: auto; padding: 12px; }
  .aff-filter-form { gap: 8px; }
  /* Iskanje in izbira kategorije dobita vsak svojo vrstico – v polovični
     širini se je ime kategorije odrezalo (»Vse kategorije (10…«). Razvrstitev
     in gumb si delita zadnjo vrstico. */
  .aff-search { flex: 1 1 100%; }
  .aff-filters select[name="cat"] { flex: 1 1 100%; }
  .aff-filters select[name="sort"] { flex: 1 1 auto; min-width: 0; }
  .aff-filter-form .btn-aff { flex: 0 0 auto; min-height: 46px; }
  .aff-filter-form .aff-clear { flex: 0 0 auto; }
  .aff-result-count { margin-top: 8px; }
}

/* ── 2 · Zložen seznam kategorij ───────────────────────────────────────────
   Gumb je viden samo na ozkem zaslonu in samo, kadar teče JavaScript
   (razred is-zlozen doda skripta). Brez nje seznam ostane odprt. */
.aff-mm-toggle { display: none; }
@media (max-width: 999px) {
  .aff-mm.is-zlozen .aff-side-title { display: none; }
  .aff-mm.is-zlozen .aff-mm-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 46px; padding: 0 12px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); font-size: .95rem; font-weight: 700; color: var(--text);
  }
  .aff-mm.is-zlozen .aff-mm-toggle > span { flex: 1; text-align: left; }
  .aff-mm.is-zlozen .aff-mm-toggle > b {
    font-size: .78rem; font-weight: 700; color: var(--muted);
    background: var(--card); border-radius: 999px; padding: 2px 9px;
  }
  .aff-mm.is-zlozen .aff-mm-toggle .aff-mm-arr { transform: rotate(45deg); }
  .aff-mm.is-zlozen .aff-mm-toggle[aria-expanded="true"] .aff-mm-arr { transform: rotate(-135deg); }
  .aff-mm.is-zlozen .aff-mm-list { margin-top: 8px; max-height: 60vh; overflow-y: auto; }
}

/* ── 3 · Na strani izdelka gre izdelek pred kategorije ─────────────────────
   Obiskovalec je prišel po izdelku, ne po meniju. Meni ostane dosegljiv –
   pod izdelkom, kjer je koristen za nadaljnje brskanje. */
@media (max-width: 999px) {
  .aff-pd-sidebar .aff-pd-wrap { display: flex; flex-direction: column; }
  .aff-pd-sidebar .aff-pd-main { order: 1; }
  .aff-pd-sidebar .aff-pd-side { order: 2; margin-top: 18px; }
  .aff-pd-side { position: static; z-index: auto; }
  /* Enako na strani kataloga: najprej izdelki, meni pod njimi ni smiseln,
     zato tam ostane zgoraj – a zložen, torej visok približno 46 px. */
  .aff-kat-side { margin: 0 0 10px; }
}

/* ── 4 · Drobtine v eni vrsti ──────────────────────────────────────────────
   Pot »Domov › Trgovine › trgovina › Spletna ponudba › krovna › kategorija ›
   naziv« je na telefonu zavzela tri do štiri vrstice. Zdaj se pomika
   vodoravno, zadnji člen (naziv izdelka) pa se skrajša. */
@media (max-width: 999px) {
  .aff-page .breadcrumb-nav {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; white-space: nowrap;
  }
  .aff-page .breadcrumb-nav::-webkit-scrollbar { display: none; }
  .aff-page .breadcrumb-nav > * { flex: 0 0 auto; max-width: none; }
  .aff-page .breadcrumb-nav > [aria-current="page"] {
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ── 5 · Manj praznega prostora v uvodnem delu ────────────────────────────
   Na telefonu je uvodna kartica kataloga segla čez ves prvi zaslon in več;
   iskalnik je bil daleč pod robom. */
@media (max-width: 700px) {
  .aff-hero-main { padding: 20px 16px; }
  .aff-hero-main h1 { font-size: clamp(1.35rem, 5.4vw, 1.9rem); }
  .aff-hero-intro { font-size: .9rem; line-height: 1.6; margin-top: 10px; }
  .aff-hero-side { padding: 0 16px 16px; }
  .aff-hero-cta { margin-top: 14px; }

  /* Znaki zaupanja so isti kot na karticah izdelkov. Na telefonu jih zato
     pokažemo šest – toliko, kolikor jih gre v dve vrstici – ostali pa so
     vidni na širšem zaslonu in v predstavitvi trgovine. */
  .aff-bdgs-hero { gap: 6px; margin-top: 14px; }
  .aff-bdgs-hero li:nth-child(n+7) { display: none; }
  .aff-trust { margin-top: 12px; }
  .aff-trust li { line-height: 1.45; }
}

/* ── 6 · Prostor pod vsebino za lepljivo vrstico s klicem k dejanju ───────
   Vrstica je na telefonu pripeta na spodnji rob in je prekrivala zadnje
   vrstice strani (opozorilo o odgovornosti trgovca). */
@media (max-width: 979px) {
  .aff-page { padding-bottom: 84px; }
}

/* ── 7 · Cilji dotika ─────────────────────────────────────────────────────
   Priporočilo je najmanj 44 × 44 px; nekaj povezav je bilo nižjih. */
@media (hover: none) {
  .aff-mm-top, .aff-mm-sub a, .aff-side-cats a { min-height: 44px; }
  .aff-catcard a { min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STRAN IZDELKA NA TELEFONU: VRTILJAK, VRSTNI RED, IZVLEČNI PREDAL
   ---------------------------------------------------------------------------
   Vzor je postavitev, ki jo obiskovalci poznajo iz velikih trgovin: velika
   slika s pikami, pod njo znamka, naziv, cena in en sam očiten gumb. Košarice
   ni – nakup se opravi pri trgovcu, zato je gumb »v trgovino« in ne »v
   košarico«.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Vrtiljak slik ────────────────────────────────────────────────────────── */
.aff-pd-media { padding: 0; }
.aff-pd-track {
  display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.aff-pd-track::-webkit-scrollbar { display: none; }
.aff-pd-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: grid; place-items: center; padding: 22px; min-height: 300px;
}
.aff-pd-slide img { max-width: 100%; max-height: 420px; object-fit: contain; }
@media (min-width: 860px) { .aff-pd-slide { min-height: 400px; padding: 26px; } }

.aff-gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.92);
  font-size: 1.4rem; line-height: 1; color: var(--ink, #16232e);
  box-shadow: var(--shadow-sm); display: none;
}
.aff-gal-prev { left: 10px; } .aff-gal-next { right: 10px; }
@media (min-width: 860px) and (hover: hover) { .aff-gal-nav { display: block; } }

.aff-pd-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 14px 4px; }
.aff-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid #c3cedb; background: #fff;
}
.aff-dot.is-on { background: var(--ink, #16232e); border-color: var(--ink, #16232e); }
/* Vidna pika je majhna, cilj dotika pa mora biti velik. */
.aff-pd-dots { position: relative; }
.aff-dot::before { content: ''; position: absolute; top: 0; width: 30px; height: 34px; transform: translateX(-10px); }

@media (max-width: 859px) { .aff-pd-thumbs { display: none; } }

/* ── Vrstni red podatkov o izdelku ───────────────────────────────────────── */
@media (max-width: 999px) {
  .aff-pd-info { display: flex; flex-direction: column; padding: 16px 16px 20px; }
  .aff-pd-brandrow { order: 1; }
  .aff-pd-title    { order: 2; font-size: 1.15rem; line-height: 1.35; margin-top: 6px; }
  .aff-pd-meta     { order: 3; margin-top: 10px; }
  .aff-pd-price    { order: 4; margin-top: 12px; }
  .aff-price-note  { order: 5; }
  .aff-pd-cta      { order: 6; margin-top: 14px; }
  .aff-pd-lead     { order: 7; margin-top: 16px; }
  .aff-call        { order: 8; }
  .aff-bdgs-wrap   { order: 9; }

  .aff-pd-price .aff-price { font-size: 2.1rem; letter-spacing: -.01em; }
  .aff-price-note { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); }
  .aff-pd-cta .btn-aff { min-height: 52px; font-size: 1.02rem; }
}
.aff-pd-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aff-pd-brandrow .aff-brand {
  font-size: .84rem; font-weight: 700; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.aff-pd-brandrow .aff-brand:hover { color: var(--aff); }

/* ── Izvlečni predal s kategorijami ──────────────────────────────────────── */
.aff-burger {
  display: none; align-items: center; gap: 9px; cursor: pointer;
  min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  color: var(--ink, #16232e); box-shadow: var(--shadow-sm);
}
@media (max-width: 999px) { .aff-burger { display: inline-flex; } }
.aff-burger i {
  width: 17px; height: 12px; position: relative; display: block;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.aff-burger i::after {
  content: ''; position: absolute; left: 0; top: 4px; width: 100%;
  border-top: 2px solid currentColor;
}
.aff-burger b {
  font-size: .76rem; font-weight: 700; color: var(--muted);
  background: var(--surface); border-radius: 999px; padding: 2px 8px;
}

.aff-drawer-x { display: none; }
.aff-drawer-back {
  position: fixed; inset: 0; z-index: 290; background: rgba(10,20,32,.5);
  backdrop-filter: blur(2px);
}
body.aff-drawer-on { overflow: hidden; }

@media (max-width: 999px) {
  .aff-pd-side.is-drawer, .aff-kat-side.is-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: min(86vw, 340px); margin: 0; padding: 14px 12px 20px;
    background: var(--surface, #f4f7fa); border-right: 1px solid var(--line);
    box-shadow: 8px 0 30px rgba(10,20,32,.22);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); transition: transform .24s ease;
    display: block;
  }
  .aff-pd-side.is-drawer.is-open, .aff-kat-side.is-drawer.is-open { transform: translateX(0); }
  .aff-pd-side.is-drawer .aff-side-box, .aff-kat-side.is-drawer .aff-side-box { margin-bottom: 12px; }
  .aff-pd-side.is-drawer .aff-mm-list, .aff-kat-side.is-drawer .aff-mm-list { max-height: none; }

  .is-drawer .aff-drawer-x {
    display: block; position: sticky; top: 0; z-index: 2;
    margin: -14px -12px 8px auto; cursor: pointer;
    width: 42px; height: 42px; font-size: 1rem;
    border: 0; background: none; color: var(--muted);
  }
  .is-drawer .aff-drawer-x:hover { color: var(--ink, #16232e); }
  .aff-pd-side.is-drawer, .aff-kat-side.is-drawer { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .aff-pd-side.is-drawer, .aff-kat-side.is-drawer { transition: none; }
}


/* ── Vrstica nad izdelkom: tri črtice + nazaj v eni vrsti ─────────────────
   Gumb »nazaj« nosi ime kategorije, ki je lahko dolgo; na telefonu se zato
   skrajša, da vrstica ostane ena sama. */
@media (max-width: 999px) {
  .aff-pd-back { flex-wrap: nowrap; gap: 8px; margin: 10px 0 4px; }
  .aff-pd-back .aff-back-btn {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-height: 44px; padding: 0 14px 0 11px;
  }
  .aff-pd-back .aff-back-alt { display: none; }
  .aff-burger { flex: 0 0 auto; }
}
@media (max-width: 359px) {
  .aff-burger span { display: none; }        /* na najožjih zaslonih ostanejo črtice in številka */
  .aff-burger { padding: 0 12px; }
}

/* Slika naj na telefonu ne odrine cene in gumba predaleč pod rob. */
@media (max-width: 699px) {
  .aff-pd-slide { min-height: 240px; padding: 16px; }
  .aff-pd-slide img { max-height: 300px; }
  .aff-pd-dots { padding: 10px 14px 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POVPRAŠEVANJE O IZDELKU
   ---------------------------------------------------------------------------
   Drugi gumb ob »V trgovino«. Namenoma je mirnejši: nakup ostane glavno
   dejanje, vprašanje pa je pot za tiste, ki pred nakupom še kaj potrebujejo.
   ═══════════════════════════════════════════════════════════════════════════ */
.aff-pd-cta.has-inq { display: grid; gap: 9px; }

/* Drugi gumb ni obrobljen, ampak temen (#172636 – barva glave strani).
   Prej je bil v poudarni barvi kataloga in je ob rdečem »V trgovino« izgledal
   kot dvojnik glavnega dejanja; temna barva ga jasno loči, hkrati pa ostane
   enako viden. Razreda .btn-aff-ghost tu ne uporabimo (narejen je za temno
   podlago glave strani), zato ima svoj razred z vsemi stanji. */
.btn-aff-temni {
  --aff-tm:    #172636;
  --aff-tm-dk: #0d1826;
  background: var(--aff-tm); color: #fff; border: 0;
  box-shadow: 0 8px 22px rgba(23, 38, 54, .28); cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-aff-temni:hover,
.btn-aff-temni:focus-visible {
  background: var(--aff-tm-dk); color: #fff;
  box-shadow: 0 12px 28px rgba(23, 38, 54, .36);
  transform: translateY(-2px);
}
.btn-aff-temni:focus-visible { outline: 3px solid rgba(23, 38, 54, .35); outline-offset: 2px; }
.btn-aff-temni:active { background: var(--aff-tm-dk); color: #fff; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn-aff-temni { transition: none; } .btn-aff-temni:hover { transform: none; } }

/* Napis se ne sme lomiti sredi besede: v ozkem stolpcu je brskalnik
   »povpraševanje« razsekal na »povpraševanj / e«. Besede zato ostanejo cele,
   ovijemo pa jih lahko med presledki. */
.btn-aff-temni { hyphens: none; overflow-wrap: normal; word-break: normal; padding: 0 16px; }

@media (min-width: 1000px) {
  /* Enakovredna stolpca: drugi gumb ima dovolj prostora za napis v eni vrsti. */
  .aff-pd-cta.has-inq { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .aff-pd-cta.has-inq .aff-cta-note { grid-column: 1 / -1; }
  /* Od 1000 px naprej se ob izdelku pokaže še stranski stolpec, zato je gumb
     ožji kot na tablici. Napis pomanjšamo toliko, da ostane v eni vrsti –
     izmerjeno pri najožji postavitvi (gumb 209 px, napis 172 px). */
  .aff-pd-cta.has-inq .btn-aff-temni { font-size: .9rem; padding: 0 12px; gap: 6px; }
}

/* display:flex prebije privzeti [hidden] – brez te vrstice bi zaprto okno kot
   nevidna plast čez vso stran prestrezalo klike (gumbov pod njim ne bi bilo
   mogoče klikniti). */
.aff-inq[hidden] { display: none !important; }
/* Okno je zunaj .aff-page, zato tu ponovimo izpeljane barve – sicer bi gumbi
   v oknu ostali brez temnejšega odtenka za prehod z miško. */
.aff-inq {
  --aff-dk: color-mix(in srgb, var(--aff) 82%, #000);
  --aff-lt: color-mix(in srgb, var(--aff) 10%, #fff);
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: flex-end; justify-content: center; padding: 0;
  background: rgba(10, 20, 32, .58); backdrop-filter: blur(3px);
  overscroll-behavior: contain;
}
@media (min-width: 700px) { .aff-inq { align-items: center; padding: 20px; } }
body.aff-inq-on { overflow: hidden; }

/* Okno je najprej list na dnu zaslona (telefon), od 700 px naprej pa okno na
   sredini. Širina raste s prostorom: širše okno pomeni nižji obrazec, ker se
   polja postavijo v dve koloni in se dolgo pravno besedilo lomi v manj vrstic.
   Cilj je, da se obrazca ni treba pomikati. */
.aff-inq-box {
  background: var(--card, #fff); width: 100%; max-width: 560px;
  max-height: 96dvh; border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(10, 20, 32, .3);
  display: flex; flex-direction: column; min-height: 0;
}
@media (min-width: 700px) {
  .aff-inq-box { border-radius: 18px; box-shadow: 0 20px 60px rgba(10,20,32,.32);
                 max-width: 680px; max-height: 94dvh; }
}
@media (min-width: 1000px) { .aff-inq-box { max-width: 760px; } }

/* Pomika se samo telo; glava, izdelek in noga ostanejo na mestu, zato gumb za
   oddajo nikoli ne uide pod rob. */
.aff-inq-form { min-height: 0; display: flex; flex-direction: column; }
/* Razmik med polji je občutno večji od razmika med napisom in njegovim
   poljem (16 proti 4) – šele tako je jasno, kateremu polju napis pripada. */
.aff-inq-body {
  display: grid; gap: 16px; align-content: start;
  overflow-y: auto; min-height: 0; padding: 2px 1px;
  overscroll-behavior: contain;
}

.aff-inq-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: var(--card, #fff); flex: 0 0 auto;
  border-radius: 18px 18px 0 0;
}
.aff-inq-head h2 { font-size: 1rem; margin: 0; }
@media (min-width: 700px) { .aff-inq-head { padding: 14px 18px; } .aff-inq-head h2 { font-size: 1.05rem; } }
.aff-inq-x {
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: none; color: var(--muted); font-size: 1rem;
}
.aff-inq-x:hover { color: var(--ink, #16232e); background: var(--surface); }

.aff-inq-prod {
  display: flex; align-items: center; gap: 11px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.aff-inq-prod img {
  width: 54px; height: 54px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 4px; flex: 0 0 auto;
}
.aff-inq-prod strong { display: block; font-size: .92rem; line-height: 1.35; }
.aff-inq-prod span { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }

.aff-inq-form { padding: 16px 18px 18px; display: grid; gap: 12px; }
.aff-inq-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .aff-inq-row { grid-template-columns: 1fr 1fr; column-gap: 12px; } }
.aff-inq-form label { display: block; font-size: .82rem; font-weight: 700; color: #33475b; line-height: 1.35; }
.aff-inq-form input, .aff-inq-form textarea {
  width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit; font-size: .93rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text);
}
.aff-inq-form input:focus, .aff-inq-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--aff) 45%, transparent); outline-offset: 1px;
}
.aff-inq-form textarea { resize: vertical; min-height: 72px; }
@media (min-width: 700px) { .aff-inq-form textarea { min-height: 96px; } }

/* Telefon in računsko vprašanje sta obe kratki polji; na širšem zaslonu
   stojita v isti vrsti in obrazec je za eno vrstico nižji. */
/* Obe polji sta kratki, zato gresta v isto vrsto že na telefonu – tam je
   vsak prihranek vrstice pomemben. Računsko vprašanje je ožje od telefona. */
.aff-inq-par { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px 10px; align-items: start; }
@media (min-width: 620px) { .aff-inq-par { grid-template-columns: 1fr 1fr; gap: 16px 12px; } }
/* Polje z odgovorom je ozko, napis pa dolg; brez tega je napis tekel v isto
   vrstico kot polje in se z napisom sosednjega polja ni ujel po višini. */
/* ── Nizko in široko okno ──────────────────────────────────────────────────
   Na prenosniku z nizkim oknom (npr. 760 × 520) višine zmanjka, širine pa je
   dovolj. Obrazec se takrat postavi v dve koloni: levo polja, desno privolitev
   in opomba. Višina telesa pade s ~600 na ~330 px in pomikanja praviloma ni.
   Pogoj je namenoma vezan na VIŠINO okna, ne na širino zaslona. */
@media (min-width: 700px) and (max-height: 780px) {
  .aff-inq-form .aff-inq-body {
    grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start;
  }
  .aff-inq-form .aff-inq-body > .aff-inq-row,
  .aff-inq-form .aff-inq-body > .aff-inq-par,
  .aff-inq-form .aff-inq-body > .aff-inq-vpr { grid-column: 1; }
  /* Privolitev prekriva vse tri vrste levega stolpca. Če jih prekriva manj,
     grid višek naloži na zadnjo prekrito vrsto in med polji levo zazija
     prazen pas. */
  .aff-inq-form .aff-inq-body > .aff-inq-gdpr { grid-column: 2; grid-row: 1 / span 3; }
  .aff-inq-form .aff-inq-body > .aff-inq-note { grid-column: 2; grid-row: 4; margin-top: 0; }
  .aff-inq-form .aff-inq-body > * { align-self: start; }
  /* Polje za vprašanje naj v tej postavitvi ne raste čez mero. */
  .aff-inq-form .aff-inq-vpr textarea { min-height: 64px; }
  /* Glava in ploščica izdelka sta v nizkem oknu dragocena višina. */
  .aff-inq-head { padding: 9px 16px; }
  .aff-inq-prod { padding: 8px 16px; gap: 10px; }
  .aff-inq-prod img, .aff-inq-prod .aff-inq-prod-img { width: 40px; height: 40px; }
  .aff-inq-foot { padding: 9px 18px; }
}

/* Polje z odgovorom je ozko (max-width), zato se je kot inline-block postavilo
   kar v isto vrstico kot napis – vnosno polje je bilo višje od sosednjega in
   vrsta ni bila poravnana. display:block ga postavi pod napis, kot povsod. */
.aff-inq-captcha input { display: block; max-width: 130px; }

/* Past za robote: skrita, a ne z display:none – nekateri roboti tako polje
   preskočijo, tu pa ga naj vidijo in izpolnijo. */
.aff-inq-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Obrazec je mreža z gap 12 px, kartica privolitve pa ima svoj rob – 12 px
   je bilo premalo in besedilo se je je dotikalo. Loči ju tanka črta, tako da
   je jasno, da opomba ni del privolitve. */
.aff-inq-note {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line, #e2e8f0);
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
/* Gumb za oddajo mora biti viden brez pomikanja – obrazec je dolg, okno pa
   omejeno na višino zaslona. */
.aff-inq-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  flex: 0 0 auto; margin: 0 -18px -18px; padding: 12px 18px;
  background: var(--card, #fff); border-top: 1px solid var(--line);
}
.aff-inq-foot .btn-aff { margin-left: auto; }

/* Sporočilo dobi celo vrstico, gumb pa svojo pod njim.
   Prej sta si vrstico delila in besedilo se je lomilo že pri dobri polovici
   širine okna – »Trgovec vam bo odgovoril na sales.vienno@gmail.com.« je
   padlo v dve vrstici, čeprav je bilo prostora dovolj. */
.aff-inq-msg {
  flex: 1 0 100%; min-width: 0;
  font-size: .84rem; font-weight: 600; line-height: 1.55; color: var(--muted);
  overflow-wrap: anywhere;          /* dolg e-naslov ne razširi okna */
}
.aff-inq-msg:empty { display: none; }   /* brez sporočila ni prazne vrstice */
.aff-inq-msg.is-ok  { color: #0d7a52; }
.aff-inq-msg.is-err { color: #b3261e; }

/* ── Privolitev za posredovanje podatkov (GDPR) ────────────────────────────
   Polje je namenoma veliko: obrazec se v veliki večini izpolnjuje na telefonu,
   kjer je privzeto polje (13 px) pretesno za zanesljiv zadetek s palcem.
   Priporočilo za dotik je najmanj 24 px, zato je polje 24 × 24 px, zadetna
   površina pa cela kartica.

   Vsebina je razdeljena na tri ravni: naslov pove, za kaj gre; stavek
   privolitve je tisto, s čimer obiskovalec soglaša; drobni tisk je pojasnilo.
   Prej je bilo vse skupaj krepko (`.aff-inq-form label` sili font-weight:700)
   in zato nečitljivo – šest vrstic krepkega besedila se ne bere. */
.aff-inq-form .aff-inq-gdpr {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 0; padding: 13px 15px;
  /* Namenoma nevtralno, ne --aff-lt: ta je odtenek barve trgovine in je pri
     rdeči trgovini videti kot opozorilo – stanje napake se potem ne loči. */
  background: #fff; border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.aff-inq-form .aff-inq-gdpr:hover { border-color: #b9c6d6; background: #fbfcfe; }
.aff-inq-form .aff-inq-gdpr:focus-within {
  border-color: var(--aff, #d42b24);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aff, #d42b24) 15%, transparent);
}

.aff-inq-form .aff-inq-gdpr input[type="checkbox"] {
  flex: 0 0 auto; width: 24px; height: 24px;
  margin: 0; padding: 0;                 /* prebije skupno pravilo za polja */
  accent-color: var(--aff, #d42b24); cursor: pointer;
}

.aff-inq-form .aff-inq-gdpr-t { min-width: 0; font-weight: 400; }
.aff-inq-form .aff-inq-gdpr-t b {
  display: block; margin-bottom: 3px;
  font-size: .82rem; font-weight: 700; color: var(--ink, #1b1b1f);
}
.aff-inq-form .aff-inq-gdpr-t > span {
  display: block; font-size: .82rem; line-height: 1.5; color: #45596e;
}
.aff-inq-form .aff-inq-gdpr-vec { margin-top: 7px; }
.aff-inq-form .aff-inq-gdpr-vec > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: .755rem; font-weight: 600; color: var(--aff, #d42b24);
}
.aff-inq-form .aff-inq-gdpr-vec > summary::-webkit-details-marker { display: none; }
.aff-inq-form .aff-inq-gdpr-vec > summary::after { content: '▾'; font-size: .7em; }
.aff-inq-form .aff-inq-gdpr-vec[open] > summary::after { content: '▴'; }

.aff-inq-form .aff-inq-gdpr-t em {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed #e4eaf1;
  font-style: normal; font-size: .755rem; line-height: 1.45; color: var(--muted, #7b8a9c);
}
.aff-inq-form .aff-inq-gdpr-t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Rdeče se obarva šele, ko je obiskovalec obrazec že poskusil oddati –
   :user-invalid velja za polje, ki ga je uporabnik že »obravnaval«, medtem ko
   je :invalid pri obveznem potrditvenem polju resničen že ob odprtju okna in
   bi obrazec ob prihodu takoj kazal napako. Poudarek je zadržan: rob in tanek
   pas ob levem robu, ne cela rdeča ploskev. */
.aff-inq-form .aff-inq-gdpr:has(input:user-invalid),
.aff-inq-form .aff-inq-gdpr.je-manjka {
  border-color: #e0928c; background: #fffaf9;
  box-shadow: inset 3px 0 0 #d4453c;
}

@media (max-width: 560px) {
  .aff-inq-form .aff-inq-gdpr { padding: 12px 13px; gap: 11px; }
  .aff-inq-form .aff-inq-gdpr-t > span { font-size: .8rem; }
}