/* =========================================================
   Škola za Pse Šapa — Ceramic Glaze style
   ========================================================= */
:root{
  --ivory:#f4ecdd;
  --ivory-2:#ece1cb;
  --aubergine:#3a1b2b;
  --aubergine-deep:#24101b;
  --aubergine-soft:#5c3047;
  --lime:#c3d93a;
  --lime-deep:#9bb027;
  --clay:#c4693f;
  --clay-deep:#9c4e2c;
  --ink:#241019;
  --cream:#fffaf0;
  --line:rgba(36,16,25,.14);
  --radius-lg:2.2rem;
  --radius-md:1.2rem;
  --radius-sm:.6rem;
  --shadow-1:0 1.2rem 2.4rem -1rem rgba(36,16,25,.28);
  --shadow-2:0 .4rem 1rem -.3rem rgba(36,16,25,.22);
  --font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-body: "Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono: "Consolas","SFMono-Regular",Menlo,monospace;
  --dur:1;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0; } }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.08;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}
button{font-family:inherit;}

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

:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:.3rem;
}

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

/* ---------- icon sprite ---------- */
.icon-sprite{display:none;}
.icon{width:1.3em;height:1.3em;stroke:currentColor;fill:none;stroke-width:1.6;vertical-align:-.22em;}

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

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--aubergine);
  color:var(--ivory);
  border-bottom:3px solid var(--lime);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 0;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ivory);flex-shrink:0;}
.brand svg{width:44px;height:44px;flex-shrink:0;}
.brand-word{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.02em;}
.brand-word small{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);}

.nav-toggle{
  display:none;
  background:none;border:2px solid var(--ivory);border-radius:.5rem;
  color:var(--ivory);width:44px;height:44px;place-items:center;
  cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;}

.main-nav ul{display:flex;gap:1.4rem;list-style:none;flex-wrap:wrap;}
.main-nav a{
  text-decoration:none;font-size:.95rem;letter-spacing:.02em;
  position:relative;padding:.3rem 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform calc(.3s*var(--dur)) ease;
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--lime);}

.header-aside{display:flex;align-items:center;gap:1rem;}
.cart-link{
  display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--ivory);
  border:2px solid var(--lime);border-radius:2rem;padding:.35rem .9rem;
  font-size:.85rem;
}
.cart-count{
  background:var(--lime);color:var(--aubergine-deep);font-weight:700;
  border-radius:50%;min-width:1.5em;height:1.5em;display:grid;place-items:center;
  font-size:.78rem;transition:transform .25s ease;
}
.cart-count.bump{animation:bump .4s ease;}
@keyframes bump{0%{transform:scale(1);}35%{transform:scale(1.5);}100%{transform:scale(1);}}

@media (max-width:860px){
  .nav-toggle{display:grid;}
  .main-nav{
    position:fixed;inset:64px 0 0 0;background:var(--aubergine);
    padding:1.5rem;transform:translateY(-110%);transition:transform .3s ease;
    overflow-y:auto;
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:1.1rem;font-size:1.2rem;}
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--lime);color:var(--aubergine-deep);
  overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--aubergine);
  font-family:var(--font-display);
}
.marquee-track{
  display:inline-flex;gap:2.5rem;padding:.55rem 0;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }
.marquee-track span{font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:4.5rem 0 6rem;
  background:radial-gradient(ellipse at 50% -10%, var(--aubergine-soft), var(--aubergine) 60%, var(--aubergine-deep));
  color:var(--ivory);overflow:hidden;
}
.hero-bg-shape{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.hero-inner{
  position:relative;display:grid;place-items:center;text-align:center;
  min-height:min(72vh,640px);
}
.hero-orbit{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.orbit-ring{
  position:absolute;border:1.5px dashed rgba(244,236,221,.25);border-radius:50%;
}
.orbit-ring.r1{width:min(72vw,560px);height:min(72vw,560px);}
.orbit-ring.r2{width:min(92vw,700px);height:min(92vw,700px);}
.orbit-item{
  position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-38px;
  border-radius:50%;overflow:hidden;
  border:3px solid var(--lime);box-shadow:var(--shadow-2);
  animation:orbit-spin 38s linear infinite;
  transform:rotate(0deg) translateX(var(--orbit-r,220px)) rotate(0deg);
}
.orbit-item img{width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion: reduce){ .orbit-item{animation:none;} }
.orbit-item.o1{animation-duration:30s;}
.orbit-item.o2{animation-duration:38s;animation-direction:reverse;}
.orbit-item.o3{animation-duration:46s;}
.orbit-item.o4{animation-duration:34s;animation-direction:reverse;}
.orbit-item.o5{animation-duration:42s;}
.orbit-item.o6{animation-duration:50s;animation-direction:reverse;}

@keyframes orbit-spin{
  from{transform:rotate(0deg) translateX(var(--orbit-r)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg);}
}

.hero-kicker{
  font-family:var(--font-mono);letter-spacing:.3em;text-transform:uppercase;
  font-size:.78rem;color:var(--lime);margin-bottom:1rem;position:relative;z-index:2;
}
.hero h1{
  position:relative;z-index:2;
  font-size:clamp(2.6rem,7vw,5.6rem);
  max-width:14ch;margin-inline:auto;
  text-shadow:0 .3rem 1rem rgba(0,0,0,.25);
}
.hero p.lede{
  position:relative;z-index:2;max-width:46ch;margin:1.2rem auto 1.8rem;
  font-size:1.1rem;color:var(--ivory-2);
}
.hero-ctas{position:relative;z-index:2;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ---------- buttons ---------- */
.btn{
  --fill:0%;
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.7rem;border-radius:3rem;border:2px solid currentColor;
  font-weight:600;text-decoration:none;cursor:pointer;background:transparent;
  overflow:hidden;z-index:1;isolation:isolate;font-size:.95rem;
}
.btn::before{
  content:"";position:absolute;inset:0;left:-100%;width:100%;
  transition:left calc(.35s*var(--dur)) ease;z-index:-1;
}
.btn:hover::before,.btn:focus-visible::before{left:0;}
.btn span{position:relative;z-index:1;}
.btn-primary{color:var(--aubergine-deep);border-color:var(--lime);background:var(--lime);}
.btn-primary::before{background:var(--ivory);}
.btn-ghost{color:var(--ivory);border-color:var(--ivory);}
.btn-ghost::before{background:var(--ivory);}
.btn-ghost:hover{color:var(--aubergine-deep);}
.btn-dark{color:var(--ivory);border-color:var(--aubergine);background:var(--aubergine);}
.btn-dark::before{background:var(--clay);}
.btn-dark:hover{color:var(--ivory);}
.btn-small{padding:.55rem 1.1rem;font-size:.82rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- sections generic ---------- */
section{padding:4.5rem 0;position:relative;}
.section-head{max-width:60ch;margin-bottom:2.5rem;}
.section-head .eyebrow{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.25em;
  font-size:.75rem;color:var(--clay-deep);
}
.bg-ivory2{background:var(--ivory-2);}
.bg-dark{background:var(--aubergine);color:var(--ivory);}
.bg-dark h2,.bg-dark h3{color:var(--ivory);}

/* divider */
.divider{display:block;width:100%;height:auto;}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none;}
.reveal.js-hide{opacity:0;transform:translateY(28px);}
.reveal.in-view{
  opacity:1;transform:none;
  transition:opacity calc(.7s*var(--dur)) ease, transform calc(.7s*var(--dur)) cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .reveal.js-hide{opacity:1;transform:none;}
}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;}
.feature-card{
  background:var(--cream);border-radius:var(--radius-md);padding:1.8rem;
  box-shadow:var(--shadow-2);transition:transform .3s ease,box-shadow .3s ease;
  border:1px solid var(--line);
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-1);}
.feature-card .icon{width:2.2rem;height:2.2rem;color:var(--clay-deep);margin-bottom:.8rem;}

/* ---------- product strip / grid ---------- */
.product-strip{
  display:flex;gap:1.4rem;overflow-x:auto;padding:.5rem .2rem 1.4rem;
  scroll-snap-type:x mandatory;
}
.product-strip .product-card{min-width:240px;scroll-snap-align:start;}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.8rem;}

.product-card{
  background:var(--cream);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-2);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-1);}
.product-card .thumb{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--ivory-2);}
.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.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.product-card .cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--clay-deep);}
.product-card h3{font-size:1.15rem;margin:0;}
.product-card .price{font-weight:700;color:var(--aubergine);margin-top:auto;font-size:1.1rem;}
.product-card a.card-link{text-decoration:none;color:inherit;}
.product-card .card-actions{display:flex;gap:.6rem;align-items:center;justify-content:space-between;margin-top:.4rem;}

/* ---------- signature feature: Klik-Trener ---------- */
.klik-trener{
  background:var(--aubergine);color:var(--ivory);
  border-radius:var(--radius-lg);padding:3rem clamp(1.4rem,5vw,3.5rem);
  display:grid;gap:2.2rem;grid-template-columns:1.1fr 1fr;align-items:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow-1);
}
.klik-trener::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;
  background:var(--lime);opacity:.14;border-radius:50%;
}
.klik-panel{
  background:var(--aubergine-deep);border-radius:var(--radius-md);
  padding:2rem;text-align:center;position:relative;z-index:1;
}
.klik-btn{
  width:150px;height:150px;border-radius:50%;margin:0 auto 1.2rem;
  background:var(--lime);border:4px solid var(--ivory);color:var(--aubergine-deep);
  font-family:var(--font-display);font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;position:relative;transition:transform .12s ease;
  box-shadow:0 .6rem 1.4rem -.4rem rgba(0,0,0,.5);
}
.klik-btn:active{transform:scale(.93);}
.klik-ripple{
  position:absolute;inset:0;border-radius:50%;border:3px solid var(--lime);
  opacity:0;pointer-events:none;
}
.klik-ripple.animate{animation:ripple .55s ease-out;}
@keyframes ripple{from{opacity:.9;transform:scale(1);}to{opacity:0;transform:scale(1.7);}}
.klik-stats{display:flex;justify-content:center;gap:1.8rem;margin:1.2rem 0;font-family:var(--font-mono);}
.klik-stats div{text-align:center;}
.klik-stats strong{display:block;font-size:1.6rem;color:var(--lime);}
.klik-stats span{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ivory-2);}
.klik-controls{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}
.klik-timer{font-family:var(--font-mono);font-size:1rem;color:var(--ivory-2);margin-top:.6rem;}

