:root{
  --c0:#0b132b; /* navy */
  --c1:#0b0f19; /* near-black */
  --c2:#111827; /* slate */
  --c3:#1c2541; /* deep navy */
  --c4:#243b6b; /* navy accent */

  --bg:#ffffff;
  --panel:rgba(255,255,255,.98);
  --ink:#0b132b;
  --muted:rgba(11,19,43,.70);
  --muted2:rgba(11,19,43,.52);

  --shadow:0 18px 44px rgba(11,19,43,.12);
  --shadow-soft:0 10px 22px rgba(11,19,43,.10);

  --max:1120px;
  --radius-lg:8px;
  --radius-md:6px;
  --radius-sm:4px;

  --border:1px solid rgba(11,19,43,.12);

  /* Hero background (provided image) */
  --hero-image: url('assets/hero_bg.webp');

  --g:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.serif{font-family: ui-serif, Georgia, "Times New Roman", Times, serif}
.mt12{margin-top:12px}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* TOPBAR */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,19,43,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.mark{
  width:44px;height:44px;border-radius:999px;
  overflow:hidden;flex:0 0 auto;
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10);
}
.brandLogo{width:100%;height:100%;object-fit:cover;display:block}
.brand .name{display:flex;flex-direction:column;line-height:1}
.brandTitle{font-weight:800;letter-spacing:.3px;font-size:18px;color:rgba(255,255,255,.96)}
.brandSub{
  margin-top:4px;
  font-weight:650;letter-spacing:2.4px;
  text-transform:uppercase;
  font-size:10.5px;
  color:rgba(255,255,255,.90);
}

.menu{display:flex;gap:16px;align-items:center;font-size:13.5px}
.menu a{
  padding:8px 10px;border-radius:12px;
  color:rgba(255,255,255,.84);
  display:flex;gap:8px;align-items:center;
}
.menu a:hover{background:rgba(36,59,107,.08);box-shadow:inset 0 0 0 1px rgba(36,59,107,.12)}
.menu a.active{background:rgba(36,59,107,.12);box-shadow:inset 0 0 0 1px rgba(36,59,107,.22)}


.menu.menu-desktop{display:flex;gap:16px;align-items:center;font-size:13.5px;flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;}


/* ===== Desktop nav overflow (scroll + arrows) ===== */
.menuScroll{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:0;
}
.menuScrollViewport{
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.menuScrollViewport::-webkit-scrollbar{display:none}
.menuScrollViewport > .menu{ /* safety if nav uses .menu class */ 
  flex-wrap:nowrap;white-space:nowrap;
}
.menuScroll:not(.is-overflowing) .menuScrollViewport{
  display:flex;justify-content:center;
}
.menuScroll:not(.is-overflowing) .menu-desktop{
  justify-content:center;
}
.navScrollBtn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(36,59,107,.14);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  flex:0 0 auto;
}
.navScrollBtn:active{transform:none}
.navScrollBtn[disabled]{opacity:.35;cursor:default}
.menuScroll:not(.is-overflowing) .navScrollBtn{display:none}

/* subtle edge fade when overflowing */
.menuScroll.is-overflowing .menuScrollViewport{position:relative}
.menuScroll.is-overflowing .menuScrollViewport::before,
.menuScroll.is-overflowing .menuScrollViewport::after{
  content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;
}
.menuScroll.is-overflowing .menuScrollViewport::before{
  left:0;background:linear-gradient(to right, rgba(28,37,65,.92), rgba(28,37,65,0));
}
.menuScroll.is-overflowing .menuScrollViewport::after{
  right:0;background:linear-gradient(to left, rgba(28,37,65,.92), rgba(28,37,65,0));
}
.menu.menu-desktop a{white-space:nowrap}
.actions{flex-wrap:nowrap}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-toggle{display:none}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(11,19,43,.14);
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  font-weight:650;
  letter-spacing:.2px;
  user-select:none;
  white-space:nowrap;

  color:var(--ink);
  background:rgba(255,255,255,.92);
}
.btn:hover{background:rgba(255,255,255,1)}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background:linear-gradient(180deg, rgba(36,59,107,.96), rgba(11,19,43,.96));
  border:1px solid rgba(11,19,43,.18);
  color:#fff;
}
.btn-primary:hover{
  background:linear-gradient(180deg, rgba(36,59,107,1), rgba(11,19,43,1));
}

.btn-ghost{
  background:transparent;
}
.btn-ghost:hover{
  background:rgba(11,19,43,.04);
}

.badge{
  display:inline-flex;
  min-width:18px;height:18px;
  padding:0 6px;
  border-radius:999px;
  align-items:center;justify-content:center;
  background:rgba(11,19,43,.06);
  border:1px solid rgba(11,19,43,.12);
  font-size:12px;font-weight:800;
}

/* Header (dark) inversion */
.topbar .btn{
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.10)}
.topbar .badge{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

/* Language dropdown */
.lang{position:relative}
.langMenu{
  position:absolute;right:0;top:46px;
  min-width:160px;
  background:rgba(11,19,43,.92);
  border:1px solid rgba(36,59,107,.16);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  z-index:120;
  max-width:calc(100vw - 24px);
}
.langItem{
  width:100%;text-align:left;
  background:transparent;border:0;color:rgba(255,255,255,.92);
  padding:10px 12px;cursor:pointer;
}
.langItem:hover{background:rgba(36,59,107,.08)}
.langBtn i.fa-chevron-down{font-size:12px;opacity:.8}


/* Currency dropdown */
.currency{position:relative}
.currencyMenu{
  position:absolute;right:0;top:46px;
  min-width:120px;
  background:rgba(11,19,43,.92);
  border:1px solid rgba(36,59,107,.16);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  z-index:120;
  max-width:calc(100vw - 24px);
}
.currencyItem{
  width:100%;text-align:left;
  background:transparent;border:0;color:rgba(255,255,255,.92);
  padding:10px 12px;cursor:pointer;
}
.currencyItem:hover{background:rgba(36,59,107,.08)}
.currencyBtn i.fa-chevron-down{font-size:12px;opacity:.8}
/* Mobile menu */
.mobileMenu{
  border-top:1px solid rgba(36,59,107,.12);
  background:rgba(11,19,43,.72);
  backdrop-filter:blur(10px);
}
.mobileMenu a{
  display:flex;gap:10px;align-items:center;
  padding:12px 18px;
  color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(36,59,107,.08);
}

/* HERO */
.hero{margin:12px 0 16px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:var(--border)}
.hero-inner{
  position:relative;
  /* keep the hero compact (roughly the height of the logo) */
  /* keep as short as possible while preserving side card sizes */
  min-height:0;
  padding:10px;
  /* Use the provided hero artwork as-is.
     The hero is a wide banner; `cover` ensures the artwork (and the logo
     inside it) spans the full width instead of appearing as a small square.
  */
  background:var(--hero-image) 50% 50%/cover no-repeat;
  background-color:var(--c0);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}
.hero-inner::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  z-index:0;
  /* keep the provided hero image visible; add only a subtle vignette */
  background:
    radial-gradient(1100px 520px at 50% 52%, rgba(255,255,255,.06), rgba(0,0,0,0) 55%),
    radial-gradient(1400px 760px at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 92%),
    linear-gradient(180deg, rgba(11,19,43,.10), rgba(11,19,43,.44));
}
.hero-inner::after{content:none;}

