/* Kožna Galanterija Remen — collage cut-out style */

:root{
  --sky: #2f97c9;
  --sky-light: #7fcbed;
  --sun: #f5b700;
  --sun-dark: #d99600;
  --paper: #faf4e6;
  --paper-dark: #efe4cc;
  --white: #fffdf8;
  --ink: #2a1c12;
  --leather: #8a4e2a;
  --leather-dark: #5a331c;
  --line: rgba(42,28,18,.16);
  --radius: 4px;
  --shadow-tape: 0 6px 14px rgba(42,28,18,.18);
  --shadow-card: 0 10px 24px rgba(42,28,18,.14);
  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Courier New", ui-monospace, monospace;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0 0 .5em;line-height:1.08;}
p{margin:0 0 1em;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}
section{position:relative;}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* grain overlay */
.grain-overlay{
  position:fixed;inset:0;width:100vw;height:100vh;
  pointer-events:none;z-index:9999;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;border:2px solid var(--ink);border-radius:999px;
  background:var(--sun);color:var(--ink);font-weight:700;font-size:.95rem;
  overflow:hidden;isolation:isolate;min-height:44px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn span{position:relative;z-index:2;}
.btn::before{
  content:"";position:absolute;inset:0;left:-100%;width:100%;z-index:1;
  background:var(--ink);transition:left .4s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{left:0;}
.btn:hover,.btn:focus-visible{color:var(--white);}
.btn.btn-outline{background:transparent;border-color:var(--white);color:var(--white);}
.btn.btn-outline::before{background:var(--white);}
.btn.btn-outline:hover,.btn.btn-outline:focus-visible{color:var(--ink);}
.btn.btn-sky{background:var(--sky);color:var(--white);border-color:var(--ink);}
.btn.btn-sky::before{background:var(--ink);}
.btn.btn-sky:hover{color:var(--white);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.btn-small{padding:.5em 1.1em;font-size:.85rem;}

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

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:500;background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.header-inner{
  max-width:1180px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{width:42px;height:42px;flex-shrink:0;}
.logo-word{width:132px;height:28px;color:var(--ink);}
.logo-tag{display:block;font-family:var(--font-label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leather);}
.main-nav ul{display:flex;gap:26px;}
.main-nav a{
  font-weight:600;font-size:.95rem;position:relative;padding:4px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sky);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.header-actions{display:flex;align-items:center;gap:14px;}
.cart-link{position:relative;display:flex;align-items:center;padding:8px;min-width:44px;min-height:44px;justify-content:center;}
.cart-count{
  position:absolute;top:0;right:0;background:var(--sun-dark);color:var(--white);
  border:2px solid var(--ink);border-radius:999px;font-size:.68rem;font-weight:700;
  min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 3px;
  transition:transform .3s var(--ease);
}
.cart-count.bump{animation:bump .4s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:transparent;border:2px solid var(--ink);border-radius:50%;
}
.menu-toggle span{width:18px;height:2px;background:var(--ink);margin:0 auto;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .main-nav{
    position:fixed;top:0;right:0;height:100%;width:min(78vw,320px);
    background:var(--white);border-left:3px solid var(--ink);
    padding:90px 28px 28px;
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--ease), visibility .4s;
    z-index:400;
  }
  .main-nav.open{transform:translateX(0);visibility:visible;}
  .main-nav ul{flex-direction:column;gap:22px;}
  .main-nav a{font-size:1.1rem;}
  .menu-toggle{display:flex;}
}

/* ===== hero ===== */
.hero{
  padding:48px 0 70px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-light) 0%, var(--paper) 72%);
}
.hero-inner{
  max-width:1180px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}
@media (min-width:860px){
  .hero-inner{grid-template-columns:1.1fr .9fr;}
}
.hero-headline{
  font-size:clamp(2.6rem,7vw,5.2rem);margin:0 0 .3em;letter-spacing:-.01em;
}
.hero-headline mark{background:none;color:var(--leather-dark);position:relative;}
.hero-headline .cut{
  display:inline-block;background:var(--sun);padding:.02em .25em;transform:rotate(-1.2deg);
  box-shadow:var(--shadow-tape);
}
.hero-lede{font-size:1.15rem;max-width:34ch;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em;}
.hero-art{position:relative;aspect-ratio:1/1;max-width:420px;margin:0 auto;}
.hero-badge{
  position:absolute;inset:0;animation:spin 48s linear infinite;
}
@media (prefers-reduced-motion: reduce){.hero-badge{animation:none;}}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-illustration{width:100%;height:100%;}
.tape{
  position:absolute;filter:drop-shadow(0 4px 6px rgba(42,28,18,.25));
}

/* ===== reveal ===== */
.reveal{transition:opacity .7s var(--ease), transform .7s var(--ease), clip-path .7s var(--ease);}
.reveal.r-hidden{opacity:0;transform:translateY(28px);}
.reveal.r-clip.r-hidden{clip-path:inset(0 0 100% 0);opacity:1;transform:none;}
.reveal.in-view{opacity:1;transform:none;clip-path:inset(0 0 0% 0);}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.r-hidden{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
}

/* ===== section headers ===== */
.section-head{max-width:640px;margin:0 0 36px;}
.eyebrow{
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  color:var(--leather);display:inline-block;margin-bottom:.6em;
}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem);}

