/* Posteljina Val — design system. Style: Orbits (rings, orbit lines, diagonal clip sections). */

:root{
  --sage:#7c8a68;
  --sage-dark:#5c6a4c;
  --oat:#f3ecdd;
  --oat-deep:#e7dcc3;
  --clay:#bb7e5e;
  --clay-dark:#9a5f44;
  --ink:#2c2a24;
  --paper:#fbf8f1;
  --line:#d9cfb6;
  --radius:1.1rem;
  --shift:0px;
  --duo:0.5;
  --maxw:72rem;
  --ff-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ff-body:"Segoe UI","Inter",system-ui,-apple-system,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

html,body{overflow-x:clip;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--clay-dark);}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.1;margin:0 0 .5em;}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:.3em;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* layout utilities */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.grid{display:grid;gap:clamp(1rem,2vw,2rem);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));}
.stack{display:flex;flex-direction:column;}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
.mt-1{margin-top:1rem;}.mt-2{margin-top:2rem;}.mt-3{margin-top:3rem;}
.mb-0{margin-bottom:0;}
.section{padding-block:clamp(3rem,8vw,6rem);position:relative;}
.section--oat{background:var(--oat);}
.section--sage{background:var(--sage);color:var(--oat);}
.section--sage a{color:var(--oat);}
.section--diagonal{clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);}
.section--diagonal-r{clip-path:polygon(0 0,100% 3%,100% 100%,0 97%);}

/* skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--oat);padding:.5rem 1rem;z-index:100;}
.skip-link:focus{left:1rem;top:1rem;}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,241,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:.85rem;gap:1rem;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
.brand svg{width:2.5rem;height:2.5rem;flex-shrink:0;}
.brand-word{font-family:var(--ff-display);font-size:1.3rem;letter-spacing:.02em;}
.brand-sub{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:.6rem;
  background:var(--paper);position:relative;cursor:pointer;
}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);top:50%;transform:translateY(-50%);}
.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--ink);}
.nav-toggle::before{top:13px;}
.nav-toggle::after{bottom:13px;}

.nav{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.6rem);flex-wrap:wrap;}
.nav a{text-decoration:none;color:var(--ink);font-size:.93rem;position:relative;padding:.3rem 0;}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--clay);transition:right .25s ease;}
.nav a:hover::after,.nav a.is-active::after{right:0;}
.nav a.is-active{color:var(--clay-dark);}
.nav-cart{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--sage);color:var(--oat)!important;
  padding:.5rem .9rem;border-radius:2rem;text-decoration:none;font-size:.88rem;
}
.nav-cart svg{width:1.1rem;height:1.1rem;}
.nav-cart::after{display:none;}
[data-cart-count]{font-family:var(--ff-mono);font-weight:700;}
[data-cart-count].bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}

@media (max-width:860px){
  .nav-toggle{display:block;}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,20rem);height:100vh;
    background:var(--paper);flex-direction:column;align-items:flex-start;
    padding:5.5rem 1.5rem 2rem;gap:1.1rem;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease;
    border-left:1px solid var(--line);
  }
  .nav.is-open{transform:translateX(0);visibility:visible;}
  .nav-cart{order:-1;}
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;border-radius:2rem;border:1px solid transparent;
  font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;
  min-height:44px;position:relative;overflow:hidden;isolation:isolate;
  transition:color .25s ease,border-color .25s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;left:-100%;width:100%;z-index:-1;
  transition:left .3s ease;
}
.btn--primary{background:var(--clay);color:#fff;}
.btn--primary::before{background:var(--clay-dark);}
.btn--primary:hover::before{left:0;}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--ghost::before{background:var(--ink);}
.btn--ghost:hover{color:var(--oat);}
.btn--ghost:hover::before{left:0;}
.btn--ghost-dark{background:transparent;border-color:var(--oat);color:var(--oat);}
.btn--ghost-dark::before{background:var(--oat);}
.btn--ghost-dark:hover{color:var(--ink);}
.btn--ghost-dark:hover::before{left:0;}
.btn--sm{padding:.55rem 1.1rem;font-size:.85rem;min-height:38px;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

/* hero */
.hero{position:relative;padding-block:clamp(3rem,10vw,7rem) clamp(4rem,12vw,8rem);overflow:hidden;background:var(--oat);}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:center;}
.hero-copy h1{font-size:clamp(2.4rem,6vw,4.2rem);}
.hero-copy p{font-size:1.1rem;max-width:32rem;}
.hero-media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;transform:translateY(var(--shift));}
.hero-media img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.35) saturate(1.3) hue-rotate(calc(var(--duo) * -40deg)) contrast(1.05);
}
.hero-orbit{position:absolute;inset:-10%;pointer-events:none;z-index:2;width:120%;height:120%;}
.hero-orbit circle{animation:spin 60s linear infinite;transform-origin:center;}
.hero-orbit .ring-2{animation-duration:90s;animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr;}}

