/* Školjkica — stylesheet. Gallery white-cube style, turquoise/sand/pearl palette. */
:root{
  --ink:#0d3b3e;
  --ink-soft:#4a6a6c;
  --paper:#faf7f1;
  --paper-2:#f1ebdd;
  --sand:#e8c88a;
  --turq:#2fa89b;
  --turq-dark:#163f41;
  --pearl:#eef3ef;
  --line:#d8d0bd;
  --danger:#b5443a;
  --ok:#2f7a5d;
  --font-display:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1240px;
  --radius:4px;
}
*{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.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0 0 .5em;letter-spacing:.01em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{flex:none}
.logo-word{flex:none;height:22px;width:auto}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);padding:8px;cursor:pointer;min-width:44px;min-height:44px}
.main-nav{display:flex;align-items:center;gap:28px;font-size:.95rem}
.main-nav a{position:relative;padding:4px 0;color:var(--ink-soft);transition:color .2s}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--turq);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav a:hover,.main-nav a.is-active{color:var(--ink)}
.main-nav a:hover::after,.main-nav a.is-active::after{transform:scaleX(1)}
.nav-cart{display:flex;align-items:center;gap:6px;color:var(--ink)!important}
.nav-cart::after{display:none}
.cart-count{background:var(--turq);color:#fff;border-radius:50%;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;padding:0 4px}
.nav-cart.bump .cart-count{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:block}
  .main-nav{position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);background:var(--paper);flex-direction:column;align-items:flex-start;padding:90px 28px;gap:22px;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s;box-shadow:-10px 0 30px rgba(0,0,0,.08)}
  .main-nav.is-open{transform:translateX(0);visibility:visible}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:var(--radius);font-size:.95rem;border:1px solid var(--ink);cursor:pointer;min-height:44px;position:relative;overflow:hidden;font-family:var(--font-body);background:transparent;color:var(--ink);transition:color .25s}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-sweep{z-index:0}
.btn-sweep::before{content:"";position:absolute;inset:0;width:100%;left:-100%;background:var(--turq);transition:left .3s ease;z-index:-1}
.btn-sweep:hover::before{left:0}
.btn-sweep:hover{color:#fff;border-color:var(--turq)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 64px;overflow:hidden}
.hero-grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-title{font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;margin-bottom:.4em}
.hero-title .word{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .6s ease,transform .6s ease}
.hero-title.in-view .word{opacity:1;transform:translateY(0)}
.hero-lede{max-width:40ch;color:var(--ink-soft);font-size:1.1rem}
.hero-actions{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:1/1}
.hero-art img{width:100%;height:100%;object-fit:cover;border-radius:2px;filter:saturate(1.05)}
.hero-art .deco-shell{position:absolute;right:-28px;bottom:-28px;width:140px;height:140px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1}}

/* continuous subtle element */
.ambient-wave{position:fixed;left:0;bottom:0;width:100%;height:60px;z-index:1;pointer-events:none;opacity:.5}
@media (prefers-reduced-motion:no-preference){.ambient-wave path{animation:driftwave 14s linear infinite}}
@keyframes driftwave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease,clip-path .7s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.05s}.reveal-2{transition-delay:.15s}.reveal-3{transition-delay:.25s}.reveal-4{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.reveal,.hero-title .word{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- Section basics ---------- */
section{padding:64px 0}
.section-head{max-width:640px;margin:0 auto 40px}
.section-head.center{text-align:center;margin-inline:auto}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--turq-dark);margin-bottom:10px}

/* divider svg */
.divider{display:block;width:100%;height:40px;margin:0 auto}

/* ---------- Horizontal scroll story (desktop) ---------- */
.story{overflow:hidden}
.story-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 20px;scrollbar-width:thin}
.story-card{flex:0 0 min(360px,80vw);scroll-snap-align:start;background:var(--pearl);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.story-card .num{font-family:var(--font-display);font-size:2.2rem;color:var(--sand)}
@media (min-width:980px){
  .story-track{overflow:visible;padding:4px 24px 20px;max-width:var(--max);margin:0 auto}
  .story-card{flex:1 1 auto}
}

/* ---------- Product grid / catalog ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 32px -16px rgba(13,59,62,.25)}
.product-card .thumb{aspect-ratio:4/3;overflow:hidden}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.06)}
.product-card .body{padding:18px}
.product-card .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--turq-dark)}
.product-card h3{font-size:1.1rem;margin:6px 0}
.product-card .price{font-weight:600}
.product-strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.product-strip .product-card{flex:0 0 220px;scroll-snap-align:start}
@media (min-width:780px){.product-strip{overflow:visible;flex-wrap:wrap}}

/* ---------- Signature feature: Shell guide ---------- */
.shell-guide{background:var(--turq-dark);color:var(--pearl);border-radius:6px;padding:48px;position:relative;overflow:hidden}
.shell-guide h2,.shell-guide .eyebrow{color:var(--pearl)}
.guide-options{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.guide-options button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:var(--pearl);padding:12px 18px;border-radius:30px;cursor:pointer;min-height:44px;transition:background .2s,border-color .2s}
.guide-options button:hover,.guide-options button.is-active{background:var(--turq);border-color:var(--turq)}
.guide-result{margin-top:18px;min-height:24px}
.guide-result .guide-tip{color:var(--pearl)}
.guide-picks{list-style:none;padding:0;display:flex;gap:14px;flex-wrap:wrap;margin:0}
.guide-picks a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Generic inner-page components ---------- */
.page-hero{padding:56px 0 40px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.3em}
.page-hero p{max-width:60ch;color:var(--ink-soft)}
.breadcrumbs{font-size:.85rem;color:var(--ink-soft);margin-bottom:14px}
.breadcrumbs a{text-decoration:underline;text-underline-offset:2px}
.breadcrumbs span{margin:0 6px}

.prose{max-width:68ch;margin:0 auto}
.prose h2{margin-top:2em;font-size:1.5rem}
.prose h3{margin-top:1.4em;font-size:1.15rem}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.5em}

.legal-toc{background:var(--pearl);border-radius:4px;padding:20px 24px;margin:0 auto 40px;max-width:68ch}
.legal-toc h2{font-size:1rem;margin-bottom:10px}
.legal-toc ol{margin:0;padding-left:1.2em}

.notice{border-left:3px solid var(--turq);background:var(--pearl);padding:16px 20px;border-radius:3px;margin:24px 0}
.notice-warn{border-left-color:var(--danger);background:#fbeeec}
.notice-ok{border-left-color:var(--ok);background:#eaf5ef}

.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item summary{cursor:pointer;font-weight:600;font-family:var(--font-display);font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--turq-dark);transition:transform .2s}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin-top:12px;color:var(--ink-soft)}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:720px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.85rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);accent-color:var(--turq);min-height:44px}
.field textarea{min-height:120px;resize:vertical}
.field-error{color:var(--danger);font-size:.82rem;min-height:1.2em}
.field.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{min-height:1.4em;font-size:.9rem}
.form-msg-ok{color:var(--ok)}
.form-msg-err{color:var(--danger)}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info .row{display:flex;gap:12px;align-items:flex-start}
@media (max-width:780px){.contact-layout{grid-template-columns:1fr}}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.product-detail .gallery img{border-radius:4px;aspect-ratio:1/1;object-fit:cover}
.product-detail .price{font-size:1.6rem;font-family:var(--font-display)}
.qty-row{display:flex;align-items:center;gap:14px;margin:20px 0}
.qty-row input{width:70px;text-align:center}
@media (max-width:780px){.product-detail{grid-template-columns:1fr}}

.cart-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.cart-table th,.cart-table td{text-align:left;padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table img{width:56px;height:56px;object-fit:cover;border-radius:3px}
.cart-summary{background:var(--pearl);border-radius:4px;padding:24px;max-width:380px;margin-left:auto}
.cart-summary .total-row{display:flex;justify-content:space-between;font-weight:600;font-size:1.1rem;margin:14px 0}
.cart-empty{text-align:center;padding:60px 0;color:var(--ink-soft)}

/* ---------- utilities ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:780px){.grid-2,.grid-3{grid-template-columns:1fr}}
.mt-0{margin-top:0}.mt-1{margin-top:16px}.mt-2{margin-top:32px}.mb-0{margin-bottom:0}
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Footer ---------- */
.site-footer{background:var(--turq-dark);color:var(--pearl);padding:64px 0 0;position:relative}
.footer-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.footer-inner{position:relative;max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px}
.footer-brand{display:flex;gap:12px;align-items:flex-start}
.footer-brand p{color:var(--pearl);font-family:var(--font-display);font-size:1.1rem}
.footer-brand span{display:block;font-family:var(--font-body);font-size:.8rem;color:#b9d6d2;font-weight:400}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer-nav h3{color:var(--pearl);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.footer-nav a{display:block;color:#cfe6e2;padding:5px 0;transition:color .2s}
.footer-nav a:hover{color:#fff}
.newsletter-form h3{color:var(--pearl);margin-bottom:6px}
.newsletter-form p{color:#b9d6d2;font-size:.88rem}
.field-row{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-form input[type=email]{flex:1;min-width:160px;padding:12px 14px;border-radius:3px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;min-height:44px}
.newsletter-form input::placeholder{color:#cfe6e2}
.footer-bottom{position:relative;max-width:var(--max);margin:40px auto 0;padding:20px 24px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:#b9d6d2}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr}.footer-nav{grid-template-columns:1fr 1fr}}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--turq-dark);color:var(--pearl);border-radius:6px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.3);z-index:80}
.cookie-banner p{margin:0;font-size:.9rem;color:#dcebe8}
.cookie-banner a{text-decoration:underline;color:#fff}
.cookie-actions{display:flex;gap:10px;justify-content:flex-end}
.cookie-banner .btn-ghost{color:var(--pearl);border-color:rgba(255,255,255,.5)}
.cookie-banner .btn-solid{background:var(--turq);border-color:var(--turq)}

/* COMPONENTS:
.container - centered max-width content wrapper
.site-header / .header-inner / .logo / .logo-mark / .logo-word - header & custom SVG logo
.nav-toggle / .main-nav / .nav-cart / .cart-count - navigation & cart badge
.btn / .btn-solid / .btn-ghost / .btn-sweep - button variants (sweep = fill-sweep hover)
.hero / .hero-grid / .hero-title / .word / .hero-lede / .hero-actions / .hero-art - home hero
.ambient-wave - continuous subtle animated background element
.reveal / .in-view / .reveal-1..4 - scroll reveal system + stagger delays
.section-head / .eyebrow / .divider - section heading helpers & SVG dividers
.story / .story-track / .story-card - horizontal scroll-snap story section
.product-grid / .product-card / .thumb / .label / .price / .product-strip - catalog product cards
.shell-guide / .guide-options / .guide-result / .guide-tip / .guide-picks - signature feature "Školjka savjetnik"
.page-hero - inner page header band
.breadcrumbs - breadcrumb trail
.prose - long-form legal/text content, readable measure
.legal-toc - table of contents box for legal pages
.notice / .notice-warn / .notice-ok - callout boxes
.faq / .faq-item - FAQ accordion (details/summary)
.form-grid / .field / .field-error / .field.full - form layout
.hp - visually hidden honeypot field
.form-msg / .form-msg-ok / .form-msg-err - form feedback message
.contact-layout / .contact-info - contact page split layout
.product-detail / .gallery / .qty-row - product detail page
.cart-table / .cart-summary / .cart-empty - cart/checkout page
.grid-2 / .grid-3 - utility grids
.mt-0 / .mt-1 / .mt-2 / .mb-0 / .text-center - spacing/utility helpers
.visually-hidden / .sr-only - accessible hidden text
.site-footer / .footer-inner / .footer-brand / .footer-nav / .newsletter-form / .footer-bottom - footer
.cookie-banner / .cookie-actions - cookie consent banner
*/

/* ---------- Teaser sections & quantity input ---------- */
.shop-teaser,
.sections-teaser{background:var(--pearl);border-radius:4px;padding:40px}
.guide-section{padding:20px 0;margin:24px 0}
.qty-input{width:70px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-align:center;font-family:var(--font-body);font-size:1rem;min-height:44px;accent-color:var(--turq)}
@media (max-width:780px){.shop-teaser,.sections-teaser{padding:28px}}

/* wg-contrast-autofix */
section.story div.story-track article.story-card.reveal span.num { color: #111111 !important; }
#newsletterForm div.field-row button.btn.btn-sweep { color: #ffffff !important; }