/* Kišobrani Val — newspaper broadsheet design system */
:root{
  --ink:#0b2b22;
  --ink-soft:#163b2e;
  --paper:#f3ecd9;
  --paper-dim:#e8dec5;
  --gold:#d4af37;
  --gold-deep:#a6821f;
  --emerald:#1f6f52;
  --line:#0b2b2233;
  --font-display:Georgia,"Times New Roman",serif;
  --font-body:"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --font-mono:"Courier New",Courier,monospace;
  --maxw:1180px;
  --radius:2px;
}
*{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.55;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px);
  background-size:100% 2.2em;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0 0 .5em}
.btn{
  display:inline-flex;align-items:center;gap:.5em;position:relative;overflow:hidden;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  padding:.85em 1.4em;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;border-radius:var(--radius);min-height:44px;z-index:0;
}
.btn::before{
  content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--ink);
  transition:left .3s ease;z-index:-1;
}
.btn:hover::before,.btn:focus-visible::before{left:0}
.btn:hover,.btn:focus-visible{color:var(--paper)}
.btn--gold{background:var(--gold);border-color:var(--gold-deep);color:var(--ink)}
.btn--gold::before{background:var(--ink)}
.btn--gold:hover,.btn--gold:focus-visible{color:var(--gold)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn--ghost::before{background:var(--paper)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--dark::before{background:var(--gold)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px double var(--ink)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding-block:.8rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.brand__mark{color:var(--ink);flex-shrink:0}
.brand__wordmark{width:150px;height:auto;aspect-ratio:210/44;color:var(--ink)}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;min-height:44px;min-width:44px}
.site-nav{display:flex;align-items:center;gap:1.4rem;font-family:var(--font-mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.site-nav a{position:relative;padding-block:.3em}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold-deep);transition:width .25s ease}
.site-nav a:hover::after,.site-nav a.is-active::after{width:100%}
.site-nav a.is-active{color:var(--gold-deep)}
.nav-cart{display:flex;align-items:center;gap:.4em;border:1.5px solid var(--ink);padding:.4em .7em;border-radius:var(--radius)}
.cart-badge{background:var(--gold);color:var(--ink);border-radius:50%;min-width:1.6em;height:1.6em;display:inline-flex;align-items:center;justify-content:center;font-size:.85em}
.cart-badge.is-empty{background:transparent;border:1px solid var(--ink)}
.cart-badge.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav{
    position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(78vw,320px);
    background:var(--ink);color:var(--paper);flex-direction:column;align-items:flex-start;
    justify-content:flex-start;padding:5.5rem 1.5rem 2rem;gap:1.4rem;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease;
  }
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav a{color:var(--paper)}
  .nav-cart{border-color:var(--paper)}
}

/* footer */
.site-footer{background:var(--ink);color:var(--paper-dim);padding-top:2.5rem;margin-top:4rem}
.site-footer__divider{display:block;color:var(--gold)}
.site-footer__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-block:2rem}
.site-footer a{color:var(--paper-dim)}
.site-footer a:hover{color:var(--gold)}
.site-footer__brand{font-family:var(--font-display);font-size:1.3rem;color:var(--paper);margin-bottom:.3em}
.site-footer__heading{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--gold);margin-bottom:.6em}
.site-footer__col{display:flex;flex-direction:column;gap:.5rem}
.newsletter-form{display:flex;flex-direction:column;gap:.6rem}
.newsletter-form input[type=email]{padding:.6em;border:1px solid var(--paper-dim);background:transparent;color:var(--paper)}
.site-footer__copy{text-align:center;font-family:var(--font-mono);font-size:.78rem;padding:1.5rem 0;border-top:1px solid #ffffff22}
@media (max-width:760px){.site-footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer__inner{grid-template-columns:1fr}}

/* cookie banner */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:100;background:var(--ink);color:var(--paper);
  padding:1.2rem;border:1px solid var(--gold);border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;max-width:620px;box-shadow:0 10px 30px #00000055}
.cookie-banner a{color:var(--gold)}
.cookie-banner__actions{display:flex;gap:.7rem}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* reveal / motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}
.reveal-clip{clip-path:inset(0 100% 0 0);transition:clip-path .8s ease}
.reveal-clip.in-view{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-clip{transition:none;opacity:1;transform:none;clip-path:none}
}

