/* MauriVibes – modern header (v1). Loaded after style.css; uses theme variables so every theme keeps working. */

/* ---------- header bar ---------- */
html[data-theme] .site-header{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .25s,border-color .25s,box-shadow .25s}
html[data-theme] .site-header.is-stuck{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 8px 30px rgba(19,26,58,.05)}
html[data-theme] .site-header .bar{min-height:72px;gap:12px}
html[data-theme] .site-header .brand{font-size:1.28rem;flex:none}
html[data-theme] .site-header .brand-mark{width:40px;height:40px;border-radius:13px;font-size:1.2rem}

/* ---------- desktop menu: clean text links, no floating pill ---------- */
@media(min-width:861px){
  html[data-theme] .site-header .nav{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:0;gap:2px;margin-left:auto}
  html[data-theme] .site-header .nav a:not(.btn):not(.lang):not(.cart-link){position:relative;padding:9px 11px;border-radius:12px;font-weight:600;font-size:.92rem;color:var(--text);opacity:.82;transition:background .15s,color .15s,opacity .15s}
  html[data-theme] .site-header .nav a:not(.btn):not(.lang):not(.cart-link):hover{background:color-mix(in srgb,var(--text) 7%,transparent);opacity:1;color:var(--text)}
  html[data-theme] .site-header .nav a.on:not(.btn):not(.lang):not(.cart-link){opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
  /* language switch = small segmented control */
  html[data-theme] .site-header .nav .langs{display:inline-flex;gap:2px;margin:0 6px 0 6px;padding:3px;border-radius:99px;background:color-mix(in srgb,var(--text) 6%,transparent)}
  html[data-theme] .site-header .nav .lang{border:0;padding:5px 10px;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--muted);background:none;opacity:1}
  html[data-theme] .site-header .nav .lang:hover{color:var(--text);background:none}
  html[data-theme] .site-header .nav .lang.on{background:var(--card);color:var(--accent);box-shadow:0 2px 8px rgba(19,26,58,.14)}
  /* cart = round icon button */
  html[data-theme] .site-header .nav .cart-link{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--heading);opacity:1;box-shadow:0 2px 8px rgba(19,26,58,.06);transition:transform .15s,box-shadow .15s}
  html[data-theme] .site-header .nav .cart-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(19,26,58,.12);background:var(--card)}
  html[data-theme] .site-header .nav .cart-link.on{border-color:var(--accent);color:var(--accent);background:var(--card)}
  html[data-theme] .site-header .nav .cart-count{top:-5px;right:-5px;border:2px solid var(--bg)}
  html[data-theme] .site-header .nav .btn{margin-left:6px;padding:11px 18px;font-size:.92rem;border-radius:99px;font-weight:700;white-space:nowrap}
}
@media(min-width:861px) and (max-width:1199px){
  html[data-theme] .site-header .bar{gap:8px}
  html[data-theme] .site-header .brand-name{display:none}
  html[data-theme] .site-header .nav a:not(.btn):not(.lang):not(.cart-link){padding:8px 8px;font-size:.84rem}
  html[data-theme] .site-header .nav .btn{padding:9px 13px;margin-left:2px;font-size:.84rem}
  html[data-theme] .site-header .nav .langs{margin:0 2px}
  html[data-theme] .site-header .nav .lang{padding:5px 7px}
  html[data-theme] .site-header .nav .cart-link{width:38px;height:38px}
}
@media(min-width:861px) and (max-width:1000px){
  html[data-theme] .site-header .nav a:not(.btn):not(.lang):not(.cart-link){padding:7px 6px;font-size:.78rem}
  html[data-theme] .site-header .nav .btn{padding:8px 10px;font-size:.78rem}
  html[data-theme] .site-header .nav .lang{padding:4px 6px;font-size:.68rem}
}

/* ---------- phone menu: one tidy row you can swipe, no 4-line wrap ---------- */
@media(max-width:860px){
  html[data-theme] .site-header{position:relative;background:transparent;border-bottom:0}
  html[data-theme] .site-header .bar{min-height:0;padding:12px 0 6px;row-gap:10px;flex-wrap:wrap;align-items:center}
  html[data-theme] .site-header .brand{font-size:1.2rem}
  html[data-theme] .site-header .nav{flex:0 0 auto;width:calc(100% + 32px);margin:0 -16px;padding:2px 16px 8px;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 34px),transparent)}
  html[data-theme] .site-header .nav::-webkit-scrollbar{display:none}
  html[data-theme] .site-header .nav a:not(.lang){flex:none;padding:9px 16px;border-radius:99px;background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--text)}
  html[data-theme] .site-header .nav a.on:not(.lang){background:var(--accent);border-color:var(--accent);color:#fff}
  html[data-theme] .site-header .nav .langs{flex:none;display:inline-flex;gap:2px;margin:0 0 0 4px;padding:3px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent)}
  html[data-theme] .site-header .nav .lang{border:0;padding:6px 10px;border-radius:99px;font-size:.74rem;font-weight:800;color:var(--muted);background:none}
  html[data-theme] .site-header .nav .lang.on{background:var(--card);color:var(--accent);box-shadow:0 2px 8px rgba(19,26,58,.14)}
  html[data-theme] .site-header .cart-mini{margin-left:auto;padding:0;width:42px;height:42px;justify-content:center;border-radius:50%;gap:0;position:relative;background:var(--card);border:1px solid var(--line);color:var(--heading);box-shadow:0 2px 8px rgba(19,26,58,.06)}
  html[data-theme] .site-header .cart-mini .cm-n{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;font-size:.72rem;border:2px solid var(--bg)}
}

/* ---------- all inner pages: no big empty gap between the title and the content ---------- */
html[data-theme] .page-head,html[data-theme] .page-head.stk-head{background:none;padding:20px 0 2px}
html[data-theme] .page-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0 0 4px;letter-spacing:-.025em}
html[data-theme] .page-head p{margin:0 auto;max-width:560px;font-size:1rem}
html[data-theme] .page-head + .section{padding-top:18px}
html[data-theme] .section{padding-bottom:56px}
@media(max-width:860px){
  html[data-theme] .page-head,html[data-theme] .page-head.stk-head{padding:6px 0 0}
  html[data-theme] .page-head h1{font-size:1.8rem}
  html[data-theme] .page-head p{font-size:.93rem}
  html[data-theme] .page-head + .section{padding-top:12px}
  html[data-theme] .section{padding-bottom:40px}
  html[data-theme] .stk.section{padding-bottom:110px}
}

/* ---------- sticker shapes: same orange as the size icons ---------- */
html[data-theme] .shape-demo{height:64px}
html[data-theme] .shape-demo i{width:46px;height:46px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));box-shadow:0 4px 10px rgba(0,0,0,.15)}
html[data-theme] .s-rect i{width:60px;height:38px}
html[data-theme] .opt-cards.shapes{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
html[data-theme] .opt-cards.shapes .ocard-in{justify-content:flex-start}