/* Batohy Lípa — design system. Japandi wabi-sabi: ink strokes, raw paper, asymmetric calm, one red seal accent. */

:root{
  --c-ivory:#f3efe4;
  --c-paper:#ece5d4;
  --c-aubergine:#2e2233;
  --c-aubergine-2:#4a3650;
  --c-lime:#a8b23a;
  --c-lime-2:#c9d46a;
  --c-ink:#211a26;
  --c-red:#b23a2e;
  --c-line:#c9bfa6;
  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Jetbrains Mono",Consolas,monospace;
  --radius:4px;
  --shadow-paper:0 1px 0 rgba(33,26,38,.05), 0 8px 24px -12px rgba(33,26,38,.35);
  --measure:38rem;
  --gap:1.5rem;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-ivory);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--c-red);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--c-ivory);padding:.5rem 1rem;z-index:200}
.skip-link:focus{left:0}

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

/* ---------- layout helpers ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{grid-template-columns:1fr}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.stack-sm > * + *{margin-top:.75rem}
.stack-md > * + *{margin-top:1.5rem}
.stack-lg > * + *{margin-top:3rem}
.mt-0{margin-top:0}
.section{padding:clamp(3rem,6vw,6rem) 0}
.section--tight{padding:clamp(2rem,4vw,3.5rem) 0}
.section--ink{background:var(--c-aubergine);color:var(--c-ivory)}

/* ---------- reveal motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in-view{opacity:1;transform:none}
.reveal--clip{clip-path:inset(0 0 100% 0);opacity:1;transform:none;transition:clip-path .8s ease}
.reveal--clip.in-view{clip-path:inset(0 0 0% 0)}
.reveal-stagger > *{transition-delay:calc(var(--i, 0) * 90ms)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(243,239,228,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--c-line)}
.site-header__inner{max-width:1180px;margin:0 auto;padding:.9rem 1.25rem;display:flex;align-items:center;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--c-aubergine);flex:0 0 auto}
.logo__mark{width:34px;height:34px;flex:none}
.logo__word{width:150px;height:22px;flex:none}
@media(min-width:600px){.logo__word{width:180px;height:26px}}
.nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;color:var(--c-aubergine);margin-left:auto}
.nav-close{display:none}
.main-nav{display:flex;align-items:center;gap:1.5rem}
.main-nav ul{display:flex;gap:1.4rem;align-items:center}
.main-nav a{font-size:.95rem;position:relative;padding:.3rem 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--c-red);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)}
.nav-cart{position:relative;display:flex;align-items:center;color:var(--c-aubergine);min-width:44px;min-height:44px;justify-content:center}
.cart-count{position:absolute;top:0;right:-2px;background:var(--c-red);color:#fff;font-size:.65rem;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px}
.cart-count.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

@media(max-width:860px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,360px);background:var(--c-aubergine);color:var(--c-ivory);
    flex-direction:column;align-items:flex-start;padding:5rem 1.75rem 2rem;gap:2rem;
    transform:translateX(100%);visibility:hidden;transition:transform .35s ease, visibility .35s ease;z-index:150;
  }
  .main-nav.is-open{transform:translateX(0);visibility:visible}
  .main-nav ul{flex-direction:column;gap:1.2rem;align-items:flex-start}
  .main-nav a{font-size:1.1rem;color:var(--c-ivory)}
  .nav-close{display:flex;position:absolute;top:1.25rem;right:1.25rem;background:none;border:none;color:var(--c-ivory);width:44px;height:44px;align-items:center;justify-content:center}
  .nav-cart{color:var(--c-ivory)}
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:var(--radius);border:1px solid var(--c-aubergine);
  font-size:.95rem;font-weight:600;overflow:hidden;min-height:44px;background:transparent;color:var(--c-aubergine);
  z-index:0;
}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--c-aubergine);transition:left .35s ease;z-index:-1}
.btn:hover::before{left:0}
.btn:hover{color:var(--c-ivory)}
.btn--accent{background:var(--c-red);border-color:var(--c-red);color:#fff}
.btn--accent::before{background:var(--c-aubergine)}
.btn--accent:hover{color:#fff}
.btn--ghost{background:transparent;border-color:var(--c-ivory);color:var(--c-ivory)}
.btn--ghost::before{background:var(--c-ivory)}
.btn--ghost:hover{color:var(--c-aubergine)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:.55rem 1.1rem;font-size:.85rem;min-height:38px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- hero / marquee ---------- */
.hero{position:relative;padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.hero__title{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;margin:0 0 1rem;color:var(--c-aubergine)}
.hero__lead{max-width:34rem;font-size:1.1rem;color:var(--c-aubergine-2)}
.hero__visual{position:relative}
.hero__photo{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);filter:grayscale(.1) sepia(.08);box-shadow:var(--shadow-paper)}
.hero__ink{position:absolute;width:60%;top:-8%;right:-10%;color:var(--c-lime);opacity:.9;pointer-events:none}
.hero__seal{position:absolute;bottom:-14px;left:-14px;width:72px;height:72px}

