/* Bicikli Maslina — Chalkboard design system */

:root{
  --ink:#232821;
  --slate:#2b2f28;
  --slate-2:#353b31;
  --chalk:#f4efe2;
  --chalk-dim:#cdc6b2;
  --olive:#8a9a5b;
  --mustard:#d8b84a;
  --brick:#c4622d;
  --brick-dark:#9a4a1f;
  --radius:14px;
  --measure:38rem;
  --shadow:0 18px 40px -16px rgba(0,0,0,.55);
  font-size:16px;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--slate);
  color:var(--chalk);
  font-family:"Iowan Old Style","Georgia","Times New Roman",serif;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:"Avenir Next","Futura","Century Gothic",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  margin:0 0 .5em;
  color:var(--chalk);
}
p{margin:0 0 1em}
a{color:var(--mustard);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:4px}
button{font-family:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 1.25rem}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(35,40,33,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(216,184,74,.18)}
.site-header__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;padding:.8rem 1.25rem}
.logo{display:flex;align-items:center;gap:.5rem;flex:none}
.logo__word{font-family:"Avenir Next","Futura",system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:var(--chalk);letter-spacing:.01em}
.logo__word em{font-style:normal;color:var(--mustard)}
.nav-toggle{display:none;background:none;border:1px solid rgba(244,239,226,.3);border-radius:8px;color:var(--chalk);padding:.4rem;min-width:44px;min-height:44px}
.nav{display:flex;align-items:center;gap:1.4rem;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--chalk-dim);font-family:"Avenir Next","Futura",system-ui,sans-serif;font-size:.95rem;position:relative;padding:.3rem 0}
.nav a:hover,.nav a.is-active{color:var(--mustard);text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--brick);transition:width .25s ease}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav__cart{display:flex;align-items:center;gap:.4rem;color:var(--chalk)}
.nav__cart span{background:var(--brick);color:var(--chalk);border-radius:999px;font-size:.75rem;min-width:1.4rem;height:1.4rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem}
.nav__cart span.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

@media (max-width:780px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav{position:fixed;inset:0 0 0 30%;top:62px;background:var(--slate-2);flex-direction:column;align-items:flex-start;padding:2rem 1.5rem;gap:1.2rem;transform:translateX(100%);visibility:hidden;transition:transform .3s ease;z-index:50}
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav__cart{order:-1}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.75rem 1.5rem;font-family:"Avenir Next","Futura",system-ui,sans-serif;font-weight:700;font-size:.95rem;border:1.5px solid transparent;cursor:pointer;min-height:44px;position:relative;overflow:hidden;isolation:isolate}
.btn--primary{background:var(--brick);color:var(--chalk)}
.btn--primary:hover{background:var(--brick-dark)}
.btn--ghost{background:transparent;border-color:rgba(244,239,226,.5);color:var(--chalk)}
.btn--ghost:hover{border-color:var(--mustard);color:var(--mustard)}
.btn--sweep::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--mustard);z-index:-1;transition:left .3s ease}
.btn--sweep:hover::before{left:0}
.btn--sweep{background:var(--olive);color:var(--ink)}
.btn--sweep:hover{color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ===== Hero / tabs ===== */
.hero{position:relative;padding:4rem 0 3rem;overflow:hidden}
.hero__inner{max-width:1180px;margin:0 auto;padding:0 1.25rem;position:relative;z-index:2;display:grid;gap:2rem;grid-template-columns:1.1fr .9fr;align-items:center}
.hero__headline{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;margin-bottom:.6rem}
.hero__headline em{font-style:normal;color:var(--mustard)}
.hero__lede{max-width:34rem;color:var(--chalk-dim);font-size:1.1rem}
.hero__shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__shapes [data-parallax]{position:absolute;transition:transform .05s linear}
.hero-tabs{display:flex;gap:.6rem;margin:1.6rem 0 1rem;flex-wrap:wrap}
.hero-tab{background:transparent;border:1.5px solid rgba(244,239,226,.3);color:var(--chalk-dim);border-radius:999px;padding:.5rem 1.1rem;font-family:"Avenir Next","Futura",system-ui,sans-serif;cursor:pointer;min-height:44px}
.hero-tab.is-active{border-color:var(--mustard);color:var(--mustard);background:rgba(216,184,74,.12)}
.hero-panels{position:relative}
.hero-panel{display:none}
.hero-panel.is-active{display:block}
.hero-panel img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}

@media (max-width:860px){.hero__inner{grid-template-columns:1fr}}

/* ===== Reveal / sections ===== */
.reveal{opacity:1;transform:none}
.reveal{transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal:not(.in-view){opacity:0;transform:translateY(26px)}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}}

.section{padding:4rem 0}
.section-head{max-width:40rem;margin-bottom:2.2rem}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.eyebrow{font-family:"Avenir Next","Futura",system-ui,sans-serif;color:var(--brick);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700}

/* divider */
.divider{display:block;width:100%;height:28px;margin:1.5rem 0}

