/* ==========================================================================
   Zavod ČUDOvito — nova statična stran
   Barvni sistem izhaja iz logotipa (štirje oranžni cvetni listi).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pisave — gostujejo na našem strežniku (brez klica na Googlove strežnike,
   zato se obiskovalčev IP ne pošilja tretjim osebam — GDPR).
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700 800;
  font-stretch:100%; font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700 800;
  font-stretch:100%; font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url(../fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url(../fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --oranz:       #E56A19;
  --oranz-temna: #C4550E;
  --marelica:    #F7A15B;
  --breskev:     #FDF1E5;
  --breskev-2:   #FBE4CE;
  --rjava:       #33261C;
  --rjava-2:     #4A3A2D;
  --siva:        #7A6A5C;
  --bela:        #FFFFFF;
  --linija:      #F0DFCE;

  --font-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:   "Figtree", "Segoe UI", system-ui, sans-serif;

  --w-content: 1160px;
  --w-text: 78ch;
  --radius: 18px;
  --shadow-s: 0 2px 10px rgba(51,38,28,.07);
  --shadow-m: 0 10px 30px rgba(51,38,28,.12);
  --pad-x: clamp(1.1rem, 4vw, 2.2rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--rjava);
  background:var(--bela);
  overflow-wrap:break-word;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--oranz-temna); }
a:hover{ color:var(--oranz); }
:focus-visible{ outline:3px solid var(--oranz); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  line-height:1.15;
  margin:0 0 .6em;
  color:var(--rjava);
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 5.5vw, 3.4rem); font-weight:800; }
h2{ font-size:clamp(1.55rem, 3.6vw, 2.3rem); font-weight:800; }
h3{ font-size:clamp(1.2rem, 2.4vw, 1.45rem); font-weight:700; }
h4{ font-size:1.12rem; font-weight:700; }
p{ margin:0 0 1.1em; max-width:var(--w-text); }
ul,ol{ padding-left:1.3em; max-width:var(--w-text); }
li{ margin-bottom:.45em; }
strong{ color:var(--rjava); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--oranz); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; color:#fff; }

.container{ max-width:var(--w-content); margin-inline:auto; padding-inline:var(--pad-x); }

/* --- Poudarek "ČUDO" v besedi ČUDOvito --------------------------------- */
.cudo{ color:var(--oranz); }

/* ==========================================================================
   Glava
   ========================================================================== */
.topbar{
  background:var(--rjava); color:#EBD9C6;
  font-size:.82rem;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:36px;
}
.topbar a{
  color:#EBD9C6; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.topbar a:hover{ color:var(--marelica); }
.topbar svg{ width:14px; height:14px; }
.topbar-contact, .topbar-social{ display:flex; align-items:center; gap:1.4rem; }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled{ box-shadow:var(--shadow-s); border-color:var(--linija); }
/* glava čez celotno širino — logotip levo, meni desno (mega panel ostane centriran) */
.site-header > .container, .topbar > .container{ max-width:none; }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.2rem; min-height:74px;
}
@media (min-width:1151px) and (max-width:1500px){
  .site-header .brand-name small{ display:none; } /* več zraka med logotipom in menijem */
}
@media (min-width:1151px){
  .site-header .site-nav a, .site-header .site-nav .sub-toggle{ font-size:.88rem; padding:.5rem .55rem; }
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--rjava);
}
.brand{ flex:none; }
.brand img{ width:46px; height:46px; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.brand:hover img{ transform:rotate(45deg); }
.brand-name{
  display:inline-block;
  font-family:var(--font-display); font-weight:800; font-size:1.22rem; line-height:1.05;
  /* hover: oranžna barva se prelije čez napis z leve proti desni */
  background:linear-gradient(90deg,
    var(--oranz) 0%, var(--oranz) 45%,
    var(--rjava) 55%, var(--rjava) 100%);
  background-size:220% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:background-position .65s ease;
}
.brand:hover .brand-name{ background-position:0 0; }
.brand-name small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--siva);
  white-space:nowrap;
}
@media (max-width: 420px){ .brand-name small{ display:none; } }

