/* Korálkárna — single-line art, pine / snow / berry palette */

:root{
  --snow:#faf6ef;
  --snow-2:#f1ead9;
  --pine:#163b35;
  --pine-2:#2a5650;
  --berry:#d9483a;
  --berry-dark:#b53628;
  --turquoise:#2fa89b;
  --pearl:#ece3d2;
  --ink:#1c2b27;
  --line:#d8cdb6;
  --max:72rem;
  --radius:1.1rem;
  --shadow:0 18px 40px -22px rgba(22,59,53,.35);
  --ff-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,ui-serif,serif;
  --ff-body: -apple-system,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ff-mono: "SF Mono","Consolas",ui-monospace,monospace;
  accent-color: var(--berry);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--snow);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--pine);margin:0 0 .5em;line-height:1.1;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0}
li{list-style:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:4px}

.container{max-width:var(--max);margin-inline:auto;padding-inline:1.4rem}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon-sprite{display:none}
.icon{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  padding:.85em 1.5em;border-radius:999px;border:1.5px solid var(--pine);
  font-size:.95rem;font-weight:600;cursor:pointer;background:transparent;color:var(--pine);
  overflow:hidden;isolation:isolate;min-height:44px;
}
.btn::before{
  content:"";position:absolute;inset:0;width:100%;left:-100%;background:var(--pine);z-index:-1;
  transition:left .35s ease;border-radius:inherit;
}
.btn:hover::before,.btn:focus-visible::before{left:0}
.btn:hover,.btn:focus-visible{color:var(--snow)}
.btn-primary{background:var(--berry);border-color:var(--berry);color:var(--snow)}
.btn-primary::before{background:var(--berry-dark)}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--snow)}
.btn-ghost{border-color:currentColor}
.btn-sm{padding:.6em 1.1em;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(250,246,239,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.6rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-display);font-weight:700;font-size:1.15rem;color:var(--pine)}
.brand svg{width:2.1rem;height:2.1rem;flex:none}
.brand .word{letter-spacing:.01em}
.main-nav{display:flex;align-items:center;gap:1.9rem}
.main-nav a{position:relative;font-weight:600;font-size:.95rem;color:var(--pine)}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.4rem;height:2px;background:var(--berry);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.9rem}
.cart-link{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--pine)}
.cart-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 .25em;
  background:var(--berry);color:var(--snow);border-radius:999px;font-size:.72rem;font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cart-count.bump{transform:scale(1.4)}
.menu-toggle{display:none;background:none;border:none;color:var(--pine);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle .icon{width:1.6em;height:1.6em}

@media (max-width:860px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,20rem);height:100vh;background:var(--pine);
    flex-direction:column;align-items:flex-start;padding:5.5rem 1.8rem 2rem;gap:1.6rem;
    transform:translateX(100%);visibility:hidden;transition:transform .35s ease,visibility .35s;z-index:60;
  }
  .main-nav.open{transform:translateX(0);visibility:visible}
  .main-nav a{color:var(--snow);font-size:1.1rem}
  .main-nav a::after{background:var(--berry)}
  .menu-toggle{display:flex}
  .nav-scrim{position:fixed;inset:0;background:rgba(22,43,39,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:55}
  .nav-scrim.open{opacity:1;visibility:visible}
}

/* ---------- Reveal / scroll motion ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1)}
.js .reveal.in-view{opacity:1;transform:none}
.js .reveal.r-clip{clip-path:inset(0 0 100% 0);transform:none;transition:clip-path .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.r-clip.in-view{clip-path:inset(0 0 0% 0)}
.stagger > *{transition-delay:calc(var(--i, 0) * 90ms)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:3.4rem 0 4.5rem;overflow:hidden}
.hero-inner{position:relative;display:grid;gap:2.5rem;justify-items:center;text-align:center;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--berry);font-weight:700}
.hero h1{
  font-size:clamp(2.6rem,7vw,5.2rem);max-width:16ch;margin:0;position:relative;z-index:3;
}
.hero h1 em{font-style:normal;color:var(--berry)}
.hero p.lead{max-width:38ch;font-size:1.1rem;color:var(--pine-2);margin:0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

.hero-orbit{position:relative;width:min(92vw,34rem);height:min(92vw,34rem);margin-top:1rem}
.orbit-ring{position:absolute;inset:0;border-radius:50%}
.orbit-ring svg{width:100%;height:100%;animation:spin 48s linear infinite}
@media (prefers-reduced-motion: reduce){.orbit-ring svg{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-item{
  position:absolute;top:50%;left:50%;width:4.6rem;height:4.6rem;margin:-2.3rem;
  border-radius:50%;overflow:hidden;border:3px solid var(--snow);box-shadow:var(--shadow);
  animation:orbit 48s linear infinite;
}
.orbit-item img{width:100%;height:100%;object-fit:cover}
.hero-orbit:hover .orbit-item{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.orbit-item{animation:none}}
@keyframes orbit{from{transform:rotate(0deg) translateX(var(--r)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}}

.hero-photo{
  position:absolute;top:50%;left:50%;width:12.5rem;height:12.5rem;margin:-6.25rem;z-index:2;
  border-radius:50%;overflow:hidden;border:4px solid var(--snow);box-shadow:var(--shadow);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.hero-photo::after{content:"";position:absolute;inset:0;background:var(--turquoise);mix-blend-mode:color;opacity:.35}

.about-photo{position:relative;border-radius:1.4rem;overflow:hidden;box-shadow:var(--shadow);max-width:28rem;margin-inline:auto}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(1.05)}
.about-photo::after{content:"";position:absolute;inset:0;background:var(--pine);mix-blend-mode:color;opacity:.28;pointer-events:none}
.about-photo-badge{position:absolute;right:-1.4rem;bottom:-1.4rem;background:var(--snow);border-radius:50%;padding:.6rem;box-shadow:var(--shadow);display:block;z-index:2}
.about-photo-badge .badge-seal{width:5.5rem;height:5.5rem;display:block}

.catalog-banner{position:relative;height:14rem;overflow:hidden}
.catalog-banner img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.catalog-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,59,53,.15),var(--snow));mix-blend-mode:normal}

.hero-blob{position:absolute;z-index:1;width:46rem;height:46rem;top:50%;left:50%;transform:translate(-50%,-56%);opacity:.5;color:var(--turquoise)}
.hero-blob svg{width:100%;height:100%;animation:blobmove 16s ease-in-out infinite}
@keyframes blobmove{
  0%,100%{transform:scale(1) rotate(0deg)}
  33%{transform:scale(1.08,0.94) rotate(6deg)}
  66%{transform:scale(0.95,1.08) rotate(-8deg)}
}
@media (prefers-reduced-motion: reduce){.hero-blob svg{animation:none}}

/* ---------- Sections ---------- */
section{padding:4.2rem 0}
.section-head{max-width:40rem;margin:0 auto 2.6rem;text-align:center}
.section-head .kicker{font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--turquoise);font-weight:700}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.divider{width:100%;height:2.6rem;color:var(--turquoise);opacity:.65;margin:0 auto}
.divider svg{width:100%;height:100%;display:block}

.grid{display:grid;gap:1.6rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

.card{
  background:#fff;border-radius:var(--radius);padding:1.8rem;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .35s ease,box-shadow .35s ease;
}
.card:hover{transform:translateY(-6px)}
.card .icon{color:var(--berry);width:2rem;height:2rem;margin-bottom:.8rem}

.technique-card h3{font-size:1.15rem}
.technique-card p{color:var(--pine-2);font-size:.95rem;margin:0}

.scheme-card{display:flex;flex-direction:column;gap:.9rem}
.swatch-row{display:flex;gap:.4rem}
.swatch{width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* ---------- Products ---------- */
.product-strip{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin:0 -1.4rem;padding-inline:1.4rem}
.product-strip .product-card{scroll-snap-align:start;flex:0 0 15.5rem}
@media (min-width:860px){.product-strip{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}

.product-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .35s ease;
}
.product-card:hover{transform:translateY(-6px)}
.product-card .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--pearl)}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.07)}
.product-card .body{padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product-card .cat{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--turquoise)}
.product-card h3{font-size:1.02rem;margin:0}
.product-card .price{font-weight:700;color:var(--berry);font-size:1.05rem;margin-top:auto}
.product-card .add-btn{margin-top:.4rem}

.catalog-toolbar{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2.2rem}
.chip{
  padding:.5em 1.1em;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.85rem;font-weight:600;cursor:pointer;
  color:var(--pine-2);
}
.chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--snow)}

/* ---------- Planner (signature feature) ---------- */
.planner{
  background:var(--pine);color:var(--snow);border-radius:1.6rem;padding:clamp(1.8rem,4vw,3.2rem);
  position:relative;overflow:hidden;
}
.planner h2,.planner h3{color:var(--snow)}
.planner .kicker{color:var(--turquoise)}
.planner-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.6rem;align-items:start}
@media (max-width:860px){.planner-grid{grid-template-columns:1fr}}
.planner label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.4rem}
.planner-field{margin-bottom:1.3rem}
.planner select,.planner input[type=number]{
  width:100%;padding:.7em .9em;border-radius:.6rem;border:1.5px solid rgba(250,246,239,.35);
  background:rgba(250,246,239,.08);color:var(--snow);font-size:1rem;
}
.planner-colors{display:flex;flex-wrap:wrap;gap:.7rem}
.color-pick{position:relative}
.color-pick input{position:absolute;opacity:0;width:44px;height:44px;cursor:pointer;margin:0}
.color-pick .swatch-btn{
  width:44px;height:44px;border-radius:50%;border:3px solid rgba(250,246,239,.4);display:block;position:relative;cursor:pointer;
}
.color-pick input:checked + .swatch-btn{border-color:var(--berry);box-shadow:0 0 0 3px rgba(217,72,58,.35)}
.color-pick .cname{display:block;text-align:center;font-size:.68rem;margin-top:.3rem;max-width:4.6rem}

.planner-result{background:rgba(250,246,239,.06);border:1px solid rgba(250,246,239,.2);border-radius:1.1rem;padding:1.6rem}
.planner-preview{width:100%;height:4.5rem;margin-bottom:1rem}
.planner-stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.planner-stats strong{display:block;font-size:1.7rem;font-family:var(--ff-display);color:var(--snow)}
.planner-stats span{font-size:.78rem;opacity:.8}
.planner .btn-primary{background:var(--berry)}

/* ---------- Product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:820px){.product-detail{grid-template-columns:1fr}}
.product-media{position:relative;border-radius:1.4rem;overflow:hidden;box-shadow:var(--shadow)}
.product-media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.product-info .cat{font-family:var(--ff-mono);color:var(--turquoise);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
.product-info h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.product-info .price{font-size:1.9rem;color:var(--berry);font-weight:700;font-family:var(--ff-display)}
.qty-row{display:flex;align-items:center;gap:1rem;margin:1.4rem 0}
.qty-row input{width:4.5rem;padding:.6em;border-radius:.5rem;border:1.5px solid var(--line);text-align:center;font-size:1rem}
.meta-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.4rem;font-size:.92rem;color:var(--pine-2)}

/* ---------- Cart / checkout ---------- */
[data-mount="cart-page"]{width:100%;overflow-x:auto}
.cart-table{width:100%;min-width:34rem;border-collapse:collapse}
.cart-table th,.cart-table td{padding:.9rem .6rem;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.cart-row-thumb{width:3.4rem;height:3.4rem;border-radius:.6rem;overflow:hidden;flex:none}
.cart-row-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item-name{display:flex;align-items:center;gap:.8rem;font-weight:600}
.cart-qty-input{width:3.6rem;padding:.4em;border-radius:.4rem;border:1.5px solid var(--line);text-align:center}
.remove-btn{background:none;border:none;color:var(--berry);cursor:pointer;font-size:.85rem;text-decoration:underline;padding:.3em}
.cart-summary{display:flex;justify-content:flex-end;margin-top:1.2rem;gap:2rem}
.cart-summary strong{font-size:1.3rem;font-family:var(--ff-display);color:var(--berry)}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--pine-2)}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:2.6rem}
@media (max-width:820px){.checkout-grid{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.form-field{margin-bottom:1.15rem}
.form-field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35rem}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:.75em .9em;border-radius:.6rem;border:1.5px solid var(--line);background:#fff;font-size:1rem;font-family:inherit;
}
.form-field textarea{min-height:7rem;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field-error{color:var(--berry-dark);font-size:.82rem;margin-top:.3rem;min-height:1.1em}
.form-note{background:var(--pearl);border-radius:.8rem;padding:1rem 1.2rem;font-size:.88rem;color:var(--pine-2);margin:1.3rem 0}
.form-success{background:var(--pine);color:var(--snow);border-radius:.8rem;padding:1.2rem 1.4rem;margin-top:1.2rem}
.honeypot{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  padding:1.1rem .2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--pine);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{transition:transform .3s ease;flex:none}
.faq-item[open] summary .icon{transform:rotate(45deg)}
.faq-item p{padding:0 .2rem 1.2rem;color:var(--pine-2)}

/* ---------- Legal pages ---------- */
.prose{max-width:42rem;margin:0 auto}
.prose h2{margin-top:2rem;font-size:1.3rem}
.prose p,.prose li{color:var(--pine-2)}
.prose li{position:relative;padding-left:1.1em;margin-bottom:.4em}
.prose li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--berry)}