/* ===== Cards / grids ===== */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--slate-2);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);transition:transform .25s ease}
.card:hover{transform:translateY(-6px)}

/* ===== Product cards / catalog strip ===== */
.product-strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.product-strip .product-card{scroll-snap-align:start}
.product-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.product-card{background:var(--slate-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease}
.product-card:hover{transform:translateY(-6px)}
.product-card__media{aspect-ratio:4/3;overflow:hidden}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-card__media img{transform:scale(1.08)}
.product-card__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card__price{font-weight:700;color:var(--mustard);margin-top:auto}
.product-card__cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--olive)}

/* ===== Route planner (signature feature) ===== */
.route-planner{background:var(--slate-2);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.route-planner__form{display:grid;gap:1rem;align-content:start}
.route-planner select{background:var(--slate);color:var(--chalk);border:1.5px solid rgba(244,239,226,.3);border-radius:8px;padding:.6rem .8rem;font-family:inherit;min-height:44px}
.route-result{background:var(--slate);border-radius:10px;padding:1.3rem}
.route-result__name{color:var(--mustard);margin-bottom:.2rem}
.route-result__meta{color:var(--olive);font-family:"Avenir Next","Futura",system-ui,sans-serif;font-size:.9rem}
.route-map{width:100%;height:auto;margin-top:1rem}
@media (max-width:780px){.route-planner{grid-template-columns:1fr}}

/* ===== Footer ===== */
.site-footer{background:var(--ink);margin-top:3rem;border-top:1px solid rgba(216,184,74,.18)}
.site-footer__inner{max-width:1180px;margin:0 auto;padding:3rem 1.25rem;display:grid;gap:2.5rem;grid-template-columns:1.2fr 2fr 1fr}
.footer-brand p{color:var(--chalk-dim)}
.footer-mail{display:inline-flex;align-items:center;gap:.4rem;color:var(--chalk-dim)}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.footer-nav h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--olive);margin-bottom:.8rem}
.footer-nav a{display:block;color:var(--chalk-dim);padding:.25rem 0}
.footer-nav a:hover{color:var(--mustard)}
.newsletter h3{font-size:1rem}
.newsletter p{color:var(--chalk-dim);font-size:.9rem}
.newsletter__row{display:flex;gap:.5rem}
.newsletter__row input{flex:1;border-radius:999px;border:1.5px solid rgba(244,239,226,.3);background:var(--slate);color:var(--chalk);padding:.6rem 1rem;min-height:44px;accent-color:var(--mustard)}
.hp{position:absolute;left:-9999px}
.site-footer__bottom{text-align:center;color:var(--chalk-dim);font-size:.85rem;padding:1.2rem 0;border-top:1px solid rgba(244,239,226,.08)}
@media (max-width:860px){.site-footer__inner{grid-template-columns:1fr}.footer-nav{grid-template-columns:1fr 1fr}}

/* ===== Cookie banner / toast ===== */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;background:var(--ink);border:1px solid rgba(216,184,74,.3);border-radius:var(--radius);padding:1.1rem 1.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;box-shadow:var(--shadow);max-width:720px;margin:0 auto}
.cookie-banner p{margin:0;color:var(--chalk);font-size:.92rem;flex:1 1 260px}
.cookie-banner__actions{display:flex;gap:.6rem}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%,120%);background:var(--olive);color:var(--ink);padding:.8rem 1.3rem;border-radius:999px;font-weight:700;z-index:70;transition:transform .3s ease;box-shadow:var(--shadow)}
.toast.is-visible{transform:translate(-50%,0)}

/* ===== Inner-page components ===== */
.page-hero{padding:3.2rem 0 2rem;text-align:left;border-bottom:1px solid rgba(216,184,74,.15)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem)}
.page-hero p{color:var(--chalk-dim);max-width:var(--measure)}

.breadcrumbs{font-size:.85rem;color:var(--chalk-dim);margin-bottom:1rem}
.breadcrumbs a{color:var(--chalk-dim)}
.breadcrumbs a:hover{color:var(--mustard)}
.breadcrumbs span{margin:0 .4rem}

.prose{max-width:var(--measure);color:var(--chalk-dim)}
.prose h2{color:var(--chalk);margin-top:2rem}
.prose h3{color:var(--chalk);margin-top:1.4rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--mustard)}

.legal-toc{background:var(--slate-2);border-radius:var(--radius);padding:1.3rem 1.5rem;margin-bottom:2rem}
.legal-toc h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--olive)}
.legal-toc ol{margin:0;padding-left:1.3rem}
.legal-toc a{color:var(--chalk-dim)}
.legal-toc a:hover{color:var(--mustard)}

.notice{border-radius:10px;padding:1rem 1.2rem;background:rgba(138,154,91,.14);border:1px solid rgba(138,154,91,.4);color:var(--chalk);margin-bottom:1.5rem}
.notice--warn{background:rgba(196,98,45,.14);border-color:rgba(196,98,45,.5)}