/* HERO watermark logo
   Goal:
   - Put the ORIGINAL logo file (assets/logo.webp) into a clean white ring.
   - Show the full logo (no cutting), and avoid the light square background.
   - Do NOT edit the file – only CSS.
*/
.hero-watermark{
  /* Background image already contains the logo mark */
  display:none;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;

  /* keep it safely inside hero */
  /* sized so it stays fully visible inside the hero */
  width:clamp(220px, 32vw, 320px);
  height:clamp(220px, 32vw, 320px);

  /* Keep the ring crisp; fade only the logo itself */
  opacity:1;
}
.hero-watermarkRing{
  width:100%;height:100%;
  border-radius:999px;
  /* single, clean ring */
  border:6px solid rgba(255,255,255,.95);
  box-shadow:
    0 18px 60px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.18);
  /* no thick "gap" ring inside; the inner circle sits right under the ring */
  padding:0;
  box-sizing:border-box;
}
.hero-watermarkInner{
  width:100%;height:100%;
  border-radius:999px;
  overflow:hidden;
  background: radial-gradient(80% 80% at 50% 35%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
              rgba(6,20,45,.20);
  /* subtle depth so the watermark reads as a badge */
  box-shadow: inset 0 20px 55px rgba(0,0,0,.30);
}
.hero-watermarkLogo{
  width:100%;height:100%;
  display:block;
  /* keep aspect ratio */
  object-fit:contain;
  /* keep the logo recognizable but still watermark-like */
  opacity:.38;
  filter: saturate(1.08) contrast(1.05);
  /* The logo file includes a light square background around the navy circle.
     We keep the file intact, but scale it slightly so only the navy circle
     fills the round crop (no grey/white halo). 1024/871 ≈ 1.176. */
  transform:scale(1.19);
  transform-origin:center;
}
.hero-badge{
  position:absolute;
  left:18px; top:18px;
  z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(36,59,107,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  font-size:12.5px;
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns: var(--hero-side) 1fr var(--hero-side);
  align-items:end;
  gap:14px;
  padding:8px 0 0;
}
.hero-grid--split{--hero-side: clamp(260px, 26vw, 380px);}
.hero-left{display:flex;flex-direction:column;gap:12px;}
.hero-spacer{min-height:1px;}
.hero-left{justify-self:start}
.hero-right{justify-self:end}
.hero-text{
  margin:0;
  text-align:left;
  color:rgba(255,255,255,.90);
  font-size:14.5px;
  line-height:1.7;
  padding:12px 14px;
  background:rgba(11,19,43,.40);
  border:1px solid rgba(36,59,107,.16);
  border-radius:16px;
  backdrop-filter: blur(10px);
  width:min(100%, var(--hero-badge-w, 420px));
}


.hero-copy{align-self:stretch; justify-self:start;}
.hero-news{align-self:stretch; display:flex;}
.news-card{
  height:100%;
  display:flex;
  flex-direction:column;

  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(36,59,107,.16);
  background:rgba(11,19,43,.42);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.news-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:rgba(255,255,255,.92);
  margin-bottom:10px;
}
.news-head i{opacity:.95}
.news-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:rgba(255,255,255,.82);
  font-size:13.5px;
  line-height:1.55;
}
.news-list li{display:flex; gap:10px; align-items:flex-start;}
.news-dot{
  width:7px; height:7px;
  border-radius:50%;
  margin-top:7px;
  background: rgba(36,59,107,.85);
  box-shadow: 0 0 0 3px rgba(36,59,107,.12);
  flex:0 0 7px;
}

/* Hero grid responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-spacer{display:none;}
  .hero-news{margin-top:10px;}
}

/* sections */
.section{padding:14px 0 26px}
.grid-2{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--g)}
.panel{
  background:var(--panel);
  border:var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.panel.pad{padding:16px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px}
.section-title h2{margin:0;font-size:32px}
.section-title p{margin:0;color:var(--muted);max-width:520px;font-size:13.5px}
.col-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.dark-block{
  background:
    radial-gradient(520px 260px at 30% 20%, rgba(36,59,107,.10), transparent 60%),
    linear-gradient(180deg, rgba(28,37,65,.90), rgba(11,19,43,.92));
  border:var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.dark-inner{padding:16px;display:grid;gap:10px}
.dark-inner h3{margin:0;font-size:30px}
.checklist{margin:0;padding:0;list-style:none;display:grid;gap:7px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.35}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist li::before{content:"✓";color:var(--c4);margin-top:1px;font-weight:900}
.dark-actions{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

/* Na míru – tlačítka (poptávka + galerie) */
.dark-actions--split .btn{flex:1 1 140px;justify-content:center}

.small{font-size:12px;color:var(--muted2)}

/* carousel (scroll + snap; arrows move by 1 item; swipe on mobile) */
.collections-carousel{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:var(--radius-md);
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.collections-track{display:flex;gap:14px}
.collections-track .product-card{
  flex:0 0 calc((100% - 14px) / 2);
  scroll-snap-align:start;
}

/* optional: nicer scrollbar */
.collections-carousel::-webkit-scrollbar{height:10px}
.collections-carousel::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(11,19,43,.25)}
.collections-carousel::-webkit-scrollbar-track{background:transparent}

/* Cards */
.product-card{
  background:rgba(255,255,255,.98);
  border-radius:var(--radius-md);
  border:1px solid rgba(11,19,43,.12);
  box-shadow:0 10px 22px rgba(11,19,43,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.ph{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg, rgba(28,37,65,.95), rgba(11,19,43,.95));
}
.ph img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.product-card .ph{height:190px}
.meta{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.meta h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}
.meta .row{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px}

.variantBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(11,19,43,.06);
  border:1px solid rgba(11,19,43,.12);
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}

/* mini */

/* accessories showcase (opasky + peněženky) */
.accShowcase{margin-top:10px}
.accCarousel{
  position:relative;
  height:190px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(36,59,107,.12);
  background:
    radial-gradient(300px 180px at 35% 30%, rgba(36,59,107,.16), transparent 60%),
    linear-gradient(180deg, rgba(58,80,107,.55), rgba(11,19,43,.75));
  touch-action:pan-y;
}
.accTrack{height:100%;display:flex;transition:transform .28s ease;will-change:transform}
.accSlide{
  flex:0 0 100%;
  height:100%;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
  position:relative;
  display:block;
}
.accSlide img{width:100%;height:100%;object-fit:cover;display:block}
.accCaption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(11,19,43,.62);
  border:1px solid rgba(36,59,107,.16);
  backdrop-filter:blur(8px);
  font-weight:800;
}
.accNav{
  position:absolute;
  top:12px;
  z-index:3;
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.accPrev{left:12px}
.accNext{right:12px}
.accDots{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px}
.accDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  border:1px solid rgba(36,59,107,.14);
  cursor:pointer;
}
.accDot.active{background:rgba(36,59,107,.75)}

.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.miniCard{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,19,43,.12);
  box-shadow:0 10px 22px rgba(11,19,43,.08);
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:0;
}
.miniPh{
  height:140px;
  background:
    radial-gradient(260px 160px at 40% 35%, rgba(36,59,107,.16), transparent 55%),
    linear-gradient(180deg, rgba(58,80,107,.55), rgba(11,19,43,.75));
}
.miniPhIcon{display:grid;place-items:center}
.miniPhIcon i{font-size:28px;color:rgba(255,255,255,.82)}
.miniPhMedia{position:relative;overflow:hidden}
.miniPhImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
}
.miniNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:12px;
  padding:0;
  display:grid;
  place-items:center;
  background:rgba(11,19,43,.72);
  border:1px solid rgba(36,59,107,.18);
  backdrop-filter:blur(10px);
}
.miniPrev{left:10px}
.miniNext{right:10px}
.miniMeta{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}