.marquee{border-top:1px solid var(--c-aubergine);border-bottom:1px solid var(--c-aubergine);overflow:hidden;background:var(--c-aubergine);color:var(--c-ivory)}
.marquee__track{display:flex;white-space:nowrap;animation:marquee 28s linear infinite;width:max-content}
.marquee__track span{display:inline-block;padding:.9rem 2rem;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.02em}
.marquee__track span::after{content:"✳";margin-left:2rem;color:var(--c-lime)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion: reduce){.marquee__track{animation:none}}

/* ---------- section heads / dividers ---------- */
.section-head{max-width:40rem;margin-bottom:2.5rem}
.section-head h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .5rem;color:var(--c-aubergine)}
.section-head p{color:var(--c-aubergine-2)}
.divider{width:100%;height:28px;color:var(--c-line);margin:0 auto}

/* ---------- card stack (home composition) ---------- */
.card-stack{position:relative}
.card-stack__list{display:grid;gap:1.5rem}
@media(min-width:760px){
  .card-stack__list{display:block;position:relative;min-height:380px}
  .card-stack__item{
    position:absolute;top:0;left:0;width:min(420px,70%);
    transform:translate(calc(var(--i,0) * 2.2rem), calc(var(--i,0) * 1.4rem)) rotate(calc(var(--i,0) * -1.6deg));
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
    z-index:calc(10 - var(--i, 0));
  }
  .card-stack.is-fanned .card-stack__item{
    transform:translate(calc(var(--i,0) * 15rem), 0) rotate(0deg);
  }
  .card-stack__list{padding-bottom:1rem}
}
.card{
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-paper);
}
.card h3{font-family:var(--font-display);margin:.4rem 0;color:var(--c-aubergine)}
.card p{margin:0;color:var(--c-aubergine-2);font-size:.95rem}
.card__num{font-family:var(--font-mono);color:var(--c-red);font-size:.8rem}

/* ---------- packing planner (signature feature) ---------- */
.planner{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-paper)}
.planner__trips{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 1.5rem}
.planner__trips button{
  padding:.7rem 1.2rem;border:1px solid var(--c-aubergine);border-radius:999px;background:transparent;
  color:var(--c-aubergine);font-weight:600;min-height:44px;
}
.planner__trips button.is-active{background:var(--c-aubergine);color:var(--c-ivory)}
.planner__output{min-height:120px;opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease}
.planner__output.in-view{opacity:1;transform:none}
.plan-volume{font-size:1.1rem;color:var(--c-aubergine)}
.plan-label{font-family:var(--font-display);font-size:1.3rem;color:var(--c-red);margin:.2rem 0 1rem}
.plan-list li{padding:.4rem 0;border-bottom:1px dashed var(--c-line)}
.plan-list li::before{content:"— "}

