/* ===========================================================
   Hotel za Živali Muc — Riso print style sheet
   =========================================================== */

:root{
  --paper: #f3ede0;
  --paper-dark: #e9e0cc;
  --ink: #302c27;
  --smoke: #767068;
  --smoke-soft: #a39d92;
  --amber: #d98324;
  --amber-deep: #a85414;
  --white: #fffaf0;
  --line: rgba(48,44,39,.18);
  --radius: 18px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Consolas", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --maxw: 1180px;
  --dur: .5s;
}

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

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; }

.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: 20px; }

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

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

/* ---------- icon sprite ---------- */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{ width:1.3em; height:1.3em; stroke: currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding: .85em 1.6em; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); font-weight:600; font-size: .95rem;
  cursor:pointer; overflow:hidden; isolation:isolate; min-height:44px;
  transition: color var(--dur) ease, border-color var(--dur) ease, transform .15s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%; width:100%; background: var(--ink); z-index:-1;
  transition: left .35s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before, .btn:focus-visible::before{ left:0; }
.btn:hover, .btn:focus-visible{ color: var(--paper); }
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--amber); border-color: var(--amber-deep); color: var(--ink); }
.btn-primary::before{ background: var(--amber-deep); }
.btn-primary:hover{ color: var(--white); }
.btn-ghost{ background: transparent; }
.btn-sm{ padding:.55em 1.1em; font-size:.85rem; min-height:38px; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 400; background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding-block: .7rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); }
.brand-mark{ width:46px; height:46px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{ font-size:1.25rem; letter-spacing:-.01em; }
.brand-text span{ font-family: var(--font-body); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color: var(--smoke); }

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

.cart-link{ display:flex; align-items:center; gap:.4em; font-weight:700; border:2px solid var(--ink); border-radius:999px; padding:.4em .9em; min-height:44px; }
.cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; height:1.5em; border-radius:50%; background:var(--amber); font-family: var(--font-mono); font-size:.8rem; transition: transform .25s ease; }
.cart-count.bump{ transform: scale(1.4); }

.nav-toggle{ display:none; }

