/* ===== Korálky Bižu — watercolour wash style ===== */
:root{
  --petrol: #2b5a62;
  --petrol-dark: #1d3f45;
  --petrol-light: #6fa3a9;
  --apricot: #e8935c;
  --apricot-dark: #c96f3b;
  --apricot-light: #f6c9a0;
  --beige: #f3ead9;
  --beige-dark: #e3d5bb;
  --paper: #fbf6ec;
  --ink: #2a2420;
  --ink-soft: #5b5248;
  --radius: 18px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Consolas", "Liberation Mono", monospace;
  --shadow-1: 0 10px 30px -12px rgb(42 36 32 / 0.25);
  --shadow-2: 0 4px 14px -6px rgb(42 36 32 / 0.2);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--petrol-dark); text-decoration:none}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--petrol-dark);
}
p{margin:0 0 1em}
ul{margin:0}
.wrap{max-width:1180px; margin:0 auto; padding:0 1.4rem}
section{position:relative}

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

/* ===== grain overlay ===== */
.grain{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; opacity:.05; z-index:999; mix-blend-mode:multiply;
}

/* ===== skip link ===== */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--petrol-dark); color:#fff;
  padding:.6rem 1rem; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ===== header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgb(251 246 236 / 0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgb(42 36 32 / 0.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.7rem; padding-bottom:.7rem; gap:1rem;
}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ink); flex-shrink:0}
.logo svg.mark{width:42px; height:42px; flex-shrink:0}
.logo svg.wordmark{width:150px; height:auto; aspect-ratio:150/26}
@media (max-width:480px){.logo svg.wordmark{width:112px}}
.main-nav{display:flex; align-items:center; gap:1.8rem}
.main-nav a{
  font-size:.98rem; color:var(--ink); position:relative; padding:.3rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--apricot); transition:width .25s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current]::after{width:100%}
.header-actions{display:flex; align-items:center; gap:1rem}
.cart-link{display:flex; align-items:center; gap:.4rem; font-weight:600; position:relative}
.cart-link svg{width:24px; height:24px}
.cart-count{
  background:var(--apricot-dark); color:#fff; font-size:.72rem; font-weight:700;
  min-width:20px; height:20px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px;
  transition:transform .35s cubic-bezier(.3,1.6,.4,1);
}
.cart-count.bump{transform:scale(1.5)}
.menu-toggle{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-toggle svg{width:26px; height:26px}

@media (max-width: 820px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--beige); flex-direction:column; align-items:flex-start;
    padding:5.5rem 1.6rem 2rem; gap:1.4rem; box-shadow:var(--shadow-1);
    transform:translateX(100%); visibility:hidden; transition:transform .35s ease, visibility .35s ease;
  }
  .main-nav.open{transform:translateX(0); visibility:visible}
  .main-nav a{font-size:1.15rem}
  .menu-toggle{display:flex}
}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:700; font-size:.96rem;
  padding:.8rem 1.6rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  min-height:44px; text-align:center;
}
.btn span{position:relative; z-index:2}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%; width:100%; z-index:1;
  transition:left .35s ease;
}
.btn:hover::before{left:0}
.btn-primary{background:var(--petrol-dark); color:#fff}
.btn-primary::before{background:var(--apricot-dark)}
.btn-ghost{background:transparent; color:var(--petrol-dark); border-color:var(--petrol-dark)}
.btn-ghost::before{background:var(--petrol-dark)}
.btn-ghost:hover{color:#fff}
.btn-dark{background:transparent; color:var(--paper); border-color:rgb(251 246 236 / .5)}
.btn-dark::before{background:var(--apricot)}
.btn-dark:hover{color:var(--ink)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn::before{pointer-events:none}

/* ===== reveal ===== */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease, clip-path .7s ease;}
.js .reveal.in-view{opacity:1; transform:none}
.js .reveal.clip{clip-path:inset(0 0 100% 0); transition:clip-path .8s ease, opacity .8s ease;}
.js .reveal.clip.in-view{clip-path:inset(0 0 0% 0)}

/* ===== hero split screen ===== */
.hero-split{
  position:relative; min-height:min(88vh,860px); display:grid; overflow:hidden;
  background:var(--petrol-dark);
}
.hero-side{
  position:relative; display:flex; align-items:center; overflow:hidden;
}
.hero-side.petrol{background:linear-gradient(165deg,var(--petrol-dark),var(--petrol))}
.hero-side.apricot{background:linear-gradient(165deg,var(--apricot),var(--apricot-dark))}
.hero-side img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:luminosity; opacity:.4;
}
.hero-divider{
  position:absolute; top:0; bottom:0; width:0; z-index:5;
  display:grid; grid-template-columns:1fr; place-items:center;
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1fr 1fr; min-height:min(88vh,860px);
}
.hero-grid .hero-side.apricot{
  clip-path: inset(0 0 0 var(--split, 56%));
}
.hero-grid .hero-side.petrol{
  position:absolute; inset:0;
}
.hero-content{
  position:relative; z-index:6; padding:clamp(2rem,6vw,4.5rem) clamp(1.4rem,5vw,4rem);
  color:var(--paper); max-width:640px;
}
.hero-content .eyebrow{
  font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; opacity:.85; display:block; margin-bottom:1rem;
}
.hero-content h1{
  color:#fff; font-size:clamp(2.4rem,6.6vw,4.6rem); margin-bottom:1rem;
}
.hero-content p.lead{font-size:1.1rem; max-width:480px; opacity:.92}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-shapes{position:absolute; inset:0; z-index:4; pointer-events:none}
.hero-shapes svg{
  position:absolute; filter:drop-shadow(0 10px 18px rgb(0 0 0 / .18));
  transition:transform .15s ease-out;
}
.hero-divider-handle{
  position:absolute; top:50%; left:var(--split,56%); transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:var(--paper);
  display:flex; align-items:center; justify-content:center; z-index:7;
  box-shadow:var(--shadow-1); border:none; cursor:grab;
}
.hero-divider-handle svg{width:22px; height:22px; color:var(--petrol-dark)}
.hero-divider-line{
  position:absolute; top:0; bottom:0; left:var(--split,56%); width:3px; background:var(--paper);
  opacity:.6; z-index:6; transform:translateX(-50%);
}
@media (max-width:760px){
  .hero-grid{min-height:auto}
  .hero-content{padding:3rem 1.4rem 2.4rem; max-width:none}
  .hero-divider-handle,.hero-divider-line{display:none}
  .hero-grid .hero-side.apricot{clip-path:none; display:none}
  .hero-side img{opacity:.28}
}

/* ===== section basics ===== */
.section{padding:clamp(3.2rem,7vw,6rem) 0}
.section-head{max-width:720px; margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.kicker{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:.75rem; color:var(--apricot-dark); font-weight:700; display:block; margin-bottom:.6rem;
}
.alt-bg{background:var(--beige)}

/* divider svg */
.divider-svg{width:100%; height:48px; display:block}

/* ===== calculator feature ===== */
.feature-koralkomer{
  background:var(--petrol-dark); color:var(--paper); position:relative; overflow:hidden;
}
.feature-koralkomer h2{color:var(--paper)}
.feature-koralkomer .wrap{position:relative; z-index:2}
.feature-koralkomer .blob-deco{
  position:absolute; width:560px; height:560px; right:-120px; top:-140px; opacity:.5; z-index:1;
}
.calc-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:start}
.calc-card{
  background:rgb(251 246 236 / .08); border:1px solid rgb(251 246 236 / .22);
  border-radius:var(--radius); padding:1.8rem; backdrop-filter:blur(4px);
}
.calc-row{display:grid; grid-template-columns:1fr; gap:.4rem; margin-bottom:1.2rem}
.calc-row label{font-size:.88rem; font-weight:600}
.calc-row input[type=number], .calc-row select{
  font:inherit; padding:.7rem .9rem; border-radius:10px; border:1px solid rgb(251 246 236 /.4);
  background:rgb(251 246 236 /.12); color:var(--paper); accent-color:var(--apricot);
}
.calc-row input::placeholder{color:rgb(251 246 236 /.6)}
.calc-sizes{display:flex; gap:.6rem; flex-wrap:wrap}
.calc-sizes label{
  border:1px solid rgb(251 246 236 /.4); border-radius:999px; padding:.45rem 1rem;
  font-size:.88rem; cursor:pointer; display:flex; align-items:center; gap:.4rem;
}
.calc-sizes input{accent-color:var(--apricot)}
.calc-result{
  background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:1.8rem;
}
.calc-result .big{font-family:var(--serif); font-size:2.6rem; color:var(--petrol-dark); line-height:1}
.calc-result .big small{font-size:1rem; font-weight:400; color:var(--ink-soft)}
.calc-result ul{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.5rem}
.calc-result li{display:flex; justify-content:space-between; font-size:.95rem; border-bottom:1px dashed var(--beige-dark); padding-bottom:.4rem}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}}

