/* Košíkářství Proutek — Origami fold style */

:root{
  --cobalt: #1c3fae;
  --cobalt-deep: #122d82;
  --cobalt-light: #3a5fd9;
  --lemon: #f4cf1b;
  --lemon-light: #fde98a;
  --paper: #faf7ef;
  --paper-dim: #f0ebdc;
  --ink: #16213a;
  --ink-soft: #4a5572;
  --line: rgba(22,33,58,.14);
  --radius: 18px;
  --ff-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ff-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ff-mono: "Consolas", "SFMono-Regular", Menlo, monospace;
  --shadow-1: 0 1px 2px rgba(22,33,58,.08);
  --shadow-2: 0 14px 30px -12px rgba(22,33,58,.28);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ overflow-x: clip; }
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: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--ff-display); line-height:1.1; margin: 0 0 .5em; color: var(--cobalt-deep); }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; }
.container{ width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

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

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

/* ---------- buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .85em 1.6em;
  font-family: var(--ff-body); font-weight:600; font-size: .95rem;
  border-radius: 999px;
  border: 1.5px solid var(--cobalt);
  background: transparent;
  color: var(--cobalt-deep);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  min-height:44px;
  transition: color .35s ease, border-color .35s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%; width:100%;
  background: var(--cobalt); z-index:-1;
  transition: left .35s ease;
}
.btn:hover::before, .btn:focus-visible::before{ left:0; }
.btn:hover, .btn:focus-visible{ color:#fff; }
.btn--primary{ background: var(--cobalt); color:#fff; }
.btn--primary::before{ background: var(--lemon); }
.btn--primary:hover, .btn--primary:focus-visible{ color: var(--ink); }
.btn--ghost{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover, .btn--ghost:focus-visible{ color: var(--cobalt-deep); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn .ic{ width:1.1em; height:1.1em; stroke: currentColor; position:relative; z-index:1; }
.btn span{ position:relative; z-index:1; }

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

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,247,239,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: .9rem;
  gap: 1rem;
}
.brand{ display:flex; align-items:center; color: var(--cobalt-deep); }
.brand svg{ width:150px; height:31px; flex:none; }

.main-nav{ display:flex; align-items:center; gap: 1.8rem; }
.main-nav ul{ display:flex; gap:1.6rem; list-style:none; }
.main-nav a{ font-weight:600; font-size:.95rem; position:relative; padding-bottom:4px; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--lemon);
  transition: right .3s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current]::after{ right:0; }

.cart-link{ position:relative; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; }
.cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 4px; border-radius:999px;
  background: var(--lemon); color: var(--ink); font-size:.72rem; font-weight:800;
  transform: scale(1);
}
.cart-count.bump{ animation: bump .4s ease; }
@keyframes bump{ 0%{transform:scale(1);} 35%{transform:scale(1.5);} 100%{transform:scale(1);} }

.nav-toggle{
  display:none; background:none; border:none; width:44px; height:44px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle .ic{ width:26px; height:26px; }

@media (max-width: 860px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw);
    background: var(--cobalt-deep); color:#fff;
    flex-direction:column; align-items:flex-start; padding: 5.5rem 2rem 2rem;
    transform: translateX(100%); visibility:hidden;
    transition: transform .4s ease, visibility .4s ease;
    z-index: 60;
  }
  .main-nav.open{ transform: translateX(0); visibility:visible; }
  .main-nav ul{ flex-direction:column; gap:1.4rem; width:100%; }
  .main-nav a{ color:#fff; font-size:1.1rem; }
  .main-nav .cart-link{ color: var(--lemon-light); }
  .nav-toggle{ display:flex; }
  .nav-backdrop{
    position:fixed; inset:0; background: rgba(22,33,58,.5); z-index:55;
    opacity:0; pointer-events:none; transition: opacity .3s ease;
  }
  .nav-backdrop.open{ opacity:1; pointer-events:auto; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) 3rem;
  overflow:hidden;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items:center;
}
.hero-tabs{ display:flex; gap:.6rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.hero-tab{
  border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:.5em 1.1em; font-size:.85rem; font-weight:700; cursor:pointer; color: var(--ink-soft);
  min-height:40px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hero-tab[aria-selected="true"]{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; }
.hero h1{
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  margin-bottom:.6rem;
}
.hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .word span{ display:inline-block; }
.hero .lede{ font-size:1.15rem; color: var(--ink-soft); max-width:36em; margin-bottom:1.6rem; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-art{ position:relative; aspect-ratio: 4/5; }
.hero-art .panel{
  position:absolute; inset:0; opacity:0; transition: opacity .5s ease;
  display:grid; grid-template-rows: 1fr auto;
}
.hero-art .panel.active{ opacity:1; }
.hero-art figure{
  position:relative; margin:0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-2);
  aspect-ratio: 4/5;
}
.hero-art img{ width:100%; height:100%; object-fit:cover; }
.hero-art .facet{
  position:absolute; width:46%; aspect-ratio:1; pointer-events:none;
}
.hero-art .facet--a{ top:-10%; right:-8%; }
.hero-art .facet--b{ bottom:-12%; left:-10%; }

/* ---------- reveal ---------- */
.reveal{ opacity:1; transform:none; }
.reveal.js-hide{ opacity:0; transform: translateY(26px); clip-path: inset(0 0 12% 0); }
.reveal.in-view{ opacity:1; transform:none; clip-path: inset(0 0 0% 0); transition: opacity .7s ease, transform .7s ease, clip-path .7s ease; }
@media (prefers-reduced-motion: reduce){
  .reveal.js-hide{ opacity:1; transform:none; clip-path:none; }
}

/* ---------- section basics ---------- */
.section{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--tint{ background: var(--paper-dim); }
.section-head{ max-width: 42em; margin-bottom: 2.2rem; }
.section-head .eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:.78rem; color: var(--cobalt); margin-bottom:.6rem;
}
.divider{ display:block; width:100%; height: 34px; margin-block: .5rem; }
.svg-fluid{ width:100%; height:auto; display:block; }
.seal{ width:110px; height:110px; flex:none; }
.sketch{ width:100%; max-width:220px; height:auto; }
.facet{ position:absolute; }

/* ---------- strip / story ---------- */
.story{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center; }
.story figure{ margin:0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-1); aspect-ratio: 5/4; }
.story img{ width:100%; height:100%; object-fit:cover; }