/* --- Navigacija --------------------------------------------------------- */
.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer; padding:.55rem;
  border-radius:10px;
}
.nav-toggle svg{ width:26px; height:26px; display:block; stroke:var(--rjava); }
.nav-toggle .icon-close{ display:none; }
.nav-open .nav-toggle .icon-burger{ display:none; }
.nav-open .nav-toggle .icon-close{ display:block; }

.site-nav ul{ list-style:none; margin:0; padding:0; }
.site-nav .nav-social{ display:none; } /* na namizju so kontakti v vrstici nad glavo */
.site-nav > ul{ display:flex; align-items:center; gap:.15rem; }
.site-nav a, .site-nav .sub-toggle{
  display:flex; align-items:center; gap:.3rem;
  padding:.55rem .8rem;
  font-weight:600; font-size:.95rem; color:var(--rjava);
  text-decoration:none; border-radius:10px;
  background:none; border:0; cursor:pointer; font-family:var(--font-body);
  white-space:nowrap;
}
.site-nav a:hover, .site-nav .sub-toggle:hover{ background:var(--breskev); color:var(--oranz-temna); }
.site-nav a[aria-current="page"]{ color:var(--oranz-temna); background:var(--breskev); }
.site-nav .chev{ width:14px; height:14px; transition:transform .2s; flex:none; }

/* --- Mega meni ----------------------------------------------------------- */
.has-sub{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff;
  border-top:1px solid var(--linija);
  box-shadow:0 24px 40px -18px rgba(51,38,28,.28);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.has-sub.open > .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.has-sub.open > .sub-toggle{ background:var(--breskev); color:var(--oranz-temna); }
.has-sub.open > .sub-toggle .chev{ transform:rotate(180deg); }
.mega-grid{
  display:grid; gap:.35rem 1.2rem;
  grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  padding:1.4rem 0 1.6rem;
}
.mega-grid.narrow{ grid-template-columns:repeat(auto-fit, minmax(240px, 300px)); }
.mega-item{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.75rem .8rem !important; border-radius:12px;
  text-decoration:none; white-space:normal !important;
  transition:background .15s;
}
.mega-item:hover{ background:var(--breskev); }
.mega-item .mi-dot{
  flex:none; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg, var(--breskev), var(--breskev-2));
  display:flex; align-items:center; justify-content:center;
  color:var(--oranz-temna);
  transition:background .15s, color .15s;
}
.mega-item .mi-dot svg{ width:19px; height:19px; }
.mega-item:hover .mi-dot{
  background:linear-gradient(135deg, var(--marelica), var(--oranz));
  color:#fff;
}
.mega-item strong{ display:block; font-size:.94rem; line-height:1.3; color:var(--rjava); }
.mega-item small{ display:block; font-size:.8rem; color:var(--siva); line-height:1.4; margin-top:.15rem; font-weight:400; }
.mega-item[aria-current="page"] strong{ color:var(--oranz-temna); }

