/* ===== Kosare Val — Swiss/Bauhaus geometric design system ===== */
:root{
  --ink:#111111;
  --paper:#f4f1ea;
  --paper-2:#e9e3d6;
  --red:#e8432c;
  --red-dark:#b82f1b;
  --line: rgba(17,17,17,.14);
  --maxw: 1240px;
  --gap: 1.25rem;
  --radius: 2px;
  --font-display: "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --ease: cubic-bezier(.22,.9,.25,1);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  font-size:16px;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;margin:0 0 .5em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:.5em 1em;z-index:200;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
button{font-family:inherit;cursor:pointer;}

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

/* ===== layout helpers ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;}
.section{padding:clamp(3rem,6vw,6rem) 0;}
.grid{display:grid;gap:var(--gap);}
.grid > *{min-width:0;}
@media(min-width:720px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.mt-0{margin-top:0;}.mt-1{margin-top:1rem;}.mt-2{margin-top:2rem;}.mb-0{margin-bottom:0;}.mb-2{margin-bottom:2rem;}
.flex{display:flex;}.flex-center{display:flex;align-items:center;}.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-1{gap:.5rem;}.gap-2{gap:1rem;}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease), clip-path .7s var(--ease);clip-path:inset(0 0 12% 0);}
.reveal.in-view{opacity:1;transform:translateY(0);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:var(--paper);border-bottom:2px solid var(--ink);}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.logo__mark{display:block;flex:none;}
.logo__word{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;}
.logo__accent{color:var(--red);}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);}
.nav-list{display:flex;gap:1.5rem;list-style:none;}
.nav-link{text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:.25rem 0;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .3s var(--ease);}
.nav-link:hover::after,.nav-link.is-active::after{width:100%;}
.nav-link.is-active{color:var(--red-dark);}
.site-nav{display:flex;align-items:center;gap:2rem;}
.cart-link{position:relative;display:flex;align-items:center;text-decoration:none;}
.cart-badge{position:absolute;top:-8px;right:-10px;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.cart-badge.bump{animation:bump .4s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}

@media(max-width:860px){
  .menu-toggle{display:flex;}
  .site-nav{position:fixed;top:0;right:0;height:100vh;width:min(320px,86vw);background:var(--ink);color:var(--paper);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:5.5rem 1.5rem 2rem;gap:2rem;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease), visibility .35s var(--ease);z-index:150;}
  .site-nav.is-open{transform:translateX(0);visibility:visible;}
  .nav-list{flex-direction:column;gap:1.25rem;}
  .nav-link{color:var(--paper);}
  body.nav-open{overflow:hidden;}
}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid var(--ink);position:relative;overflow:hidden;background:transparent;color:var(--ink);isolation:isolate;}
.btn span,.btn svg{position:relative;z-index:1;}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--ink);transition:left .35s var(--ease);z-index:0;}
.btn:hover::before{left:0;}
.btn:hover{color:var(--paper);}
.btn--primary{background:var(--red);border-color:var(--red);color:#fff;}
.btn--primary::before{background:var(--red-dark);}
.btn--primary:hover{color:#fff;}
.btn--ghost{border-color:var(--paper);color:var(--paper);}
.btn--ghost::before{background:var(--paper);}
.btn--ghost:hover{color:var(--ink);}
.btn--block{width:100%;}
.btn--sm{padding:.5rem 1rem;font-size:.85rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ===== hero / home composition ===== */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(3rem,8vw,6rem) 0 clamp(4rem,10vw,7rem);}
.hero__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.5;mix-blend-mode:overlay;pointer-events:none;}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;}
.hero__title{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.98;margin-bottom:1rem;}
.hero__title em{font-style:normal;color:var(--red);}
.hero__lead{max-width:38ch;font-size:1.15rem;color:var(--paper-2);}
.hero__actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;}