.miniShowBtn{margin-top:auto;align-self:flex-start}
.miniShowBtn{font-size:12px;padding:8px 10px;border-radius:12px}
.miniShowBtn i{opacity:.95}

.miniTitle{font-size:18px;font-weight:800}
.miniDesc{font-size:12.5px;color:var(--muted);line-height:1.45}
/* SHOP */
.shop-grid{display:grid;grid-template-columns:270px 1fr;gap:16px}
.filters{position:sticky;top:78px}
.filter-box{background:rgba(255,255,255,.98);border:var(--border);border-radius:var(--radius-md);padding:14px}
.field{display:grid;gap:6px;margin:10px 0 12px}
.input,select,textarea{
  width:100%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(11,19,43,.14);
  background:rgba(255,255,255,.98);
  color:var(--ink);
  outline:none;
}
.input::placeholder, textarea::placeholder{color:rgba(11,19,43,.48)}
textarea{min-height:90px;resize:vertical}
.label{font-size:12px;color:var(--muted2)}
.list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.view[hidden]{display:none!important}

/* contact socials */
.social{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.soc{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:var(--border);
}
.soc i{font-size:18px;color:var(--c4)}

/* footer */
.footer{
  margin:16px 0 26px;
  background:rgba(255,255,255,.04);
  border:var(--border);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
}
.footerInner{
  padding:16px;
  display:grid;
  grid-template-columns: 1.4fr 2fr 1fr;
  gap:16px;
  align-items:start;
}
.footBrand{font-size:20px;font-weight:900}
.footSub{color:rgba(255,255,255,.70);font-size:12.5px;line-height:1.5;margin-top:6px}
.footCopy{margin-top:18px;color:rgba(255,255,255,.45);font-size:12px}
.footNav{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.footBtn{
  display:flex;gap:10px;align-items:center;justify-content:flex-start;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(36,59,107,.12);
  color:rgba(255,255,255,.88);
  cursor:pointer;
  white-space:nowrap;
}

.footBtn:hover{background:rgba(36,59,107,.08)}
.footSocial{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}
.socBtn{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(36,59,107,.12);
}
.socBtn i{color:var(--c4)}

/* cart drawer */

.drawer[hidden]{display:none}
.drawer{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:stretch;
}
.drawer-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
}
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(560px, 92vw);
  background:linear-gradient(180deg, rgba(28,37,65,.95), rgba(11,19,43,.98));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  color:#fff;
  display:flex; flex-direction:column;
}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 12px;
}
.drawer-title{font-size:18px; font-weight:800; letter-spacing:.2px}
.drawer-close{
  width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#fff; cursor:pointer;
}
.drawer-body{padding:12px 18px 18px; overflow:auto}
.drawer-body p{color:rgba(255,255,255,.85)}

/* Fix: HTML uses .drawer-head (not .drawer-header) */
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(11,19,43,.12);
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:2;
}
.drawer-head .btn-ghost{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
}

/* Cart table – clean & compact (light scheme friendly) */
.drawer .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.drawer .table thead th{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(11,19,43,.62);
  padding:0 10px 6px;
  border:0;
}
.drawer .table tbody td{
  padding:12px 10px;
  vertical-align:top;
  border:0;
  color:var(--ink);
}
.drawer .table tbody tr.cart-row td{
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(11,19,43,.10);
  border-bottom:1px solid rgba(11,19,43,.10);
}
.drawer .table tbody tr.cart-row td:first-child{
  border-left:1px solid rgba(11,19,43,.10);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}
.drawer .table tbody tr.cart-row td:last-child{
  border-right:1px solid rgba(11,19,43,.10);
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

.cart-title{ font-weight:900; font-size:15px; margin-bottom:8px; }
.cart-qty{ width:92px; }
.cart-qty-input{ width:72px; padding:8px 10px; text-align:center; }
.cart-price{ white-space:nowrap; font-weight:800; text-align:right; width:120px; }
.cart-remove{ padding:10px 11px; }

/* Make add-ons readable (avoid white-on-white from inherited styles) */
.drawer .cart-mono,
.drawer .cart-waist{
  background:rgba(11,19,43,.03);
  border:1px solid rgba(11,19,43,.10);
  border-radius:14px;
  padding:10px 10px;
  margin-top:10px;
  color:var(--ink);
}
.drawer .cart-mono .small,
.drawer .cart-waist .small,
.drawer .cart-waist .label,
.drawer .cart-mono span{
  color:rgba(11,19,43,.82) !important;
}
.drawer .cart-mono .mono-input,
.drawer .cart-waist-input{
  background:rgba(255,255,255,.98);
}


/* Totals typography inside cart summary */
.drawer .summary .sumrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:6px 2px;
}
.drawer .summary .sumlabel{
  font-size:14px;
  font-weight:500;
  color:rgba(11,19,43,.72);
}
.drawer .summary .sumval{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.2px;
}
.drawer .summary .sumrow.total{
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid rgba(11,19,43,.12);
}
.drawer .summary .sumrow.total .sumlabel{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
}
.drawer .summary .sumrow.total .sumval{
  font-size:22px;
  font-weight:900;
  color:var(--ink);
}

/* Summary + actions – stick to bottom for nicer checkout */
.drawer .summary{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(11,19,43,.12);
}
.drawer-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
}
.drawer-actions .btn{ flex:1; }
.drawer-actions .btn-ghost{ flex:1; }

