/* ==========================================================
   noppy® — společný vzhled webu pro PHP stránky nákupního
   procesu (košík, pokladna, děkujeme, konfigurátor …)
   Hlavička, patička, menu, toast a barvy převzaté 1:1
   z nového webu (index.html, produkty.html …).
   Načítá se PO shop.css a přebíjí jeho písmo a hlavičku.
   ========================================================== */

:root{
  --white:#ffffff;
  --cream:#f7f4ef;
  --sand:#ece7de;
  --sand-d:#ddd5c8;
  --grey:#f4f4f2;
  --ink:#141414;
  --soft:#5c5a55;
  --muted:#8c8880;
  --line:#e8e5df;
  /* barvy produktů (tečky = podpis značky) */
  --c-blue:#6f87ab;   --c-blue-l:#edf1f7;
  --c-mustard:#b6883c;--c-mustard-l:#f7efde;
  --c-rose:#c08084;   --c-rose-l:#f8edee;
  --c-sage:#8f8a6e;   --c-sage-l:#f1efe6;
  --c-lav:#8d88b5;    --c-lav-l:#efeef6;
  /* sladění proměnných shop.css s novým webem */
  --bg:#ffffff;
  --text:#141414;
  --text-secondary:#5c5a55;
  --text-muted:#8c8880;
  --border:#e8e5df;
  --accent:#141414;
}

html,body{overflow-x:clip}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--white);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  letter-spacing:0;
}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img,svg{display:block}

/* ---------- navigace ---------- */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.site-header.scrolled{box-shadow:0 6px 30px rgba(0,0,0,.05)}
.nav{max-width:1360px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:28px}
.logo-svg{width:104px;height:26px;color:var(--ink);flex-shrink:0}
nav.menu{display:flex;gap:2px;flex:1;justify-content:center}
nav.menu a{font-size:12.5px;font-weight:500;letter-spacing:.04em;padding:8px 13px;color:var(--soft);transition:color .2s;position:relative;white-space:nowrap}
nav.menu a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.menu a:hover{color:var(--ink)}
nav.menu a:hover::after{transform:scaleX(1)}
nav.menu a.active{color:var(--ink)}
nav.menu a.active::after{transform:scaleX(1)}
.nav-icons{display:flex;align-items:center;gap:4px}
.nav-icons button,.nav-icons a{background:none;border:none;cursor:pointer;padding:9px;border-radius:999px;color:var(--ink);transition:background .2s;display:grid;place-items:center;position:relative;font-family:inherit}
.nav-icons button:hover,.nav-icons a:hover{background:var(--grey)}
.nav-icons svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:3px;right:3px;background:var(--ink);color:#fff;font-size:9px;font-weight:600;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
.login{font-size:12.5px;font-weight:500;padding:9px 14px!important;border-radius:999px}
.hamburger{display:none}
.m-menu{display:none}

/* ---------- tečky (podpis značky) ---------- */
.dots{display:flex;gap:9px;justify-content:center;margin-bottom:22px}
.dots.sm{gap:7px}
.dots.sm i{width:7px;height:7px}
.dots.left{justify-content:flex-start}
.dots i{width:10px;height:10px;border-radius:999px;display:block}
.dots i:nth-child(1){background:var(--c-blue)}
.dots i:nth-child(2){background:var(--c-mustard)}
.dots i:nth-child(3){background:var(--c-rose)}
.dots i:nth-child(4){background:var(--c-sage)}
.dots i:nth-child(5){background:var(--c-lav)}

/* ---------- obsah PHP stránek ---------- */
.shop-main{min-height:60vh}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------- patička ---------- */
footer.site-footer{background:var(--white);border-top:1px solid var(--line);padding:80px 0 0;margin-top:64px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px}
.foot-brand .logo-svg{margin-bottom:18px}
.foot-brand p{font-size:13px;color:var(--muted);max-width:26ch;font-style:italic}
.foot-contact{margin-top:16px}
.foot-contact a{display:block;font-size:13.5px;color:var(--soft);padding:3px 0;font-style:normal}
.foot-contact a:hover{color:var(--ink)}
.foot-col b{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.foot-col a{display:block;font-size:13.5px;color:var(--soft);padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.copyright{border-top:1px solid var(--line);margin-top:70px;padding:24px 0;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--white);font-size:13px;padding:13px 26px;border-radius:2px;opacity:0;transition:.3s;z-index:60;pointer-events:none;letter-spacing:.02em}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responzivita ---------- */
@media (max-width:1160px){
  nav.menu a{padding:8px 9px;font-size:12px}
}
@media (max-width:980px){
  nav.menu{display:none}
  .nav-icons{margin-left:auto}
  .hamburger{display:grid}
  .m-menu.open{display:block;position:fixed;top:72px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);padding:16px 32px 24px;z-index:49}
  .m-menu a{display:block;padding:11px 0;font-size:14px;font-weight:500;border-bottom:1px solid var(--grey)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{padding:0 22px}
  .nav{height:62px;padding:0 18px;gap:12px}
  .logo-svg{width:92px;height:23px}
  .nav-icons a.login{display:none}
  .nav-icons{gap:2px}
  .m-menu.open{top:62px;padding:10px 22px 18px;box-shadow:0 24px 44px rgba(0,0,0,.09)}
  .m-menu a{padding:13px 0;font-size:15px}
  footer.site-footer{padding:56px 0 0}
  .foot-grid{gap:32px 24px}
  .copyright{margin-top:44px;padding:20px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}