/* =========================================================
   3D Tisk pro rybáře — "Dílenský katalog dílů"
   Nový vizuál, stejná funkčnost (třídy/ID beze změny — script1.js netknut).
   ========================================================= */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; display: block; }

:root{
  /* --- barevné tokeny --- */
  --ink:        #10231F;   /* hluboká smrková čerň — text, nadpisy */
  --water:      #1D5C56;   /* petrolejová — brand, odkazy, aktivní stavy */
  --water-dark: #123F3A;
  --moss:       #6B7C4C;   /* mechová olivová — kategorie */
  --moss-dark:  #55613C;
  --signal:     #E8622C;   /* signální oranžová — ceny, CTA, akcenty */
  --signal-dark:#C94F1F;
  --paper:      #F3F1E7;   /* teplý papír — pozadí */
  --paper-deep: #ECE7D6;
  --card:       #FFFFFF;
  --muted:      #5B6459;
  --border:     #DAD4C0;
  --danger:     #B4432B;
  --success:    #1D5C56;

  --shadow-sm:  0 2px 10px rgba(16,35,31,.08);
  --shadow-md:  0 10px 28px rgba(16,35,31,.16);
  --shadow-card:0 1px 3px rgba(16,35,31,.06), 0 16px 32px rgba(16,35,31,.08);
  --radius:     14px;
  --radius-sm:  8px;

  --arrow-size: 12px;
  --arrow-thickness: 3px;
  --arrow-color-home: #fff;
  --arrow-color-local: var(--ink);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Work Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-reduced-motion: reduce){
  * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  color:var(--ink);
  padding:2rem;
  max-width:1320px;
  margin-inline:auto;
  font-size:16px;
  line-height:1.55;
}

h1, h2, h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
}

h1{
  font-size:clamp(1.8rem, 6vw + .5rem, 3rem);
  line-height:1.15;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 1rem 0;
}

p1{
  font-size:95%;
  display:block;
  margin-bottom:1rem;
}

/* ===== HERO TITLE ===== */
.heroTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap !important;
  gap:.65rem;
  margin:.5rem 0 1.75rem 0;
  line-height:1.2;
  font-size:clamp(1.4rem, 5.2vw, 2.2rem);
  color:var(--ink);
  position:relative;
  padding-bottom:1.1rem;
}

.heroTitle::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:3px;
  background:repeating-linear-gradient(90deg, var(--signal) 0 8px, transparent 8px 14px);
  border-radius:2px;
}

.heroTitle .logo{
  display:inline-block;
  width: clamp(28px, 8vw, 48px);
  height:auto;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(16,35,31,.18));
}

.heroTitle .title-text{
  white-space:nowrap;
  flex:0 1 auto;
  min-width:0;
  text-transform:uppercase;
  letter-spacing:.02em;
}

@media (max-width: 430px){
  .heroTitle{ gap:.4rem; font-size:clamp(1.15rem, 5.6vw, 2rem); }
  .heroTitle .logo{ width: clamp(22px, 7vw, 40px); }
}

/* ===== SHOP LAYOUT + KATEGORIE (sidebar jako "rejstřík dílny") ===== */
.shop-layout{
  width:100%;
  max-width:1200px;
  margin:1.5rem auto 0;
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:1.25rem;
  align-items:start;
}

.category-menu{
  order:1;
  width:100%;
  position:sticky;
  top:1rem;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:.85rem .7rem;
  box-shadow:var(--shadow-sm);
  margin:0;
}

.category-menu h3{
  margin:0 0 .7rem;
  font-size:.68rem;
  font-family:var(--font-mono);
  font-weight:600;
  color:#B7C4B0;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding-left:.15rem;
  border-left:2px solid var(--signal);
  padding-left:.5rem;
}

.category-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:.3rem;
}

.cat-btn{
  width:100%;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  color:#D8DED1;
  padding:.5rem .55rem;
  border-radius:6px;
  cursor:pointer;
  font-weight:500;
  font-family:var(--font-body);
  font-size:.72rem;
  line-height:1.2;
  white-space:normal;
  transition:background .18s ease, color .18s ease, transform .08s ease, border-color .18s ease;
}