/* ---------- product strip / grid ---------- */
.product-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1.6rem;
}
.product-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-1);
  display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.product-card .thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.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:.4rem; flex:1; }
.product-card h3{ font-size:1.1rem; margin:0; }
.product-card .tag{ font-size:.75rem; color: var(--ink-soft); }
.product-card .price{ font-weight:800; color: var(--cobalt-deep); font-size:1.15rem; margin-top:auto; }
.product-card .row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem; }

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

/* ---------- filters ---------- */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.filters button{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.5em 1.1em;
  font-size:.85rem; font-weight:700; cursor:pointer; min-height:40px; color: var(--ink-soft);
}
.filters button[aria-pressed="true"]{ background: var(--lemon); border-color: var(--lemon); color: var(--ink); }

/* ---------- Proutkoměr (signature feature) ---------- */
.proutkomer{
  background: var(--cobalt-deep); color:#fff; border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.8rem, 4vw, 3rem); position:relative; overflow:hidden;
}
.proutkomer .facet-bg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.proutkomer-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1fr; gap:2.5rem; }
.proutkomer h2{ color:#fff; }
.proutkomer .lede{ color: rgba(255,255,255,.78); max-width:30em; }
.pm-modes{ display:flex; gap:.6rem; margin:1.2rem 0 1.4rem; flex-wrap:wrap; }
.pm-modes button{
  border:1.5px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  border-radius:999px; padding:.5em 1.2em; font-weight:700; cursor:pointer; min-height:44px;
}
.pm-modes button[aria-pressed="true"]{ background: var(--lemon); color: var(--ink); border-color: var(--lemon); }
.pm-field{ margin-bottom:1rem; }
.pm-field label{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:.4rem; }
.pm-field input[type="range"]{ width:100%; accent-color: var(--lemon); }
.pm-field select{ width:100%; padding:.6em; border-radius:10px; border:1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color:#fff; }
.pm-result{ background: rgba(255,255,255,.08); border-radius: var(--radius); padding:1.3rem; min-height:220px; }
.pm-result ul{ display:flex; flex-direction:column; gap:.7rem; }
.pm-result li{ display:flex; align-items:center; gap:.8rem; background: rgba(255,255,255,.08); border-radius:12px; padding:.6rem .8rem; }
.pm-result li img{ width:48px; height:48px; object-fit:cover; border-radius:8px; flex:none; }
.pm-result li a{ font-weight:700; }
.pm-result li .meta{ font-size:.8rem; color: rgba(255,255,255,.7); }
.pm-result .empty{ color: rgba(255,255,255,.7); }
@media (max-width: 760px){ .proutkomer-inner{ grid-template-columns:1fr; } }

/* ---------- product page ---------- */
.product-view{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.product-view figure{ margin:0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-2); aspect-ratio:4/3; }
.product-view img{ width:100%; height:100%; object-fit:cover; }
.product-view .price{ font-size:1.8rem; font-weight:800; color: var(--cobalt-deep); margin: .6rem 0 1.2rem; }
.spec-list{ list-style:none; margin: 1.2rem 0; display:grid; gap:.5rem; }
.spec-list li{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:.4rem; font-size:.95rem; }
.qty-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.qty-row input{ width:4.5em; padding:.5em; border-radius:10px; border:1.5px solid var(--line); text-align:center; }

/* ---------- cart / checkout ---------- */
.cart-table{ width:100%; border-collapse: collapse; margin-bottom:2rem; }
.cart-table th{ text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); padding-bottom:.6rem; border-bottom:1.5px solid var(--line); }
.cart-table td{ padding: .9rem 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-item{ display:flex; gap:.9rem; align-items:center; }
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:10px; flex:none; }
.cart-table input[type="number"]{ width:4em; padding:.4em; border-radius:8px; border:1.5px solid var(--line); text-align:center; }
.remove-item{ background:none; border:none; color: var(--cobalt); font-weight:700; cursor:pointer; text-decoration:underline; min-height:44px; }
.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:800; font-size:1.2rem; border-top:1.5px solid var(--line); padding-top:.8rem; }
.cart-empty{ text-align:center; padding: 3rem 1rem; color: var(--ink-soft); }