/* ---------- about / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-1);}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}

/* badge / seal */
.seal{width:120px;height:120px;}

/* ---------- forms ---------- */
.form-card{
  background:var(--cream);border-radius:var(--radius-md);padding:2rem;
  box-shadow:var(--shadow-2);border:1px solid var(--line);
}
.field{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.85rem;font-weight:600;}
.field input,.field select,.field textarea{
  padding:.75rem .9rem;border:2px solid var(--line);border-radius:.7rem;
  font:inherit;background:var(--ivory);color:var(--ink);accent-color:var(--clay-deep);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--clay);}
.field.has-error input,.field.has-error textarea{border-color:#a3263a;}
.field .err{color:#a3263a;font-size:.8rem;display:none;}
.field.has-error .err{display:block;}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden;}
.form-note{font-size:.82rem;color:var(--aubergine-soft);}
.klik-trener .form-note{color:var(--ivory-2);}
.form-success{
  background:var(--lime);color:var(--aubergine-deep);padding:1rem 1.2rem;
  border-radius:.8rem;margin-top:1rem;font-weight:600;display:none;
}
.form-success.show{display:block;}
.form-fail{
  background:#f4d6d6;color:#6b1626;padding:1rem 1.2rem;border-radius:.8rem;
  margin-top:1rem;font-weight:600;display:none;
}
.form-fail.show{display:block;}
.checkbox-row{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;}
.checkbox-row input{margin-top:.2rem;accent-color:var(--clay-deep);width:1.1rem;height:1.1rem;}

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

/* ---------- cart / checkout ---------- */
.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;}
.cart-table img{width:60px;height:60px;object-fit:cover;border-radius:.5rem;}
.cart-row-main{display:flex;align-items:center;gap:.8rem;}
.qty-input{width:4rem;}
.cart-summary{
  background:var(--cream);border-radius:var(--radius-md);padding:1.6rem;
  box-shadow:var(--shadow-2);border:1px solid var(--line);
}
.cart-summary dl{display:flex;justify-content:space-between;margin:.4rem 0;}
.cart-summary dl.total{font-weight:700;font-size:1.2rem;border-top:1px solid var(--line);padding-top:.7rem;margin-top:.7rem;}
.empty-cart{text-align:center;padding:3rem 0;}

/* ---------- footer ---------- */
.site-footer{background:var(--aubergine-deep);color:var(--ivory-2);padding:4rem 0 1.6rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:2rem;}
.footer-grid h4{color:var(--lime);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-body);}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
.footer-grid a{text-decoration:none;color:var(--ivory-2);font-size:.92rem;}
.footer-grid a:hover{color:var(--lime);}
.footer-brand svg{width:50px;height:50px;}
.footer-bottom{
  border-top:1px solid rgba(244,236,221,.15);margin-top:3rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;
}
.newsletter-form{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap;}
.newsletter-form input{
  flex:1;min-width:150px;padding:.6rem .8rem;border-radius:.6rem;border:2px solid rgba(244,236,221,.25);
  background:var(--aubergine);color:var(--ivory);
}

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:900;
  background:var(--aubergine-deep);color:var(--ivory);border:2px solid var(--lime);
  border-radius:var(--radius-md);padding:1.4rem 1.6rem;box-shadow:var(--shadow-1);
  display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
  max-width:760px;margin-inline:auto;transform:translateY(130%);transition:transform .4s ease;
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{margin:0;font-size:.88rem;flex:1 1 280px;}
.cookie-banner a{color:var(--lime);text-decoration:underline;}
.cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap;}

/* ---------- 404 ---------- */
.not-found{text-align:center;padding:6rem 0;}
.not-found .big{font-size:clamp(4rem,16vw,9rem);color:var(--clay);margin:0;}

/* ---------- breadcrumbs / page hero ---------- */
.page-hero{
  background:linear-gradient(135deg,var(--aubergine),var(--aubergine-deep));
  color:var(--ivory);padding:3.5rem 0 3rem;
}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);}
.page-hero .eyebrow{font-family:var(--font-mono);letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;color:var(--lime);}

.legal-content h2{margin-top:2rem;font-size:1.4rem;}
.legal-content{max-width:72ch;}

@media (max-width:860px){
  .split{grid-template-columns:1fr;}
  .klik-trener{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{max-width:100%;}
  .cookie-banner{left:.6rem;right:.6rem;bottom:.6rem;padding:1.1rem;}
}

:has(input:invalid):not(:focus-within) .field-hint{display:none;}