.map-canvas{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;}
.map-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;min-height:640px;}
.map-card{grid-column:span 6;background:var(--paper);border:2px solid var(--ink);padding:1.5rem;position:relative;transition:transform .3s var(--ease), box-shadow .3s var(--ease);box-shadow:6px 6px 0 var(--ink);}
.map-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--red);}
.map-card--photo{padding:0;overflow:hidden;}
.map-card--photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s var(--ease);}
.map-card--photo:hover img{transform:scale(1.06);}
.map-card__pin{position:absolute;top:-14px;left:16px;background:var(--red);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
@media(min-width:720px){
  .map-grid{grid-template-columns:repeat(6,1fr);}
  .map-card{grid-column:span 3;}
  .map-card--wide{grid-column:span 4;}
  .map-card--narrow{grid-column:span 2;}
}

/* ===== page hero (inner pages) ===== */
.page-hero{background:var(--ink);color:var(--paper);padding:3rem 0 3.5rem;position:relative;overflow:hidden;}
.page-hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;position:relative;z-index:1;}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.4rem;}
.page-hero p{color:var(--paper-2);max-width:48ch;margin-bottom:0;}

.breadcrumbs{list-style:none;display:flex;gap:.4rem;flex-wrap:wrap;font-size:.85rem;color:var(--paper-2);margin-bottom:1rem;}
.breadcrumbs a{color:var(--paper-2);text-decoration:none;}
.breadcrumbs a:hover{color:var(--paper);text-decoration:underline;}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.4rem;color:var(--red);}

/* ===== prose (legal pages) ===== */
.prose{max-width:68ch;margin:0 auto;padding:3rem 1.25rem;}
.prose h2{font-size:1.5rem;margin-top:2.2rem;}
.prose h3{font-size:1.15rem;margin-top:1.6rem;}
.prose p,.prose li{color:#2b2b2b;}
.prose ul,.prose ol{padding-left:1.4rem;margin-bottom:1em;}
.prose a{color:var(--red-dark);text-decoration:underline;}

.legal-toc{background:var(--paper-2);border:1px solid var(--line);padding:1.25rem 1.5rem;border-radius:var(--radius);margin:0 auto 2rem;max-width:68ch;}
.legal-toc h2{font-size:1rem;margin-bottom:.6rem;}
.legal-toc ol{padding-left:1.2rem;}
.legal-toc a{text-decoration:none;color:var(--red-dark);}
.legal-toc a:hover{text-decoration:underline;}

/* ===== notice ===== */
.notice{border:2px solid var(--ink);border-left:6px solid var(--red);padding:1rem 1.25rem;background:var(--paper-2);border-radius:var(--radius);margin-bottom:1.5rem;}
.notice--success{border-left-color:#2e7d4f;}
.notice--error{border-left-color:var(--red);}

/* ===== forms ===== */
.form-grid{display:grid;gap:1.1rem;max-width:620px;}
@media(min-width:620px){.form-grid--2col{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field label{font-weight:700;font-size:.9rem;}
.field input,.field textarea,.field select{font:inherit;padding:.7rem .8rem;border:2px solid var(--ink);border-radius:var(--radius);background:var(--paper);accent-color:var(--red);}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--red);outline-offset:1px;}
.field-error{color:var(--red-dark);font-size:.82rem;display:none;}
.field.has-error .field-error{display:block;}
.field.has-error input,.field.has-error textarea{border-color:var(--red);}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.form-ok,.form-error{display:none;font-weight:700;margin-top:.6rem;}
.is-sent .form-ok{display:block;color:#2e7d4f;}
.is-error .form-error{display:block;color:var(--red-dark);}
.newsletter-row{display:flex;gap:.5rem;}
.newsletter-row input{flex:1;min-width:0;}

/* ===== faq ===== */
.faq{max-width:70ch;margin:0 auto;padding:3rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;}
.faq-item{border:2px solid var(--ink);border-radius:var(--radius);padding:.2rem 1.1rem;background:var(--paper);}
.faq-item summary{cursor:pointer;font-weight:700;padding:1rem 0;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::after{content:"+";font-size:1.4rem;color:var(--red);flex:none;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{padding-bottom:1rem;margin:0;color:#2b2b2b;}

/* ===== product grid / cards ===== */
.product-strip,.product-grid{display:grid;gap:1.25rem;}
@media(min-width:620px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.product-grid{grid-template-columns:repeat(3,1fr);}}
.product-card{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);overflow:hidden;transition:transform .3s var(--ease), box-shadow .3s var(--ease);box-shadow:5px 5px 0 var(--ink);}
.product-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red);}
.product-card__media{aspect-ratio:4/3;overflow:hidden;}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.product-card:hover .product-card__media img{transform:scale(1.07);}
.product-card__body{padding:1rem 1.1rem 1.25rem;}
.product-card__cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--red-dark);font-weight:700;}
.product-card__name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:.3rem 0 .4rem;}
.product-card__price{font-weight:700;}