/* ===== cards / grid ===== */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.6rem}
.product-card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden; position:relative;
  box-shadow:var(--shadow-2); transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-1)}
.product-card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--beige)}
.product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.08)}
.product-card .body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.product-card .cat{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--apricot-dark)}
.product-card h3{font-size:1.08rem; margin-bottom:.2rem}
.product-card .price{font-weight:700; color:var(--petrol-dark); margin-top:auto; font-size:1.1rem}
.product-card a.card-link{position:absolute; inset:0; z-index:2}
.product-card .body > .btn{position:relative; z-index:3; align-self:flex-start; margin-top:.4rem}

/* catalog page */
.catalog-toolbar{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:2rem}
.catalog-toolbar button{
  border:1px solid var(--petrol); background:transparent; color:var(--petrol-dark);
  padding:.5rem 1.1rem; border-radius:999px; cursor:pointer; font-size:.9rem; min-height:40px;
}
.catalog-toolbar button[aria-pressed="true"]{background:var(--petrol-dark); color:#fff; border-color:var(--petrol-dark)}

/* mobile horizontal scroll-snap strip */
.strip{
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem;
  -webkit-overflow-scrolling:touch;
}
.strip .product-card{min-width:230px; scroll-snap-align:start; flex:0 0 auto}
@media (min-width:760px){
  .strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); overflow:visible}
}

/* ===== footer ===== */
.site-footer{background:var(--petrol-dark); color:var(--beige); padding:3.6rem 0 1.6rem; position:relative}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.4rem}
.footer-grid h4{color:var(--paper); font-family:var(--sans); font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1rem}
.footer-grid ul{list-style:none; display:grid; gap:.6rem}
.footer-grid a{color:rgb(251 246 236 /.82)}
.footer-grid a:hover{color:#fff; text-decoration:underline}
.footer-about p{color:rgb(251 246 236 /.75); max-width:320px}
.newsletter-form{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.newsletter-form input[type=email]{
  flex:1; min-width:170px; padding:.7rem .9rem; border-radius:10px; border:1px solid rgb(251 246 236 /.3);
  background:rgb(251 246 236 /.08); color:#fff; accent-color:var(--apricot);
}
.newsletter-form input::placeholder{color:rgb(251 246 236 /.55)}
.footer-bottom{
  border-top:1px solid rgb(251 246 236 /.15); margin-top:2.6rem; padding-top:1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.82rem; color:rgb(251 246 236 /.65);
}
.form-note{font-size:.8rem; margin-top:.5rem; color:rgb(251 246 236/.6)}
.form-note.ok{color:var(--apricot-light)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}

/* honeypot */
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}

/* ===== forms generic ===== */
form .field{display:grid; gap:.4rem; margin-bottom:1.2rem}
form label{font-weight:600; font-size:.92rem}
form input, form textarea, form select{
  font:inherit; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--beige-dark);
  background:var(--paper); accent-color:var(--apricot-dark); min-height:44px;
}
form textarea{min-height:120px; resize:vertical}
form .error{color:var(--apricot-dark); font-size:.85rem; display:none}
form .field.invalid input, form .field.invalid textarea{border-color:var(--apricot-dark)}
form .field.invalid .error{display:block}
.form-status{margin-top:1rem; padding:.9rem 1rem; border-radius:10px; display:none}
.form-status.show{display:block}
.form-status.ok{background:#e4f0e4; color:#2a5c2a}
.form-status.fail{background:#f6dede; color:#7a2a2a}
fieldset{border:1px solid var(--beige-dark); border-radius:var(--radius); padding:1.2rem; margin:0 0 1.2rem}
legend{font-family:var(--serif); padding:0 .4rem; color:var(--petrol-dark)}

/* ===== page hero (non-split, inner pages) ===== */
.page-hero{
  background:var(--beige); padding:clamp(2.6rem,6vw,4.4rem) 0; position:relative; overflow:hidden;
}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.2rem)}
.page-hero .blob-deco{position:absolute; width:420px; height:420px; right:-100px; top:-120px; opacity:.6; z-index:0}
.page-hero .wrap{position:relative; z-index:1}
.breadcrumb{font-size:.85rem; color:var(--ink-soft); margin-bottom:1rem}
.breadcrumb a{color:var(--ink-soft)}