@media (max-width: 560px){
  .drawer-panel{ width:100vw; }
  .drawer .table thead{ display:none; }
  .drawer .table,
  .drawer .table tbody,
  .drawer .table tr,
  .drawer .table td{ display:block; width:100%; }
  .drawer .table{ border-spacing:0; }
  .drawer .table tbody tr.cart-row td{ border:1px solid rgba(11,19,43,.10); border-radius:14px; }
  .drawer .table tbody tr.cart-row td + td{ margin-top:10px; }
  .cart-price{ text-align:left; }
  .cart-qty{ width:auto; }
}



/* PRODUCT MODAL + VARIANTS (FIXED) */
.pmodal[hidden]{display:none}
.pmodal{
  position:fixed; inset:0; z-index:1100;
  display:grid; place-items:center;
  padding:18px;
}
.pmodal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  z-index:0;
}

/* panel */
.pmodal-panel{
  position:relative;
  width:min(1200px, 96vw);
  max-height:min(86vh, 860px);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.35);
  background:#ffffff;
  z-index:1;
}

/* close button (top right) */
.pmodal-close{
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:12px;
  border:0;
  background:rgba(20,32,58,.08);
  color:#0b132b;
  cursor:pointer;
  z-index:3;
}
.pmodal-close:hover{ background:rgba(20,32,58,.14); }

/* two-column layout */
.pmodal-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:0;
  height:100%;
  min-height:520px;
}

/* left gallery */
.pgal{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:radial-gradient(1200px 600px at 40% 30%, rgba(28,47,94,.85), rgba(0,0,0,.9));
}
.pgal img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  background:transparent;
}
.pgal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.92);
  color:#0b132b;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
}
.pgal-nav.left{ left:14px; }
.pgal-nav.right{ right:14px; }
.pgal-nav:hover{ background:#ffffff; }

/* right info */
.pinfo{
  padding:22px 22px 18px;
  overflow:auto;
  color:#0b132b;
}
.pinfo h1, .pinfo h2, .pinfo h3{ color:#0b132b; }
#pTitle{
  margin:0;
  font-size:46px;
  line-height:1.05;
  letter-spacing:.3px;
}
#pShort{
  margin:10px 0 0;
  color:#3b4151;
  font-size:16px;
}

/* details accordion */
#pDetails{ margin-top:14px; border-top:1px solid rgba(20,32,58,.10); }
.pdet{ border-bottom:1px solid rgba(20,32,58,.10); padding:10px 0; }
.pdet > summary{
  list-style:none;
  cursor:pointer;
  font-weight:900;
  font-size:18px;
  color:#0b132b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}
.pdet > summary::-webkit-details-marker{ display:none; }
.pdet > summary::after{
  content:"+";
  width:28px; height:28px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(20,32,58,.06);
  color:#0b132b;
  font-weight:900;
  flex:0 0 auto;
}
.pdet[open] > summary::after{ content:"–"; }
.pdetBody{
  padding:8px 0 10px;
  color:#0b132b;
}
.pdetBody, .pdetBody *{ color:#0b132b; }
.pdetBody p{ margin:0 0 10px; }
.pdetBody ul{ margin:0; padding-left:18px; }
.pdetBody li{ margin:6px 0; }

/* variant box */
.pbox{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(20,32,58,.10);
  border-radius:14px;
  background:rgba(20,32,58,.03);
}
.label{ font-size:13px; font-weight:800; color:#3b4151; letter-spacing:.2px; }
.small{ color:#3b4151; font-size:13px; }
.variants{ display:flex; gap:10px; flex-wrap:wrap; }
.variants .btn,
.variants button{
  border:1px solid rgba(20,32,58,.14);
  background:#ffffff;
  color:#0b132b;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
.variants .active,
.variants button.active{
  background:#0b132b;
  color:#ffffff;
  border-color:#0b132b;
}

/* price row */
.priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 8px;
}
.price{
  font-size:44px;
  font-weight:900;
  letter-spacing:.6px;
  color:#0b132b;
}

/* quantity row: keep existing look but ensure readability */
.qtyRow{ margin-top:12px; }

/* responsive */
@media (max-width: 980px){
  .pmodal-panel{ max-height: 92vh; }
  .pmodal-grid{ grid-template-columns: 1fr; }
  .pgal{ min-height: 42vh; }
  #pTitle{ font-size:38px; }
  .price{ font-size:38px; }
}


/* Galerie modal (Na míru) */
.pmodal-panel--gallery{width:min(1100px, 94vw)}
.pmodal-gallery{padding:22px 22px 26px}
.pmodal-gallery-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pmodal-back{padding:10px 12px}
.pmodal-gallery-title{font-size:28px;letter-spacing:.2px}
.pmodal-gallery-sub{margin:0;color:rgba(255,255,255,.75);font-size:14px}
.pmodal-gallery-top .spacer{flex:1 1 auto}

.gallery-link{display:block}
.gallery-link img{display:block}
.gallery-card .product-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.gallery-card .product-card__actions .btn{padding:10px 12px}
.pmodal-close{
  position:absolute;top:12px;right:12px;z-index:5;
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(11,19,43,.18);
  color:rgba(11,19,43,.92);
  box-shadow:0 10px 24px rgba(11,19,43,.22);
  display:grid;place-items:center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pmodal-close:hover{background:#fff}
.pmodal-close:active{transform:translateY(1px)}
.pmodal-grid{display:grid;grid-template-columns:1.1fr .9fr;min-height:520px}
.pgal{
  position:relative;
  background:linear-gradient(180deg, rgba(11,19,43,.04), rgba(11,19,43,.02));
  display:grid;place-items:center;
  border-right:1px solid rgba(11,19,43,.10);
}
.pgal img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  max-height:520px;
}
.pgal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(11,19,43,.14);
  background:rgba(255,255,255,.92);
  color:rgba(11,19,43,.92);
  display:grid;place-items:center;cursor:pointer;
}
.pgal-nav:hover{background:#fff}
.pgal-nav.left{left:12px}
.pgal-nav.right{right:12px}
.pgDots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;gap:8px;justify-content:center;align-items:center;
}
.pgDot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(11,19,43,.25);
}
.pgDot.active{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92)}

/* Dots v detailu Galerie (Na míru) – sjednocené se Shop detailem */
.dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(11,19,43,.25);
  padding:0;
  appearance:none;
}
.dot.active{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92)}
.pinfo{padding:18px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.pback{align-self:flex-start}
.pbox{
  padding:12px;border-radius:var(--radius-lg);
  background:rgba(11,19,43,.03);
  border:1px solid rgba(11,19,43,.10);
}
.variants{display:flex;gap:10px;flex-wrap:wrap}
.vchip{
  padding:8px 12px;border-radius:999px;cursor:pointer;
  background:rgba(11,19,43,.03);
  border:1px solid rgba(11,19,43,.12);
  color:rgba(11,19,43,.88);
  font-weight:700;font-size:13px;
}
.vchip.active{
  background:rgba(11,19,43,.92);
  border-color:rgba(11,19,43,.92);
  color:#fff;
}
.priceRow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{font-size:28px;font-weight:900}
.qtyRow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qtyCtl{display:flex;align-items:center;gap:8px;margin-top:6px}
.qtyCtl button{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(11,19,43,.14);
  background:rgba(11,19,43,.03);
  color:rgba(11,19,43,.92);
  font-weight:900;cursor:pointer;
}
.qtyCtl input{
  width:56px;height:36px;border-radius:12px;
  text-align:center;
  border:1px solid rgba(11,19,43,.14);
  background:#fff;
  color:rgba(11,19,43,.92);
  outline:none;
}

.ptitle{
  margin:6px 0 6px;
  font-size:40px;
  letter-spacing:.2px;
  color:var(--ink);
}
.pdesc{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.pmodal .small{color:var(--muted)}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .filters{position:static}
  .list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footerInner{grid-template-columns:1fr}
}

@media (max-width: 760px){
  :root{ --g:14px; }
  
  .accCarousel{height:160px}
.container{padding:0 14px}

  .menuScroll{display:none}
  .menu-desktop{display:none}
  .nav-toggle{display:inline-flex}
  .brand{min-width:auto}

  /* Hero stack */
  .hero-inner{min-height:0;padding:10px}
  .hero-badge{left:14px;top:14px}
  .hero-grid{
    grid-template-columns:1fr;
    gap:10px;
    padding:0;
  }
  .hero-left,.hero-right{justify-self:stretch;width:100%}
  .hero-text{
    text-align:left;
    font-size:14px;
  }

  /* Collections: 1 card */
  .collections-track .product-card{flex:0 0 100%}
  .product-card .ph{height:200px}

  .section-title{flex-direction:column;align-items:flex-start}
  .section-title h2{font-size:28px}
  .col-actions{width:100%}

  .miniGrid{grid-template-columns:1fr}
  .miniPh{height:160px}
  .list-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}

  /* Modal */
  .pmodal-panel{margin:12px auto}
  .pmodal-grid{grid-template-columns:1fr}
  .pgal img{max-height:320px}
}