.checkout-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items:start; }
.form-grid{ display:grid; gap:1.1rem; }
.form-row{ display:grid; gap:.4rem; }
.form-row label{ font-weight:700; font-size:.9rem; }
.form-row input, .form-row textarea, .form-row select{
  padding: .75em .9em; border-radius:12px; border:1.5px solid var(--line);
  font-family:inherit; font-size:1rem; background:#fff;
}
.form-row textarea{ resize: vertical; min-height:100px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pay-options{ display:grid; gap:.7rem; margin:.4rem 0 1.2rem; }
.pay-option{ display:flex; gap:.7rem; align-items:flex-start; padding:.9rem; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; }
.pay-option input{ accent-color: var(--cobalt); margin-top:.2rem; }
.form-msg{ margin-top:1rem; padding: .9rem 1rem; border-radius:12px; font-weight:600; display:none; }
.form-msg.ok{ display:block; background: rgba(28,63,174,.1); color: var(--cobalt-deep); }
.form-msg.err{ display:block; background: rgba(214,40,40,.1); color:#9b1c1c; }
.field-error{ color:#9b1c1c; font-size:.82rem; display:none; }
.field-error.show{ display:block; }

/* ---------- newsletter / contact ---------- */
.newsletter-form, .contact-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.newsletter-form input[type="email"]{ flex:1; min-width:180px; padding:.75em 1em; border-radius:999px; border:1.5px solid var(--line); }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:.9rem; max-width: 46em; }
.faq-item{ border:1.5px solid var(--line); border-radius: var(--radius); background:#fff; overflow:hidden; }
.faq-item summary{ cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:44px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ic{ transition: transform .3s ease; flex:none; }
.faq-item[open] summary .ic{ transform: rotate(45deg); }
.faq-item p{ padding: 0 1.3rem 1.2rem; color: var(--ink-soft); margin:0; }

/* ---------- legal pages ---------- */
.legal{ max-width: 54em; }
.legal h2{ margin-top:2rem; font-size:1.3rem; }
.legal p, .legal li{ color: var(--ink-soft); }
.legal ul{ padding-left:1.2rem; margin-bottom:1em; }
.legal ul li{ margin-bottom:.4em; }

/* ---------- cookie banner ---------- */
.cookie-banner{
  position: fixed; left:1rem; right:1rem; bottom:1rem; z-index: 90;
  max-width: 640px; margin-inline:auto;
  background: var(--cobalt-deep); color:#fff; border-radius: var(--radius);
  padding: 1.3rem 1.5rem; box-shadow: var(--shadow-2);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  transform: translateY(140%); transition: transform .45s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ margin:0; font-size:.92rem; color: rgba(255,255,255,.88); flex:1; min-width:220px; }
.cookie-banner a{ text-decoration:underline; }
.cookie-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- footer ---------- */
.site-footer{ background: var(--cobalt-deep); color: rgba(255,255,255,.85); padding-block: 3.5rem 2rem; margin-top: 4rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.2rem; margin-bottom: 2.4rem; }
.footer-grid h4{ color:#fff; font-family: var(--ff-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-grid ul{ list-style:none; display:grid; gap:.6rem; }
.footer-grid a:hover{ text-decoration:underline; }
.footer-brand .brand{ color:#fff; margin-bottom:.8rem; }
.footer-brand p{ color: rgba(255,255,255,.7); max-width: 26em; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15); font-size:.85rem; color: rgba(255,255,255,.65); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.notfound{ text-align:center; padding-block: 5rem; }
.notfound .mark{ width: 160px; height:160px; margin: 0 auto 1.5rem; }

/* ---------- misc responsive ---------- */
@media (max-width: 860px){
  .hero .container, .story, .product-view, .checkout-grid{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; }
}