/* ---------- products ---------- */
.product-strip{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.product-strip{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){
  .product-strip{grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;grid-template-columns:none}
  .product-strip .product-card{scroll-snap-align:start}
}
.product-card{display:block;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;transition:transform .3s ease, box-shadow .3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-paper)}
.product-card__media{aspect-ratio:1/1;overflow:hidden}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-card__media img{transform:scale(1.07)}
.product-card__body{padding:1rem}
.product-card__body h3{font-size:1rem;margin:0 0 .3rem}
.product-card__price{color:var(--c-red);font-weight:700}
.product-card__old{color:var(--c-aubergine-2);text-decoration:line-through;font-size:.85rem;margin-left:.4rem}

/* ---------- product detail ---------- */
.product-detail{display:grid;gap:2rem}
@media(min-width:860px){.product-detail{grid-template-columns:1fr 1fr}}
.product-detail__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.product-detail__price{font-size:1.6rem;color:var(--c-red);font-weight:700}
.product-detail__features li{padding:.5rem 0;border-bottom:1px dashed var(--c-line)}
.qty-input{display:inline-flex;align-items:center;border:1px solid var(--c-aubergine);border-radius:var(--radius)}
.qty-input button{width:40px;height:40px;background:none;border:none;color:var(--c-aubergine);font-size:1.2rem}
.qty-input input{width:48px;text-align:center;border:none;background:none;font-size:1rem}

/* ---------- cart / checkout ---------- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--c-line)}
.cart-table img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius)}
.cart-summary{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:1.5rem}
.cart-summary__row{display:flex;justify-content:space-between;padding:.4rem 0}
.cart-summary__row--total{font-weight:700;font-size:1.2rem;border-top:1px solid var(--c-line);margin-top:.5rem;padding-top:.8rem}
.cart-empty{text-align:center;padding:3rem 0;color:var(--c-aubergine-2)}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1.1rem}
@media(min-width:620px){.form-grid--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.9rem;font-weight:600;color:var(--c-aubergine)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:1rem;padding:.75rem .9rem;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-ivory);color:var(--c-ink);accent-color:var(--c-red);min-height:44px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--c-red)}
.field-error{color:var(--c-red);font-size:.85rem;min-height:1.2em}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.4em;font-size:.9rem}
.form-msg--ok{color:#3c6b2e}
.form-msg--error{color:var(--c-red)}
.newsletter-form__row{display:flex;gap:.5rem}
.newsletter-form__row input{flex:1;min-width:0}

/* ---------- info pages: hero, prose, breadcrumbs, notice, toc, faq ---------- */
.page-hero{padding:clamp(2.5rem,5vw,4rem) 0 2rem;border-bottom:1px solid var(--c-line)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.2rem);color:var(--c-aubergine);margin:.3rem 0}
.breadcrumbs{font-size:.85rem;color:var(--c-aubergine-2)}
.breadcrumbs a{text-decoration:underline}
.prose{max-width:var(--measure)}
.prose h2{font-family:var(--font-display);color:var(--c-aubergine);margin-top:2.2rem}
.prose h3{color:var(--c-aubergine);margin-top:1.6rem}
.prose p,.prose li{color:var(--c-ink)}
.prose a{text-decoration:underline;color:var(--c-red)}
.notice{border:1px solid var(--c-line);border-left:4px solid var(--c-red);background:var(--c-paper);padding:1rem 1.2rem;border-radius:var(--radius)}
.legal-toc{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:2rem}
.legal-toc li{padding:.25rem 0}
.legal-toc a{text-decoration:underline}
.faq-item{border-bottom:1px solid var(--c-line);padding:1rem 0}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--c-aubergine);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--c-red)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin-top:.7rem;color:var(--c-aubergine-2)}
.contact-layout{display:grid;gap:2rem}
@media(min-width:860px){.contact-layout{grid-template-columns:1fr 1fr}}
.contact-info li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0}