/* ==========================================================================
   Hero (domov)
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--breskev);
  padding:clamp(4.5rem, 10vw, 8.5rem) 0;
  text-align:left;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("../uploads/2018/03/27355707_1332488580230681_8040874431918358045_o.jpg") center 32%/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(253,241,229,.94) 0%,
    rgba(253,241,229,.82) 34%,
    rgba(253,241,229,.38) 58%,
    rgba(253,241,229,.06) 82%,
    rgba(253,241,229,0) 100%);
}
.hero-copy{ max-width:620px; }
.hero h1{ margin-bottom:.3em; font-size:clamp(2.4rem, 6vw, 4rem); letter-spacing:-.01em; }
.cudo-grad{
  background:linear-gradient(95deg, var(--oranz) 15%, #F0A03C 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  font-size:clamp(1.05rem, 2.2vw, 1.28rem);
  max-width:34em; margin:0 0 1.7em; color:var(--rjava-2);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oranz-temna); margin-bottom:1.1rem;
}
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  margin:2rem 0 0; padding:0; list-style:none;
  font-size:.92rem; font-weight:600; color:var(--rjava-2);
}
.hero-trust li{ display:flex; align-items:center; gap:.55rem; margin:0; }
.hero-trust li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--marelica); flex:none;
}

/* nežen "dež" cvetov logotipa v ozadju hero sekcije (samo domov) */
.petal-rain{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
}
.petal-rain span{
  position:absolute; top:-70px; display:block;
  opacity:var(--o, .4);
}
.petal-rain svg{ display:block; width:100%; height:100%; }
@media (prefers-reduced-motion: no-preference){
  .petal-rain span{ animation:petal-fall var(--d, 18s) linear var(--z, 0s) infinite; }
  .petal-rain svg{ animation:petal-sway var(--s, 5s) ease-in-out infinite alternate; }
}
@keyframes petal-fall{
  to{ transform:translateY(130vh); }
}
@keyframes petal-sway{
  from{ transform:translateX(-16px) rotate(28deg); }
  to{ transform:translateX(16px) rotate(76deg); }
}
@media (max-width: 720px){
  .hero{ text-align:center; }
  .hero::after{ background:rgba(253,241,229,.82); }
  .hero-copy{ margin-inline:auto; }
  .hero .lead{ margin-inline:auto; }
  .hero-actions, .hero-trust{ justify-content:center; }
  /* na telefonu le pet majhnih cvetov, enakomerno razporejenih po širini */
  .petal-rain span{ display:none; }
  .petal-rain span:nth-child(2),
  .petal-rain span:nth-child(4),
  .petal-rain span:nth-child(7),
  .petal-rain span:nth-child(11),
  .petal-rain span:nth-child(13){
    display:block;
    width:18px !important; height:18px !important;
    opacity:.22;
  }
}

/* --- Cvetni list — podpis strani ---------------------------------------- */
.petal-mark{ width:20px; height:20px; flex:none; rotate:45deg; } /* diagonalno = cvet, ne križ */
.petals-bg{
  position:absolute; z-index:-1; opacity:.5; pointer-events:none;
}

/* ==========================================================================
   Gumbi
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--oranz); color:#fff;
  font-weight:700; font-family:var(--font-body); font-size:1rem;
  padding:.85rem 1.7rem; border-radius:999px;
  text-decoration:none; border:2px solid var(--oranz);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--oranz-temna); border-color:var(--oranz-temna); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(229,106,25,.35); }
.btn-outline{ background:transparent; color:var(--oranz-temna); }
.btn-outline:hover{ background:var(--oranz); color:#fff; }
.btn-light{ background:#fff; border-color:#fff; color:var(--oranz-temna); }
.btn-light:hover{ background:var(--breskev); border-color:var(--breskev); color:var(--oranz-temna); box-shadow:0 8px 20px rgba(0,0,0,.15); }

/* ==========================================================================
   Sekcije
   ========================================================================== */
.section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.section-tinted{ background:var(--breskev); }
.section-center{ text-align:center; }
.section-center p{ margin-inline:auto; }
.section-center ul{ margin-inline:auto; text-align:left; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oranz-temna); margin-bottom:.9rem;
}

/* --- Kartice storitev ---------------------------------------------------- */
.cards{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top:2.2rem;
}
.card{
  background:#fff; border:1px solid var(--linija); border-radius:var(--radius);
  padding:1.7rem 1.4rem 1.6rem; text-align:center;
  text-decoration:none; color:var(--rjava);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:var(--marelica); color:var(--rjava); }