.form-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);max-width:42rem}
.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:.35rem}
.field label{font-family:"Avenir Next","Futura",system-ui,sans-serif;font-size:.88rem;color:var(--chalk-dim)}
.field input,.field select,.field textarea{background:var(--slate-2);border:1.5px solid rgba(244,239,226,.25);border-radius:8px;padding:.7rem .9rem;color:var(--chalk);font-family:inherit;min-height:44px;accent-color:var(--mustard)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mustard)}
.field-error{color:var(--brick);font-size:.82rem;min-height:1.1em}
.form-error{color:var(--brick);font-size:.9rem}
.form-success{color:var(--olive);font-weight:700}

.contact-layout{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}
.contact-info{display:grid;gap:1.2rem;align-content:start}
.contact-info__item{display:flex;gap:.8rem;align-items:flex-start;color:var(--chalk-dim)}
.contact-info__item svg{flex:none;color:var(--mustard);margin-top:.15rem}

.faq{max-width:var(--measure)}
.faq-item{border-bottom:1px solid rgba(244,239,226,.15);padding:1rem 0}
.faq-item summary{cursor:pointer;font-family:"Avenir Next","Futura",system-ui,sans-serif;font-weight:700;color:var(--chalk);list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq-item summary::after{content:"+";color:var(--mustard);font-size:1.3rem}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{color:var(--chalk-dim);margin-top:.6rem}

.product-detail{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;margin-bottom:3rem}
@media (max-width:860px){.product-detail{grid-template-columns:1fr}}
.product-detail__media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.product-detail__price{font-size:1.6rem;color:var(--mustard);font-weight:700}
.product-detail__specs{list-style:none;padding:0;display:grid;gap:.5rem;margin:1.2rem 0}
.product-detail__specs li{display:flex;gap:.6rem;align-items:center;color:var(--chalk-dim)}
.qty-input{display:inline-flex;align-items:center;gap:.6rem;background:var(--slate-2);border-radius:999px;padding:.3rem .5rem}
.qty-input button{background:transparent;border:none;color:var(--chalk);width:36px;height:36px;font-size:1.2rem;cursor:pointer}
.qty-input input{width:3rem;text-align:center;background:transparent;border:none;color:var(--chalk)}

.cart-table{width:100%;border-collapse:collapse;margin-bottom:2rem}
.cart-table th{text-align:left;font-family:"Avenir Next","Futura",system-ui,sans-serif;color:var(--olive);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;padding:.6rem;border-bottom:1px solid rgba(244,239,226,.2)}
.cart-table td{padding:.8rem .6rem;border-bottom:1px solid rgba(244,239,226,.1);vertical-align:middle}
.cart-summary{max-width:24rem;margin-left:auto;background:var(--slate-2);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.cart-summary__row{display:flex;justify-content:space-between;padding:.4rem 0}
.cart-summary__row--total{font-weight:700;color:var(--mustard);border-top:1px solid rgba(244,239,226,.2);margin-top:.5rem;padding-top:.8rem}
.cart-empty{color:var(--chalk-dim);padding:2rem 0}

/* ===== Utilities ===== */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:1rem}.gap-2{gap:2rem}
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* COMPONENTS: .class - what it is
.container - centered max-width page wrapper
.site-header / .nav / .nav-toggle - sticky header and responsive nav
.logo / .logo__mark / .logo__word - brand lockup
.btn, .btn--primary, .btn--ghost, .btn--sweep - button variants (sweep = fill-sweep hover)
.hero / .hero__inner / .hero__headline / .hero__lede / .hero__shapes - home hero layout + parallax shapes
.hero-tabs / .hero-tab / .hero-panels / .hero-panel - tabbed hero mood switcher
.reveal / .in-view - scroll-reveal animation hook
.section / .section-head / .eyebrow - generic content section wrapper
.divider - decorative SVG section divider
.grid, .grid-2, .grid-3, .grid-4 - responsive grid helpers
.card - generic elevated content card
.product-strip / .product-grid / .product-card - catalog listings (scroll-snap strip + grid)
.route-planner / .route-planner__form / .route-result / .route-map - signature "Ruta u tri klika" feature
.site-footer / .footer-nav / .newsletter / .hp - footer layout, link columns, newsletter form, honeypot
.cookie-banner - fixed consent banner
.toast - temporary notice popup
.page-hero - inner-page title band
.breadcrumbs - small breadcrumb trail
.prose - readable long-form legal/content text column
.legal-toc - table of contents box for legal pages
.notice, .notice--warn - callout/alert box
.form-grid / .field / .field-error / .form-error / .form-success - form layout and feedback
.contact-layout / .contact-info / .contact-info__item - contact page split layout
.faq / .faq-item - details/summary accordion
.product-detail / .product-detail__media / .product-detail__specs / .product-detail__price - product page template
.qty-input - quantity stepper control
.cart-table / .cart-summary / .cart-empty - cart/checkout table and totals box
utilities (.mt-*, .mb-*, .flex, .items-center, .justify-between, .gap-*, .text-center) - spacing/layout helpers
*/