/* Autodijelovi Max — shared stylesheet
   Fonts: self-hosted system stacks only (no external CDN). */
:root{
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Arial Narrow", "Liberation Sans Narrow", Oswald, Impact, var(--font-body);
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  --ink:#16181B; --orange:#C94A0A; --orange-light:#FF7A2F;
  --bg:#F3F2EF; --border:#DCD9D3; --muted:#5D6168;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F3F2EF;color:#16181B;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.ff-display{font-family:var(--font-display)}
.ff-mono{font-family:var(--font-mono)}
a{color:#C94A0A;text-decoration:underline;text-underline-offset:3px}
a:hover{color:#16181B}
input,select,textarea,button{font-family:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #FF7A2F;outline-offset:2px}

.skip-link{position:absolute;left:-9999px;top:0;background:#16181B;color:#fff;padding:10px 16px;z-index:100;font-weight:700}
.skip-link:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Interactive hover states (base visual styles stay inline for 1:1 fidelity) */
.cart-btn:hover{border-color:#16181B !important}
.nav-link:hover{color:#FF7A2F !important}
.cat-card:hover{background:#FBFAF8 !important}
.cat-card-cta:hover{background:#B5420A !important}
.product-card:hover{border-color:#16181B !important}
.footer-link:hover{color:#FF7A2F !important}
.btn-orange{transition:background .15s}
.btn-orange:hover{background:#A93D06 !important}
.btn-orange-alt:hover{background:#E35B12 !important}
.btn-dark{transition:background .15s}
.btn-dark:hover{background:#2A2E34 !important}
.chip:hover{filter:brightness(0.97)}
.legal-nav-link:hover{background:#F3F2EF !important}

/* Background image helpers for photo slots (replacing design placeholders) */
.bg-cover{background-size:cover;background-position:center}

/* Responsive image fit */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}

/* Simple fade-in for progressively enhanced bits */
[hidden]{display:none !important}

@media (max-width:640px){
  h1{font-size:clamp(38px,11vw,54px) !important}
}