*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f3f2f2;color:#201e1d;font-family:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#a8200b;text-decoration:underline;text-underline-offset:3px}
a:hover{color:#ec3013}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid #ec3013;outline-offset:2px}
::selection{background:#fbd5cd}
.mono{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace}
@keyframes rpdkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anim{animation:rpdkIn .4s ease both}

/* ---- hover utility classes (replace design's style-hover attribute) ---- */
.btn-ghost:hover{background:#eae9e9}
.btn-primary:hover{background:#c9260c;border-color:#c9260c}
.btn-dark:hover{background:#ec3013}
.nav-link:hover{color:#ec3013}
.footer-link:hover{color:#ff8a73}
.text-link:hover{color:#ec3013}
.card-hover:hover{background:#eae9e9}

/* ---- images ---- */
.cover{width:100%;height:100%;object-fit:cover;display:block}
.grayscale{filter:grayscale(1)}
.photo-box{position:relative;overflow:hidden;background:#e4e2e2}

/* ---- details/summary (FAQ + blog read-more), no marker triangle ---- */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .sign::before{content:"\2212"}
.sign::before{content:"+"}
details[open] .toggle-label::before{content:"Zbaliť článok"}
.toggle-label::before{content:"Čítať celý článok"}

/* ---- radios styled as the design's custom option boxes ---- */
.opt{display:flex;align-items:center;gap:14px;cursor:pointer;padding:14px 16px;border:2px solid #201e1d;background:#fff}
.opt input{width:18px;height:18px;accent-color:#ec3013;flex:none}
.opt:has(input:checked){background:#fbe1db;border-color:#ec3013}

/* ---- header active nav underline ---- */
.nav-link{border-bottom:2px solid transparent}
.nav-link.active{border-bottom-color:#ec3013}

/* ---- cart drawer / modal / cookie banner / toast (JS controlled) ---- */
.overlay{position:fixed;inset:0;z-index:80;display:none}
.overlay.open{display:flex}
.overlay-bg{position:absolute;inset:0;background:rgba(32,30,29,0.5)}
#cartDrawer .overlay-bg{background:rgba(32,30,29,0.5)}
#cartDrawer{justify-content:flex-end}
#cartDrawer aside{position:relative;width:min(440px,100%);height:100%;background:#f3f2f2;border-left:2px solid #201e1d;display:flex;flex-direction:column}
#trialModal{align-items:center;justify-content:center;padding:20px}
#trialModal .modal-box{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;background:#f3f2f2;border:2px solid #201e1d;box-shadow:12px 12px 0 #ec3013}
#cookieBar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:none;justify-content:center}
#cookieBar.open{display:flex}
#cookieBar .box{width:min(980px,100%);background:#f3f2f2;border:2px solid #201e1d;box-shadow:8px 8px 0 #201e1d;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
#toast{position:fixed;left:24px;top:96px;z-index:95;background:#201e1d;color:#fff;padding:14px 18px;font-weight:600;display:none;gap:16px;align-items:center;border-left:6px solid #ec3013}
#toast.open{display:flex}
#cookieSettings{display:none}
#cookieSettings.open{display:flex}
.qty-btn{width:32px;height:30px;background:none;border:0;cursor:pointer;font-size:16px}

@media (max-width:720px){
  header nav{order:3;width:100%}
}