/* ===== product detail ===== */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
.product-detail .thumb{aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--beige); box-shadow:var(--shadow-1)}
.product-detail .thumb img{width:100%; height:100%; object-fit:cover}
.product-detail .price{font-size:1.8rem; font-family:var(--serif); color:var(--petrol-dark); margin:.6rem 0 1.2rem}
.qty-row{display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem}
.qty-control{display:flex; align-items:center; border:1px solid var(--beige-dark); border-radius:999px; overflow:hidden}
.qty-control button{width:40px; height:40px; border:0; background:var(--beige); font-size:1.1rem; cursor:pointer}
.qty-control input{width:48px; text-align:center; border:0; min-height:40px}
@media (max-width:760px){.product-detail{grid-template-columns:1fr}}

/* ===== cart page ===== */
.cart-table{width:100%; border-collapse:collapse; margin-bottom:2rem}
.cart-table th{text-align:left; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding-bottom:.6rem; border-bottom:1px solid var(--beige-dark)}
.cart-table td{padding:1rem 0; border-bottom:1px solid var(--beige-dark); vertical-align:middle}
.cart-line{display:flex; gap:1rem; align-items:center}
.cart-line img{width:68px; height:68px; object-fit:cover; border-radius:10px}
.cart-remove{background:none; border:0; color:var(--apricot-dark); cursor:pointer; font-size:.85rem; text-decoration:underline; min-height:32px}
.cart-summary{display:flex; justify-content:flex-end}
.cart-summary table{min-width:280px}
.cart-summary td{padding:.4rem 0}
.cart-summary .total td{font-weight:700; font-size:1.2rem; border-top:1px solid var(--beige-dark); padding-top:.8rem}
.checkout-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2.6rem}
@media (max-width:860px){.checkout-grid{grid-template-columns:1fr}}
.empty-state{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--beige-dark)}
.faq-item summary{
  cursor:pointer; font-family:var(--serif); font-size:1.15rem; padding:1.2rem 0; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--petrol-dark);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{transition:transform .3s ease; flex-shrink:0}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item p{padding-bottom:1.2rem; color:var(--ink-soft)}

/* ===== legal pages ===== */
.legal-content{max-width:760px}
.legal-content h2{margin-top:2.2rem; font-size:1.4rem}
.legal-content ul{padding-left:1.2rem; margin-bottom:1em}

/* ===== cookie banner ===== */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:500; max-width:640px; margin:0 auto;
  background:var(--petrol-dark); color:var(--paper); border-radius:var(--radius); padding:1.3rem 1.5rem;
  box-shadow:var(--shadow-1); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  transform:translateY(140%); transition:transform .4s ease;
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner p{margin:0; flex:1 1 260px; font-size:.9rem; color:rgb(251 246 236/.92)}
.cookie-banner a{color:#fff; text-decoration:underline}
.cookie-actions{display:flex; gap:.7rem; flex-wrap:wrap}

/* ===== 404 ===== */
.notfound{text-align:center; padding:6rem 1rem}
.notfound .big404{font-family:var(--serif); font-size:clamp(4rem,14vw,8rem); color:var(--petrol-dark); margin:0}

/* ===== icon sprite helper ===== */
.icon{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* hero floating shapes positions */
.shape-1{width:54px; height:54px; top:14%; left:8%}
.shape-2{width:34px; height:34px; top:62%; left:20%}
.shape-3{width:70px; height:70px; top:70%; left:46%}
.shape-4{width:40px; height:40px; top:10%; left:60%}
.shape-5{width:130px; height:44px; top:30%; left:78%; opacity:.55}
@media (max-width:760px){.hero-shapes{display:none}}

.feature-icons{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.4rem; margin-top:2rem}
.feature-icons .fi{display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
.feature-icons .fi .icon{color:var(--petrol-dark); width:34px; height:34px}
.feature-icons .fi strong{font-family:var(--serif); font-size:1.05rem; color:var(--petrol-dark)}
.feature-icons .fi span{color:var(--ink-soft); font-size:.92rem}

.about-split{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.about-split .ph{position:relative}
.about-split .ph img{border-radius:var(--radius); box-shadow:var(--shadow-1); aspect-ratio:4/3; object-fit:cover; width:100%}
.about-split .ph svg.badge{position:absolute; width:120px; height:120px; bottom:-28px; left:-28px}
@media (max-width:760px){.about-split{grid-template-columns:1fr}}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.map-card{background:var(--beige); border-radius:var(--radius); padding:1.6rem; display:flex; gap:1rem; align-items:flex-start}
.map-card .icon{color:var(--petrol-dark); flex-shrink:0}