@media (max-width: 760px){
  .main-nav{ position:fixed; inset: 64px 0 auto 0; flex-direction:column; align-items:stretch; background: var(--paper); border-bottom:2px solid var(--ink); padding:1rem 1.2rem 1.4rem; gap:1rem; transform: translateY(-110%); transition: transform .3s ease; z-index:399; }
  .main-nav.open{ transform: translateY(0); }
  .main-nav ul{ flex-direction:column; gap: .2rem; }
  .main-nav ul a{ display:block; padding: .6em 0; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:2px solid var(--ink); border-radius:50%; background:none; cursor:pointer; }
  .header-actions{ display:flex; align-items:center; gap:.6rem; }
}

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--paper); margin-top: 5rem; position:relative; }
.site-footer .wrap{ padding-block: 3rem 1.6rem; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.2rem; }
.footer-grid h3{ font-family: var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color: var(--amber); margin-bottom: 1em; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:.55em; }
.footer-grid a:hover{ color: var(--amber); }
.footer-brand p{ color: var(--smoke-soft); max-width:26ch; }
.newsletter-form{ display:flex; gap:.5em; margin-top:.5em; flex-wrap:wrap; }
.newsletter-form input[type="email"]{ flex:1; min-width:0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em; margin-top: 2.4rem; padding-top:1.4rem; border-top:1px solid rgba(243,237,224,.2); color: var(--smoke-soft); font-size:.85rem; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- form elements ---------- */
label{ display:block; font-weight:600; margin-bottom:.35em; font-size:.92rem; }
input, textarea, select{
  width:100%; padding:.72em .85em; border-radius:10px; border:2px solid var(--line);
  background: var(--white); color: var(--ink); font-family: inherit; font-size:1rem; accent-color: var(--amber-deep);
  min-height:44px;
}
textarea{ min-height:120px; resize: vertical; }
input:focus, textarea:focus, select:focus{ border-color: var(--amber-deep); }
.field{ margin-bottom: 1.1rem; }
.field-error{ color:#9a2e1b; font-size:.85rem; margin-top:.35em; display:none; }
.field.has-error input, .field.has-error textarea{ border-color:#9a2e1b; }
.field.has-error .field-error{ display:block; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.85rem; color: var(--smoke); }
.form-status{ margin-top:1em; padding:.9em 1em; border-radius:10px; display:none; font-weight:600; }
.form-status.show{ display:block; }
.form-status.ok{ background:#dff1df; color:#204d20; }
.form-status.err{ background:#f6dcd6; color:#7a2112; }

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

/* ---------- hero ---------- */
.hero{ position:relative; padding: 3.4rem 0 4.5rem; overflow:hidden; }
.hero .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.4rem; }
.hero-tag{ display:inline-flex; align-items:center; gap:.5em; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:.4em 1em; border:2px dashed var(--ink); border-radius:999px; background: var(--white); }
.hero h1{ font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 18ch; position:relative; }
.hero h1 .riso-offset{ position:relative; display:inline-block; }
.hero h1 .riso-offset::before{ content: attr(data-text); position:absolute; left:3px; top:3px; color: var(--amber); z-index:-1; opacity:.75; }
.hero-sub{ max-width: 48ch; font-size: 1.15rem; color: var(--smoke); }
.hero-actions{ display:flex; gap:1em; flex-wrap:wrap; justify-content:center; }
.hero-orbit{ position:relative; width:min(560px, 90vw); height:min(560px,90vw); margin-top:1.5rem; }
.hero-orbit img{ position:absolute; border-radius: 50%; border:5px solid var(--white); box-shadow: 0 10px 30px rgba(48,44,39,.25); object-fit:cover; aspect-ratio:1/1; }
.orbit-center{ position:absolute; inset: 18%; border-radius:50%; overflow:hidden; border:6px solid var(--ink); z-index:3; }
.orbit-center img{ position:static; width:100%; height:100%; border:none; border-radius:0; }
.orbit-item{ width: 26%; height:26%; z-index:2; }
.orbit-item:nth-of-type(1){ top:2%; left:38%; }
.orbit-item:nth-of-type(2){ top:28%; left:0%; width:22%; height:22%; }
.orbit-item:nth-of-type(3){ top:30%; right:0%; width:22%; height:22%; }
.orbit-item:nth-of-type(4){ bottom:0%; left:30%; width:24%; height:24%; }
.hero-shapes{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-shapes svg{ position:absolute; will-change: transform; }
.shape-a{ top:8%; left:6%; width:70px; height:70px; }
.shape-b{ top:60%; left:12%; width:50px; height:50px; }
.shape-c{ top:15%; right:8%; width:90px; height:90px; }
.shape-d{ bottom:8%; right:14%; width:60px; height:60px; }

/* ---------- sections ---------- */
section{ padding-block: 3.6rem; position:relative; }
.section-head{ max-width: 56ch; margin-bottom: 2.2rem; }
.section-head .kicker{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color: var(--amber-deep); display:block; margin-bottom:.6em; }
.section-head h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); }
.section-dark{ background: var(--ink); color: var(--paper); }
.section-dark .section-head h2{ color: var(--white); }
.section-dark .kicker{ color: var(--amber); }
.section-paper2{ background: var(--paper-dark); }

.divider{ width:100%; height:40px; display:block; color: var(--smoke-soft); }

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

/* ---------- cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .card-grid{ grid-template-columns: 1fr; } }
.info-card{ background: var(--white); border:2px solid var(--ink); border-radius: var(--radius); padding: 1.6rem; position:relative; }
.info-card .icon{ width:2em; height:2em; margin-bottom:.6em; color: var(--amber-deep); }
.info-card h3{ font-size:1.2rem; }

/* ---------- product grid / strip ---------- */
.product-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
@media (max-width:1000px){ .product-strip{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px){
  .product-strip{ grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; grid-template-rows: auto; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; margin-inline:-20px; padding-inline:20px; }
  .product-strip .product-card{ scroll-snap-align:center; }
}
.product-card{ background: var(--white); border:2px solid var(--ink); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover{ transform: translateY(-6px); box-shadow: 8px 10px 0 var(--ink); }
.product-media{ aspect-ratio: 4/3; overflow:hidden; position:relative; border-bottom:2px solid var(--ink); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-tag{ position:absolute; top:.6em; left:.6em; background: var(--amber); border:2px solid var(--ink); border-radius:999px; font-family: var(--font-mono); font-size:.72rem; padding:.2em .7em; }
.product-body{ padding: 1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.5em; flex:1; }
.product-body h3{ font-size:1.05rem; margin:0; }
.product-price{ font-family: var(--font-mono); font-weight:700; color: var(--amber-deep); font-size:1.1rem; }
.product-body p{ color: var(--smoke); font-size:.9rem; margin:0; flex:1; }

.filter-bar{ display:flex; gap:.6em; flex-wrap:wrap; margin-bottom: 1.6rem; }
.filter-bar button{ border:2px solid var(--ink); background: var(--white); border-radius:999px; padding:.5em 1.1em; font-weight:600; cursor:pointer; min-height:40px; }
.filter-bar button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }

/* ---------- product detail page ---------- */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items:start; }
@media (max-width: 820px){ .product-detail{ grid-template-columns:1fr; } }
.product-detail .product-media{ aspect-ratio: 1/1; border-radius: var(--radius); }
.qty-row{ display:flex; align-items:center; gap:1em; margin: 1.2em 0; }
.qty-row .qty-controls{ display:flex; align-items:center; border:2px solid var(--ink); border-radius:999px; }
.qty-controls button{ width:40px; height:40px; border:none; background:none; font-size:1.2rem; cursor:pointer; }
.qty-controls input{ width: 3em; text-align:center; border:none; background:none; min-height:unset; padding:0; }

/* ---------- boksometer (signature feature) ---------- */
.boksometer{ background: var(--white); border:3px solid var(--ink); border-radius: 24px; padding: 2rem; position:relative; overflow:hidden; }
.boksometer::before{ content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background: var(--amber); border-radius:50%; opacity:.25; }
.boksometer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 820px){ .boksometer-grid{ grid-template-columns:1fr; } }
.boksometer-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1em; }
@media (max-width:480px){ .boksometer-form .field-row{ grid-template-columns:1fr; } }
.nights-grid{ display:flex; flex-wrap:wrap; gap:.4em; margin: 1em 0; min-height: 2.4em; }
.night-dot{ width: 2em; height:2em; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:.72rem; background: var(--amber); animation: pop .3s ease backwards; }
@keyframes pop{ from{ transform: scale(0); } to{ transform: scale(1); } }
.boksometer-result{ background: var(--paper-dark); border-radius: 16px; padding: 1.4rem; }
.boksometer-result .total{ font-family: var(--font-mono); font-size: 2.2rem; font-weight:700; color: var(--amber-deep); }
.boksometer-result .match{ font-weight:700; margin-top:.3em; }

/* ---------- about / split sections ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items:center; }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } }
.split-media{ position:relative; }
.split-media img{ border-radius: var(--radius); aspect-ratio: 4/3; object-fit:cover; width:100%; border: 4px solid var(--ink); }
.split-media .seal{ position:absolute; bottom:-26px; left:-26px; }

.timeline{ display:flex; flex-direction:column; gap:1.4rem; }
.timeline-item{ display:grid; grid-template-columns: 90px 1fr; gap:1.2rem; align-items:start; }
.timeline-item .step{ font-family: var(--font-mono); font-size:1.6rem; font-weight:700; color: var(--amber-deep); }

/* ---------- cart page ---------- */
.cart-table{ width:100%; border-collapse: collapse; }
.cart-table th{ text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--smoke); padding-bottom:.6em; border-bottom:2px solid var(--ink); }
.cart-table td{ padding: 1em 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-item-info{ display:flex; align-items:center; gap:1em; }
.cart-item-info img{ width:64px; height:64px; border-radius:10px; object-fit:cover; border:2px solid var(--ink); }
.cart-summary{ background: var(--white); border:2px solid var(--ink); border-radius: var(--radius); padding: 1.6rem; position:sticky; top: 90px; }
.cart-summary .row{ display:flex; justify-content:space-between; padding-block:.5em; }
.cart-summary .row.total{ font-weight:700; font-size:1.2rem; border-top:2px solid var(--ink); margin-top:.5em; padding-top:.8em; }
.cart-layout{ display:grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items:start; }
@media (max-width: 860px){ .cart-layout{ grid-template-columns:1fr; } }
.remove-btn{ background:none; border:none; color: var(--amber-deep); font-weight:700; cursor:pointer; text-decoration: underline; padding:.4em; }
.empty-cart{ text-align:center; padding: 3rem 1rem; }

/* ---------- checkout ---------- */
.checkout-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; align-items:start; }
@media (max-width: 860px){ .checkout-grid{ grid-template-columns:1fr; } }
fieldset{ border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.4rem; margin-bottom:1.4rem; }
legend{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; padding:0 .4em; }
.radio-option{ display:flex; align-items:flex-start; gap:.7em; border:2px solid var(--line); border-radius:12px; padding: .9em 1em; margin-bottom:.7em; cursor:pointer; }
.radio-option input{ width:auto; min-height:unset; margin-top:.2em; }

/* ---------- faq ---------- */
.faq-item{ border-bottom:2px solid var(--line); }
.faq-item summary{ cursor:pointer; font-weight:700; padding: 1.1em 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1em; font-size:1.05rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .icon{ transition: transform .25s ease; flex:none; }
.faq-item[open] summary .icon{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: 1.2em; color: var(--smoke); max-width: 70ch; }

/* ---------- legal pages ---------- */
.legal{ max-width: 72ch; }
.legal h2{ font-size:1.4rem; margin-top:1.6em; }
.legal ul{ list-style: disc; padding-left:1.4em; margin-bottom:1em; }
.legal li{ margin-bottom:.4em; }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding: 5rem 0; }
.error-page .code{ font-family: var(--font-mono); font-size: clamp(4rem,14vw,8rem); color: var(--amber); }

/* ---------- cookie banner ---------- */
.cookie-banner{
  position: fixed; left: 16px; right:16px; bottom:16px; z-index: 600; max-width: 640px; margin-inline:auto;
  background: var(--ink); color: var(--paper); border-radius: 16px; padding: 1.4rem 1.6rem; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display:flex; flex-wrap:wrap; gap:1em; align-items:center; justify-content:space-between; transform: translateY(140%); transition: transform .4s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ margin:0; font-size:.92rem; flex: 1 1 260px; color: var(--paper); }
.cookie-banner a{ text-decoration: underline; color: var(--amber); }
.cookie-actions{ display:flex; gap:.7em; flex-wrap:wrap; }
.cookie-banner .btn{ color: var(--paper); border-color: var(--paper); }
.cookie-banner .btn-primary{ background: var(--amber); border-color:var(--amber); color: var(--ink); }
.cookie-banner .btn-primary::before{ background: var(--amber-deep); }
.cookie-banner .btn-ghost::before{ background: var(--paper); }
.cookie-banner .btn-ghost:hover{ color: var(--ink); }

/* ---------- misc utility ---------- */
.text-center{ text-align:center; }
.mt-lg{ margin-top: 2.4rem; }
.visually-hidden{ position:absolute; left:-9999px; }
.tag-list{ display:flex; gap:.5em; flex-wrap:wrap; margin: .6em 0 1em; }
.tag-list span{ font-family: var(--font-mono); font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:.25em .8em; color: var(--smoke); }
.breadcrumb{ font-size:.85rem; color: var(--smoke); margin-bottom: 1.4rem; }
.breadcrumb a:hover{ color: var(--amber-deep); }

.marquee{ overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); background: var(--amber); padding-block: .6em; }
.marquee-track{ display:flex; gap: 2.5em; white-space:nowrap; font-family: var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; animation: marquee 22s linear infinite; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }