/* Keramika Radosť — design system. Paper-cut layers, pine/snow/berry. */
:root{
  --pine:#2e4a37;
  --pine-deep:#1f3326;
  --snow:#f6f1e6;
  --snow-card:#fffdf8;
  --berry:#8e2f2a;
  --berry-bright:#c4452f;
  --honey:#c08a3e;
  --ink:#241f1a;
  --ink-soft:#52483e;
  --line:#d9cfb9;
  --radius:1.4rem;
  --shadow-paper:0 18px 40px -18px rgba(31,51,38,.35), 0 2px 6px rgba(31,51,38,.12);
  --shadow-soft:0 10px 24px -14px rgba(31,51,38,.3);
  --ff-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif", serif;
  --ff-body: -apple-system, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
*{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); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0 0 .5em; line-height:1.1; color:var(--pine-deep)}
p{margin:0 0 1em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
:focus-visible{outline:3px solid var(--berry-bright); outline-offset:3px}
.ic{display:inline-block; vertical-align:middle}

/* ---------- layout helpers ---------- */
.wrap{max-width:74rem; margin:0 auto; padding:0 1.5rem}
.grid{display:grid; gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.stack-sm > * + *{margin-top:.75rem}
.stack-lg > * + *{margin-top:2.5rem}
.section{padding:5rem 0}
.section-tight{padding:2.5rem 0}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease, clip-path .6s ease}
.reveal.in-view{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ .reveal{transition:none; opacity:1; transform:none} }

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:40; background:rgba(246,241,230,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.header-inner{max-width:74rem; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:1.5rem}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--pine-deep); margin-right:auto}
.logo-mark{width:2.4rem; height:2.4rem; flex-shrink:0}
.logo-word{font-family:var(--ff-display); font-size:1.05rem; line-height:1.15}
.logo-word em{font-style:normal; color:var(--berry)}
.main-nav{display:flex; align-items:center}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; color:var(--pine-deep); padding:.4rem}
.nav-toggle .ic-close{display:none}
.nav-list{display:flex; list-style:none; gap:1.6rem; margin:0; padding:0}
.nav-list a{text-decoration:none; font-weight:600; font-size:.95rem; position:relative; padding:.3rem 0}
.nav-list a::after{content:"";position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--berry-bright); transition:right .25s ease}
.nav-list a:hover::after,.nav-list a.is-active::after{right:0}
.nav-list a.is-active{color:var(--berry)}
.cart-link{display:flex; align-items:center; gap:.3rem; text-decoration:none; color:var(--pine-deep); position:relative; min-width:44px; min-height:44px; justify-content:center}
.cart-count{background:var(--berry-bright); color:var(--snow); font-size:.72rem; font-weight:700; border-radius:999px; min-width:1.3rem; height:1.3rem; display:inline-flex; align-items:center; justify-content:center; padding:0 .3rem}
.cart-count.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{position:fixed; inset:0 0 0 auto; width:min(80vw,20rem); background:var(--pine-deep); padding:5.5rem 1.5rem 2rem; transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility .3s ease; z-index:50}
  .main-nav.is-open{transform:translateX(0); visibility:visible}
  .nav-toggle{position:relative; z-index:51}
  .main-nav.is-open ~ .nav-toggle, .main-nav.is-open{}
  .nav-list{flex-direction:column; gap:1.4rem}
  .nav-list a{color:var(--snow)}
  body:has(.main-nav.is-open) .nav-toggle .ic-open{display:none}
  body:has(.main-nav.is-open) .nav-toggle .ic-close{display:block}
}