.card-icon{
  width:64px; height:64px; border-radius:20px;
  background:linear-gradient(135deg, var(--marelica), var(--oranz));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.card-icon svg{ width:32px; height:32px; }
.card h3{ font-size:1.02rem; margin:0; letter-spacing:.02em; }
.card p{ font-size:.92rem; color:var(--siva); margin:0; }
.card .more{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.2rem; font-size:.88rem; font-weight:700; color:var(--oranz-temna);
  opacity:0; transform:translateX(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
a.card:hover .more{ opacity:1; transform:none; }
@media (hover:none){ a.card .more{ opacity:1; transform:none; } }

/* --- Deljena sekcija (slika + besedilo) ---------------------------------- */
.split{
  display:grid; gap:clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns:1fr 1.4fr; align-items:center;
}
.split-media img{
  border-radius:var(--radius); box-shadow:var(--shadow-m);
  width:100%; aspect-ratio:3/2; object-fit:cover; /* rezervirana višina — brez preskokov postavitve */
}
.split.reverse{ grid-template-columns:1.4fr 1fr; }
.split.reverse .split-media{ order:2; }

/* --- Oranžni CTA pas ------------------------------------------------------ */
.band{
  background:linear-gradient(120deg, var(--oranz) 0%, var(--oranz-temna) 100%);
  color:#fff; text-align:center;
  padding:clamp(2.8rem, 6vw, 4.5rem) 0;
  position:relative; overflow:hidden; isolation:isolate;
}
.band h2{ color:#fff; }
.band p{ margin-inline:auto; color:rgba(255,255,255,.92); }
.band .btn{ margin-top:1rem; }
.band .container{ position:relative; z-index:1; }
.band-petal{
  position:absolute; z-index:0; pointer-events:none; opacity:.14; rotate:45deg;
}

/* ==========================================================================
   Podstrani
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg, var(--breskev) 0%, var(--breskev-2) 100%);
  padding:clamp(2.6rem, 6vw, 4.2rem) 0;
}
.page-hero h1{ margin-bottom:.2em; }
.page-hero .lead{ font-size:1.12rem; color:var(--rjava-2); margin:0; max-width:60em; }
.breadcrumb{
  font-size:.85rem; margin-bottom:1rem; color:var(--siva);
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
}
.breadcrumb a{ color:var(--siva); text-decoration:none; }
.breadcrumb a:hover{ color:var(--oranz-temna); }
.breadcrumb .sep{ opacity:.6; }

.prose h2{ margin-top:1.8em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.5em; }
.prose img{ border-radius:var(--radius); }
.note{
  background:var(--breskev); border-left:4px solid var(--oranz);
  border-radius:0 12px 12px 0; padding:1rem 1.2rem; margin:1.4rem 0;
  max-width:var(--w-text);
}
.note p:last-child{ margin-bottom:0; }

/* --- Galerija ------------------------------------------------------------- */
.gallery{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(min(130px, 100%), 1fr));
  margin:1.6rem 0; padding:0; list-style:none;
}
.gallery a{ display:block; border-radius:12px; overflow:hidden; }
.gallery img{
  width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .25s ease;
}
.gallery a:hover img{ transform:scale(1.06); }
.gallery-wide{ grid-template-columns:repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.gallery-wide img{ aspect-ratio:3/4; }

dialog.lightbox{
  border:0; padding:0; background:transparent; max-width:min(92vw, 1000px); max-height:92vh;
}
dialog.lightbox::backdrop{ background:rgba(28,18,10,.85); }
dialog.lightbox img{ max-width:100%; max-height:88vh; width:auto; height:auto; margin:auto; border-radius:12px; }
dialog.lightbox .lb-close{
  position:fixed; top:14px; right:16px;
  background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:999px;
  width:42px; height:42px; font-size:1.4rem; cursor:pointer; line-height:1;
}

/* --- Facebook objave ------------------------------------------------------ */
.fb-grid{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  margin-top:2rem; justify-items:center;
}
.fb-grid iframe{
  width:100%; max-width:500px; height:640px;
  border:0; border-radius:14px; background:#fff;
  box-shadow:var(--shadow-s); border:1px solid var(--linija);
}
/* privolitev pred nalaganjem vdelanih vsebin (GDPR) */
.embed-consent{
  max-width:640px; margin:2rem auto 0;
  background:#fff; border:1px solid var(--linija); border-radius:var(--radius);
  padding:1.5rem 1.4rem; text-align:center;
}
.embed-consent p{ margin:0 0 1rem; color:var(--siva); font-size:.95rem; max-width:none; }
.embed-consent-actions{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:0 !important;
}
.embed-consent-actions .btn{ width:auto; }

/* --- Ekipa ---------------------------------------------------------------- */
.team{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  margin-top:2rem;
}
.member{
  background:#fff; border:1px solid var(--linija); border-radius:var(--radius);
  overflow:hidden; transition:transform .18s, box-shadow .18s;
  display:flex; flex-direction:column;
}
.member:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.member img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--breskev); }
.member-body{ padding:1.1rem 1.2rem 1.3rem; }
.member h3{ margin:0 0 .15em; font-size:1.08rem; }
.member .role{
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--oranz-temna); margin:0 0 .6em;
}
.member p{ font-size:.92rem; color:var(--siva); margin:0; }

/* --- Trgovina ------------------------------------------------------------- */
.shop-section{ margin-top:3.2rem; }
.shop-section:first-of-type{ margin-top:1.4rem; }
.products{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fill, minmax(min(215px, 100%), 1fr));
  margin-top:1.4rem;
}
.product{
  background:#fff; border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-s);
  border:1px solid color-mix(in oklab, var(--linija) 55%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.product-img{
  position:relative; background:#fff; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  padding:1.15rem; border-bottom:1px solid var(--linija);
}
.product-img a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; border-radius:10px; }
.product-img img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; transition:transform .25s ease;
}
.product:hover .product-img img{ transform:scale(1.045); }
.product-img .zoom-hint{
  position:absolute; right:.65rem; bottom:.65rem;
  width:30px; height:30px; border-radius:999px;
  background:var(--breskev); color:var(--oranz-temna);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.product:hover .product-img .zoom-hint{ opacity:1; }
.product-img svg.ph{ width:58px; height:58px; opacity:.4; }
.product-body{ padding:1.05rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.product h3{ font-size:.98rem; margin:0; line-height:1.35; }
.product .price{
  font-family:var(--font-display); font-weight:800; font-size:1.28rem;
  color:var(--oranz-temna); margin:0; letter-spacing:.01em;
}
.product .btn{
  margin-top:auto; font-size:.88rem; padding:.62rem 1rem;
  width:100%;
}
.shop-note{
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(120deg, var(--breskev), var(--breskev-2));
  border:1px solid var(--linija); border-radius:var(--radius);
  padding:1.2rem 1.4rem; max-width:820px;
}
.shop-note svg{ flex:none; width:34px; height:34px; color:var(--oranz-temna); margin-top:.15rem; }
.shop-note p{ margin:0; max-width:none; }

/* --- Kontakt / info ------------------------------------------------------- */
.info-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top:2rem;
}
.info-card{
  background:#fff; border:1px solid var(--linija); border-radius:var(--radius);
  padding:1.4rem 1.3rem;
}
.info-card h3{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--oranz-temna); margin-bottom:.5em; }
.info-card p{ margin:0; font-size:1.02rem; }
.info-card a{ text-decoration:none; font-weight:600; }
.info-card .big{ font-family:var(--font-display); font-size:1.35rem; font-weight:800; }