.cat-btn:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.cat-btn.active{
  background:var(--signal);
  color:#fff;
  border-color:var(--signal);
  font-weight:700;
}

.cat-btn:active{ transform:scale(.98); }

.cat-btn-count{
  opacity:.75;
  font-weight:700;
  margin-left:.3rem;
  font-family:var(--font-mono);
  font-size:.65rem;
}

.category-hidden{ display:none !important; }

.category-empty-message{
  grid-column:1 / -1;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:1.25rem;
  text-align:center;
  color:var(--muted);
  font-weight:600;
  border:1px dashed var(--border);
}

/* ===== PRODUKTOVÁ MŘÍŽKA ===== */
.products{
  order:2;
  display:grid !important;
  gap:1.1rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:0;
}

@media (max-width:1100px){
  .products{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .products{ grid-template-columns:1fr; }
}

.product{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  text-align:left;
  padding-bottom:1rem;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
  border:1px solid var(--border);
}

/* signature: rohová "CAD" značka při najetí myší */
.product::before,
.product::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border:2px solid var(--signal);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  z-index:3;
}
.product::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.product::after{ bottom:8px; right:8px; border-left:none; border-top:none; }

.product:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--water);
}
.product:hover::before,
.product:hover::after{ opacity:1; }

.product > .media-wrap{ position: relative; background:var(--paper-deep); overflow:hidden; }

.product > .media-wrap img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:contain;
  padding:.5rem;
  cursor:pointer;
  transition:transform .35s ease;
}

/* hover overlay — "Zobrazit detail" jako oranžový štítek nad fotkou */
.product > .media-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(16,35,31,.15);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.product > .media-wrap::after{
  content:"Zobrazit detail →";
  position:absolute;
  left:50%;
  bottom:.85rem;
  transform:translateX(-50%) translateY(6px);
  background:var(--signal);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.45rem .9rem;
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  white-space:nowrap;
}

.product:hover > .media-wrap::before{ opacity:1; }
.product:hover > .media-wrap::after{ opacity:1; transform:translateX(-50%) translateY(0); }

.product:hover > .media-wrap img{ transform:scale(1.045); }

.product-content{ padding:1rem 1.1rem 0; }

.product h2{
  margin:.2rem 0 .35rem;
  font-size:1.02rem;
  line-height:1.3;
  font-weight:700;
  color:var(--ink);
}

.product h3{
  font-size:.68rem;
  color:var(--signal-dark);
  letter-spacing:.03em;
}

.product p{
  color:var(--muted);
  margin:.3rem 0;
  font-size:.88rem;
}

.product-content p[style*='font-weight: bold']{
  color:var(--signal-dark) !important;
  font-family:var(--font-mono);
  font-size:1.15rem !important;
  font-weight:700 !important;
  margin-top:.6rem !important;
}

/* kód produktu jako "výrobní číslo dílu" */
.product-content p[style*='0.75rem']{
  font-family:var(--font-mono) !important;
  font-size:.68rem !important;
  color:var(--muted) !important;
  display:inline-block;
  border:1px dashed var(--border);
  border-radius:4px;
  padding:.12rem .4rem;
  letter-spacing:.05em;
}
.product-content p[style*='0.75rem']::before{ content:"[ "; }
.product-content p[style*='0.75rem']::after{ content:" ]"; }

.stock-badge{
  display:block;
  margin-top:.5rem;
  font-size:.76rem;
  font-weight:600;
  color: var(--water-dark);
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ===== POČÍTADLO KS ===== */
.counter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-top:.85rem;
  padding:0 0 1rem;
}

.counter button{
  width:34px;
  height:34px;
  font-size:1.15rem;
  border:1.5px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease, transform .08s ease;
}