/* ---------- footer ---------- */
.site-footer{background:var(--pine-deep); color:var(--snow); padding:3.5rem 0 1.5rem; margin-top:4rem}
.footer-inner{max-width:74rem; margin:0 auto; padding:0 1.5rem; display:grid; gap:2.5rem; grid-template-columns:1.2fr 2fr 1.2fr}
.footer-brand{display:flex; gap:.7rem; align-items:flex-start}
.footer-brand p{margin:0; font-family:var(--ff-display); font-size:1.05rem}
.footer-brand span{display:block; font-family:var(--ff-body); font-size:.8rem; color:#c9cdbf; margin-top:.2rem}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.footer-cols h3{color:var(--snow); font-family:var(--ff-body); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem; opacity:.7}
.footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.footer-cols a{text-decoration:none; font-size:.92rem; color:#e4e3d8}
.footer-cols a:hover{color:var(--berry-bright)}
.footer-newsletter h3{color:var(--snow); font-family:var(--ff-display); font-size:1.05rem; margin-bottom:.3rem}
.footer-newsletter p{font-size:.88rem; color:#c9cdbf}
.newsletter-form{display:flex; gap:.5rem; flex-wrap:wrap}
.newsletter-form input[type="email"]{flex:1; min-width:9rem; padding:.6rem .8rem; border-radius:.7rem; border:1px solid #43583f; background:#28402b; color:var(--snow)}
.newsletter-form .hp{position:absolute; opacity:0; pointer-events:none; height:0; width:0}
.footer-email{display:flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.88rem}
.footer-email a{text-decoration:underline}
.footer-bottom{max-width:74rem; margin:2.5rem auto 0; padding:1.2rem 1.5rem 0; border-top:1px solid #3a4f3c; font-size:.8rem; color:#a9ad9d}
@media (max-width:760px){ .footer-inner{grid-template-columns:1fr} .footer-cols{grid-template-columns:repeat(2,1fr)} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.9rem; padding:.85rem 1.6rem; font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; border:2px solid transparent; min-height:44px; position:relative; overflow:hidden; isolation:isolate}
.btn span{position:relative; z-index:1}
.btn-fill{background:var(--berry-bright); color:var(--snow)}
.btn-fill::before{content:"";position:absolute; inset:0; left:-100%; width:100%; background:var(--pine-deep); transition:left .3s ease; z-index:0}
.btn-fill:hover::before{left:0}
.btn-outline{background:transparent; color:var(--pine-deep); border-color:var(--pine-deep)}
.btn-outline:hover{background:var(--pine-deep); color:var(--snow)}
.btn-ghost{background:transparent; color:var(--snow); border-color:rgba(246,241,230,.5)}
.btn-ghost:hover{background:rgba(246,241,230,.15)}
.btn-sm{padding:.55rem 1.1rem; font-size:.85rem; min-height:38px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--pine-deep); color:var(--snow); padding:4.5rem 0 3rem; position:relative; overflow:hidden}
.page-hero::after{content:"";position:absolute; right:-4rem; top:-4rem; width:16rem; height:16rem; border-radius:50%; background:radial-gradient(circle, rgba(196,69,47,.35), transparent 70%)}
.page-hero h1{color:var(--snow); font-size:clamp(2rem,5vw,3.2rem)}
.page-hero p{color:#d8d9c9; max-width:38rem}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{display:flex; gap:.4rem; flex-wrap:wrap; font-size:.85rem; color:#c9cdbf; list-style:none; margin:0 0 1rem; padding:0}
.breadcrumbs li::after{content:"/"; margin-left:.4rem; opacity:.6}
.breadcrumbs li:last-child::after{content:""}
.breadcrumbs a{color:#c9cdbf; text-decoration:none}
.breadcrumbs a:hover{color:var(--snow); text-decoration:underline}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:42rem; margin:0 auto; font-size:1.02rem}
.prose h2{margin-top:2.2rem; font-size:1.4rem}
.prose h3{margin-top:1.6rem; font-size:1.1rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.legal-toc{background:var(--snow-card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; max-width:42rem; margin:0 auto 2.5rem}
.legal-toc h2{margin-top:0; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.legal-toc ol{margin:0; padding-left:1.2rem}
.legal-toc a{text-decoration:none; color:var(--berry)}
.legal-toc a:hover{text-decoration:underline}

/* ---------- notice ---------- */
.notice{border-radius:var(--radius); padding:1.1rem 1.4rem; border:1px solid var(--line); background:var(--snow-card); display:flex; gap:.7rem; max-width:42rem}
.notice-info{border-color:#b9c7d9; background:#eef3f8}
.notice-success{border-color:#9bc3a1; background:#eef6ef}
.notice-warning{border-color:var(--honey); background:#fbf0dd}

/* ---------- forms ---------- */
.form-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); max-width:40rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem; font-weight:700; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit; padding:.7rem .9rem; border-radius:.7rem; border:1px solid var(--line); background:var(--snow-card); accent-color:var(--berry-bright);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--berry-bright)}
.field-error{font-size:.8rem; color:var(--berry-bright); min-height:1.1em}
.field .hp{position:absolute; opacity:0; pointer-events:none; height:0; width:0}
.form-msg{min-height:1.2em; font-size:.9rem}
.form-msg-ok{color:#2e6b3b}
.form-msg-error{color:var(--berry-bright)}

/* ---------- faq ---------- */
.faq{max-width:42rem; margin:0 auto; display:grid; gap:.8rem}
.faq-item{background:var(--snow-card); border:1px solid var(--line); border-radius:var(--radius); padding:.2rem 1.4rem}
.faq-item summary{cursor:pointer; padding:1.1rem 0; font-weight:700; font-family:var(--ff-display); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq-item summary::after{content:"+"; color:var(--berry-bright); font-size:1.3rem; flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding-bottom:1.1rem; color:var(--ink-soft)}

/* ---------- product strip / cards ---------- */
.product-strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr); gap:1.4rem; overflow-x:auto; padding:.5rem .2rem 1.2rem; scroll-snap-type:x mandatory}
.product-strip .product-card{scroll-snap-align:start}
.product-grid{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.product-card{background:var(--snow-card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); text-decoration:none; color:var(--ink); display:block; transition:transform .3s ease, box-shadow .3s ease}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-paper)}
.product-card figure{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--line)}
.product-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.product-card:hover img{transform:scale(1.07)}
.product-card .pc-body{padding:1rem 1.2rem 1.3rem}
.product-card h3{font-size:1.05rem; margin:0 0 .25rem}
.product-card .pc-price{color:var(--berry); font-weight:700}

/* ---------- product detail ---------- */
.product-detail{display:grid; gap:2.5rem; grid-template-columns:1.1fr 1fr}
.product-detail figure{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-paper); aspect-ratio:1/1}
.product-detail img{width:100%; height:100%; object-fit:cover}
.product-detail .price{font-size:1.8rem; color:var(--berry); font-family:var(--ff-display)}
.qty-row{display:flex; align-items:center; gap:.8rem; margin:1.2rem 0}
.qty-stepper{display:flex; border:1px solid var(--line); border-radius:.8rem; overflow:hidden}
.qty-stepper button{background:var(--snow-card); border:none; width:2.4rem; min-height:44px; font-size:1.1rem; cursor:pointer}
.qty-stepper input{width:2.6rem; border:none; text-align:center; font:inherit; background:var(--snow-card)}
@media (max-width:760px){ .product-detail{grid-template-columns:1fr} }

/* ---------- cart / checkout ---------- */
.cart-table{width:100%; border-collapse:collapse}
.cart-table th{text-align:left; font-size:.8rem; text-transform:uppercase; color:var(--ink-soft); padding:.6rem; border-bottom:1px solid var(--line)}
.cart-table td{padding:.9rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle}
.cart-row-product{display:flex; align-items:center; gap:.8rem}
.cart-row-product img{width:3.6rem; height:3.6rem; object-fit:cover; border-radius:.6rem}
.cart-remove{background:none; border:none; color:var(--berry-bright); cursor:pointer; font-size:.85rem; text-decoration:underline}
.cart-summary{background:var(--snow-card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; max-width:24rem; margin-left:auto; display:grid; gap:.6rem}
.cart-summary .total{display:flex; justify-content:space-between; font-size:1.2rem; font-weight:700; color:var(--pine-deep); border-top:1px solid var(--line); padding-top:.6rem; margin-top:.4rem}
.cart-empty{text-align:center; padding:3rem 1rem; color:var(--ink-soft)}
@media (max-width:640px){ .cart-table thead{display:none} .cart-table td{display:block; border-bottom:none} .cart-table tr{display:block; border-bottom:1px solid var(--line); padding:.8rem 0} }

/* ---------- contact layout ---------- */
.contact-layout{display:grid; gap:2.5rem; grid-template-columns:1fr 1.1fr}
.contact-info{display:grid; gap:1.1rem; align-content:start}
.contact-info .row{display:flex; gap:.7rem; align-items:flex-start}
.contact-info .row .ic{color:var(--berry-bright); flex-shrink:0; margin-top:.15rem}
@media (max-width:760px){ .contact-layout{grid-template-columns:1fr} }

/* ---------- cookie banner ---------- */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60; background:var(--pine-deep); color:var(--snow); border-radius:1rem; padding:1.2rem 1.4rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between; box-shadow:var(--shadow-paper); max-width:46rem; margin:0 auto}
.cookie-banner p{margin:0; font-size:.9rem; color:#e4e3d8}
.cookie-banner a{text-decoration:underline; color:var(--snow)}
.cookie-actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* ---------- utilities ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.container-narrow{max-width:42rem; margin:0 auto}
.eyebrow{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--berry); font-weight:700}

/* ================= HOME PAGE ================= */
.hero{position:relative; padding:4.5rem 0 6rem; overflow:hidden; background:linear-gradient(180deg,var(--snow) 0%, #eee6d2 100%)}
.hero-inner{max-width:74rem; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem); max-width:16ch}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:30ch}
.hero-cta{display:flex; gap:1rem; margin-top:1.8rem; flex-wrap:wrap}
.hero-art{position:relative; aspect-ratio:1/1}
.hero-art .layer{position:absolute; inset:0; filter:drop-shadow(0 16px 24px rgba(31,51,38,.25)); transition:transform 1s ease}
.hero-art .layer-1{transform:translate(-14px,-10px) rotate(-3deg)}
.hero-art .layer-2{transform:translate(10px,6px) rotate(2deg)}
.hero-art .layer-3{transform:translate(0,14px)}
.hero.hero-ready .layer-1{transform:translate(-26px,-18px) rotate(-5deg)}
.hero.hero-ready .layer-2{transform:translate(18px,10px) rotate(3deg)}
@media (prefers-reduced-motion: reduce){ .hero-art .layer{transition:none} }
@media (max-width:860px){ .hero-inner{grid-template-columns:1fr} }

.numbered-grid{display:grid; gap:0; grid-template-columns:repeat(3,1fr); counter-reset:section-num}
.numbered-grid .num-card{position:relative; padding:2.4rem 1.6rem; border-right:1px solid var(--line)}
.numbered-grid .num-card:last-child{border-right:none}
.numbered-grid .num-card .big-num{font-family:var(--ff-display); font-size:clamp(3.5rem,8vw,6rem); color:var(--line); line-height:1; margin-bottom:.4rem}
.numbered-grid .num-card h3{font-size:1.15rem}
@media (max-width:760px){ .numbered-grid{grid-template-columns:1fr} .numbered-grid .num-card{border-right:none; border-bottom:1px solid var(--line)} }

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

.glaze-studio{background:var(--pine-deep); color:var(--snow); border-radius:2rem; padding:3rem; display:grid; gap:2.5rem; grid-template-columns:1fr 1.2fr; align-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow-paper)}
.glaze-studio h2{color:var(--snow)}
.glaze-preview{background:#fffdf8; border-radius:1.4rem; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--line)}
.glaze-preview svg{width:70%; height:70%}
.glaze-controls{display:grid; gap:1.2rem}
.glaze-row{display:flex; gap:.6rem; flex-wrap:wrap}
.glaze-row button{border-radius:.8rem; border:2px solid rgba(246,241,230,.3); background:transparent; color:var(--snow); padding:.5rem 1rem; cursor:pointer; min-height:44px; font-weight:600}
.glaze-row button.is-active{border-color:var(--berry-bright); background:rgba(196,69,47,.25)}
.swatch{width:2.4rem; height:2.4rem; border-radius:50%; border:3px solid rgba(246,241,230,.4); cursor:pointer; padding:0; min-height:unset}
.swatch.is-active{border-color:var(--snow); transform:scale(1.1)}
[data-glaze-match]{margin-top:.6rem; font-size:.95rem}
[data-glaze-match] a{color:var(--berry-bright); font-weight:700}
@media (max-width:760px){ .glaze-studio{grid-template-columns:1fr; padding:2rem} }

.mood-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.mood-strip img{aspect-ratio:3/4; object-fit:cover; border-radius:1rem; box-shadow:var(--shadow-soft)}
@media (max-width:700px){ .mood-strip{grid-template-columns:repeat(2,1fr)} }

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

/* COMPONENTS:
.page-hero - dark hero band for inner pages with title+intro
.prose - readable long-form legal/text content
.breadcrumbs - small link trail under page-hero
.legal-toc - boxed table of contents for legal pages
.notice / .notice-info / .notice-success / .notice-warning - callout boxes
.btn / .btn-fill / .btn-outline / .btn-ghost / .btn-sm - button variants
.form-grid / .field / .field-error / .field.full - form layout grid and field wrapper
.form-msg / .form-msg-ok / .form-msg-error - inline form submit feedback
.faq / .faq-item - details/summary accordion list
.product-grid / .product-strip / .product-card - catalog listing and snap strip
.product-detail / .qty-row / .qty-stepper - single product page layout
.cart-table / .cart-row-product / .cart-remove / .cart-summary / .cart-empty - cart & checkout
.contact-layout / .contact-info - two-column contact page
.hero / .hero-art / .hero-cta - home page hero with paper layers
.numbered-grid / .num-card / .big-num - oversized-number section grid
.glaze-studio / .glaze-preview / .glaze-controls / .glaze-row / .swatch - signature feature widget
.mood-strip - small photo grid
.reveal / .in-view - scroll-reveal animation hook
.cart-link / .cart-count - header cart icon and badge
.site-header / .main-nav / .nav-list / .nav-toggle - site header & navigation
.site-footer / .footer-cols / .footer-newsletter - site footer
.cookie-banner / .cookie-actions - cookie consent banner
.eyebrow - small uppercase label above headings
.container-narrow - centered max-width text wrapper
.wrap - centered max-width page wrapper
*/