@media(max-width:620px){
  .product-strip{grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;}
  .product-strip .product-card{scroll-snap-align:start;}
}

/* ===== product detail ===== */
.product-detail{display:grid;gap:2rem;max-width:var(--maxw);margin:0 auto;padding:3rem 1.25rem;}
@media(min-width:860px){.product-detail{grid-template-columns:1.1fr 1fr;align-items:start;}}
.product-detail__media{border:2px solid var(--ink);overflow:hidden;box-shadow:6px 6px 0 var(--ink);}
.product-detail__media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.product-detail__price{font-size:1.8rem;font-weight:800;color:var(--red-dark);margin:.8rem 0;}
.product-detail__meta{list-style:none;border-top:1px solid var(--line);margin-top:1.5rem;}
.product-detail__meta li{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem;}
.qty-control{display:flex;align-items:center;border:2px solid var(--ink);width:fit-content;}
.qty-control button{background:none;border:none;width:40px;height:40px;font-size:1.1rem;font-weight:700;}
.qty-control input{width:48px;border:none;text-align:center;font:inherit;background:transparent;}

/* ===== cart / checkout ===== */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:2rem;}
.cart-table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ink);padding:.6rem .5rem;}
.cart-table td{padding:1rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-table__product{display:flex;align-items:center;gap:.8rem;}
.cart-table__product img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);}
.cart-summary{max-width:360px;margin-left:auto;border:2px solid var(--ink);padding:1.5rem;background:var(--paper-2);}
.cart-summary__row{display:flex;justify-content:space-between;padding:.4rem 0;}
.cart-summary__row--total{font-weight:800;font-size:1.2rem;border-top:1px solid var(--ink);margin-top:.6rem;padding-top:.8rem;}
.cart-empty{text-align:center;padding:4rem 1rem;color:#555;}

/* ===== contact layout ===== */
.contact-layout{display:grid;gap:2.5rem;max-width:var(--maxw);margin:0 auto;padding:3rem 1.25rem;}
@media(min-width:860px){.contact-layout{grid-template-columns:1fr 1fr;}}
.contact-info-list{list-style:none;display:flex;flex-direction:column;gap:1rem;}
.contact-info-list li{display:flex;gap:.8rem;align-items:flex-start;}
.contact-info-list svg{flex:none;color:var(--red);margin-top:.15rem;}

/* ===== dividers / decorative ===== */
.footer-divider{display:block;}
.site-footer{background:var(--ink);color:var(--paper);margin-top:3rem;}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:2rem 1.25rem 2.5rem;display:grid;gap:2rem;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:860px){.site-footer__inner{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}}
.footer-col{min-width:0;}
.footer-heading{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem;color:var(--paper-2);}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
.footer-list a{text-decoration:none;color:var(--paper);}
.footer-list a:hover{color:var(--red);}
.footer-tagline{color:var(--paper-2);max-width:26ch;margin:1rem 0;}
.footer-mail{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--paper);font-weight:700;}
.footer-newsletter-text{color:var(--paper-2);}
.site-footer__bottom{border-top:1px solid rgba(244,241,234,.15);padding:1rem 1.25rem;text-align:center;font-size:.82rem;color:var(--paper-2);}