@media (max-width: 390px){
  .btn{padding:10px 10px}
  .product-card .ph{height:185px}
}
/* ===== MOBILE STABILITY PATCH ===== */
@media (max-width: 760px){
  /* Topbar: místo „rozpadání“ do náhodných řádků uděláme řízené řádkování */
  .nav{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand{
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  /* Akce: ať se nerozbijí a mají jednotnou šířku */
  .actions{
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .actions > .btn,
  .actions .langBtn{
    flex: 1 1 auto;
  }
  .actions .lang{
    flex: 0 0 auto;
  }

  /* Mobilní menu ať je jasně pod topbarem */
  .mobileMenu a{
    padding: 12px 14px;
  }

  /* Sekce: jednotné rozestupy a žádné “každý panel jinak” */
  .section{ padding: 12px 0 20px; }
  .grid-2{ grid-template-columns: 1fr; gap: 14px; }
  .panel.pad{ padding: 14px; }
  .dark-inner{ padding: 14px; }

  /* Hero: oba buttony plná šířka, text mezi nimi */
  .hero-left .btn,
  .hero-right .btn{
    width: 100%;
  }

  /* Kolekce/Shop: sjednocení výšek obrázků, aby bloky nelítaly */
  .product-card .ph{ height: 200px; }
  .miniPh{ height: 160px; }

  /* Footer: stabilní srovnání */
  .footerInner{ gap: 12px; }
}
/* ===== MOBILE COMPACT PATCH (fix rozhozených bloků + velkých fotek) ===== */
@media (max-width: 760px){

  /* Kompaktnější rozestupy sekcí a panelů */
  .section{ padding: 10px 0 16px; }
  .panel.pad{ padding: 12px; }
  .dark-inner{ padding: 12px; }
  :root{ --g: 12px; }

  /* Nadpisy menší, ať se vejdou */
  .section-title h2{ font-size: 24px; }
  .section-title p{ font-size: 12.5px; }

  /* Ovládání kolekcí ať se na mobil vejde do 2 řádků bez chaosu */
  .col-actions{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .col-actions .btn{
    padding: 9px 10px;
    border-radius: 12px;
  }
  /* „Zobrazit vše“ ať není obří a může se zkrátit */
  .col-actions [data-route="shop"]{
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Karta produktu: menší fotka, menší meta, méně „zoomu“ */
  .product-card .ph{
    height: 155px;              /* bylo 200px */
  }
  .ph img{
    object-position: center;    /* stabilní */
  }
  .meta{
    padding: 10px;
    gap: 6px;
  }
  .meta h3{ font-size: 16px; }
  .meta p{ font-size: 12px; }

  /* Tlačítko pod kolekcemi (Zobrazit celou kolekci) ať je full-width */
  .mt12 .btn{
    width: 100%;
    justify-content: center;
  }

  /* Na míru blok: tlačítka pod sebe */
  .dark-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dark-actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* ===== MOBILE LAYOUT FIX (Kolekce + Na míru + sjednocení výšek) ===== */
@media (max-width: 760px){

  /* 1) Sjednotit šířky a zabránit "přetékání" */
  .container{ padding: 0 12px; }
  .panel{ width: 100%; }
  .grid-2{ grid-template-columns: 1fr !important; gap: 14px; }

  /* 2) Kolekce – header a ovládání (šipky + zobrazit vše) */
  .section-title{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .col-actions{
    width: 100%;
    display: grid;
    grid-template-columns: 44px 44px 1fr; /* šipky pevně + tlačítko roztáhnout */
    gap: 10px;
    justify-content: stretch;
  }
  .col-actions .btn{
    width: 100%;
    padding: 10px 10px;
    border-radius: 14px;
  }
  .col-actions .btn.icon{
    padding: 10px 0;
    justify-content: center;
  }

  /* 3) Kolekce – produktové karty kompaktnější */
  .product-card{
    border-radius: 18px;
  }
  .product-card .ph{
    height: 150px;              /* menší než dřív */
    border-radius: 16px;
  }
  .meta{
    padding: 10px 12px;
  }
  .meta h3{ font-size: 17px; line-height: 1.15; }
  .meta p{ font-size: 12.5px; }
  .price{ font-size: 13px; }

  /* 4) Tlačítko „Zobrazit celou kolekci“ vždy full width */
  .mt12 .btn{
    width: 100%;
    justify-content: center;
  }

  /* 5) Na míru – nadpis + checklist + tlačítka do sloupce */
  .dark-inner h2{
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 10px;
  }
  .checklist{ gap: 10px; }
  .checklist li{
    font-size: 14px;
    line-height: 1.3;
  }
  .dark-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .dark-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* 6) Hero na mobilu – ať se nic nepřekrývá a vše je čitelné */
  .hero{
    padding: 16px;
    border-radius: 22px;
  }
  .hero .pill{
    max-width: 100%;
  }
  .hero-left, .hero-right{
    width: 100%;
  }
  .heroText{
    margin: 12px 0;
  }
  .heroText p{
    font-size: 14px;
    line-height: 1.4;
  }
  .hero-left .btn, .hero-right .btn{
    width: 100%;
  }

  /* 7) Globálně: omezit obří paddingy uvnitř panelů */
  .panel.pad{ padding: 12px; }
  .dark-inner{ padding: 12px; }
}


/* ===== FIX: Mobile overflow u dlaždic Kolekce + Na míru ===== */
/* Prohlížeče bez správného viewportu (nebo in-app browser) někdy vyhodnotí šířku > 760/980px.
   Proto fixujeme už od 1100px a zároveň nastavíme min-width:0 na grid položky. */
@media (max-width: 1100px){
  /* zajistí, že Kolekce + Na míru nebudou vedle sebe a nepřetečou do šířky */
  .section.grid-2{
    grid-template-columns: 1fr !important;
  }
  .section.grid-2 > *{
    min-width: 0;
    max-width: 100%;
  }
  .section.grid-2 .panel,
  .section.grid-2 .dark-block{
    width: 100%;
    max-width: 100%;
  }

  /* pojistka proti vodorovnému scrollu */
  html, body{
    overflow-x: hidden;
  }
}


/* ===== Scroll to top button ===== */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,18,40,.72);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.toTop:hover{ background: rgba(18,30,66,.78); }
.toTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Swipe: prefer page scroll vertically, allow horizontal gestures on these elements ===== */
#pgImg{ touch-action: pan-y; }
#collectionsCarousel{ touch-action: pan-y; }


/* === Topbar responsive cleanup === */
@media (max-width: 980px){
  .nav{flex-wrap:wrap}
  .menuScroll{display:none}
  .menu.menu-desktop{display:none}
  .nav-toggle{display:inline-flex}
  .actions{width:100%; justify-content:space-between; flex-wrap:wrap}
  .actions .lang, .actions .currency{flex:0 0 auto}
}


/* =========================
   v18 FIX: Hero badge (CZ) — keep it top-left INSIDE the left block
   (no overlaying the text)
   ========================= */
.hero-left{
  align-items:flex-start;
}
.hero-badge{
  position:relative;
  left:auto; top:auto;
  margin:0 0 12px 0;
}


/* =========================
   v19: Match News card width to hero text card
   ========================= */
.hero-news{justify-content:flex-end;}
.hero-news .news-card{
  width:min(100%, var(--hero-badge-w, 420px));
  margin-left:auto;
}

/* =========================
   v39: Mobile hero bubbles — align cards neatly in one column
   (badge + hero text + news) without staggered offsets
   ========================= */
@media (max-width: 760px){
  /* Stretch the column so text cards take full width */
  .hero-left{ align-items: stretch; }

  /* Badge stays compact but aligned with the column */
  .hero-badge{ align-self: flex-start; margin: 0 0 10px 0; }

  /* Ensure the two text “bubbles” lead edge aligns */
  .hero-text{ width: 100%; max-width: none; }

  /* News card should NOT be right-aligned on mobile */
  .hero-news{ justify-content: stretch; }
  .hero-news .news-card{ width: 100%; margin-left: 0; }
}


/* ===== Checkout panel (optional account) ===== */
.checkoutPanel{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(200,240,255,.12);
  background: linear-gradient(180deg, rgba(18,34,54,.72), rgba(10,18,30,.55));
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.checkoutHead{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.checkoutTitle{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.checkoutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.checkoutGrid .span2{ grid-column: 1 / -1; }
.textarea{
  width: 100%;
  resize: vertical;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(8,14,24,.55);
  border: 1px solid rgba(200,240,255,.14);
  color: rgba(255,255,255,.9);
  outline: none;
}
.textarea:focus{ border-color: rgba(140,255,226,.45); box-shadow: 0 0 0 3px rgba(140,255,226,.12); }

.checkoutToggles{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.checkRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200,240,255,.10);
  background: rgba(8,14,24,.25);
}
.checkRow input{ accent-color: #7fffe2; }
.accountBox{
  margin-top: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(200,240,255,.12);
  background: rgba(8,14,24,.22);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.accountBox .muted{ opacity:.82; }
@media (max-width: 720px){
  .checkoutGrid{ grid-template-columns: 1fr; }
  .accountBox{ grid-template-columns: 1fr; }
}


/* Packeta / Zásilkovna pick-up point */
.pickupRow{
  display:flex;
  gap:12px;
  align-items:center;
}
.pickupValue{
  flex:1;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(255,255,255,.65);
}
@media (max-width: 560px){
  .pickupRow{flex-direction:column; align-items:stretch;}
  .pickupValue{width:100%;}
}


/* ===== Custom tile: align height with collections panel ===== */
.custom-tile{height:100%}
.custom-tile .dark-inner{height:100%;display:flex;flex-direction:column;gap:10px}
.custom-tile .checklist{margin-top:0}
.custom-tile .dark-actions{margin-top:auto}


/* ===========================
   LIGHT SCHEME v1 (white/black/navy, sharper edges)
   =========================== */

body{
  background:var(--bg) !important;
  color:var(--ink);
}

/* Make main panels/cards light instead of dark-glass */
.dark-block,
.tile,
.drawer-panel,
.pmodal-panel,
.panel,
.card,
.product-card,
.productCard,
.shopCard,
.shop-card,
.checkout,
.checkoutPanel{
  background:var(--panel) !important;
  color:var(--ink) !important;
  border:var(--border) !important;
  box-shadow:var(--shadow-soft) !important;
}

/* Text inside blocks */
.dark-block p,
.dark-block li,
.tile p,
.tile li{
  color:var(--muted) !important;
}
.dark-block h1,
.dark-block h2,
.dark-block h3,
.dark-block .title,
.tile h1,
.tile h2,
.tile h3,
.tile .title{
  color:var(--ink) !important;
}

/* Buttons */
.btn{
  border-radius:var(--radius-sm) !important;
}
.btn-primary{
  background:linear-gradient(180deg, rgba(11,19,43,.96), rgba(11,19,43,.92)) !important;
  color:#fff !important;
  border:1px solid rgba(11,19,43,.18) !important;
  box-shadow:0 10px 22px rgba(11,19,43,.18) !important;
}
.btn-primary:hover{ filter:brightness(1.06); }

.btn-ghost{
  background:rgba(11,19,43,.04) !important;
  color:var(--ink) !important;
  border:1px solid rgba(11,19,43,.12) !important;
}
.btn-ghost:hover{ background:rgba(11,19,43,.06) !important; }

/* Inputs */
input, textarea, select{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid rgba(11,19,43,.12) !important;
}
::placeholder{ color:rgba(11,19,43,.45) !important; }

/* Topbar stays dark, but keep it crisp */
.topbar{
  background:linear-gradient(180deg, rgba(11,19,43,.98), rgba(11,19,43,.92)) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar *{ color:rgba(255,255,255,.92); }
.menu a:hover,
.menu a.active{
  background:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

/* Subtle dividers */
.divider{ border-color:rgba(11,19,43,.10) !important; }

/* Any remaining teal-ish accents -> navy */
.checklist li::before{ color:var(--c0) !important; }


/* ===========================
   NAVY TILES v2 (custom + oneoffs)
   =========================== */

/* Custom tile stays as navy panel */
.custom-tile.dark-block{
  background:linear-gradient(180deg, rgba(11,19,43,.98), rgba(17,24,39,.92)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 20px 44px rgba(11,19,43,.25) !important;
}

/* One-offs tile uses a photo background + dark overlay */
.oneoffs-tile.panel{
  position:relative;
  /* NOTE: ibb.co links are NOT direct image urls.
     We ship the background locally to ensure it always loads (also offline).
     If you want to use a remote image, you must use a direct i.ibb.co/... file url. */
  background-color:#0b132b !important;
  background-image:
    linear-gradient(180deg, rgba(11,19,43,.30) 0%, rgba(11,19,43,.55) 100%),
    url('./assets/oneoffs_bg.webp')
    !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 20px 44px rgba(11,19,43,.25) !important;
  overflow:hidden;
}


.oneoffs-tile .section-title,
.oneoffs-tile .btn{ position:relative; z-index:3; }
.custom-tile .dark-inner,
.oneoffs-tile{
  color:rgba(255,255,255,.92) !important;
}

/* Hover overlay (desktop hover, mobile tap via JS) */
.oneoffs-tile .oneoffs-hover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:18px;
  padding-top: 132px; /* leave space for title + button (prevents overlap) */
  pointer-events:none;
  z-index:2;
  z-index:1;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease;
  /* ať je horní část dlaždice čitelná i při zobrazení overlay */
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,19,43,.55) 40%, rgba(11,19,43,.78) 100%);}

/* Mobile: tile is shorter, ensure the long text area has enough room
   and doesn't get visually "squeezed" into a single line. */
@media (max-width: 680px){
  /*
    MOBILE UX:
    Na mobilu byla dlaždice nízká a dlouhý text byl v absolutní overlay vrstvě,
    takže se zobrazil jen 1. řádek a uživatel musel "trefit" scroll uvnitř.
    Na dotyk raději otevřeme text v normálním toku (dlaždice se zvětší).
  */

  /* default: dlouhý text skrytý */
  .oneoffs-tile .oneoffs-hover{
    display:none;
  }

  /* při otevření (tap) se text vloží do layoutu a dlaždice se může roztáhnout */
  .oneoffs-tile.is-open .oneoffs-hover{
    display:block;
    position:relative;
    inset:auto;
    padding:10px 0 0;
    opacity:1;
    transform:none;
    pointer-events:auto;
    background:none;
  }

  .oneoffs-tile.is-open .oneoffs-hover-inner{
    max-height:none;
    overflow:visible;
    margin-top:10px;
  }

  /* Tip se při otevření schová, aby nepřekážel */
  .oneoffs-tile.is-open .oneoffs-hint{
    display:none;
  }
}

.oneoffs-tile .oneoffs-hover-inner{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  width:100%;
  background:rgba(11,19,43,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px 14px 12px;
  max-height: calc(100% - 16px);
  overflow: auto;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}

.oneoffs-tile .oneoffs-hover-title{
  margin:0 0 8px 0;
  color:#fff !important;
  font-weight:700;
}

.oneoffs-tile .oneoffs-hover-text{
  margin:0 0 8px 0;
  color:rgba(255,255,255,.86) !important;
  line-height:1.35;
}

.oneoffs-tile .oneoffs-hover-hint{
  margin:8px 0 0 0;
  color:rgba(255,255,255,.70) !important;
  font-size:12px;
}

/* Only show the short subtitle on default; reveal long copy on hover */
.oneoffs-tile .oneoffs-sub{ max-width:52ch; }

/* Nadpis + krátký popis + tlačítko vždy navrch (nad hover textem) */
.oneoffs-tile .section-title,
.oneoffs-tile .btn{
  position:relative;
  z-index:2;
}

.oneoffs-tile .oneoffs-hint{
  position:relative;
  z-index:2;
  margin-top:10px;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

@media (hover:hover) and (pointer:fine){
  /* Desktop: dlouhý příběh jen na hover (nadpis + krátká věta zůstávají viditelné) */
  .oneoffs-tile:hover .oneoffs-hover{
    opacity:1;
    transform:translateY(0);
  
    pointer-events:auto;
}
}

/* When opened on touch via JS */
.oneoffs-tile.is-open .oneoffs-hover{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  }

.custom-tile h3,
.oneoffs-tile h2,
.oneoffs-tile h3{
  color:#fff !important;
}

.custom-tile p,
.custom-tile li,
.oneoffs-tile p,
.oneoffs-tile li{
  color:rgba(255,255,255,.78) !important;
}

.custom-tile .small,
.oneoffs-tile .small{
  color:rgba(255,255,255,.70) !important;
}

/* Checklist ticks */
.custom-tile .checklist li::before{
  color:rgba(255,255,255,.92) !important;
}

/* Buttons inside navy tiles */
.custom-tile .btn-primary,
.oneoffs-tile .btn-primary{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
.custom-tile .btn-primary:hover,
.oneoffs-tile .btn-primary:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
}


/* ===========================
   FOOTER READABILITY v2
   =========================== */
.footer{
  background:linear-gradient(180deg, rgba(11,19,43,.98), rgba(17,24,39,.96)) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.footerInner{
  color:rgba(255,255,255,.88) !important;
}
.footBrand{ color:#fff !important; }
.footSub, .footCopy{ color:rgba(255,255,255,.72) !important; }

.footBtn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.90) !important;
  border-radius:10px !important;
}
.footBtn:hover{
  background:rgba(255,255,255,.12) !important;
}

.socBtn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.90) !important;
  border-radius:10px !important;
}
.socBtn:hover{ background:rgba(255,255,255,.12) !important; }

/* FOOTER NAV LAYOUT FIX */
.footNav{flex-wrap:wrap !important; overflow:visible !important;}
.footBtn{white-space:normal !important; flex:0 0 auto !important; align-items:flex-start !important;}
.footBtn i{margin-top:2px;}
.footBtn span{display:inline-block; line-height:1.15;}
.footBtn--terms{max-width:170px;}
.footBtn--terms span{max-width:12.5ch;}

/* SOCIAL ICON VISIBILITY */
.socBtn i{font-size:18px; opacity:1; color:rgba(255,255,255,.92) !important;}
.socBtn .fa-instagram{color:#E1306C !important;}
.socBtn .fa-facebook{color:#1877F2 !important;}


@media (min-width: 1100px){
  /* keep footer nav readable (wraps into 2 rows when needed) */
  .footNav{flex-wrap:wrap; overflow:visible;}
}

/* Cart belt waist input */
.cart-title{ font-weight: 700; }
.cart-waist{ margin-top: 10px; max-width: 220px; }
.cart-waist .label{ font-size: 12px; margin-bottom: 6px; opacity: .85; }
.waist-grid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.cart-waist-input{ width: 160px; padding: 8px 10px; }
@media (max-width: 520px){
  .cart-waist{ max-width: 100%; }
  .cart-waist-input{ width: 100%; }
}

@media (min-width: 560px){
  /* If customer orders multiple pieces, show two columns when space allows */
  .waist-grid{ grid-template-columns: 1fr 1fr; }
}

/* Cart monogram (only belts + wallets) */
.cart-mono{
  margin-top: 10px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(11,22,48,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.65);
}
.cart-mono .mono-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.cart-mono .mono-row input{ margin-top:2px; accent-color: #0b1630; }
.cart-mono .mono-row span{ font-size: 13px; line-height: 1.25; }
.cart-mono .mono-input{ margin-top: 8px; width: 100%; }
@media (max-width: 520px){
  .cart-mono{ max-width: 100%; }
}


/* ===== Personalizace (checkout) ===== */
.custom-personalize{ margin:10px 0 14px 0; opacity:.9; }
.perso-box{
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(0,0,0,.08);
}
/* scoped styling so it doesn't change other checkboxes */
.perso-box .checkRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid rgba(200,240,255,.10);
  background: rgba(8,14,24,.16);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.perso-box .checkRow input{ margin-top:2px; accent-color: #7fffe2; }
.perso-box .checkRow span{ line-height:1.25; }
.perso-box .checkRow:hover{ background: rgba(11,19,43,.22); }
.perso-box .checkRow.is-checked{
  background: linear-gradient(180deg, rgba(127,255,226,.10), rgba(11,19,43,.22));
  border-color: rgba(127,255,226,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 0 0 3px rgba(127,255,226,.08);
  transform: translateY(-1px);
}

/* ---- Helpers for cart validation ---- */
.msg{margin-top:10px;font-size:14px;line-height:1.35;}
.msg.err{color:#b00020;}
.msg.ok{color:#0f5132;font-weight:700;}
.msg.info{color:#0b1630;opacity:.9;}
.btn[aria-busy="true"]{opacity:.85;pointer-events:none;}
/* Order status modal */
.omodal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;}
.omodal[hidden]{display:none;}
.omodal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(2px);}
.omodal-card{position:relative;width:min(520px,calc(100% - 32px));background:#fff;border-radius:18px;padding:22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center;border:1px solid rgba(0,0,0,.08);}
.omodal-icon{width:64px;height:64px;margin:2px auto 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;line-height:1;background:rgba(11,22,48,.06);color:var(--navy);}
.omodal-icon.ok{background:rgba(15,81,50,.10);color:#0f5132;}
.omodal-icon.warn{background:rgba(176,0,32,.08);color:#b00020;}
.omodal-title{margin:0;font-size:20px;letter-spacing:.01em;}
.omodal-text{margin:10px 0 18px;color:rgba(11,22,48,.86);font-size:14px;line-height:1.55;white-space:pre-line;}
.omodal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.btn-disabled{opacity:.55;}
.btn-disabled:hover{transform:none;}
.input-err{outline:2px solid rgba(176,0,32,.75); box-shadow:0 0 0 4px rgba(176,0,32,.15);}


/* Custom form file upload */
.filesPreview{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.filesPreview .thumb{width:54px;height:54px;border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.filesPreview .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.filesPreview .filechip{padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.12);font-size:12px;opacity:.9}

/* ===== Mobile typography polish (smaller screens) ===== */
@media (max-width: 420px){
  /* hero */
  .hero-inner{ padding:10px; }
  .hero-text{ font-size:13.2px; line-height:1.55; padding:10px 12px; }
  .news-card{ padding:10px 12px; }
  .news-head{ margin-bottom:8px; }
  .news-list{ font-size:12.6px; line-height:1.45; gap:8px; }

  /* checkout text density */
  .label{ font-size:12px; }
  .small{ font-size:11.5px; line-height:1.4; }
  .input, .textarea{ font-size:14px; }

  /* personalization checkboxes */
  #coPersonalizeSection .perso-box .checkRow{ padding:10px 10px; }
  #coPersonalizeSection .perso-box .checkRow span{ font-size:14.5px; line-height:1.22; }
}

@media (max-width: 520px){
  .pmodal-close{top:10px;right:10px;width:46px;height:46px;border-radius:16px}
  .pgDot{width:9px;height:9px}
}

@media (max-width: 520px){
  .langMenu{min-width:200px}
  .currencyMenu{min-width:200px}
}


/* ===== Product details (modal accordion) ===== */
.pdetails{ margin-top:14px; display:grid; gap:10px; }
.pdet{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px 12px; }
.pdet > summary{ cursor:pointer; font-weight:600; list-style:none; }
.pdet > summary::-webkit-details-marker{ display:none; }
.pdet > summary:after{ content:"+"; float:right; opacity:.7; }
.pdet[open] > summary:after{ content:"–"; }
.pdetBody{ margin-top:10px; color:rgba(255,255,255,0.86); line-height:1.55; }
.pdetBody ul{ margin:0; padding-left:18px; }
.pdetBody li{ margin:6px 0; }



/* ===== v45: Produktový detail – fixní galerie vlevo + scroll vpravo ===== */
.pmodal-panel{
  height:min(86vh, 860px);
}
.pmodal-grid{
  height:100%;
}
.pgal{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1020;
}
.pgal img#pgImg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Pravý panel je jediný scrollovací */
.pinfo{
  height:100%;
  overflow:auto;
  background:#ffffff;
  color:#0b132b;
}
.pinfo *{
  color:inherit;
}
.pinfo .btn, .pinfo .btn *{
  color:inherit;
}

/* Kontrast textu v detailních blocích (přebije globální .small/.muted pravidla) */
.pdetails, .pdetails *{
  color:#0b132b !important;
}
.pdetails .pdetBody{
  color:#0b132b !important;
}

/* === v46: Portrait-friendly gallery frame (fixed left panel) === */
.pgal{
  padding:0 !important;
  overflow:hidden;
  background: radial-gradient(1200px 800px at 50% 35%, #152a52 0%, #070a12 60%, #05060a 100%) !important;
}

/* Make the image always center nicely; no crop, no deformation */
.pgal img,
.pgal img#pgImg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Subtle vignette so portrait images still look premium in a wide frame */
.pgal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.32));
}
.pgal-nav{ z-index: 3; }