dl.data{ max-width:var(--w-text); margin:1rem 0; }
dl.data div{ display:grid; grid-template-columns:180px 1fr; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--linija); }
dl.data dt{ font-weight:700; color:var(--rjava-2); }
dl.data dd{ margin:0; }

.iban-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  background:#fff; border:2px dashed var(--marelica); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin:1.5rem 0; max-width:640px;
}
.iban-box code{ font-size:1.15rem; font-weight:700; letter-spacing:.04em; color:var(--rjava); font-family:ui-monospace, monospace; }

/* --- Novice --------------------------------------------------------------- */
.news{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top:2rem;
}
.news-card{
  background:#fff; border:1px solid var(--linija); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:var(--rjava);
  display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.news-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); color:var(--rjava); }
.news-card img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.news-body{ padding:1.1rem 1.2rem 1.3rem; }
.news-body .date{ font-size:.8rem; color:var(--siva); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.news-body h3{ font-size:1.05rem; margin:.3em 0 0; line-height:1.35; }

/* ==========================================================================
   Noga
   ========================================================================== */
.site-footer{
  background:var(--rjava); color:#CBB9A9;
  padding:clamp(2.8rem, 6vw, 4.2rem) 0 0;
  font-size:.95rem;
}
.footer-grid{
  display:grid; gap:2.2rem;
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:2.5rem;
}
.site-footer h3{
  color:#fff; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1em;
}
.site-footer a{ color:#EBD9C6; text-decoration:none; }
.site-footer a:hover{ color:var(--marelica); }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.55em; }
.footer-brand{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.footer-brand img{ width:44px; height:44px; }
.footer-brand strong{ color:#fff; font-family:var(--font-display); font-size:1.15rem; }
.footer-contact li{ display:flex; gap:.6rem; align-items:baseline; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.2rem 0; font-size:.85rem;
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; align-items:center;
}

/* ==========================================================================
   Animacije — najsodobnejši CSS, brez poskakovanja postavitve
   --------------------------------------------------------------------------
   1) Prehodi med stranmi: cross-document View Transitions (mehak preliv).
   2) Razkrivanje sekcij: scroll-driven animacije (animation-timeline: view())
      — čisti CSS, elementi so privzeto VIDNI, zato vsebina nikoli ne "skoči",
      brskalniki brez podpore pa preprosto prikažejo stran brez učinka.
   3) Samo transform/opacity — nič, kar bi premikalo postavitev.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation-duration:.16s; }
  ::view-transition-new(root){ animation-duration:.24s; }

  /* ---- 1) Vstopna koreografija ob nalaganju strani ---- */
  .topbar{ animation:drop-in .5s cubic-bezier(.2,.7,.25,1) both; }
  .site-header{ animation:drop-in .55s cubic-bezier(.2,.7,.25,1) .06s both; }
  .brand{ animation:slide-right .6s cubic-bezier(.2,.7,.25,1) .18s both; }
  /* "backwards" (ne "both"): transform animacija, ki po koncu še "polni",
     bi naredila li za containing block in zlomila širino mega panela */
  .site-nav > ul > li{ animation:hero-in .45s cubic-bezier(.2,.7,.25,1) backwards; }
  .site-nav > ul > li:nth-child(1){ animation-delay:.22s; }
  .site-nav > ul > li:nth-child(2){ animation-delay:.27s; }
  .site-nav > ul > li:nth-child(3){ animation-delay:.32s; }
  .site-nav > ul > li:nth-child(4){ animation-delay:.37s; }
  .site-nav > ul > li:nth-child(5){ animation-delay:.42s; }
  .site-nav > ul > li:nth-child(6){ animation-delay:.47s; }
  .site-nav > ul > li:nth-child(7){ animation-delay:.52s; }
  .site-nav > ul > li:nth-child(8){ animation-delay:.57s; }

  /* domov: hero po plasteh */
  .hero-eyebrow, .hero h1, .hero .lead, .hero-actions, .hero-trust li{
    animation:hero-in .7s cubic-bezier(.2,.7,.25,1) both;
  }
  .hero-eyebrow{ animation-delay:.25s; }
  .hero h1{ animation-delay:.33s; }
  .hero .lead{ animation-delay:.43s; }
  .hero-actions{ animation-delay:.53s; }
  .hero-trust li:nth-child(1){ animation-delay:.64s; }
  .hero-trust li:nth-child(2){ animation-delay:.72s; }
  .hero-trust li:nth-child(3){ animation-delay:.8s; }
  .petal-rain{ animation:fade-in 1.4s ease .5s both; }
  .hero::before{ animation:hero-zoom 22s ease-in-out infinite alternate; }

  /* podstrani: naslovni pas po plasteh */
  .page-hero .breadcrumb{ animation:hero-in .55s cubic-bezier(.2,.7,.25,1) .22s both; }
  .page-hero h1{ animation:hero-in .65s cubic-bezier(.2,.7,.25,1) .3s both; }
  .page-hero .lead{ animation:hero-in .65s cubic-bezier(.2,.7,.25,1) .4s both; }

}

/* ---- 2) Ob drsenju se vsak sklop mehko pripelje od spodaj ----
   JS (main.js) elementom POD pregibom doda .will-reveal (skrit),
   IntersectionObserver pa ob vstopu v vidno polje .in (prehod).
   Brez JS ali z "manj animacij" je vse preprosto vidno — nič ne skoči. */
.will-reveal{
  opacity:0; transform:translateY(30px);
}
.will-reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--rd, 0s);
}