.counter button:focus-visible{
  outline:3px solid rgba(29,92,86,.35);
  outline-offset:2px;
}
.counter button:active{ transform:scale(.94); }
.counter button:hover{ background:var(--water); color:#fff; border-color:var(--water); }

.counter span{
  min-width:28px;
  text-align:center;
  font-weight:700;
  font-family:var(--font-mono);
  font-size:1.05rem;
}

/* ===== FORMULÁŘ ===== */
.form-section{
  margin-top:3rem;
  background:var(--card);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  max-width:600px;
  margin-inline:auto;
  border:1px solid var(--border);
}

.form-section h2{
  margin-top:0;
  font-size:1.4rem;
  border-left:3px solid var(--signal);
  padding-left:.7rem;
}

form{ display:flex; flex-direction:column; gap:1rem; }
.form-row{ display:flex; gap:1rem; }
.form-row > *{ flex:1; min-width:0; }

input, select, textarea, button{
  padding:.75rem .85rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:1rem;
  width:100%;
  background:var(--card);
  color:var(--ink);
  font-family:var(--font-body);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:3px solid rgba(29,92,86,.25);
  outline-offset:1px;
  border-color:var(--water);
}

textarea{ resize:vertical; }

button[type="submit"]{
  background:var(--signal);
  color:#fff;
  border:none;
  font-size:1.05rem;
  font-weight:700;
  padding:1rem;
  border-radius:var(--radius-sm);
  transition:background .2s ease, transform .08s ease;
  text-transform:uppercase;
  letter-spacing:.03em;
}
button[type="submit"]:hover{ background:var(--signal-dark); }
button[type="submit"]:active{ transform:translateY(1px); }

.hidden{ display:none !important; }

/* souhrn objednávky v #summary */
#summary{
  font-family:var(--font-mono);
  font-size:.85rem;
  background:var(--paper);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
}
#summary:empty{ display:none; }

/* ===== Toggle šipka (rozbal formulář) ===== */
#toggleFormButton{
  appearance:none;
  background:var(--ink);
  border:none;
  cursor:pointer;
  padding:.65rem 1.3rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:1rem auto 0 auto;
  box-shadow:var(--shadow-sm);
  transition:background .2s ease;
}
#toggleFormButton:hover{ background:var(--water-dark); }

#toggleFormButton:focus-visible{
  outline:3px solid rgba(255,255,255,.6);
  outline-offset:2px;
}

#toggleFormButton span{
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  border:solid var(--arrow-color-home);
  border-width:0 var(--arrow-thickness) var(--arrow-thickness) 0;
  transform:rotate(-135deg);
  transition:transform .3s ease, border-color .2s ease;
}
#toggleFormButton.open span{ transform:rotate(45deg); }

.gdpr-consent{ font-size: 0.75rem; line-height: 1.4; color:var(--muted); }

.toggleFormButton{
  appearance:none;
  background:var(--card);
  border:1px solid var(--border);
  cursor:pointer;
  padding:.5rem .9rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  box-shadow:var(--shadow-sm);
}
.toggleFormButton:focus-visible{ outline:3px solid rgba(0,0,0,.15); outline-offset:2px; }
.toggleFormButton span{
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  border:solid var(--arrow-color-local);
  border-width:0 var(--arrow-thickness) var(--arrow-thickness) 0;
  transform:rotate(-135deg);
  transition:transform .3s ease, border-color .2s ease;
}
.toggleFormButton.open span{ transform:rotate(45deg); }

/* ===== DETAIL PRODUKTU ===== */
.product-container{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  padding:2rem;
  box-sizing:border-box;
  border:1px solid var(--border);
}

#product-detail .product-container{ padding:2rem; }
.product-details{ flex:1 1 100%; }
.product-details h1{ margin-top:0; text-align:left; justify-content:flex-start; }

.price{
  font-size:1.6rem;
  font-weight:700;
  margin:1rem 0;
  font-family:var(--font-mono);
  color:var(--signal-dark);
}

.product-layout{ display:flex; gap:2rem; align-items:flex-start; flex-wrap:nowrap; }
.product-image{ flex:0 0 40%; max-width:40%; }
.product-text{ flex:1 1 60%; max-width:60%; }
.product-image img{ width:100%; height:auto; border-radius:var(--radius-sm); border:1px solid var(--border); }

