/* Okvirji Kader — Adriatic pebble art direction */

:root{
  --teal-900:#0b3436;
  --teal-800:#0f484a;
  --teal-700:#166567;
  --teal-600:#1f8587;
  --coral:#ef6b53;
  --coral-dark:#d6502f;
  --peach:#ffd9b3;
  --peach-light:#ffecd6;
  --cream:#fbf3e7;
  --sand:#f3e4cf;
  --ink:#1b2a2b;
  --ink-soft:#44585a;
  --white:#ffffff;
  --radius-pebble:38% 62% 58% 42% / 44% 40% 60% 56%;
  --radius-pebble-2:60% 40% 44% 56% / 52% 60% 40% 48%;
  --shadow-soft:0 18px 40px -20px rgba(11,52,54,.45);
  --shadow-lift:0 26px 50px -18px rgba(11,52,54,.55);
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; line-height:1.1; color:var(--teal-900)}
p{margin:0 0 1em}
ul{margin:0; padding:0}
button{font-family:inherit}

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

.visually-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2.5rem);
}

/* ---------- Icon sprite ---------- */
.icon{width:1.3em;height:1.3em;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-0.25em}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,243,231,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(11,52,54,.1);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1.1rem,4vw,2.5rem);
  gap:1rem;
}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--teal-900)}
.logo svg{width:44px;height:44px;flex:none}
.logo-word{font-family:var(--font-display); font-size:1.3rem; letter-spacing:.01em}
.logo-word small{display:block; font-family:var(--font-body); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral-dark); font-weight:600}

.main-nav{display:flex; align-items:center; gap:clamp(1rem,2vw,1.8rem)}
.main-nav a{
  position:relative; text-decoration:none; font-weight:600; font-size:.95rem; color:var(--teal-900);
  padding:.3rem .1rem;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--coral);
  transition:right .35s var(--ease);
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0}
.main-nav a[aria-current="page"]{color:var(--coral-dark)}

.header-actions{display:flex; align-items:center; gap:.9rem}
.cart-link{position:relative; display:flex; align-items:center; gap:.4rem; text-decoration:none; color:var(--teal-900); font-weight:700}
.cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.4em; height:1.4em; padding:0 .25em;
  border-radius:50%; background:var(--coral); color:var(--white);
  font-size:.72rem; font-weight:700;
}
.cart-count.bump{animation:bump .4s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

.menu-toggle{
  display:none; background:none; border:none; cursor:pointer; color:var(--teal-900);
  width:44px; height:44px; align-items:center; justify-content:center;
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(320px,82vw);
    background:var(--teal-900); color:var(--peach-light);
    flex-direction:column; align-items:flex-start; padding:5.5rem 1.8rem 2rem;
    transform:translateX(100%); visibility:hidden; transition:transform .4s var(--ease), visibility .4s;
    gap:1.4rem;
  }
  .main-nav.open{transform:translateX(0); visibility:visible}
  .main-nav a{color:var(--peach-light); font-size:1.05rem}
  .main-nav a::after{background:var(--coral)}
  .menu-toggle{display:flex}
}