/* ===== divider ===== */
.divider{display:block;width:100%;height:28px;color:var(--ink);}
.divider.flip{transform:scaleY(-1);}

/* ===== story (horizontal scroll) ===== */
.story-section{background:var(--leather-dark);color:var(--paper);padding:60px 0;}
.story-section .section-head{color:var(--paper);}
.story-section .eyebrow{color:var(--sun);}
.story-track{
  display:flex;gap:18px;overflow-x:auto;padding:0 20px 20px;scroll-snap-type:x mandatory;
  scrollbar-color:var(--sun) transparent;
}
.story-panel{
  flex:0 0 280px;scroll-snap-align:start;background:var(--paper);color:var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;
}
@media (min-width:860px){
  .story-track{overflow-x:scroll;}
  .story-panel{flex:0 0 340px;}
}
.story-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.story-panel .story-body{padding:16px 18px;}
.story-panel .step-no{
  font-family:var(--font-label);color:var(--leather);font-size:.8rem;letter-spacing:.1em;
}
.story-panel h3{font-size:1.2rem;margin:.3em 0;}

/* ===== initials studio (signature feature) ===== */
.studio{padding:64px 0;background:var(--white);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);}
.studio-grid{display:grid;gap:36px;}
@media (min-width:860px){.studio-grid{grid-template-columns:1fr 1fr;align-items:start;}}
.studio-controls{display:grid;gap:18px;}
.studio-controls label{font-weight:700;font-size:.9rem;display:block;margin-bottom:.4em;}
.studio-controls input[type="text"],.studio-controls select{
  width:100%;padding:.7em .9em;border:2px solid var(--ink);border-radius:var(--radius);background:var(--paper);
}
.swatches{display:flex;gap:10px;}
.swatch{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;position:relative;
}
.swatch[aria-pressed="true"]::after{
  content:"";position:absolute;inset:-6px;border:2px dashed var(--sky);border-radius:50%;
}
.studio-preview{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:22px;
  display:grid;gap:16px;justify-items:center;box-shadow:var(--shadow-card);
}
.studio-preview svg{width:100%;max-width:320px;}
.studio-note{font-size:.85rem;color:var(--leather-dark);}

/* ===== product grid / cards ===== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;}
.card{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card);transition:transform .35s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);}
.card-media{aspect-ratio:4/3;overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.card:hover .card-media img{transform:scale(1.08);}
.card-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-cat{font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leather);}
.card-body h3{font-size:1.15rem;margin:0;}
.card-price{font-weight:700;font-size:1.1rem;margin-top:auto;}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px 18px;}

.home-strip{padding:60px 0;}
.strip-track{display:grid;grid-auto-flow:column;grid-auto-columns:240px;gap:20px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;}
.strip-track .card{scroll-snap-align:start;}
@media (min-width:860px){
  .strip-track{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:unset;overflow-x:visible;}
}

/* ===== about / value props ===== */
.values{padding:60px 0;}
.values-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media (min-width:700px){.values-grid{grid-template-columns:repeat(3,1fr);}}
.value-item{background:var(--sky-light);border:2px solid var(--ink);border-radius:var(--radius);padding:22px;position:relative;}
.value-item:nth-child(2){background:var(--sun);transform:rotate(-.6deg);}
.value-item:nth-child(3){background:var(--white);}
.value-item .icon{width:30px;height:30px;margin-bottom:10px;}

/* ===== filters (catalog) ===== */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.chip{
  border:2px solid var(--ink);border-radius:999px;padding:.5em 1.1em;background:var(--white);
  font-weight:600;font-size:.85rem;min-height:40px;
}
.chip[aria-pressed="true"]{background:var(--sun);}

/* ===== product page ===== */
.product-detail{padding:50px 0 70px;display:grid;gap:36px;}
@media (min-width:860px){.product-detail{grid-template-columns:1fr 1fr;}}
.product-gallery{position:relative;}
.product-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);border-radius:var(--radius);}
.product-info h1{font-size:clamp(2rem,4vw,2.8rem);}
.price-tag{
  display:inline-block;background:var(--sun);border:2px solid var(--ink);border-radius:var(--radius);
  padding:.3em .7em;font-weight:700;font-size:1.4rem;transform:rotate(-1deg);margin-bottom:1em;
}
.option-row{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0;}
.qty-row{display:flex;align-items:center;gap:10px;margin:1.2em 0;}
.qty-row button{width:40px;height:40px;border:2px solid var(--ink);background:var(--white);border-radius:50%;font-size:1.1rem;}
.qty-row input{width:54px;text-align:center;border:2px solid var(--ink);border-radius:var(--radius);padding:.4em;}