/* ===== GALERIE ===== */
.galleryData{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  align-items:start;
  margin-top:.5rem;
}
.galleryData > *{ display:contents; }
.galleryData img, .galleryData video{
  width:100%;
  height:auto;
  border-radius:var(--radius-sm);
  box-shadow:0 0 8px rgba(16,35,31,.18);
  cursor:pointer;
  background:#000;
}

/* ===== RESPONSE DETAIL ===== */
@media (max-width:900px){ .galleryData{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

@media (max-width:768px){
  body{ padding:1rem; }
  .product-container{ padding:1.25rem; }
  .product-layout{ flex-wrap:wrap; }
  .product-image, .product-text{ flex:1 1 100%; max-width:100%; }
  .product-image img{ max-width:90vw; margin:0 auto; }
  .galleryData{ grid-template-columns:1fr; }
}

@media (min-width:1200px){ .product-image img{ max-width:480px; } }

/* ===== PATIČKA ===== */
footer{
  border-top:1px dashed var(--border);
  margin-top:2rem;
}
footer a{ color:var(--water-dark); }
footer a svg{ transition:transform .25s ease; }
footer a:hover svg{ transform:scale(1.1); }

/* ===== DETAIL PRODUKTU — přepínání viditelnosti ===== */
#product-detail{
  position: relative;
  width: 100%;
  margin: 0 0 2rem 0;
  display: none;
}
#product-detail:empty{ display: none; }
#product-detail:not(:empty){ display: block; }

body.viewing-detail .shop-layout{ display:none !important; }
body.viewing-detail .products{ display:none !important; }
body.viewing-detail #mainForm{ display:none !important; }
body.viewing-detail #toggleFormButton{ display:none !important; }
body.viewing-detail #product-detail{ display: block; }

/* ===== VYPRODÁNO ribbon ===== */
.product .ribbon{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  background:var(--danger);
  color:#fff;
  font-weight:700;
  padding:5px 10px;
  border-radius:5px;
  letter-spacing:.03em;
  font-size:.72rem;
  text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  font-family:var(--font-mono);
}

.product.soldout{ opacity:1; pointer-events:auto; }
.product.hidden{ display:none !important; }

/* ===== INFO SEKCE (O mně / GDPR / Podmínky) ===== */
#o-mne, #gdpr-section, #podminky, #obchodni-podminky{ position: relative; }

.section-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  background: rgba(16,35,31,.08);
  color: var(--ink);
  transition: transform .08s ease, background .2s ease, opacity .2s ease;
}
.section-close:hover{ background: rgba(16,35,31,.15); }
.section-close:active{ transform: scale(.96); }
.section-close:focus-visible{ outline: 3px solid rgba(16,35,31,.2); outline-offset: 2px; }

#o-mne h2, #gdpr-section h2, #podminky h2, #obchodni-podminky h2{ padding-right: 52px; }

.info-section{
  padding:2rem 1.5rem !important;
  background-color:var(--card) !important;
  margin-top:3rem;
  border-radius:var(--radius) !important;
  border:1px solid var(--border);
}

/* ===== RESPONSIVE KATEGORIE ===== */
@media (max-width:900px){
  .shop-layout{ display:block; max-width:100%; }
  .category-menu{ position:static; margin:0 0 1rem; }
  .category-buttons{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cat-btn{ justify-content:center; text-align:center; }
}

@media (max-width:560px){
  body{ padding:1rem; }
  .category-menu{ padding:.75rem; }
  .category-buttons{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.4rem; }
  .cat-btn{ font-size:.78rem; padding:.55rem .45rem; }
}

.category-menu, .category-buttons, .cat-btn{
  pointer-events:auto;
  touch-action:manipulation;
  position:relative;
  z-index:20;
}

/* ===== PLOVOUCÍ SOUHRN KOŠÍKU ===== */
#floatingCartBar{
  position:fixed;
  left:50%;
  bottom:1.1rem;
  transform:translate(-50%, 140%);
  z-index:500;
  display:flex;
  align-items:stretch;
  gap:0;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(16,35,31,.35);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
  font-family:var(--font-body);
}

