/* Termovke Breza — Desert modernism design system */
:root{
  --clay:#b85c3a; --clay-dark:#8e4328; --terracotta:#c6673f; --sand:#f4e3cf;
  --sand-deep:#e8cdab; --sun:#e8a765; --ink:#2c2320; --cream:#fbf4ea;
  --line:#d8c2a4; --ok:#5a7a52;
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"SF Mono",Consolas,monospace;
  --radius:18px; --radius-sm:10px;
  --shadow:0 20px 50px -20px rgba(44,35,32,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.1;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--clay-dark);outline-offset:3px}
button{font-family:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- utilities ---------- */
.stack-sm > * + *{margin-top:.5rem}
.stack{margin-top:clamp(2.5rem,5vw,5rem)}
.stack-lg{margin-top:clamp(4rem,8vw,8rem)}
.grid{display:grid;gap:clamp(1.2rem,3vw,2.4rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.center{text-align:center}
.muted{color:#6b5a4e}
.section{padding-block:clamp(3rem,7vw,6rem)}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none}
body:not(.no-js) .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
body:not(.no-js) .reveal.in-view{opacity:1;transform:none}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *{scroll-behavior:auto !important}
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,244,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:.6rem}
.logo__mark{flex-shrink:0}
.logo__word{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.01em}
.logo__word em{font-style:normal;color:var(--clay)}
.nav{display:flex;align-items:center}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);padding:.4rem;cursor:pointer;min-width:44px;min-height:44px}
.nav-menu{display:flex;align-items:center;gap:1.8rem}
.nav-menu a{font-size:.95rem;position:relative;padding:.3rem 0}
.nav-menu a:not(.cart-link)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-menu a:hover::after,.nav-menu a.is-active::after{transform:scaleX(1)}
.nav-menu a.is-active{color:var(--clay-dark);font-weight:600}
.cart-link{display:flex;align-items:center;gap:.3rem;position:relative}
.cart-count{background:var(--clay);color:#fff;font-size:.72rem;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.cart-count.bump{animation:cartBump .4s var(--ease)}
@keyframes cartBump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

@media (max-width:860px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-menu{position:fixed;top:76px;right:0;height:calc(100vh - 76px);width:min(320px,80vw);background:var(--sand);flex-direction:column;align-items:flex-start;padding:2rem 1.6rem;gap:1.4rem;
    transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s var(--ease);box-shadow:var(--shadow)}
  .nav-menu.is-open{transform:translateX(0);visibility:visible}
  .nav-menu__cart{margin-top:auto}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.6rem;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,transform .2s}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--clay-dark);z-index:-1;transition:left .35s var(--ease)}