/* ---------- 404 ---------- */
.error-page{text-align:center;padding:5rem 0}
.error-page h1{font-family:var(--font-display);font-size:clamp(3rem,10vw,6rem);color:var(--c-aubergine);margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--c-aubergine);color:var(--c-ivory);padding-top:1rem}
.footer-divider{width:100%;height:24px;color:var(--c-ivory);opacity:.4}
.site-footer__inner{max-width:1180px;margin:0 auto;padding:1rem 1.25rem 2rem;display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.site-footer__inner{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.footer-col h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-lime-2);margin:0 0 .8rem}
.footer-col ul li{padding:.3rem 0}
.footer-col .logo__mark{color:var(--c-ivory);margin-bottom:.5rem}
.footer-mail{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.6rem 0 0}
.footer-copy{text-align:center;font-size:.8rem;color:var(--c-lime-2);padding:1.25rem 0;border-top:1px solid rgba(243,239,228,.15)}

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:300;background:var(--c-aubergine);color:var(--c-ivory);
  border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow-paper);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  max-width:720px;margin:0 auto;opacity:0;transform:translateY(20px);transition:opacity .3s ease, transform .3s ease;
}
.cookie-banner.is-visible{opacity:1;transform:none}
.cookie-banner p{margin:0;font-size:.9rem;flex:1 1 260px}
.cookie-banner a{text-decoration:underline;color:var(--c-lime-2)}
.cookie-banner__actions{display:flex;gap:.6rem}

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

/* COMPONENTS:
.wrap - centered max-width content container
.grid / .grid-2 / .grid-3 - responsive grid helpers
.stack-sm/.stack-md/.stack-lg - vertical rhythm spacing
.section / .section--tight / .section--ink - page section padding + dark variant
.reveal / .reveal--clip / .reveal-stagger - scroll reveal animation hooks
.site-header / .site-header__inner - sticky header bar
.logo / .logo__mark / .logo__word - brand logo lockup
.nav-toggle / .nav-close - mobile menu buttons
.main-nav - primary navigation (off-canvas on mobile)
.nav-cart / .cart-count - header cart link and live count badge
.btn / .btn--accent / .btn--ghost / .btn--block / .btn--sm - button variants with fill-sweep hover
.hero / .hero__grid / .hero__title / .hero__lead / .hero__visual / .hero__photo / .hero__ink / .hero__seal - home hero
.marquee / .marquee__track - scrolling brand-word strip
.section-head - section title + intro text block
.divider - decorative SVG section divider
.card-stack / .card-stack__list / .card-stack__item - fanning card stack composition
.card / .card__num - generic paper card
.planner / .planner__trips / .planner__output / .plan-volume / .plan-label / .plan-list - packing planner feature
.product-strip / .product-card - catalog grid / scroll-snap strip and product card
.product-detail / .product-detail__media / .product-detail__price / .product-detail__features - product page layout
.qty-input - quantity stepper control
.cart-table / .cart-summary / .cart-empty - cart and checkout tables/summary
.form-grid / .form-grid--2 / .field / .field-error / .hp / .form-msg - form layout and validation states
.newsletter-form / .newsletter-form__row - footer newsletter signup
.page-hero - inner page title band
.breadcrumbs - breadcrumb trail
.prose - readable long-form legal/content text measure
.legal-toc - table of contents box for legal pages
.notice - callout/alert box
.faq / .faq-item - accordion FAQ entries (details/summary)
.contact-layout / .contact-info - contact page split layout
.error-page - 404 page layout
.site-footer / .site-footer__inner / .footer-col / .footer-divider / .footer-mail / .footer-copy - footer
.cookie-banner / .cookie-banner__actions - cookie consent banner
.grain - full-viewport SVG grain texture overlay
*/

.footer-col--brand{display:flex;flex-direction:column;gap:.8rem}
.error-page__icon{width:120px;height:120px;margin:0 auto 2rem;display:block}
.hero__copy{max-width:34rem;font-size:1.1rem;color:var(--c-aubergine-2)}