/* ===== cart / checkout ===== */
.cart-page{padding:50px 0 70px;}
.cart-table{width:100%;border-collapse:collapse;margin-bottom:28px;}
.cart-table th{text-align:left;font-family:var(--font-label);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--ink);padding:10px 8px;}
.cart-table td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-item-media{display:flex;align-items:center;gap:12px;}
.cart-item-media img{width:60px;height:60px;object-fit:cover;border:2px solid var(--ink);border-radius:var(--radius);}
.cart-remove{background:none;border:none;color:var(--leather);text-decoration:underline;font-size:.85rem;}
.cart-summary{display:flex;justify-content:flex-end;}
.cart-summary-box{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:20px;min-width:260px;}
.cart-summary-box .total-row{display:flex;justify-content:space-between;font-weight:700;font-size:1.2rem;padding-top:10px;border-top:2px solid var(--ink);margin-top:10px;}
.checkout-grid{display:grid;gap:40px;margin-top:40px;}
@media (min-width:860px){.checkout-grid{grid-template-columns:1.1fr .9fr;}}
.empty-cart{text-align:center;padding:60px 20px;}

/* ===== forms ===== */
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-weight:700;margin-bottom:.4em;font-size:.92rem;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:.75em .9em;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);
  accent-color:var(--sky);
}
.form-field textarea{resize:vertical;min-height:100px;}
.form-row{display:grid;gap:18px;}
@media (min-width:600px){.form-row.cols-2{grid-template-columns:1fr 1fr;}}
.form-note{font-size:.85rem;color:var(--leather-dark);}
.form-msg{padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;display:none;border:2px solid var(--ink);}
.form-msg.show{display:block;}
.form-msg.ok{background:#dff0e4;}
.form-msg.err{background:#fbe0d9;}
.field-error{color:#8a2a1c;font-size:.82rem;margin-top:.3em;display:none;}
.field-error.show{display:block;}

/* honeypot */
.hp-field{position:absolute !important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== newsletter / footer ===== */
.site-footer{background:var(--ink);color:var(--paper);padding:56px 0 24px;margin-top:0;}
.footer-top{display:grid;gap:36px;grid-template-columns:1fr;margin-bottom:40px;}
@media (min-width:700px){.footer-top{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
.footer-brand .logo-word{color:var(--paper);width:150px;height:30px;}
.footer-brand p{color:#cbb9a3;max-width:30ch;margin-top:12px;}
.footer-col h4{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--sun);margin-bottom:14px;}
.footer-col ul{display:grid;gap:9px;}
.footer-col a{color:var(--paper);opacity:.88;}
.footer-col a:hover{opacity:1;text-decoration:underline;}
.newsletter{display:grid;gap:10px;margin-top:16px;}
.newsletter-row{display:flex;gap:8px;flex-wrap:wrap;}
.newsletter input[type="email"]{flex:1;min-width:160px;padding:.7em .9em;border-radius:var(--radius);border:2px solid var(--paper);background:transparent;color:var(--paper);}
.newsletter input::placeholder{color:#cbb9a3;}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid rgba(250,244,230,.2);padding-top:20px;font-size:.85rem;color:#cbb9a3;}
.footer-bottom a{text-decoration:underline;}

/* ===== cookie banner ===== */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:640px;margin:0 auto;
  background:var(--ink);color:var(--paper);border:2px solid var(--sun);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-card);display:none;gap:14px;flex-wrap:wrap;align-items:center;
}
.cookie-banner.show{display:flex;}
.cookie-banner p{margin:0;flex:1 1 220px;font-size:.9rem;color:var(--paper);}
.cookie-banner a{text-decoration:underline;color:var(--sun);}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ===== legal / text pages ===== */
.page-head{padding:50px 0 20px;}
.page-head h1{font-size:clamp(2rem,5vw,3.2rem);}
.prose{padding:0 0 70px;max-width:760px;}
.prose h2{margin-top:1.6em;font-size:1.5rem;}
.prose ul{list-style:disc;padding-left:1.3em;margin-bottom:1em;}
.prose li{margin-bottom:.4em;}

/* ===== FAQ ===== */
.faq-list{display:grid;gap:12px;max-width:760px;}
.faq-item{border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);overflow:hidden;}
.faq-item summary{padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--leather);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{padding:0 20px 18px;margin:0;color:var(--ink);}

/* ===== 404 ===== */
.page-404{padding:100px 0;text-align:center;}
.page-404 .code{font-size:clamp(5rem,20vw,10rem);font-family:var(--font-display);color:var(--sun);
  -webkit-text-stroke:3px var(--ink);}

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

/* ===== misc ===== */
.stitch{display:block;width:100%;height:14px;color:var(--leather);}
.badge-strip{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.badge-strip .icon{width:26px;height:26px;}
.badge-strip span{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;}

@media (max-width:420px){
  .header-inner{gap:8px;}
  .logo-word{width:108px;height:23px;}
}