#floatingCartBar.visible{
  transform:translate(-50%, 0);
  opacity:1;
  pointer-events:auto;
}

#floatingCartView{
  appearance:none;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.1rem;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
}

#floatingCartView:hover{ background:rgba(255,255,255,.08); }

#floatingCartCount{
  background:var(--signal);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.78rem;
  min-width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .3rem;
}

.floating-cart-label{ color:#D8DED1; font-weight:500; }
.floating-cart-sep{ color:#5B6459; }

#floatingCartTotal{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--signal);
}

#floatingCartReset{
  appearance:none;
  border:none;
  border-left:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#D8DED1;
  cursor:pointer;
  padding:.75rem .95rem;
  font-size:.85rem;
  font-weight:700;
  transition:background .18s ease, color .18s ease;
}

#floatingCartReset:hover{ background:rgba(180,67,43,.85); color:#fff; }

@media (max-width:560px){
  #floatingCartBar{ bottom:.85rem; }
  #floatingCartView{ padding:.7rem .9rem; font-size:.8rem; }
  .floating-cart-label{ display:none; }
}
#cookieBar > div{
  background:var(--ink) !important;
  font-family:var(--font-body);
}
#cookieAccept{ background:var(--signal) !important; color:#fff !important; }
#cookieDecline{ background:rgba(255,255,255,.12) !important; }

/* ===== TOP / NEJPRODÁVANĚJŠÍ ===== */
.top-products{
  width:100%;
  max-width:1200px;
  margin:1.5rem auto 0;
  background:var(--ink);
  border-radius:var(--radius);
  padding:1.1rem 1.1rem 1.3rem;
  box-shadow:var(--shadow-sm);
}

.top-products.hidden{ display:none !important; }

.top-products__heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 0 .1rem;
}

.top-products__heading-text{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.top-toggle{
  appearance:none;
  width:auto;
  flex:0 0 auto;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  padding:.4rem .85rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, border-color .18s ease;
  flex-shrink:0;
}

.top-toggle:hover{ background:rgba(255,255,255,.16); border-color:var(--signal); }

.top-toggle__label{
  color:#fff;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.top-products.top-products--open .top-toggle{
  background:var(--signal);
  border-color:var(--signal);
}

.top-products__row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.9rem;
  overflow-x:auto;
  padding-bottom:.2rem;
  scroll-snap-type:x proximity;

  max-height:0;
  opacity:0;
  margin-top:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}

.top-products.top-products--open .top-products__row{
  max-height:600px;
  opacity:1;
  margin-top:.85rem;
  overflow-x:auto;
  pointer-events:auto;
}

.top-products__row::-webkit-scrollbar{ height:6px; }
.top-products__row::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:999px; }

.top-card{
  flex:0 0 168px;
  scroll-snap-align:start;
  background:var(--card);
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, border-color .18s ease;
}

.top-card:hover{ transform:translateY(-3px); border-color:var(--signal); }

.top-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--paper-deep);
  padding:.4rem;
}

.top-card__body{ padding:.6rem .7rem .75rem; }

.top-card__name{
  font-size:.74rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  margin:0 0 .3rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.top-card__price{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--signal-dark);
  font-size:.85rem;
}

/* odznak na běžné kartě produktu, pokud je označen jako TOP */
.product[data-top="1"] .ribbon-top{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:var(--signal);
  color:#fff;
  font-weight:700;
  padding:4px 9px;
  border-radius:5px;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-family:var(--font-mono);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.cat-btn-top.active{ background:var(--signal); border-color:var(--signal); }

@media (max-width:560px){
  .top-card{ flex-basis:132px; }
}

/* ===== Přidat do košíku v detailu produktu ===== */
.detail-add-to-cart{
  margin:1.1rem 0 1.4rem;
}

.detail-add-to-cart__label{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.72rem;
  color:var(--muted);
  margin:0 0 .5rem;
}

.detail-add-to-cart .counter{
  justify-content:flex-start;
  margin-top:0;
}