/* ---------- Badges / ornaments ---------- */
.badge-seal{width:7rem;height:7rem;color:var(--pine)}
.ornament{width:100%;max-width:18rem;color:var(--turquoise);margin:0 auto}

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

/* ---------- Newsletter / CTA band ---------- */
.band{background:var(--snow-2);border-radius:1.4rem;padding:2.6rem clamp(1.5rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}
.band h2{font-size:1.5rem;margin:0}
.band form{display:flex;gap:.6rem;flex-wrap:wrap}
.band input[type=email]{padding:.75em 1em;border-radius:999px;border:1.5px solid var(--line);min-width:15rem;font-size:.95rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--pine);color:var(--snow);margin-top:3rem}
.footer-top{padding:3.6rem 0 2.4rem;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.3fr;gap:2rem}
@media (max-width:900px){.footer-top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-top .brand{color:var(--snow)}
.site-footer h4{color:var(--snow);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;margin-bottom:.9rem}
.site-footer a{color:rgba(250,246,239,.85);font-size:.92rem}
.site-footer li{margin-bottom:.55rem}
.site-footer a:hover{color:var(--snow);text-decoration:underline}
.footer-newsletter input[type=email]{width:100%;padding:.7em .9em;border-radius:.6rem;border:1.5px solid rgba(250,246,239,.3);background:rgba(250,246,239,.08);color:var(--snow);margin-bottom:.6rem}
.footer-newsletter .btn{border-color:var(--snow);color:var(--snow);width:100%;justify-content:center}
.footer-newsletter .btn::before{background:var(--snow)}
.footer-newsletter .btn:hover{color:var(--pine)}
.footer-bottom{border-top:1px solid rgba(250,246,239,.18);padding:1.4rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.82rem;color:rgba(250,246,239,.7)}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:40rem;margin-inline:auto;background:var(--pine);color:var(--snow);
  border-radius:1rem;padding:1.3rem 1.5rem;box-shadow:var(--shadow);z-index:200;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:.88rem;flex:1 1 16rem}
.cookie-banner a{text-decoration:underline}
.cookie-actions{display:flex;gap:.7rem}
.cookie-actions .btn-ghost{border-color:rgba(250,246,239,.6);color:var(--snow)}
.cookie-actions .btn-ghost::before{background:rgba(250,246,239,.9)}
.cookie-actions .btn-ghost:hover{color:var(--pine)}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:5rem 0}
.notfound .big{font-size:clamp(4rem,14vw,9rem);font-family:var(--ff-display);color:var(--berry);margin:0}

/* ---------- utility ---------- */
.mt-2{margin-top:2rem}
.center{text-align:center}
.muted{color:var(--pine-2)}