/* Šapa & Šargarepa — zaglavlje, mega meni i pločice podkategorija.
   Iz paketa „mega meni 2a Ravno” (export-mega-meni/mega-meni.css), prilagođeno temi:
   – naslovni font je naš „Caprasimo SR” (Google Caprasimo nema Ž Č Ć Đ), Figtree je takođe lokalni;
   – logo i korpa dolaze iz teme; .ss-logo važi samo u zaglavlju, podnožje ima svoj;
   – zaglavlje je ispod fioke filtera na telefonu (50 < 55/60), zatamnjenje odmah ispod zaglavlja;
   – sitan tekst na narandžastoj podlozi je taman (kontrast 4,5:1), placeholder je tamniji. */
:root{
  --ss-bg:#f5ead8;--ss-surface:#ebddc5;--ss-text:#201e1d;
  --ss-n100:#f9f4ed;--ss-n200:#eee7db;--ss-n300:#dcd3c4;--ss-n600:#82796a;--ss-n700:#645c50;--ss-n800:#474238;--ss-n900:#2e2b25;
  --ss-accent:#c67139;--ss-accent-600:#b2622d;--ss-accent-700:#8c491a;--ss-accent-100:#fff2eb;
  --ss-sage-100:#f0fae1;--ss-sage-200:#e1eecc;--ss-sage-300:#ccdbb2;--ss-sage-700:#56633f;--ss-sage-800:#3d472b;--ss-sage-900:#272e1b;
  --ss-font-head:"Caprasimo SR",Georgia,serif;--ss-font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ss-shadow-sm:0 1px 2px rgb(46 43 37 / .14);--ss-shadow-md:0 3px 10px rgb(46 43 37 / .16);--ss-shadow-lg:0 12px 32px rgb(46 43 37 / .22);
  --ss-max:1440px;--ss-pad:clamp(16px,3vw,32px);
}
.ss-topbar,.ss-header{font-family:var(--ss-font-body);color:var(--ss-text);-webkit-font-smoothing:antialiased}
.ss-topbar *,.ss-header *{box-sizing:border-box}
.ss-header svg,.ss-topbar svg{display:block;flex:none}
.ss-header a,.ss-topbar a{color:inherit;text-decoration:none}
.ss-header button{font:inherit;color:inherit}
.ss-header{-webkit-tap-highlight-color:transparent}
.ss-header :focus-visible,.ss-topbar :focus-visible{outline:2px solid var(--ss-accent-700);outline-offset:2px;border-radius:10px}
.ss-topbar :focus-visible{outline-color:var(--ss-sage-100)} /* tamnobraon na tamnozelenoj traci je 1,44:1; svetla je oko 9:1 */
/* Stavke glavnog menija su u redu koji se skroluje vodoravno i seče sve van sebe: prsten fokusa ide unutra */
.ss-header .ss-nav__link:focus-visible{outline-offset:-4px}
/* Lepljivo zaglavlje ne sme da prekrije cilj skoka („Preskoči na sadržaj”, sidra). Razmak je na samom
   cilju (scroll-margin), NE na html (scroll-padding): sa scroll-padding Chrome za svaki element u lepljivom
   zaglavlju misli da je skriven i pri fokusu tastaturom skroluje stranu ka vrhu. mega-meni.js upisuje
   stvarnu visinu zaglavlja u --ss-razmak-skoka (na 320 px ili sa admin trakom je drugačija). */
:root{--ss-razmak-skoka:160px}
@media (max-width:959.98px){:root{--ss-razmak-skoka:144px}}
#ss-glavno,:target{scroll-margin-top:var(--ss-razmak-skoka)}
/* Traka za skrol ne nestaje kad se strana zaključa (otvoren meni ili fioka), pa zaglavlje ne skače 15 px.
   Žleb tada ostaje prazan, pa se boji kao zatamnjenje (inače svetla pruga uz desnu ivicu). */