@keyframes reveal-rise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}
@keyframes hero-in{
  from{ opacity:0; transform:translateY(16px); }
}
@keyframes drop-in{
  from{ transform:translateY(-100%); }
}
@keyframes slide-right{
  from{ opacity:0; transform:translateX(-18px); }
}
@keyframes fade-in{
  from{ opacity:0; }
}
@keyframes hero-zoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.025); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   Odzivnost
   ========================================================================== */
@media (max-width: 1150px){
  /* backdrop-filter bi naredil glavo za "containing block" fiksnega menija */
  .site-header{ backdrop-filter:none; background:#fff; }
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:74px 0 0 0; z-index:99;
    background:#fff; overflow-y:auto; padding:1rem var(--pad-x) 3rem;
    display:none;
  }
  .nav-open .site-nav{ display:block; }
  .nav-open{ overflow:hidden; }
  .topbar{ display:none; }
  .site-nav > ul{ display:block; }
  .site-nav a, .site-nav .sub-toggle{
    width:100%; font-size:1.05rem; padding:.85rem .6rem;
    border-bottom:1px solid var(--linija); border-radius:0;
    justify-content:space-between;
  }
  .mega{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; min-width:0;
    display:none; background:var(--breskev);
  }
  .has-sub.open > .mega{ display:block; }
  .mega-grid{ display:block; padding:.3rem 0; }
  .site-nav .mega-item{ padding:.7rem .9rem !important; border-radius:0; justify-content:flex-start; }
  .mega-item .mi-dot{ width:30px; height:30px; background:#fff; }
  .mega-item small{ display:none; }
  .site-nav .nav-social{ display:flex; gap:.9rem; padding:1.4rem .6rem; }
  .site-nav .nav-social a{
    width:46px; height:46px; flex:none; border-radius:999px;
    background:var(--breskev); color:var(--oranz-temna);
    display:flex; align-items:center; justify-content:center;
    padding:0; border-bottom:0;
  }
  .site-nav .nav-social svg{ width:20px; height:20px; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .footer-grid{ grid-template-columns:1fr; gap:1.8rem; }
  dl.data div{ grid-template-columns:1fr; gap:.1rem; }
}

@media (max-width: 560px){
  body{ font-size:1rem; }
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap:.5rem; }
  .brand-name{ font-size:1.05rem; }
  .brand img{ width:40px; height:40px; }
  .hero{ padding:3.2rem 0; }
  .btn{ width:100%; }
  .band .btn, .product .btn, .iban-box .btn{ width:auto; }
}