/* orbit dividers / decorative */
.orbit-divider{width:100%;height:auto;display:block;}
.grain-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;opacity:.05;mix-blend-mode:multiply;z-index:1;}

/* signature feature: Krug sna calculator */
.sleep-circle{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;}
.sleep-circle-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;}
.sleep-ring{width:70%;transition:transform .4s ease;transform:scale(var(--ring-scale,1));}
.sleep-ring circle{fill:none;stroke:var(--sage);stroke-width:1.4;}
.sleep-ring.is-active circle.r3{stroke:var(--clay);}
.sleep-form .field{margin-bottom:1rem;}
.sleep-result ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;}
.sleep-result li{background:var(--paper);border:1px solid var(--line);border-radius:.6rem;padding:.6rem .9rem;}
@media (max-width:760px){.sleep-circle{grid-template-columns:1fr;}}

/* product cards / strip */
.product-strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,18rem);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;}
.product-strip .product-card{scroll-snap-align:start;}
.grid-3 .product-card{height:100%;}
.product-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 1.2rem 2rem -1rem rgba(44,42,36,.25);}
.product-card-media{aspect-ratio:4/3;overflow:hidden;}
.product-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .product-card-media img{transform:scale(1.08);}
.product-card-body{padding:1.1rem 1.1rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.product-card-cat{font-family:var(--ff-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sage-dark);}
.product-card-price{font-weight:700;font-size:1.1rem;margin-top:auto;}

/* badges / seals */
.seal{width:5rem;height:5rem;}

/* reveal */
.reveal{opacity:0;}
.js .reveal{clip-path:inset(0 0 100% 0);transform:translateY(1.2rem);opacity:0;transition:clip-path .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease;}
.js .reveal.in-view{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{transition:none;clip-path:none;transform:none;opacity:1;}
}

/* page hero (inner pages) */
.page-hero{background:var(--oat);padding-block:clamp(2.5rem,6vw,4.5rem);position:relative;overflow:hidden;}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem);}
.page-hero p{max-width:40rem;font-size:1.05rem;}

/* breadcrumbs */
.breadcrumbs{font-family:var(--ff-mono);font-size:.78rem;color:var(--sage-dark);margin-bottom:1rem;}
.breadcrumbs a{color:var(--sage-dark);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}

/* prose (legal text) */
.prose{max-width:42rem;font-size:1.02rem;}
.prose h2{margin-top:2.2rem;font-size:1.4rem;}
.prose h3{margin-top:1.4rem;font-size:1.1rem;}
.prose ul,.prose ol{padding-left:1.3rem;}
.prose li{margin-bottom:.4rem;}

/* legal-toc */
.legal-toc{background:var(--oat);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:2rem;}
.legal-toc ol{margin:0;padding-left:1.3rem;}
.legal-toc a{text-decoration:none;}
.legal-toc a:hover{text-decoration:underline;}