html{scrollbar-gutter:stable}
body.ss.je-zakljucan-meni{overflow:hidden}
html:has(> body.je-zakljucan-meni){background-color:#bcb5aa}
html:has(> body.je-zakljucan){background-color:#98958f}

/* Traka na vrhu */
.ss-topbar{background:var(--ss-sage-800);color:var(--ss-sage-100);font-size:13px}
.ss-topbar__in{max-width:var(--ss-max);margin:0 auto;padding:8px var(--ss-pad);display:flex;justify-content:space-between;align-items:center;gap:6px 20px;flex-wrap:wrap}
.ss-topbar__msg,.ss-topbar__info{display:flex;align-items:center;gap:8px}
.ss-topbar__links{display:flex;gap:18px;flex-wrap:wrap;font-weight:600}
.ss-topbar__links a:hover{text-decoration:underline}

/* Zaglavlje */
.ss-header{position:sticky;top:0;z-index:50;background:var(--ss-n100);box-shadow:0 1px 0 var(--ss-n300)}
@media (min-width:783px){.admin-bar .ss-header{top:32px}}
@media (min-width:601px) and (max-width:782px){.admin-bar .ss-header{top:46px}}
.ss-main{max-width:var(--ss-max);margin:0 auto;padding:14px var(--ss-pad);display:flex;align-items:center;gap:14px clamp(16px,2vw,32px)}
.ss-header .ss-logo{flex:none;display:block;width:190px}
.ss-header .ss-logo img{display:block;width:100%;height:auto}
.ss-search{flex:1 1 200px;min-width:0;max-width:820px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--ss-bg);border:1.5px solid var(--ss-n300);border-radius:999px;padding:0 6px 0 22px}
.ss-search:focus-within{border-color:var(--ss-accent)}
.ss-search input[type=search]{flex:1;width:100%;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;min-height:50px;outline:none;color:var(--ss-text);-webkit-appearance:none;appearance:none}
.ss-search input::placeholder{color:var(--ss-n700)}
.ss-search input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.ss-search button{width:42px;height:42px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.ss-search button:hover{background:var(--ss-n200)}
.ss-actions{display:flex;align-items:center;gap:6px;flex:none}
.ss-act{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;border-radius:999px;font-weight:600;font-size:15px}
.ss-act:hover,.ss-act[aria-current=page]{background:var(--ss-n200)}
.ss-header .ss-cart{display:flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;background:var(--ss-n900);color:var(--ss-bg)}
.ss-header .ss-cart:hover{background:var(--ss-n800)}
.ss-cart__label{font-family:var(--ss-font-head);font-size:18px}
.ss-cart__count{display:inline-block;min-width:22px;text-align:center;background:var(--ss-accent);color:var(--ss-text);border-radius:999px;font-weight:700;font-size:12px;line-height:18px;padding:1px 7px;transition:transform .25s}
.ss-cart__count.je-skok{transform:scale(1.35)}
.ss-burger{display:none;width:50px;height:50px;border:0;border-radius:50%;background:var(--ss-n200);place-items:center;cursor:pointer}
.ss-header .ss-burger__zatvori,.ss-header.nav-open .ss-burger__otvori{display:none}
.ss-header.nav-open .ss-burger__zatvori{display:block}

/* Glavni meni */
.ss-navwrap{position:relative;border-top:1px solid var(--ss-n200)}
.ss-navwrap::after{content:"";position:absolute;right:0;top:0;height:56px;width:48px;pointer-events:none;background:linear-gradient(to right,transparent,var(--ss-n100))}
.ss-nav{max-width:var(--ss-max);margin:0 auto;padding:0 clamp(8px,2vw,20px)}
.ss-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.ss-nav__list::-webkit-scrollbar{display:none}
.ss-nav__list>li{display:flex;margin:0}
.ss-nav__link{position:relative;display:flex;align-items:center;gap:6px;background:none;border:0;padding:17px 18px;cursor:pointer;white-space:nowrap;font-size:16px;font-weight:500;color:var(--ss-n800)}
.ss-header .ss-nav__link:hover{color:var(--ss-accent-700)}
.ss-header .ss-nav__link--strong{font-weight:700;color:var(--ss-text)}
.ss-chev{color:var(--ss-n600);transition:transform .2s ease}
.is-open>.ss-nav__link{color:var(--ss-text)}
.is-open>.ss-nav__link .ss-chev{transform:rotate(180deg);color:var(--ss-accent)}
.is-open>.ss-nav__link::after,.ss-nav__link[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--ss-accent)}
.ss-nav__link[aria-current=page]{color:var(--ss-text)}
.ss-pill{background:var(--ss-accent-700);color:var(--ss-bg);border-radius:999px;font-size:11px;font-weight:700;padding:2px 8px}

/* Paneli */
/* Okvir panela je širok kao ekran, ali klik pored samog panela pada na zatamnjenje i zatvara ga */
.ss-mega{position:absolute;left:0;right:0;top:100%;z-index:5;padding:0 clamp(8px,2vw,20px);display:none;pointer-events:none}
.is-open>.ss-mega{display:block}
.ss-mega__in{pointer-events:auto;max-width:1400px;margin:0 auto;background:var(--ss-n100);border-radius:0 0 40px 40px;box-shadow:var(--ss-shadow-lg);padding:24px clamp(18px,2.4vw,32px) 20px;max-height:calc(100vh - 180px);overflow-y:auto}
.ss-mega--right .ss-mega__in{margin-left:auto;margin-right:max(0px,calc((100% - 1400px) / 2));width:min(620px,100%);padding-bottom:26px}
.ss-mega__grid{display:flex;flex-wrap:wrap;gap:22px 36px;align-items:flex-start}
.ss-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-accent-700);margin:0 0 12px}
.ss-subs{flex:2 1 440px;min-width:0}
.ss-subs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 8px;list-style:none;margin:0;padding:0}
.ss-subs__grid li{margin:0}
.ss-sub{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:20px}
.ss-sub:hover,.ss-sub[aria-current=page]{background:var(--ss-n200)}
.ss-thumb{width:46px;height:46px;border-radius:15px;background:var(--ss-n200);display:grid;place-items:center;flex:none;transition:background .15s}
.ss-sub:hover .ss-thumb,.ss-sub[aria-current=page] .ss-thumb{background:var(--ss-n100)}
.ss-thumb img{width:40px;height:40px;display:block}
.ss-sub__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ss-sub__name{font-weight:700;font-size:15px;line-height:1.25}
.ss-sub__count{font-size:13px;color:var(--ss-n700)}
.ss-cols{flex:1.6 1 440px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.ss-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ss-links li{margin:0}
.ss-links a{font-size:15px}
.ss-header .ss-links a:hover{color:var(--ss-accent-700);text-decoration:underline;text-underline-offset:3px}
/* Istaknuto polje: uz kolone kad ima mesta; kad padne u svoj red, raširi se i postane nizak red
   (upit po širini samog polja, ne ekrana), da panel stane u ekran i na užem desktopu. */
.ss-promo{flex:1 1 270px;min-width:240px;background:var(--ss-sage-200);border-radius:32px;padding:22px;position:relative;overflow:hidden;container-type:inline-size}
.ss-promo::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--ss-sage-300)}
.ss-promo__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@container (min-width:520px){
  .ss-promo__in{display:grid;grid-template-columns:1fr auto;column-gap:28px;row-gap:4px;align-items:center}
  .ss-promo__in>.ss-kicker,.ss-promo__in>p{grid-column:1}
  .ss-promo__in>.ss-btn{grid-column:2;grid-row:1 / span 3}
}
.ss-promo .ss-kicker{color:var(--ss-sage-800);margin:0}
.ss-header .ss-promo p{margin:0;font-size:14px;line-height:1.5;color:var(--ss-sage-900)}
.ss-header .ss-promo .ss-promo__title{font-family:var(--ss-font-head);font-weight:400;font-size:24px;line-height:1.1;margin:0;color:var(--ss-text)} /* u paketu ga .ss-promo p smanji na 14 px */
.ss-header .ss-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.ss-header .ss-btn--sage{background:var(--ss-sage-700);color:var(--ss-bg)}
.ss-header .ss-btn--sage:hover{background:var(--ss-sage-800)}
/* Beli tekst na #C67139 je 3,6:1; na tamnijoj nijansi iz palete teme je 4,9:1 */
.ss-header .ss-btn--primary{background:#a95e2d;color:#fff}
.ss-header .ss-btn--primary:hover{background:var(--ss-accent-700)}
.ss-header .ss-textlink{font-size:14px;font-weight:700;color:var(--ss-sage-800);text-decoration:underline;text-underline-offset:3px}
.ss-mega__foot{margin-top:18px;background:var(--ss-surface);border-radius:999px;padding:8px 8px 8px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.ss-perks{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:14px;color:var(--ss-n800)}
.ss-perks span{display:flex;align-items:center;gap:7px}
.ss-perks svg{color:var(--ss-sage-700)}
.ss-blog{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start}
.ss-blog__col{flex:0 1 230px}
.ss-post{flex:1 1 280px;max-width:380px;display:flex;flex-direction:column;gap:10px}
.ss-post__img{display:block;aspect-ratio:16/10;border-radius:28px;background:var(--ss-surface);overflow:hidden}
.ss-post__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.95) brightness(1.03)}
.ss-post__meta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-sage-700)}
.ss-post__title{font-family:var(--ss-font-head);font-weight:400;font-size:21px;line-height:1.15}
.ss-post:hover .ss-post__title{color:var(--ss-accent-700)}
.ss-header .ss-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ss-accent-700);margin-top:14px}
.ss-help{display:flex;flex-wrap:wrap;gap:22px}
.ss-help__col{flex:1 1 220px}
.ss-contact{flex:1 1 240px;background:var(--ss-accent-100);border-radius:28px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ss-contact__title{font-family:var(--ss-font-head);font-size:21px}
.ss-contact__row{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.ss-contact__row svg{color:var(--ss-accent)}
.ss-contact small{font-size:13px;color:var(--ss-n700)}
.ss-scrim{position:fixed;inset:0;z-index:49;background:rgb(46 43 37 / .3)}
.ss-scrim[hidden]{display:none}

/* Panel „Brendovi”: najzastupljeniji kao pločice, svi od A do Ž u kolonama */
.ss-brendovi-panel{gap:22px 40px}
.ss-brendovi-panel__top{flex:0 1 400px;min-width:240px} /* pločica logotipa je 1,6 : 1, ime mora da stane pored nje */
.ss-brendovi-panel__svi{flex:1 1 520px;min-width:0}
.ss-brend-cipovi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ss-brend-cipovi li{margin:0}
.ss-brend-cip{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 12px 7px 8px;border-radius:16px;background:var(--ss-n200);font-weight:700;font-size:15px;line-height:1.2}
.ss-brend-cip:hover,.ss-brend-cip[aria-current=page]{background:var(--ss-sage-200)}
.ss-header .ss-brend-cip:focus-visible{border-radius:16px} /* opšti prsten u zaglavlju bi promenio uglove pločice */
.ss-brend-cip__ime{min-width:0;overflow-wrap:break-word}
.ss-brend-cip__broj{margin-left:auto;font-weight:500;font-size:13px;color:var(--ss-n700)}
.ss-brendovi-lista{list-style:none;margin:0;padding:0;columns:4 170px;column-gap:20px}
.ss-brendovi-lista li{break-inside:avoid;margin:0 0 6px}
.ss-brendovi-lista a{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.25}

/* Ikonica brenda: pločica 1,6 : 1 (visina --v). Zvaničan logotip (--logo; --tamna za skoro beo znak)
   ili inicijali u naslovnom fontu na boji iz palete, u istom okviru. */
.ss-brend-ikona{--v:32px;display:inline-grid;place-items:center;flex:none;width:calc(var(--v) * 1.6);height:var(--v);border-radius:calc(var(--v) * .26);overflow:hidden;font-family:var(--ss-font-head);font-weight:400;font-size:calc(var(--v) * .5);line-height:1;letter-spacing:0;text-transform:none;box-shadow:inset 0 0 0 1px rgb(46 43 37 / .07);user-select:none}
.ss-brend-ikona--dva{font-size:calc(var(--v) * .44)}
.ss-brend-ikona--b0{background:#e1eecc;color:#3d472b}
.ss-brend-ikona--b1{background:#fde3d2;color:#8c491a}
.ss-brend-ikona--b2{background:#e7dccb;color:#474238}
.ss-brend-ikona--b3{background:#f3e0bd;color:#7a4a12}
.ss-brend-ikona--b4{background:#ccdbb2;color:#272e1b}
.ss-brend-ikona--b5{background:#f6d0b4;color:#6e3410}
.ss-brend-ikona--b6{background:#3d472b;color:#f0fae1}
.ss-brend-ikona--b7{background:#8c491a;color:#fff2eb}
.ss-brend-ikona--logo{background:#fff;box-shadow:inset 0 0 0 1px var(--ss-n300)}
.ss-brend-ikona--tamna{background:var(--pozadina,var(--ss-n900));box-shadow:none} /* beo ili bled znak; --pozadina = boja brenda (Pedigree) */
.ss-brend-ikona--logo img{display:block;width:100%;height:100%;object-fit:contain} /* razmak oko znaka je već u slici */
.ss-header .ss-brendovi-lista a:hover{color:var(--ss-accent-700);text-decoration:underline;text-underline-offset:3px}
.ss-header .ss-brendovi-lista a[aria-current=page]{font-weight:700;color:var(--ss-accent-700)}
.ss-brendovi-lista__broj{font-size:12px;color:var(--ss-n700)}
.ss-header .ss-mega__foot-tekst{margin:0;font-size:14px;color:var(--ss-n800)}

/* Društvene mreže i primeri (primer = prazno polje, vidi se samo lokalno) */
.ss-mreze{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ss-mreze li{margin:0}
.ss-mreze__ikona{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor}
.ss-mreze__ikona svg{display:block}
.ss-mreze__ikona.je-primer{border-style:dashed;opacity:.55;cursor:help}
.ss-mreze--meni{color:var(--ss-accent-700)}
.ss-header a.ss-mreze__ikona:hover{background:var(--ss-accent-700);color:#fff;border-color:var(--ss-accent-700)}
.ss-primer{display:inline-block;margin-left:6px;padding:0 7px;border:1px dashed var(--ss-accent);border-radius:999px;background:var(--ss-accent-100);color:var(--ss-accent-700);font:700 11px/18px var(--ss-font-body);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.ss-contact__row.je-primer{color:var(--ss-n700)}
.ss-contact__vreme{font-size:13px;font-weight:500;color:var(--ss-n700)}

/* Pločice podkategorija na naslovnoj (paket: plocice-podkategorija.html). Na naslovnoj su ispod
   njih proizvodi, pa su zbijenije od paketa: deset kategorija staje u dva reda po pet. */
.ss-tiles{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ss-tiles li{margin:0;min-width:0}
.ss-tile{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:28px;background:var(--ss-n100);box-shadow:var(--ss-shadow-sm);transition:transform .15s ease,box-shadow .15s ease;height:100%;color:var(--ss-text);text-decoration:none}
.ss-tile:hover{transform:translateY(-2px);box-shadow:var(--ss-shadow-md)}
.ss-tile .ss-thumb{width:68px;height:68px;border-radius:22px}
.ss-tile .ss-thumb img{width:56px;height:56px}
.ss-tile__name{font-weight:700;font-size:16px;line-height:1.25}
.ss-tile__count{font-size:14px;color:var(--ss-n700)}
@media (max-width:759px){
  .ss-tiles{display:flex;overflow-x:auto;margin:16px calc(-1 * var(--gutter)) 0 -6px;padding:6px var(--gutter) 10px 6px;scroll-snap-type:x mandatory;scroll-padding-left:6px;scrollbar-width:none} /* 6 px oko pločica: prsten fokusa se ne odseca */
  .ss-tiles::-webkit-scrollbar{display:none}
  .ss-tiles li{flex:0 0 auto;scroll-snap-align:start}
  .ss-tile{width:236px;padding:12px 14px 12px 12px}
  .ss-tile .ss-thumb{width:58px;height:58px;border-radius:18px}
  .ss-tile .ss-thumb img{width:48px;height:48px}
}

/* Telefon i tablet */
@media (max-width:959.98px){
  .ss-nav__link:active,.ss-sub:active,.ss-links a:active{background:var(--ss-n200)}
  .ss-main{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .ss-header .ss-logo{width:150px}
  .ss-search{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .ss-search input[type=search]{min-height:46px}
  .ss-actions{margin-left:auto}
  .ss-act span{display:none}
  .ss-act{width:46px;height:46px;padding:0;justify-content:center}
  .ss-cart__label{display:none}
  .ss-header .ss-cart{height:46px;padding:0 14px}
  .ss-burger{display:grid;width:46px;height:46px}
  .ss-navwrap{display:none;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain}
  .ss-header.nav-open .ss-navwrap{display:block}
  .ss-navwrap::after{display:none}
  .ss-nav__list{flex-direction:column;overflow:visible}
  .ss-nav__list>li{flex-direction:column}
  .ss-nav__link{justify-content:space-between;width:100%;padding:15px 8px;font-size:17px;border-bottom:1px solid var(--ss-n200)}
  .is-open>.ss-nav__link::after,.ss-nav__link[aria-current=page]::after{display:none}
  .ss-nav__link[aria-current=page]{color:var(--ss-accent-700)}
  .ss-mega{position:static;padding:0}
  /* Panel nije svoj prozor za skrol: prevlačenje prstom preko njega pomera ceo meni */
  .ss-mega__in,.ss-mega--right .ss-mega__in{width:auto;margin:10px 0 14px;border-radius:28px;box-shadow:none;background:var(--ss-bg);max-height:none;overflow:visible;padding:18px}
  .ss-promo{flex-basis:100%}
  .ss-mega__foot{border-radius:24px}
  .ss-brendovi-lista{columns:2 130px}
}
@media (max-width:420px){
  .ss-header .ss-logo{width:128px}
  .ss-topbar__info{display:none}
}
/* Najuži telefoni (320–374 px, i 360 px sa dvocifrenim brojem u korpi): logo i dugmad u jednom redu */
@media (max-width:374.98px){
  .ss-main{column-gap:8px;padding-left:12px;padding-right:12px}
  .ss-header .ss-logo{width:104px} /* staje i uz klasičnu traku za skrol od 15 px (desktop suzen na 320) */
  .ss-actions{gap:4px}
  .ss-act,.ss-burger{width:42px;height:42px}
  .ss-header .ss-cart{height:42px;padding:0 10px;gap:6px}
}

/* Desktop: dno panela („Sva hrana za pse”) uvek se vidi, i kad panel na niskom ekranu mora da se skroluje */
@media (min-width:960px){
  /* bottom = minus donji razmak panela, da ispod pilule ne proviruju prepolovljeni redovi;
     scroll-padding-bottom drži link koji ima fokus tastature iznad pilule */
  .ss-mega__foot{position:sticky;bottom:-20px;z-index:1;box-shadow:0 -10px 16px -6px var(--ss-n100)}
  .ss-mega__in{scroll-padding-bottom:88px}
  .admin-bar .ss-mega__in{max-height:calc(100vh - 212px)} /* admin traka spušta zaglavlje 32 px */
}
/* Niži ekrani laptopa (1280×650–800, 1366×657): zbijeniji panel, manje skrolovanja */
@media (min-width:960px) and (max-height:820px){
  .ss-mega__in{padding-top:18px;padding-bottom:14px}
  .ss-mega__grid{row-gap:14px}
  .ss-kicker{margin-bottom:8px}
  .ss-sub{padding:5px 10px}
  .ss-thumb{width:40px;height:40px;border-radius:13px}
  .ss-thumb img{width:34px;height:34px}
  .ss-links{gap:7px}
  .ss-promo{padding:16px 20px}
  .ss-header .ss-promo .ss-promo__title{font-size:21px}
  .ss-mega__foot{margin-top:12px;bottom:-14px}
}
/* Uzak i nizak prozor (1280×650–800, 1024×768): istaknuto polje bi palo u svoj red i završilo ispod
   lepljivog dna panela. Veterinarske dijete su i u listi podkategorija i u redu menija. */
@media (min-width:960px) and (max-width:1365.98px) and (max-height:820px){
  .ss-promo{display:none}
}
/* Uži desktop: kad se pojave Akcije, blog, O nama i Pomoć, kategorije koje su i u panelu se sklanjaju
   iz reda (inače „Pomoć i kontakt” ode van ekrana, a red se mišem ne može pomeriti) */
@media (min-width:960px) and (max-width:1279.98px){
  .ss-nav__link{padding-left:12px;padding-right:12px} /* 12, ne 13: sa stavkom „Rase” i „Pomoć” red na 960 px je bio 2 px preširok */
  .ss-nav__list--puno .ss-nav__item--kat{display:none}
  .ss-nav__list--puno .ss-nav__link{padding-left:10px;padding-right:10px}
}
@media (min-width:960px) and (max-width:1099.98px){
  .ss-nav__list--puno .ss-nav__link{font-size:15px}
}
/* Sve četiri dodatne stavke: „Pomoć i kontakt” ne staje ni na 1280–1340 px, pa se kategorije sklanjaju. Od stavke
   „Rase” (13.11.2026) red je širi i na 1366–1400 px (+54 i +20 px), pa granica ide do 1440. */
@media (min-width:1280px) and (max-width:1439.98px){
  .ss-nav__list--prepuno .ss-nav__item--kat{display:none}
}
/* Ispod 1100 px spisak A–Ž ne staje pored istaknutih brendova: istaknuti idu preko cele širine, u više kolona
   (1024: 4, 768: 3, telefon: 1), umesto kolone od 400 px sa praznom polovinom panela */
@media (max-width:1099.98px){
  .ss-brendovi-panel__top{flex:1 1 100%}
  .ss-brend-cipovi{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}
/* Kontrastna tema (Windows): pločica logotipa zadržava svoju boju (beli znak ostaje na tamnoj, tamni na beloj),
   a okvir u sistemskoj boji je odvaja od pozadine. Inicijali ostaju u sistemskim bojama, jer su tekst. */
@media (forced-colors:active){
  .ss-brend-ikona--logo{forced-color-adjust:none;outline:1px solid CanvasText}
}
@media (prefers-reduced-motion:reduce){.ss-tile,.ss-chev,.ss-thumb,.ss-cart__count{transition:none}}

/* Panel „Rase” (inc/rase.php): tri grupe po veličini, svaka rasa sa okruglom fotografijom.
   Male rase imaju najviše stavki (13), pa grupa dobija više mesta. */
.ss-rase-panel{gap:22px 36px}
.ss-rase-panel__grupa{flex:1 1 200px;min-width:0}
.ss-rase-panel__grupa--male{flex:2 1 380px}
.ss-rase-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px}
.ss-rase-lista li{margin:0}
.ss-rase-lista a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px 4px 4px;border-radius:999px;font-size:15px;line-height:1.2}
.ss-header .ss-rase-lista a:hover{background:var(--ss-n200)}
.ss-header .ss-rase-lista a[aria-current=page]{background:var(--ss-sage-200);font-weight:700}
.ss-header .ss-rase-lista a:focus-visible{border-radius:999px}
.ss-rase-lista__ime{min-width:0;overflow-wrap:break-word}

/* Sličica rase: okrugla fotografija (veličina --v), ili početno slovo kad fotografije nema */
.ss-rasa-slika{--v:36px;display:inline-grid;place-items:center;flex:none;width:var(--v);height:var(--v);border-radius:50%;overflow:hidden;background:var(--ss-n200);box-shadow:0 0 0 1px rgb(46 43 37 / .08)}
.ss-rasa-slika img{display:block;width:100%;height:100%;object-fit:cover}
.ss-rasa-slika--slovo{background:var(--ss-sage-200);color:var(--ss-sage-800);font-family:var(--ss-font-head);font-size:calc(var(--v) * .46);line-height:1;user-select:none}
@media (max-width:959.98px){
  .ss-rase-panel__grupa,.ss-rase-panel__grupa--male{flex:1 1 100%}
  .ss-rase-lista{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (forced-colors:active){
  .ss-rasa-slika{outline:1px solid CanvasText}
}