/* page hero (inner pages) */
.page-hero{background:var(--ink);color:var(--paper);padding:4rem 0 3rem;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:var(--paper);font-size:clamp(2rem,5vw,3.2rem)}
.page-hero p{max-width:40em;color:var(--paper-dim)}

/* breadcrumbs */
.breadcrumbs{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--paper-dim);display:flex;gap:.4em}
.breadcrumbs a{color:var(--gold)}
.breadcrumbs span{opacity:.6}

/* prose (legal pages) */
.prose{max-width:38rem;margin:0 auto;padding:3rem 1.25rem 5rem}
.prose h2{margin-top:1.8em;font-size:1.4rem}
.prose h3{margin-top:1.4em;font-size:1.1rem}
.prose p,.prose li{font-size:1rem}
.prose ul,.prose ol{padding-left:1.3em}
.legal-toc{background:var(--paper-dim);border:1px solid var(--line);padding:1.2rem 1.4rem;border-radius:var(--radius);margin-bottom:2rem}
.legal-toc p{margin-top:0;font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.legal-toc ol{margin:0;padding-left:1.2em}

/* notice */
.notice{border-left:3px solid var(--gold-deep);background:var(--paper-dim);padding:1rem 1.2rem;border-radius:var(--radius);margin:1.5rem 0}
.notice--error{border-color:#9b2c2c}
.notice--success{border-color:var(--emerald)}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-grid .field--full{grid-column:1 / -1}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;padding:.7em .8em;border:1px solid var(--ink);
  background:var(--paper);border-radius:var(--radius);accent-color:var(--gold-deep);min-height:44px;
}
.field textarea{min-height:120px;resize:vertical}
.field-error{color:#9b2c2c;font-size:.82rem}
.form-status{font-family:var(--font-mono);font-size:.85rem;margin-top:.8rem}
.form-status.is-success{color:var(--emerald)}
.form-status.is-error{color:#9b2c2c}

/* faq */
.faq{max-width:42rem;margin:0 auto;display:flex;flex-direction:column;gap:.9rem;padding:2rem 1.25rem 4rem}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-dim);padding:.2rem 1.1rem}
.faq-item summary{cursor:pointer;padding:1em 0;font-family:var(--font-display);font-size:1.05rem;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;font-family:var(--font-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0 0 1em}

/* product grid / detail */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6rem;padding-block:2rem}
.product-card{display:block;position:relative;background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 14px 26px #0b2b2233}
.product-card__media{aspect-ratio:1/1;overflow:hidden}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-card__media img{transform:scale(1.08)}
.product-card__body{padding:1rem 1.1rem 1.3rem}
.product-card__name{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .3em}
.product-card__price{font-family:var(--font-mono);color:var(--gold-deep)}
.product-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;padding-block:3rem 5rem}
.product-detail__media{position:relative}
.product-detail__media img{border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover}
.product-detail__price{font-family:var(--font-mono);font-size:1.6rem;color:var(--gold-deep)}
.product-detail__meta{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:800px){.product-detail{grid-template-columns:1fr}}

/* cart / checkout */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:2rem}
.cart-table th,.cart-table td{text-align:left;padding:.8em .6em;border-bottom:1px solid var(--line)}
.cart-table th{font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}
.cart-table img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius)}
.cart-summary{background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;max-width:360px;margin-left:auto;display:flex;flex-direction:column;gap:.6rem}
.cart-summary__row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.9rem}
.cart-summary__row--total{font-size:1.2rem;color:var(--gold-deep);border-top:1px solid var(--line);padding-top:.6rem}

/* contact layout */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding-block:3rem 5rem}
.contact-info{display:flex;flex-direction:column;gap:1.2rem}
.contact-info__item{display:flex;gap:.8rem;align-items:flex-start}
.contact-info__item svg{flex-shrink:0;color:var(--gold-deep)}
@media (max-width:800px){.contact-layout{grid-template-columns:1fr}}

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.flow > * + *{margin-top:1em}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:700px){.grid-2{grid-template-columns:1fr}}
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden}