/* notice */
.notice{border-radius:.8rem;padding:1rem 1.2rem;border:1px solid var(--line);background:var(--oat);margin-bottom:1.2rem;}
.notice--warn{border-color:var(--clay);background:#f8ead9;}
.notice--success{border-color:var(--sage);background:#eaf0e1;}

/* forms */
.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field label{font-size:.85rem;font-weight:600;}
.field input,.field select,.field textarea{
  font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.6rem;background:var(--paper);
  accent-color:var(--clay);min-height:44px;
}
.field textarea{min-height:7rem;}
.field-error{color:var(--clay-dark);font-size:.8rem;min-height:1.1em;}
.field--full{grid-column:1/-1;}
.field--honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-success{background:#eaf0e1;border:1px solid var(--sage);border-radius:.6rem;padding:1rem;margin-top:1rem;}
.form-error-general{background:#f8ead9;border:1px solid var(--clay);border-radius:.6rem;padding:1rem;margin-top:1rem;}

/* contact layout */
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.contact-info{display:grid;gap:1rem;}
.contact-info .cluster svg{width:1.4rem;height:1.4rem;color:var(--clay-dark);flex-shrink:0;}
@media (max-width:800px){.contact-layout{grid-template-columns:1fr;}}

/* faq */
.faq{display:grid;gap:.9rem;max-width:44rem;}
.faq-item{border:1px solid var(--line);border-radius:.8rem;background:var(--paper);overflow:hidden;}
.faq-item summary{padding:1rem 1.2rem;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--clay);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 1.2rem 1.1rem;margin:0;}

/* product detail */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.product-detail-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;}
.product-detail-media img{width:100%;height:100%;object-fit:cover;}
.product-detail-price{font-size:1.6rem;font-weight:700;}
.size-options{display:flex;gap:.6rem;flex-wrap:wrap;}
.size-options label{border:1px solid var(--line);border-radius:2rem;padding:.5rem 1rem;cursor:pointer;font-size:.88rem;}
.size-options input{accent-color:var(--clay);margin-right:.4rem;}
@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:.8rem;border-bottom:1px solid var(--line);text-align:left;}
.cart-table img{width:4rem;height:4rem;object-fit:cover;border-radius:.5rem;}
.cart-summary{background:var(--oat);border-radius:var(--radius);padding:1.3rem 1.5rem;display:grid;gap:.6rem;max-width:22rem;margin-left:auto;}
.cart-summary-row{display:flex;justify-content:space-between;}
.cart-summary-row.total{font-weight:700;font-size:1.15rem;border-top:1px solid var(--line);padding-top:.6rem;}

/* footer */
.site-footer{background:var(--ink);color:var(--oat);padding-block:clamp(2.5rem,6vw,4rem) 1.5rem;}
.site-footer a{color:var(--oat);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem;}
.footer-grid h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--oat-deep);font-family:var(--ff-mono);}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem;}
.newsletter-form{display:flex;gap:.5rem;flex-wrap:wrap;}
.newsletter-form input{flex:1;min-width:10rem;padding:.65rem .8rem;border-radius:.6rem;border:1px solid var(--sage);background:#241f17;color:var(--oat);min-height:44px;}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #45402f;font-size:.82rem;color:var(--oat-deep);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;}

/* cookie banner */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:34rem;margin-inline:auto;
  background:var(--ink);color:var(--oat);border-radius:var(--radius);padding:1.3rem 1.5rem;
  box-shadow:0 1rem 2.5rem -0.5rem rgba(0,0,0,.4);display:grid;gap:1rem;
}
.cookie-banner a{color:var(--oat);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:.7rem;flex-wrap:wrap;}

/* icons */
.icon{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:1.6;}

/* 404 */
.page-404{text-align:center;padding-block:clamp(4rem,12vw,8rem);}
.page-404 h1{font-size:clamp(3rem,10vw,6rem);}

/*
COMPONENTS:
.wrap - centered max-width container
.grid, .grid-2, .grid-3 - responsive grid helpers
.stack - flex column
.cluster - flex row wrap, centered items
.section, .section--oat, .section--sage - full-bleed content sections
.section--diagonal, .section--diagonal-r - angled clip-path section edges
.skip-link - accessible skip-to-content link
.site-header, .brand, .brand-word, .brand-sub - header/logo
.nav-toggle - mobile hamburger button
.nav, .nav a, .is-active - primary navigation
.nav-cart, [data-cart-count] - header cart link with live count
.btn, .btn--primary, .btn--ghost, .btn--ghost-dark, .btn--sm - buttons with fill-sweep hover
.hero, .hero-copy, .hero-media, .hero-orbit - home hero with duotone + orbit rings
.orbit-divider - decorative SVG section divider
.grain-overlay - fixed SVG grain texture overlay
.sleep-circle, .sleep-circle-visual, .sleep-ring, .sleep-form, .sleep-result - "Krug sna" calculator feature
.product-strip - horizontal scroll-snap product list (mobile)
.product-card, .product-card-media, .product-card-body, .product-card-cat, .product-card-price - product card
.seal - decorative badge/seal svg size
.reveal, .in-view - scroll-reveal animation hook
.page-hero - inner page hero/header band
.breadcrumbs - breadcrumb trail
.prose - long-form legal/readable text block
.legal-toc - table of contents box for legal pages
.notice, .notice--warn, .notice--success - callout boxes
.form-grid, .field, .field-error, .field--full, .field--honeypot - form layout
.form-success, .form-error-general - form result messages
.contact-layout, .contact-info - contact page layout
.faq, .faq-item - FAQ accordion (details/summary)
.product-detail, .product-detail-media, .product-detail-price, .size-options - product page layout
.cart-table, .cart-summary, .cart-summary-row - cart/checkout layout
.site-footer, .footer-grid, .newsletter-form, .footer-bottom - footer
.cookie-banner, .cookie-banner-actions - cookie consent banner
.icon - stroke icon from sprite
.page-404 - 404 page layout
*/

/* orbit rings and circles */
.ring-1,
.r1,
.r2{
  fill:none;
  stroke:var(--sage);
  stroke-width:1.4;
}

/* button modifiers */
.btn--full{
  width:100%;
}

/* product detail layout */
.product-detail-info{
  display:flex;
  flex-direction:column;
}

/* wg-contrast-autofix */
header.site-header div.wrap button.nav-toggle span.sr-only { color: #ffffff !important; }