.btn:hover::before{left:0}
.btn:active{transform:translateY(1px)}
.btn--clay{background:var(--clay);color:#fff}
.btn--clay:hover{color:#fff}
.btn--sun{background:var(--sun);color:var(--ink)}
.btn--sun:hover{color:#fff}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--outline-light::before{background:#fff}
.btn--outline-light:hover{color:var(--ink)}
.btn--block{width:100%}
.btn--sm{min-height:38px;padding:.45rem 1.1rem;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- hero (home) ---------- */
.hero{position:relative;padding-block:clamp(3rem,8vw,7rem) clamp(4rem,10vw,8rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(160deg,var(--sand) 0%,var(--cream) 60%)}
.hero__grain{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero__title{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.01em}
.hero__title span{color:var(--clay)}
.hero__lede{font-size:1.15rem;max-width:34ch;color:#5c4b40}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.hero__art{position:relative;aspect-ratio:1/1}
.hero__art svg{width:100%;height:100%}
.hero__photo{position:absolute;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__photo--main{inset:8% 4% 4% 14%;z-index:2}
.hero__shape{position:absolute;z-index:1}
.hero__sun{position:absolute;top:-6%;right:2%;width:34%;animation:spin 40s linear infinite}
@media (prefers-reduced-motion: reduce){.hero__sun{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.ticker{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-flex;gap:2.5rem;animation:ticker 28s linear infinite}
.ticker__track span{font-family:var(--font-display);font-size:1.3rem;color:var(--clay-dark)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker__track{animation:none}}

@media (max-width:860px){.hero__inner{grid-template-columns:1fr}.hero__art{order:-1;max-width:420px;margin-inline:auto}}

/* ---------- section dividers / ornaments ---------- */
.divider{display:block;width:100%;height:auto;color:var(--clay)}
.badge-seal{width:120px;height:120px}

/* ---------- planes / parallax composition ---------- */
.planes{position:relative}
.plane{transition:transform .2s linear}

/* ---------- product cards / catalog ---------- */
.product-strip{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.product-strip .product-card{scroll-snap-align:start;min-width:260px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px -18px rgba(44,35,32,.3);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.product-card__media{aspect-ratio:4/3;overflow:hidden;position:relative}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-card:hover .product-card__media img{transform:scale(1.07)}
.product-card__badge{position:absolute;top:10px;left:10px;background:var(--sun);color:var(--ink);font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.product-card__body{padding:1.1rem 1.2rem 1.3rem}
.product-card__name{font-size:1.05rem;margin-bottom:.2rem}
.product-card__price{font-weight:700;color:var(--clay-dark)}
.product-card__meta{display:flex;gap:.8rem;font-size:.8rem;color:#7a6657;margin:.4rem 0 .8rem}

/* ---------- feature: Toplotni kalkulator ---------- */
.feature{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:clamp(1.6rem,4vw,3rem);position:relative;overflow:hidden}
.feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.feature h2{color:#fff}
.feature__controls label{display:block;font-size:.85rem;margin:1rem 0 .4rem;color:var(--sand)}
.feature__controls select,.feature__controls input[type=range]{width:100%}
.feature__readout{background:rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:1.4rem;text-align:center}
.feature__temp{font-family:var(--font-display);font-size:3rem;color:var(--sun)}
.feature__bar{height:10px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:1rem}
.feature__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--clay));transition:width .4s var(--ease)}
@media (max-width:760px){.feature__grid{grid-template-columns:1fr}}

/* ---------- generic inner-page system ---------- */
.page-hero{background:var(--sand);padding:clamp(3rem,7vw,5rem) 0 clamp(2.2rem,5vw,3.5rem);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.1rem,4.5vw,3.2rem)}
.page-hero__lede{max-width:60ch;color:#5c4b40;font-size:1.05rem}
.breadcrumbs{font-size:.85rem;color:#7a6657;margin-bottom:1rem}
.breadcrumbs a{text-decoration:underline}
.breadcrumbs span{margin:0 .4rem}

.prose{max-width:68ch;margin-inline:auto}
.prose h2{margin-top:2.2rem;font-size:1.5rem}
.prose h3{margin-top:1.6rem;font-size:1.2rem}
.prose ul{list-style:disc;padding-left:1.4rem;margin-bottom:1em}
.prose ul li{margin-bottom:.4em}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0}
.prose th,.prose td{border:1px solid var(--line);padding:.6em .8em;text-align:left}

.legal-toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;max-width:68ch;margin:0 auto 2rem}
.legal-toc h2{font-size:1rem;margin-bottom:.6rem}
.legal-toc ol{list-style:decimal;padding-left:1.2rem}
.legal-toc li{margin-bottom:.3em}
.legal-toc a{text-decoration:underline}

.notice{border-radius:var(--radius-sm);padding:1rem 1.2rem;border:1px solid var(--line);background:#fff;display:flex;gap:.8rem;align-items:flex-start}
.notice--info{border-color:var(--sun);background:#fff8ec}
.notice--success{border-color:var(--ok);background:#f1f6ef}
.notice--error{border-color:var(--clay);background:#fdf0ea}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.85rem;font-weight:600}
.field input,.field select,.field textarea{accent-color:var(--clay);font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;min-height:44px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--clay)}
.field--full{grid-column:1/-1}
.field-error{color:#a23b2a;font-size:.8rem;min-height:1.1em}
.field.has-error input,.field.has-error textarea{border-color:#a23b2a}
.field-inline{display:flex;gap:.6rem}
.field-inline input{flex:1}

/* faq */
.faq{max-width:68ch;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq-item summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--clay)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 1.2rem 1.1rem;color:#5c4b40;margin:0}

/* product detail */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.product-detail__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1}
.product-detail__media img{width:100%;height:100%;object-fit:cover}
.product-detail__price{font-size:1.6rem;font-weight:700;color:var(--clay-dark);margin:.6rem 0 1rem}
.product-detail__specs{display:flex;flex-wrap:wrap;gap:1rem;margin:1.2rem 0}
.product-detail__specs div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem 1rem;font-size:.85rem}
.qty-control{display:flex;align-items:center;gap:.6rem;margin:1rem 0}
.qty-control button{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
@media (max-width:760px){.product-detail{grid-template-columns:1fr}}

/* cart */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:.9rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cart-table img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm)}
.cart-summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;max-width:380px;margin-left:auto}
.cart-summary__row{display:flex;justify-content:space-between;padding:.4rem 0}
.cart-summary__row--total{font-weight:700;font-size:1.1rem;border-top:1px solid var(--line);margin-top:.6rem;padding-top:.8rem}

/* contact */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
.contact-info{display:flex;flex-direction:column;gap:1rem}
.contact-info__item{display:flex;gap:.8rem;align-items:flex-start}
@media (max-width:760px){.contact-layout{grid-template-columns:1fr}}

/* about / place */
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.split-media img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}
@media (max-width:760px){.split-media{grid-template-columns:1fr}}

/* toast + cookie banner */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.8rem 1.4rem;border-radius:999px;opacity:0;transition:opacity .3s,transform .3s;z-index:80;font-size:.9rem}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--cream);transform:translateY(100%);transition:transform .4s var(--ease);z-index:70}
.cookie-banner.is-visible{transform:translateY(0)}
.cookie-banner__inner{width:min(1100px,92vw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 0}
.cookie-banner a{text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.8rem}

/* footer */
.site-footer{background:var(--sand);border-top:1px solid var(--line);margin-top:clamp(4rem,8vw,7rem)}
.site-footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:2rem;padding-block:clamp(2.5rem,5vw,4rem) 2rem}
.footer-col h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a:hover{text-decoration:underline}
.footer-mail{display:flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:.9rem}
.site-footer__bottom{border-top:1px solid var(--line);padding:1.2rem 0;font-size:.85rem;color:#7a6657}
@media (max-width:860px){.site-footer__inner{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.site-footer__inner{grid-template-columns:1fr}}

/* COMPONENTS: .class - what it is
.wrap - centered max-width content container
.section - vertical page section padding
.reveal / .reveal.in-view - scroll-reveal animation hook (JS adds in-view)
.site-header / .nav-menu / .nav-toggle - sticky header and mobile nav
.logo / .logo__mark / .logo__word - SVG logo lockup
.cart-link / .cart-count - header cart icon with live count badge
.btn / .btn--clay / .btn--sun / .btn--ghost / .btn--outline-light / .btn--block / .btn--sm - button variants with fill-sweep hover
.hero / .hero__bg / .hero__grain / .hero__inner / .hero__title / .hero__lede / .hero__actions / .hero__art / .hero__photo / .hero__shape / .hero__sun - home hero composition
.ticker / .ticker__track - hero product-name ticker
.divider / .badge-seal - decorative bespoke SVGs
.planes / .plane - parallax depth layers
.product-strip / .product-grid / .product-card / .product-card__media / .product-card__badge / .product-card__body / .product-card__name / .product-card__price / .product-card__meta - catalog product cards (grid or horizontal strip)
.feature / .feature__grid / .feature__controls / .feature__readout / .feature__temp / .feature__bar - Toplotni kalkulator signature feature
.page-hero / .page-hero__lede - inner page header band
.breadcrumbs - breadcrumb trail
.prose - readable long-form legal/content text
.legal-toc - table of contents box for legal pages
.notice / .notice--info / .notice--success / .notice--error - callout boxes
.form-grid / .field / .field--full / .field-error / .field-inline - form layout system
.faq / .faq-item - FAQ accordion (details/summary)
.product-detail / .product-detail__media / .product-detail__price / .product-detail__specs / .qty-control - product page layout
.cart-table / .cart-summary / .cart-summary__row - cart/checkout layout
.contact-layout / .contact-info / .contact-info__item - contact page layout
.split-media - image+text split section (about/place pages)
.toast - transient confirmation message
.cookie-banner / .cookie-banner__actions - cookie consent banner
.site-footer / .footer-col / .newsletter-form / .footer-mail - site footer
*/

/* Footer column variants */
.footer-col--brand {
}

.footer-col--news {
}

/* SVG icon sprite */
.icon-sprite {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: inline-block;
}

/* Product detail page layout */
.product-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem,4vw,3rem);
  align-items: start;
}

.product-detail__body {
  padding: clamp(1rem,3vw,2rem) 0;
}

.product-price {
  font-size: clamp(1.1rem,2.5vw,1.3rem);
  font-weight: 700;
  color: var(--clay-dark);
  margin-bottom: 1rem;
}

/* Cart rows */
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.cart-row--header {
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-bottom: 0.75rem;
}

/* Quantity input field */
.qty-input {
  width: 70px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  text-align: center;
  min-height: 36px;
  accent-color: var(--clay);
}

/* Split media sections */
.split-media__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-media__image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

@media (max-width:760px) {
  .product-detail__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width:520px) {
  .cart-row {
    grid-template-columns: 1fr;
  }
}

/* wg-contrast-autofix */
div.cookie-banner.is-visible div.cookie-banner__inner div.cookie-banner__actions button.btn.btn--ghost { color: #ffffff !important; }