/* ---------- Mobile nav overlay ---------- */
.nav-scrim{
  position:fixed; inset:0; background:rgba(11,52,54,.45); opacity:0; visibility:hidden;
  transition:opacity .35s, visibility .35s; z-index:45;
}
.nav-scrim.open{opacity:1; visibility:visible}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border-radius:999px; font-weight:700; font-size:.95rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer; overflow:hidden;
  isolation:isolate; min-height:44px;
}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--teal-900);
  transition:left .4s var(--ease); z-index:-1;
}
.btn:hover::before{left:0}
.btn-primary{background:var(--coral); color:var(--white)}
.btn-primary:hover{color:var(--white)}
.btn-primary::before{background:var(--teal-900)}
.btn-ghost{background:transparent; border-color:var(--teal-900); color:var(--teal-900)}
.btn-ghost::before{background:var(--teal-900)}
.btn-ghost:hover{color:var(--peach-light)}
.btn-light{background:var(--white); color:var(--teal-900)}
.btn-light::before{background:var(--coral)}
.btn-light:hover{color:var(--white)}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------- Reveal ---------- */
.reveal.js-armed{opacity:0; transform:translateY(28px) scale(.98); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in-view{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal.js-armed{opacity:1; transform:none; transition:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:clamp(2.6rem,7vw,5rem) 0 clamp(3rem,8vw,6rem);
  background:radial-gradient(120% 120% at 15% 0%, var(--peach-light) 0%, var(--cream) 46%, var(--sand) 100%);
}
.hero-grain{position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; mix-blend-mode:multiply}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:center;
  position:relative; z-index:2;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--coral-dark); margin-bottom:.9rem;
}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.4rem); max-width:16ch;
}
.hero h1 em{font-style:normal; color:var(--coral)}
.hero-lead{font-size:1.15rem; max-width:34ch; color:var(--ink-soft)}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem}

.hero-art{position:relative; aspect-ratio:1/1; max-width:460px; margin-inline:auto}
.hero-art svg{width:100%; height:100%}
.float-slow{animation:float 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.float-slow{animation:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1.5deg)}}

/* ---------- Ticker ---------- */
.ticker{
  position:relative; overflow:hidden; border-top:1px solid rgba(11,52,54,.12); border-bottom:1px solid rgba(11,52,54,.12);
  background:var(--teal-900); color:var(--peach-light); padding:.75rem 0;
}
.ticker-track{display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:ticker 26s linear infinite}
.ticker-track span{font-family:var(--font-display); font-size:1.1rem; display:flex; align-items:center; gap:.7rem}
.ticker-track span::before{content:"\2726"; color:var(--coral); font-size:.8rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- Sections ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.section-head{max-width:46rem; margin-bottom:2.2rem}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.kicker{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--coral-dark)}

.divider{display:block; width:100%; height:auto}

/* ---------- Accordion (home composition) ---------- */
.accordion{display:flex; flex-direction:column; gap:1rem}
.acc-item{
  border-radius:28px; background:var(--white); box-shadow:var(--shadow-soft); overflow:hidden;
  border:1px solid rgba(11,52,54,.08);
}
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; text-align:left; padding:1.3rem 1.6rem; cursor:pointer;
  font-family:var(--font-display); font-size:1.25rem; color:var(--teal-900);
}
.acc-trigger .acc-num{color:var(--coral); font-family:var(--font-body); font-weight:800; margin-right:.6rem}
.acc-trigger svg{flex:none; width:1.4em; height:1.4em; transition:transform .35s var(--ease); color:var(--coral-dark)}
.acc-item[data-open="true"] .acc-trigger svg{transform:rotate(45deg)}
.acc-panel{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease);
}
.acc-panel-inner{padding:0 1.6rem 1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:center}
@media (max-width:760px){.acc-panel-inner{grid-template-columns:1fr}}
.acc-panel-inner img{border-radius:20px; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.acc-panel-inner p{color:var(--ink-soft)}

/* ---------- Product grid / strip ---------- */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.6rem}
.product-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr);
  gap:1.2rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory;
}
@media (min-width:860px){.product-strip{grid-auto-columns:minmax(230px,1fr)}}
.product-strip .card{scroll-snap-align:start}

.card{
  background:var(--white); border-radius:26px; overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid rgba(11,52,54,.07); text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lift)}
.card-media{aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--sand)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.08)}
.card-body{padding:1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.card-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--coral-dark); font-weight:700}
.card-body h3{font-size:1.1rem; margin:0}
.card-price{margin-top:auto; font-weight:800; color:var(--teal-900); font-size:1.15rem}
.card-price .note{font-weight:600; font-size:.75rem; color:var(--ink-soft)}

/* ---------- Badge/seal ---------- */
.badge-seal{width:140px; height:140px; flex:none}

/* ---------- Feature: Stenski planer ---------- */
.planner{
  background:var(--teal-900); color:var(--peach-light); border-radius:36px; padding:clamp(1.6rem,4vw,3rem);
  position:relative; overflow:hidden;
}
.planner::after{
  content:""; position:absolute; inset:-20% -10% auto auto; width:50%; height:140%;
  background:radial-gradient(circle, rgba(239,107,83,.25), transparent 70%); pointer-events:none;
}
.planner h2{color:var(--peach-light)}
.planner .kicker{color:var(--peach)}
.planner-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:2rem; position:relative; z-index:1}
@media (max-width:900px){.planner-grid{grid-template-columns:1fr}}
.planner-form{display:flex; flex-direction:column; gap:1rem}
.field-row{display:flex; gap:1rem; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:.35rem; flex:1; min-width:120px}
.field label{font-size:.8rem; font-weight:700; letter-spacing:.04em}
.field input, .field select{
  padding:.7em .9em; border-radius:14px; border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:var(--peach-light); font-size:1rem; accent-color:var(--coral);
}
.field input::placeholder{color:rgba(255,236,214,.55)}
.field select option{color:#000}
.planner-summary{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem}
.chip{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:.4em .9em; font-size:.85rem;
}
.planner-total{font-size:1.4rem; font-weight:800; margin-top:.6rem}
.planner-preview{
  background:rgba(255,255,255,.08); border-radius:26px; padding:1.2rem; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.3); min-height:260px;
}
.wall-box{position:relative; width:100%; background:rgba(255,255,255,.06); border-radius:16px; overflow:hidden}
.wall-frame{
  position:absolute; background:var(--peach); border:3px solid var(--cream); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--teal-900); font-weight:700;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4); transition:all .4s var(--ease);
}

/* ---------- About / split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split img{border-radius:28px; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow-soft)}

/* ---------- Icon list ---------- */
.info-list{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.info-list li{list-style:none}
.info-item{display:flex; gap:.9rem; align-items:flex-start}
.info-item .icon{color:var(--coral-dark); width:1.8em; height:1.8em; flex:none; margin-top:.1em}

/* ---------- Forms ---------- */
.form{display:grid; gap:1.1rem; max-width:620px}
.form-row{display:grid; gap:.4rem}
.form-row label{font-weight:700; font-size:.9rem}
.form-row input, .form-row textarea, .form-row select{
  padding:.75em .9em; border-radius:14px; border:2px solid rgba(11,52,54,.18);
  font-size:1rem; font-family:inherit; background:var(--white); accent-color:var(--coral);
}
.form-row input:focus, .form-row textarea:focus{border-color:var(--coral)}
.form-note{font-size:.82rem; color:var(--ink-soft)}
.form-msg{padding:.8em 1em; border-radius:14px; font-weight:600; display:none}
.form-msg.show{display:block}
.form-msg.success{background:#dff2e6; color:#1f6b3d}
.form-msg.error{background:#fde3df; color:#9a2d1c}
.field-error{color:#b3281a; font-size:.82rem; display:none}
.field-error.show{display:block}

/* ---------- Newsletter ---------- */
.newsletter{display:flex; gap:.6rem; flex-wrap:wrap}
.newsletter input{flex:1; min-width:160px; padding:.75em 1em; border-radius:999px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:var(--peach-light)}
.newsletter input::placeholder{color:rgba(255,236,214,.6)}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; max-width:640px; margin-inline:auto;
  background:var(--teal-900); color:var(--peach-light); border-radius:24px; padding:1.3rem 1.5rem;
  box-shadow:var(--shadow-lift); display:none; gap:1rem; flex-wrap:wrap; align-items:center;
}
.cookie-banner.show{display:flex}
.cookie-banner p{margin:0; flex:1 1 220px; font-size:.92rem}
.cookie-banner a{color:var(--peach); text-decoration:underline}
.cookie-actions{display:flex; gap:.6rem}
.cookie-banner .btn-ghost{border-color:var(--peach-light); color:var(--peach-light)}

/* ---------- Footer ---------- */
.site-footer{background:var(--teal-900); color:var(--peach-light); padding:3.5rem 0 1.6rem; position:relative}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.4rem}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:var(--peach); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem}
.site-footer ul{display:flex; flex-direction:column; gap:.6rem}
.site-footer a{text-decoration:none; color:var(--peach-light); opacity:.9}
.site-footer a:hover{text-decoration:underline}
.footer-bottom{
  margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.82rem; opacity:.8;
}
.footer-logo{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
.footer-logo svg{width:40px;height:40px}

/* ---------- Misc page content ---------- */
.page-hero{background:linear-gradient(160deg,var(--peach-light),var(--cream)); padding:clamp(2.6rem,6vw,4rem) 0 2rem}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.2rem)}
.breadcrumbs{font-size:.85rem; color:var(--ink-soft); margin-bottom:.6rem}
.breadcrumbs a{color:var(--teal-700); text-decoration:none}
.legal h2{margin-top:1.8rem; font-size:1.3rem}
.legal{max-width:760px}
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; margin:1rem 0}
th,td{padding:.6em .8em; border-bottom:1px solid rgba(11,52,54,.12); text-align:left; font-size:.95rem}
th{color:var(--teal-900)}

/* ---------- Cart page ---------- */
.cart-table{width:100%; border-collapse:collapse}
.cart-table th{text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding-bottom:.6rem; border-bottom:2px solid var(--sand)}
.cart-table td{padding:1rem 0; border-bottom:1px solid var(--sand); vertical-align:middle}
.cart-row-product{display:flex; align-items:center; gap:1rem}
.cart-row-product img{width:70px; height:70px; border-radius:14px; object-fit:cover}
.qty-control{display:inline-flex; align-items:center; gap:.4rem}
.qty-control button{width:32px; height:32px; border-radius:50%; border:2px solid var(--teal-900); background:var(--white); cursor:pointer; font-weight:800}
.remove-link{color:var(--coral-dark); font-size:.85rem; font-weight:700; background:none; border:none; cursor:pointer; padding:0}
.cart-summary{background:var(--white); border-radius:24px; padding:1.6rem; box-shadow:var(--shadow-soft); max-width:380px; margin-left:auto}
.summary-line{display:flex; justify-content:space-between; margin-bottom:.6rem}
.summary-total{font-size:1.3rem; font-weight:800; border-top:1px solid var(--sand); padding-top:.8rem; margin-top:.6rem}
.cart-empty{text-align:center; padding:3rem 0}

/* ---------- Product detail ---------- */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem)}
@media (max-width:860px){.pd-grid{grid-template-columns:1fr}}
.pd-media{border-radius:28px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-soft)}
.pd-media img{width:100%; height:100%; object-fit:cover}
.pd-price{font-size:2rem; font-weight:800; color:var(--teal-900); margin:.6rem 0}
.pd-qty{display:flex; align-items:center; gap:1rem; margin:1.2rem 0}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--sand)}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:1.2rem 0; cursor:pointer;
  display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-display); font-size:1.1rem; color:var(--teal-900);
}
.faq-q svg{flex:none; width:1.3em; height:1.3em; transition:transform .3s var(--ease)}
.faq-item[data-open="true"] .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.faq-a p{padding-bottom:1.2rem; color:var(--ink-soft)}

/* ---------- 404 ---------- */
.notfound{text-align:center; padding:5rem 0}
.notfound svg{width:200px; height:200px; margin:0 auto 1rem}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-lg{margin-top:2rem}
.stack{display:flex; flex-direction:column; gap:1rem}
.lead{font-size:1.1rem; color:var(--ink-soft)}
.bg-sand{background:var(--sand)}
.wavy-divider{display:block; width:100%; height:auto; color:var(--sand)}