/* ===== cookie banner ===== */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:-200px;max-width:560px;margin:0 auto;background:var(--ink);color:var(--paper);border:2px solid var(--red);padding:1.2rem 1.4rem;border-radius:var(--radius);z-index:300;transition:bottom .4s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.3);}
.cookie-banner.is-visible{bottom:1rem;}
.cookie-banner p{font-size:.9rem;margin-bottom:.9rem;color:var(--paper);}
.cookie-banner a{color:var(--paper);text-decoration:underline;}
.cookie-banner__actions{display:flex;gap:.75rem;flex-wrap:wrap;}

/* ===== bespoke SVG decorations ===== */
.ornament-strip{width:100%;display:block;}
.seal-badge{width:84px;height:84px;}

/* ===== utility ===== */
.text-center{text-align:center;}
.container-narrow{max-width:68ch;margin:0 auto;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* COMPONENTS:
.wrap - centered max-width container with side padding
.section - vertical rhythm padding wrapper for page sections
.grid / .grid-2 / .grid-3 / .grid-4 - responsive grid helpers
.reveal / .reveal.in-view / .reveal-stagger - scroll reveal animation system
.site-header / .site-header__inner - sticky site header bar
.logo / .logo__mark / .logo__word / .logo__accent - brand logo lockup
.menu-toggle - mobile hamburger button
.site-nav / .nav-list / .nav-link / .nav-link.is-active - primary navigation
.cart-link / .cart-badge / .cart-badge.bump - header cart icon + count
.btn / .btn--primary / .btn--ghost / .btn--block / .btn--sm - button variants with fill-sweep hover
.hero / .hero__grain / .hero__inner / .hero__title / .hero__lead / .hero__actions - home hero block
.map-canvas / .map-grid / .map-card / .map-card--photo / .map-card--wide / .map-card--narrow / .map-card__pin - map-style pinned content layout
.page-hero / .page-hero__inner - inner page hero banner
.breadcrumbs - breadcrumb trail list
.prose - long-form legal/readable text container
.legal-toc - table of contents box for legal pages
.notice / .notice--success / .notice--error - callout message box
.form-grid / .form-grid--2col / .field / .field-error / .field.has-error - form layout and validation states
.hp - visually hidden honeypot field
.form-ok / .form-error (on form) - submission result messages, shown via .is-sent/.is-error
.newsletter-row - inline email + submit button row
.faq / .faq-item - FAQ accordion using details/summary
.product-strip / .product-grid / .product-card / .product-card__media / .product-card__body / .product-card__cat / .product-card__name / .product-card__price - catalog product cards and layouts
.product-detail / .product-detail__media / .product-detail__price / .product-detail__meta - product detail page layout
.qty-control - quantity stepper control
.cart-table / .cart-table__product / .cart-summary / .cart-summary__row / .cart-summary__row--total / .cart-empty - cart & checkout layout
.contact-layout / .contact-info-list - contact page split layout
.site-footer / .site-footer__inner / .footer-col / .footer-heading / .footer-list / .footer-tagline / .footer-mail / .footer-divider / .site-footer__bottom - site footer
.cookie-banner / .cookie-banner.is-visible / .cookie-banner__actions - cookie consent banner
.ornament-strip / .seal-badge - bespoke decorative SVG sizing helpers
.text-center / .container-narrow / .mt-1 / .mt-2 / .mb-2 / .gap-1 / .gap-2 / .flex / .flex-center / .flex-between - small utility helpers
*/

/* ===== footer columns (brand & newsletter) ===== */
.footer-col--brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo--footer {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.footer-col--newsletter {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}