/* ===== HOME PAGE ===== */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:5rem 0 4rem}
.hero__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.12;pointer-events:none}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero__kicker{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-size:.8rem}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--paper);margin-top:.3em}
.hero h1 .wipe{display:block;clip-path:inset(0 100% 0 0);animation:wipe 1.1s .2s ease forwards}
@media (prefers-reduced-motion:reduce){.hero h1 .wipe{clip-path:inset(0 0 0 0);animation:none}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.hero p.lede{color:var(--paper-dim);max-width:34em;font-size:1.1rem}
.hero__art{position:relative}
.hero__art svg{width:100%;height:auto}
.hero__dateline{font-family:var(--font-mono);font-size:.78rem;color:var(--gold);border-top:1px solid #ffffff33;border-bottom:1px solid #ffffff33;padding-block:.5rem;margin-top:2rem;display:flex;justify-content:space-between}
@media (max-width:860px){.hero__inner{grid-template-columns:1fr}}

.masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:1rem;padding-block:3rem}
.masonry__item{position:relative;grid-row:span 2;border-radius:var(--radius);overflow:hidden}
.masonry__item:nth-child(1){grid-row:span 3}
.masonry__item:nth-child(3){grid-row:span 3}
.masonry__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.masonry__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0b2b22cc,transparent 60%);opacity:0;transition:opacity .3s ease}
.masonry__caption{position:absolute;left:1rem;bottom:1rem;color:var(--paper);font-family:var(--font-mono);font-size:.78rem;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;z-index:1}
.masonry__item:hover img{transform:scale(1.07)}
.masonry__item:hover::after,.masonry__item:hover .masonry__caption{opacity:1;transform:translateY(0)}
@media (max-width:760px){.masonry{grid-template-columns:repeat(2,1fr)}}

.section{padding-block:4rem}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem;border-bottom:3px double var(--ink);padding-bottom:.6rem}
.section__head h2{font-size:clamp(1.7rem,4vw,2.4rem)}
.section__head .section__rule{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft)}

.finder{background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);padding:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.finder h2{grid-column:1/-1}
.finder-form{display:flex;flex-direction:column;gap:1.2rem}
.finder-form fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.finder-form legend{font-family:var(--font-mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;margin-bottom:.4em}
.finder-form label{display:flex;align-items:center;gap:.5em;cursor:pointer}
.finder-result{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.finder-card{display:flex;align-items:center;gap:1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem;transition:transform .2s ease}
.finder-card:hover{transform:translateX(4px)}
.finder-card img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius)}
.finder-card__name{font-family:var(--font-display)}
.finder-card__price{margin-left:auto;font-family:var(--font-mono);color:var(--gold-deep)}
@media (max-width:800px){.finder{grid-template-columns:1fr}}

.strip{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:1rem 2rem}
.strip .product-card{flex:0 0 240px;scroll-snap-align:start}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--gold-deep)}

.ornament-divider{display:block;width:100%;height:28px;color:var(--gold-deep);margin-block:1rem}

/* COMPONENTS: .class - what it is
.page-hero - dark hero band used at the top of every inner page
.breadcrumbs - small uppercase trail of links under the page hero
.prose - centered readable-measure column for long legal text
.legal-toc - boxed table of contents inside legal pages
.notice / .notice--error / .notice--success - callout box variants
.btn / .btn--gold / .btn--ghost / .btn--dark - button with fill-sweep hover
.form-grid / .field / .field--full / .field-error - form layout and fields
.form-status / .is-success / .is-error - inline form feedback text
.faq / .faq-item - details/summary accordion list
.product-grid / .product-card - catalog grid and card
.product-detail / .product-detail__media / .product-detail__price / .product-detail__meta - product page layout
.cart-table / .cart-summary / .cart-summary__row(--total) - cart & checkout tables
.contact-layout / .contact-info / .contact-info__item - contact page two-column layout
.hero / .hero__inner / .hero__art / .hero__dateline - home page hero
.masonry / .masonry__item / .masonry__caption - home masonry gallery with hover reveal
.section / .section__head - generic content section with double-rule heading
.finder / .finder-form / .finder-result / .finder-card - signature "Pronalazač kišobrana" tool
.strip - horizontal scroll-snap product strip (mobile)
.reveal / .reveal-clip / .in-view - scroll-reveal animation hooks
.cookie-banner / .honeypot - cookie consent banner and spam honeypot
.grid-2 / .flow / .text-center - small layout utilities
*/

/* missing component styles */
.brand__word{display:inline-flex;align-items:center}
.product-card__info{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.product-card__desc{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.4}
.product-detail__info{display:flex;flex-direction:column;gap:1.2rem}
@media (max-width:800px){.product-detail__info{gap:1rem}}