/* ═══════════════════════════════════════════════════════════

   Session #34 — písmo nadpisů: EB Garamond (hostované u nás)



   Dřív Cormorant Garamond z Google Fonts. Má ale špatně nakreslenou

   češtinu: čárky a háčky nad velkými písmeny „plavou" a v kurzívě

   ujíždějí stranou („Dˇekujeme"). EB Garamond je stejně široký, takže

   se rozvržení nerozhodí, a češtinu má správně.



   Soubory: /fonts/eb-garamond/ (proměnná váha 400–800, licence OFL,

   viz OFL.txt). Hostováním u nás navíc odpadá jeden dotaz na Google.



   POZOR — alias: stejné soubory jsou zaregistrované i pod jménem

   'Cormorant Garamond'. Ve starších souborech (nav-redesign.css,

   pages/about.php, contact.php, account.php, JS…) je to jméno ještě

   napsané natvrdo — díky aliasu i tam vyjde EB Garamond. Cormorant se

   už nikde nenačítá. Při úpravách psát rovnou 'EB Garamond'.

   Váha 300 (dřív „light" Cormorant) se zobrazí jako 400 — lehčí EB

   Garamond nemá.

═══════════════════════════════════════════════════════════ */

@font-face {

  font-family: 'EB Garamond';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-ext-wght-normal.woff2') format('woff2');

  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;

}

@font-face {

  font-family: 'EB Garamond';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-wght-normal.woff2') format('woff2');

  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;

}

@font-face {

  font-family: 'EB Garamond';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-ext-wght-italic.woff2') format('woff2');

  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;

}

@font-face {

  font-family: 'EB Garamond';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-wght-italic.woff2') format('woff2');

  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;

}

@font-face {

  font-family: 'Cormorant Garamond';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-ext-wght-normal.woff2') format('woff2');

  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;

}

@font-face {

  font-family: 'Cormorant Garamond';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-wght-normal.woff2') format('woff2');

  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;

}

@font-face {

  font-family: 'Cormorant Garamond';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-ext-wght-italic.woff2') format('woff2');

  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;

}

@font-face {

  font-family: 'Cormorant Garamond';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('/fonts/eb-garamond/eb-garamond-latin-wght-italic.woff2') format('woff2');

  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;

}



/* ═══════════════════════════════════════════════════════════════

   SHOP REDESIGN — doplněk ke style.css

   Linkuj v <head> PO style.css.

   Scope #page-shop aby neovlivnilo karty na home.

═══════════════════════════════════════════════════════════════ */



/* ── KATEGORIE HERO ── */

#page-shop .category-hero {

  padding: 40px 0 28px;

  border-bottom: 1px solid var(--border);

  background: radial-gradient(ellipse at top right, rgba(200,146,42,0.06), transparent 60%);

}

#page-shop .category-hero-eyebrow {

  font-size: 11px;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--gold-dark);

  margin-bottom: 10px;

}

#page-shop .category-hero h2 {

  font-family: 'EB Garamond', serif;

  font-size: 40px;

  font-weight: 500;

  color: var(--brown-dark);

  line-height: 1.1;

  margin-bottom: 10px;

}

#page-shop .category-hero-desc {

  font-size: 14px;

  color: var(--text-mid);

  max-width: 640px;

  line-height: 1.65;

  margin: 0;

}

#page-shop .category-hero-desc:empty { display: none; }

#page-shop .category-hero-desc p { margin: 0 0 10px; }

#page-shop .category-hero-desc p:last-child { margin-bottom: 0; }

#page-shop .category-hero-desc ul { margin: 0 0 12px; padding-left: 18px; }

#page-shop .category-hero-desc ul:last-child { margin-bottom: 0; }

#page-shop .category-hero-desc li { margin-bottom: 6px; }

#page-shop .category-hero-desc li:last-child { margin-bottom: 0; }

#page-shop .category-hero-desc strong { color: var(--brown-dark); font-weight: 600; }

#page-shop .category-hero-desc a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }

#page-shop .category-hero-desc a:hover { color: var(--gold); }



/* Dlouhé popisy (odrážkové seznamy) se defaultně sbalí na pár řádků s fade-out a tlačítkem "Zobrazit více" */

#page-shop .category-hero-desc.collapsed {

  max-height: 64px;

  overflow: hidden;

  position: relative;

}

#page-shop .category-hero-desc.collapsed::after {

  content: '';

  position: absolute;

  left: 0; right: 0; bottom: 0;

  height: 32px;

  background: linear-gradient(transparent, var(--cream) 80%);

  pointer-events: none;

}

#page-shop .category-hero-desc-toggle {

  display: inline-block;

  margin-top: 10px;

  background: none;

  border: none;

  cursor: pointer;

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--gold-dark);

  padding: 0;

}

#page-shop .category-hero-desc-toggle:hover { color: var(--gold); }



/* ── SUBKATEGORIE STRIP ── */

#page-shop .subcat-strip {

  padding: 24px 0;

  border-bottom: 1px solid var(--border);

}

#page-shop .subcat-strip-label {

  font-size: 10px;

  letter-spacing: 0.26em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 14px;

}

#page-shop .subcat-list {

  display: flex;

  gap: 18px;

  overflow-x: auto;

  padding: 4px 0 6px;

  scrollbar-width: thin;

  align-items: flex-start;

}

#page-shop .subcat-item {

  flex: 0 0 auto;

  width: 110px;

  cursor: pointer;

  text-align: center;

  transition: transform 0.2s;

  background: none;

  border: none;

  padding: 0;

  font-family: 'Jost', sans-serif;

}

#page-shop .subcat-item:hover { transform: translateY(-2px); }

#page-shop .subcat-img {

  width: 110px;

  height: 110px;

  border-radius: var(--radius-md);

  overflow: hidden;

  position: relative;

  border: 1px solid var(--border);

  background: linear-gradient(135deg, #2a1f10, #3a2c1a);

  margin-bottom: 10px;

  transition: all 0.3s;

}

#page-shop .subcat-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

#page-shop .subcat-item:hover .subcat-img {

  border-color: var(--border-strong);

  box-shadow: 0 8px 20px rgba(0,0,0,0.4);

}

#page-shop .subcat-item.active .subcat-img {

  border-color: var(--gold-dark);

  box-shadow: 0 0 0 2px rgba(224,176,80,0.25);

}

#page-shop .subcat-placeholder {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  font-size: 48px;

  background:

    radial-gradient(circle at 30% 30%, rgba(200,146,42,0.45), transparent 55%),

    radial-gradient(circle at 70% 70%, rgba(150,80,30,0.4), transparent 55%);

}

#page-shop .subcat-label {

  font-size: 12px;

  color: var(--text-mid);

  letter-spacing: 0.04em;

  line-height: 1.3;

}

#page-shop .subcat-item.active .subcat-label {

  color: var(--brown-dark);

  font-weight: 500;

}

#page-shop .subcat-count {

  display: block;

  font-size: 10px;

  color: var(--stone);

  margin-top: 2px;

  letter-spacing: 0.06em;

}

#page-shop .subcat-item.active .subcat-count { color: var(--gold-dark); }

#page-shop .subcat-item.all .subcat-placeholder {

  background: var(--cream-mid);

  border: 1px dashed var(--border-strong);

  color: var(--text-mid);

  font-size: 22px;

  letter-spacing: 0.08em;

  font-family: 'EB Garamond', serif;

}



/* ── SIDEBAR FILTER ── */

#page-shop .shop-sidebar .filter-option {

  padding: 10px 12px;

  margin: 0;

  border-radius: var(--radius);

  position: relative;

  gap: 0;

}

#page-shop .shop-sidebar .filter-option:hover { background: rgba(200,170,120,0.04); }

#page-shop .shop-sidebar .filter-option.active {

  background: rgba(200,146,42,0.08);

  color: var(--brown-dark);

  font-weight: 500;

}

#page-shop .shop-sidebar .filter-option.active::before {

  content: '';

  position: absolute;

  left: 0; top: 8px; bottom: 8px;

  width: 2px;

  background: var(--gold-dark);

  border-radius: 2px;

}

#page-shop .shop-sidebar .filter-dot { display: none; }

#page-shop .shop-sidebar .filter-count {

  margin-left: auto;

  background: rgba(200,170,120,0.06);

  color: var(--stone);

  padding: 2px 8px;

  border-radius: 10px;

  min-width: 24px;

  text-align: center;

  font-size: 11px;

}

#page-shop .shop-sidebar .filter-option.active .filter-count {

  background: var(--gold-dark);

  color: #1e1608;

  font-weight: 500;

}



/* ── FILTR CENA / VELIKOST — rychlé chips (session #29, TODO bod 7/33) ──

   Nahrazuje dřívější "FILTR LOKALITA" blok (checkbox seznam lokalit) — ten

   stavěl na nestrukturovaném textu a šel těžko udržet konzistentní. Cena

   i Velikost (váha v gramech, pole už existuje kvůli výpočtu dopravy) mají

   teď stejnou strukturu: min/max pole + rychlé chips. */

#page-shop .filter-chips-row {

  display: flex; flex-wrap: wrap; gap: 6px;

  margin-bottom: 12px;

}

#page-shop .filter-chip {

  padding: 6px 12px;

  border: 1px solid var(--border);

  border-radius: 14px;

  background: var(--cream);

  color: var(--text-mid);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  cursor: pointer;

  transition: border-color 0.2s, color 0.2s;

}

#page-shop .filter-chip:hover { border-color: var(--gold); color: var(--brown-dark); }



/* ── PRODUKTOVÁ KARTA — hover overlay ── */

#page-shop .product-card .card-overlay {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 14px;

  background: linear-gradient(to top, rgba(10,7,3,0.92), transparent);

  opacity: 0;

  transition: opacity 0.3s;

  display: flex;

  gap: 8px;

  z-index: 2;

  pointer-events: none;

}

#page-shop .product-card:hover .card-overlay {

  opacity: 1;

  pointer-events: auto;

}

@media (hover: none) {

  #page-shop .product-card .card-overlay { display: none; }

}

#page-shop .quick-btn {

  flex: 1;

  padding: 9px 12px;

  background: var(--cream);

  color: var(--brown-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.2s;

}

#page-shop .quick-btn:hover { background: var(--cream-mid); border-color: var(--gold-dark); }

#page-shop .quick-btn.primary {

  background: var(--gold);

  color: #1e1608;

  border-color: var(--gold);

  font-weight: 500;

}

#page-shop .quick-btn.primary:hover { background: var(--gold-dark); }

#page-shop .quick-btn:disabled { opacity: 0.4; cursor: not-allowed; }

#page-shop .product-card.sold .card-overlay { display: none; }



/* ── AKTIVNÍ FILTRY TAGY ── */

#page-shop .shop-toolbar { flex-wrap: wrap; gap: 12px; }

#page-shop .toolbar-active-tags { display: flex; gap: 6px; flex-wrap: wrap; }

#page-shop .tag-chip {

  font-size: 11px;

  padding: 5px 10px;

  background: rgba(200,146,42,0.1);

  color: var(--gold-dark);

  border: 1px solid rgba(200,146,42,0.2);

  border-radius: 20px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}

#page-shop .tag-chip .x { opacity: 0.6; cursor: pointer; font-size: 13px; }

#page-shop .tag-chip .x:hover { opacity: 1; }



/* ── MOBILE ── */

#page-shop .mob-chip-bar { display: none; }

#page-shop .mob-filter-sheet { display: none; }

#page-shop .mob-filter-backdrop { display: none; }



@media (max-width: 900px) {

  #page-shop .category-hero { padding: 24px 4px 18px; }

  #page-shop .category-hero h2 { font-size: 28px; }

  #page-shop .category-hero-desc { font-size: 13px; }

  #page-shop .subcat-strip { padding: 16px 0; }

  #page-shop .subcat-item { width: 80px; }

  #page-shop .subcat-img { width: 80px; height: 80px; }

  #page-shop .subcat-placeholder { font-size: 32px; }

  #page-shop .subcat-label { font-size: 11px; }

  #page-shop .shop-sidebar { display: none; }



  #page-shop .mob-chip-bar {

    display: flex;

    gap: 8px;

    padding: 12px 16px;

    background: var(--cream);

    border-bottom: 1px solid var(--border);

    overflow-x: auto;

    scrollbar-width: none;

    margin: 0 -16px;

  }

  #page-shop .mob-chip-bar::-webkit-scrollbar { display: none; }

  #page-shop .chip {

    flex-shrink: 0;

    padding: 7px 14px;

    background: var(--cream-dark);

    border: 1px solid var(--border);

    color: var(--text-mid);

    font-size: 12px;

    border-radius: 20px;

    white-space: nowrap;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family: 'Jost', sans-serif;

  }

  #page-shop .chip.active {

    background: var(--gold);

    color: #1e1608;

    border-color: var(--gold);

    font-weight: 500;

  }

  #page-shop .chip.filter-trigger {

    background: var(--cream-dark);

    color: var(--brown-dark);

    border-color: var(--border-strong);

  }

  #page-shop .chip-count-badge {

    background: var(--gold-dark);

    color: #1e1608;

    font-size: 10px;

    font-weight: 600;

    padding: 1px 6px;

    border-radius: 10px;

    min-width: 18px;

    text-align: center;

  }



  #page-shop .mob-filter-sheet {

    display: block;

    position: fixed;

    bottom: 0; left: 0; right: 0;

    background: var(--cream-dark);

    border-top: 1px solid var(--border-strong);

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    padding: 24px 20px 32px;

    z-index: 100;

    transform: translateY(100%);

    transition: transform 0.3s;

    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);

    max-height: 75vh;

    overflow-y: auto;

  }

  #page-shop .mob-filter-sheet.open { transform: translateY(0); }

  #page-shop .mob-filter-backdrop {

    display: block;

    position: fixed; inset: 0;

    background: rgba(0,0,0,0.5);

    z-index: 99;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s;

  }

  #page-shop .mob-filter-backdrop.open { opacity: 1; pointer-events: auto; }

  #page-shop .mob-filter-handle {

    width: 40px; height: 4px;

    background: var(--border-strong);

    border-radius: 2px;

    margin: 0 auto 16px;

  }

  #page-shop .mob-filter-close {

    position: absolute;

    top: 12px; right: 12px;

    background: none;

    border: none;

    color: var(--text-mid);

    font-size: 26px;

    cursor: pointer;

    padding: 4px 12px;

  }

  #page-shop .mob-filter-sheet .sidebar-title {

    font-size: 10px; letter-spacing: 0.26em;

    text-transform: uppercase;

    color: var(--stone);

    margin: 18px 0 12px;

  }

  #page-shop .mob-filter-sheet .sidebar-title:first-of-type { margin-top: 0; }



  #page-shop .shop-main { padding: 16px; }

  #page-shop .products-grid { gap: 12px; }

  #page-shop .product-info { padding: 12px; }

  #page-shop .product-desc-short { display: none; }

}



@media (max-width: 500px) {

  #page-shop .category-hero h2 { font-size: 24px; }

}



/* ═══════════════════════════════════════════════════════════

   ADMIN — Kategorie

═══════════════════════════════════════════════════════════ */

.admin-cat-table {

  display: grid;

  grid-template-columns: 60px 2fr 1fr 80px 90px 90px;

  background: var(--cream-dark);

  border-radius: var(--radius-md);

  border: 1px solid var(--border);

  overflow: hidden;

  margin-bottom: 20px;

}

.admin-cat-table .head { display: contents; }

.admin-cat-table .head > div {

  padding: 14px 12px;

  background: rgba(10,7,3,0.5);

  border-bottom: 1px solid var(--border-strong);

  font-size: 10px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--stone);

}

.admin-cat-table .row { display: contents; }

.admin-cat-table .row > div {

  padding: 14px 12px;

  border-bottom: 1px solid var(--border);

  display: flex;

  align-items: center;

  font-size: 13px;

  color: var(--text-mid);

}

.admin-cat-table .row:hover > div { background: rgba(200,170,120,0.03); }

.admin-cat-thumb {

  width: 40px; height: 40px;

  border-radius: var(--radius);

  background: radial-gradient(circle at 30% 30%, rgba(200,146,42,0.45), transparent 55%),

              linear-gradient(135deg, #2a1f10, #3a2c1a);

  flex-shrink: 0;

  overflow: hidden;

  display: flex;

  align-items: center; justify-content: center;

  font-size: 18px;

}

.admin-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }

.admin-cat-name {

  font-family: 'EB Garamond', serif;

  font-size: 16px;

  color: var(--brown-dark);

}

.admin-cat-name-en { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.admin-cat-path { font-family: monospace; font-size: 11px; color: var(--text-light); }

.admin-cat-actions { gap: 6px; }

.admin-icon-btn {

  background: transparent;

  border: 1px solid var(--border);

  color: var(--text-mid);

  width: 30px; height: 30px;

  border-radius: var(--radius);

  cursor: pointer;

  font-size: 13px;

  display: inline-flex;

  align-items: center; justify-content: center;

}

.admin-icon-btn:hover { border-color: var(--gold-dark); color: var(--gold-dark); }

.admin-icon-btn.delete:hover { border-color: #c46060; color: #c46060; }



.admin-cat-form {

  background: var(--cream-dark);

  border-radius: var(--radius-md);

  border: 1px solid var(--gold-dark);

  padding: 24px 28px;

  margin-top: 20px;

}

.admin-cat-form .form-title {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--gold-dark);

  margin-bottom: 6px;

}

.admin-cat-form .form-hint {

  font-size: 12px;

  color: var(--text-light);

  margin-bottom: 22px;

}

.admin-cat-form .form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 18px;

}

.admin-cat-form .form-row { display: flex; flex-direction: column; gap: 6px; }

.admin-cat-form .form-label {

  font-size: 11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--stone);

}

.admin-cat-form .form-input,

.admin-cat-form .form-textarea {

  background: var(--cream);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  padding: 11px 14px;

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 14px;

}

.admin-cat-form .form-input:focus,

.admin-cat-form .form-textarea:focus { outline: none; border-color: var(--gold-dark); }

.admin-cat-form .form-textarea { min-height: 70px; resize: vertical; line-height: 1.5; }

.admin-cat-form .form-help {

  font-size: 11px;

  color: var(--text-light);

  margin-top: 2px;

  line-height: 1.4;

}

.admin-cat-form .form-help code {

  background: rgba(200,170,120,0.08);

  padding: 1px 6px;

  border-radius: 3px;

  color: var(--gold-dark);

  font-size: 11px;

}

.admin-cat-form .img-row {

  display: flex; gap: 18px;

  align-items: flex-start;

  background: rgba(10,7,3,0.4);

  border-radius: var(--radius);

  padding: 14px;

  margin-bottom: 18px;

}

.admin-cat-form .img-preview {

  width: 80px; height: 80px;

  border-radius: var(--radius);

  background: radial-gradient(circle at 30% 30%, rgba(200,146,42,0.45), transparent 55%),

              linear-gradient(135deg, #2a1f10, #3a2c1a);

  display: flex; align-items: center; justify-content: center;

  font-size: 30px;

  flex-shrink: 0;

  border: 1px solid var(--border-strong);

  overflow: hidden;

}

.admin-cat-form .img-preview img { width: 100%; height: 100%; object-fit: cover; }

.admin-cat-form .img-info { flex: 1; }

.admin-cat-form .img-info .form-input { width: 100%; }



.admin-subcat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.admin-subcat-row {

  display: grid;

  grid-template-columns: 40px 1.2fr 1fr 1.5fr 70px;

  gap: 10px;

  align-items: center;

  background: var(--cream);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 10px;

}

.admin-subcat-row .admin-cat-thumb { width: 32px; height: 32px; font-size: 14px; }

.admin-subcat-row input {

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 7px 10px;

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 12px;

  width: 100%;

}

.admin-subcat-row input:focus { outline: none; border-color: var(--gold-dark); }

.admin-subcat-row .actions { display: flex; gap: 4px; }



.admin-cat-form .form-actions {

  display: flex; gap: 10px; justify-content: flex-end;

  padding-top: 18px; border-top: 1px solid var(--border);

  margin-top: 22px;

}

.admin-btn-primary {

  background: var(--gold);

  border: none;

  color: #1e1608;

  padding: 11px 22px;

  border-radius: var(--radius);

  cursor: pointer;

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  font-weight: 500;

  font-family: 'Jost', sans-serif;

}

.admin-btn-secondary {

  background: transparent;

  border: 1px solid var(--border-strong);

  color: var(--text-mid);

  padding: 10px 18px;

  border-radius: var(--radius);

  cursor: pointer;

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  font-family: 'Jost', sans-serif;

}

.admin-btn-add-sub {

  background: transparent;

  border: 1px dashed var(--gold-dark);

  color: var(--gold-dark);

  padding: 9px 18px;

  border-radius: var(--radius);

  cursor: pointer;

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  font-family: 'Jost', sans-serif;

}



@media (max-width: 900px) {

  .admin-cat-table { grid-template-columns: 50px 1.5fr 80px 80px; }

  .admin-cat-table .head > div:nth-child(3),

  .admin-cat-table .row > div:nth-child(3),

  .admin-cat-table .head > div:nth-child(4),

  .admin-cat-table .row > div:nth-child(4) { display: none; }

  .admin-cat-form .form-grid { grid-template-columns: 1fr; }

  .admin-subcat-row { grid-template-columns: 1fr; }

}



/* ═══════════════════════════════════════════

   CHIP-BAR + SUBCAT EXPAND (mobile)

   Chip-bar = sticky lišta (cream bg, splývající tab).

   Subcat-strip = in-page content (transparent, outlined tab, dividers).

   ═══════════════════════════════════════════ */

@media (max-width: 900px) {



  /* Wrapper kolem mob-chip-baru — cream bg, ale NE sticky (scrolluje pryč s obsahem) */

  #page-shop .mob-chip-wrap {

    /* Session #46: dřív margin 0 -16px; rodič tu žádný okraj nemá, lišta

       přesahovala o 16 px a stránka e-shopu šla na mobilu posunout do strany. */

    margin: 0;

    background: var(--cream);

    border-bottom: 1px solid var(--border);

  }

  #page-shop .mob-chip-wrap .mob-chip-bar {

    position: static;

    margin: 0;

    top: auto;

  }



  /* Subcat-strip — transparent, vzdušné, in-page content */

  #page-shop .subcat-strip {

    background: transparent;

    margin: 0;

    padding: 18px 0 0;

    border-bottom: 0;

    position: relative;

  }

  #page-shop .subcat-strip-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

  }

  #page-shop .subcat-strip-label::after {

    content: '';

    flex: 1;

    height: 1px;

    background: var(--border);

  }

  #page-shop .subcat-list {

    border-bottom: 0;

    padding: 4px 0 18px;

  }



  /* Společné styly tabů (typografie, kursor) */

  #page-shop .mob-chip-tab,

  #page-shop .subcat-tab {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    width: fit-content;

    color: var(--gold-dark);

    font-size: 10.5px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

    font-family: 'Jost', sans-serif;

    white-space: nowrap;

    line-height: 1;

  }

  #page-shop .mob-chip-tab[hidden],

  #page-shop .subcat-tab[hidden] { display: none; }

  #page-shop .mob-chip-tab i,

  #page-shop .subcat-tab i { font-size: 12px; }

  #page-shop .mob-chip-tab:active,

  #page-shop .subcat-tab:active { color: var(--gold); }



  /* Chip-bar tab — splývající jazýček ze spodu lišty */

  #page-shop .mob-chip-tab {

    margin: -1px auto 0;

    background: var(--cream);

    border: 1px solid var(--border);

    border-top: 0;

    border-radius: 0 0 12px 12px;

    padding: 5px 16px 6px;

    position: relative;

    z-index: 2;

  }



  /* Subcat tab — outlined gold pill (transparent, jen border) */

  #page-shop .subcat-tab {

    margin: 0 auto;

    background: transparent;

    border: 1px solid rgba(224,176,80,0.55);

    border-radius: 100px;

    padding: 7px 16px;

  }

  #page-shop .subcat-tab:active {

    background: rgba(224,176,80,0.06);

  }



  /* Hero — užší padding-top */

  #page-shop .category-hero { padding: 14px 4px 16px; }



  /* Toolbar — vzduch + divider nad ním */

  #page-shop .shop-toolbar {

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid var(--border);

  }



  /* ──── Chip-bar EXPANDED (grid 2 sloupce) ──── */

  #page-shop .mob-chip-bar.expanded {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    overflow: visible;

    padding: 12px 16px 14px;

  }

  #page-shop .mob-chip-bar.expanded .chip {

    white-space: normal;

    text-align: center;

    justify-content: center;

    padding: 10px 12px;

    min-height: 40px;

    font-size: 13px;

  }

  #page-shop .mob-chip-bar.expanded .filter-trigger {

    grid-column: span 2;

  }



  /* ──── Subcat-list EXPANDED (grid 2 sloupce, horizontální karty) ──── */

  #page-shop .subcat-list.expanded {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    overflow: visible;

    padding: 4px 0 14px;

  }

  #page-shop .subcat-list.expanded .subcat-item {

    width: auto;

    display: flex;

    align-items: center;

    gap: 10px;

    text-align: left;

    background: rgba(255,255,255,0.02);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 8px 10px;

  }

  #page-shop .subcat-list.expanded .subcat-item.active {

    border-color: var(--gold-dark);

    background: rgba(200,146,42,0.06);

  }

  #page-shop .subcat-list.expanded .subcat-img {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    margin-bottom: 0;

    border-radius: 10px;

  }

  #page-shop .subcat-list.expanded .subcat-placeholder { font-size: 22px; }

  #page-shop .subcat-list.expanded .subcat-item.all .subcat-placeholder { font-size: 14px; }

  #page-shop .subcat-list.expanded .subcat-label {

    text-align: left;

    flex: 1;

    min-width: 0;

  }

}



/* ═══════════════════════════════════════════════════════════

   Session #8 additions:

   - Square product image area + no crop (object-fit: contain)

   - Hide redundant "Doporučujeme" badge in home "Doporučené" section

   Session #22: object-fit změněno na cover (jednotná mřížka, žádné

   okraje kolem fotky) — viz handoff, rozhodnutí Petra po ukázce obou variant.

   Session #24: ZPĚT na contain, na výslovnou žádost — fotky (hlavně ty,

   co nejsou čtvercové, např. jantar na výšku) se v cover módu ořezávaly

   a nešlo je vidět celé bez rozkliknutí. Vědomé přepsání session #22.

═══════════════════════════════════════════════════════════ */



/* Card image: kontejner 4:3, fotka se vejde celá (bez ořezu).

   Session #36 (balík #80): dřív čtverec 1:1. Ostré fotky jantarů jsou hodně

   na šířku a nad i pod nimi zůstávaly velké tmavé pruhy; Petr vybral 4:3

   z ukázky tří variant. Fotka na výšku má pruhy po stranách. */

#page-shop .product-card .product-img-wrap,

#home-products-grid .product-card .product-img-wrap,

#home-new-products-grid .product-card .product-img-wrap {

  aspect-ratio: 4 / 3;

  height: auto;

  width: 100%;

  overflow: hidden;

  background: var(--cream-mid, #f5e8c8);

}

#page-shop .product-card .product-img,

#home-products-grid .product-card .product-img,

#home-new-products-grid .product-card .product-img {

  width: 100%;

  height: 100%;

  object-fit: contain;  /* celá fotka vždy vidět, u ne-čtvercových fotek jemný okraj */

  display: block;

}



/* Skrýt "Doporučujeme" pilulku na home v sekci Doporučené (název sekce stačí) */

#home-products-grid .badge-featured { display: none !important; }



/* ═══════════════════════════════════════════════════════════

   ZPRACOVÁNÍ VAŠICH KAMENŮ (contact-form.js) — přepracováno v session #34

   Stránka se vykreslí místo mřížky produktů. Rozvržení se řídí šířkou

   obsahu (container query „zk"), ne okna — vedle je postranní menu,

   takže šířka okna by lhala. Staré třídy .stone-proc-* ze session #24/#29

   (style.css) už nic nepoužívá kromě .stone-proc-grid-override.

═══════════════════════════════════════════════════════════ */

.stone-proc-grid-override { display: block !important; container: zk / inline-size; }

.zk {

  --zk-text: #b89c7c;      /* běžný text na tmavém */

  --zk-muted: #a3876a;     /* popisky — pořád kontrast ≥ 4,5 : 1 */

  --zk-line: rgba(200,170,120,0.14);

  max-width: 1180px; margin: 0 auto; padding: 8px 0 24px;

  color: var(--brown-dark); font-family: 'Jost', sans-serif;

}

/* .lang-en je jinak display:block — uvnitř vět a tlačítek musí zůstat v řádku */

.lang-active-en .zk span.lang-en { display: inline; }

.zk-cil { scroll-margin-top: 96px; }

.zk-nw { white-space: nowrap; }

.zk-sekce { margin-top: 88px; }

.zk-eyebrow { font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 12px; }

.zk-h2 { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--brown-dark); }

.zk-h2-s { font-size: 30px; }



/* tlačítka */

.zk-btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 12px;

  min-height: 54px; padding: 0 30px; border-radius: 6px; box-sizing: border-box;

  font: 500 13px 'Jost', sans-serif; letter-spacing: 0.2em; text-transform: uppercase;

  white-space: nowrap; cursor: pointer; text-decoration: none;

  transition: box-shadow .2s, background .2s, color .2s, transform .15s;

}

.zk-btn-gold { border: 0; background: linear-gradient(135deg, var(--gold), #b07d1f); color: #1a1208; box-shadow: 0 8px 22px rgba(200,146,42,0.28); }

.zk-btn-gold:hover { box-shadow: 0 10px 26px rgba(200,146,42,0.42); transform: translateY(-1px); }

.zk-btn-gold:disabled { opacity: 0.65; cursor: wait; transform: none; }

.zk-btn-line { border: 1px solid var(--gold); background: transparent; color: var(--gold-dark); }

.zk-btn-line:hover { background: rgba(200,146,42,0.08); color: #f0c870; }

.zk-odkaz { background: none; border: 0; padding: 8px 4px; color: var(--text-mid); font: 400 14px 'Jost', sans-serif; text-decoration: underline; cursor: pointer; }

.zk-odkaz:hover { color: var(--gold-dark); }

.zk-btn:focus-visible, .zk-seg:focus-visible, .zk-chip:focus-visible, .zk-odkaz:focus-visible,

.zk-faq summary:focus-visible, .zk-drop:focus-within, .zk-slot button:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }



/* úvod */

.zk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 32px 0 24px; }

.zk-title { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: clamp(40px, 5.4cqw, 62px); line-height: 1.02; color: var(--brown-dark); }

.zk-title em { font-style: italic; color: var(--gold-dark); }

.zk-rule { width: 56px; height: 1px; background: var(--gold); margin: 28px 0 26px; }

.zk-lead { margin: 0; max-width: 540px; font-size: 16.5px; line-height: 1.75; font-weight: 300; color: var(--text-mid); }

.zk-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.zk-vyhody { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; font-size: 13px; color: var(--zk-text); }

.zk-vyhody li { display: flex; align-items: center; gap: 8px; }

.zk-vyhody svg { color: var(--gold-dark); flex-shrink: 0; }

.zk-hero-art { display: flex; justify-content: center; background: radial-gradient(closest-side, rgba(200,146,42,0.1), transparent); }

.zk-hero-art img { width: 100%; max-width: 560px; height: auto; display: block; }



/* služby */

.zk-sluzby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }

.zk-sluzba { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 10px; border: 1px solid rgba(200,146,42,0.18); background: linear-gradient(160deg, #1d150b, #140e07); }

.zk-sluzba-ikona { color: #d6a345; line-height: 0; }

.zk-sluzba h3 { margin: 22px 0 10px; font-family: 'EB Garamond', serif; font-weight: 500; font-size: 27px; color: var(--brown-dark); }

.zk-sluzba p { margin: 0; flex-grow: 1; font-size: 14px; line-height: 1.7; color: var(--zk-text); }

.zk-cena { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--zk-line); }

.zk-cena strong { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 42px; line-height: 1; color: var(--gold-dark); }

.zk-cena > span { font-size: 13px; color: var(--zk-muted); }



/* kalkulačka */

.zk-kalk { display: grid; grid-template-columns: 290px minmax(0, 1fr) 270px; margin-top: 28px; border-radius: 10px; border: 1px solid var(--zk-line); background: #16100a; overflow: hidden; }

.zk-kalk-uvod { padding: 34px 32px; border-right: 1px solid rgba(200,170,120,0.1); }

.zk-kalk-uvod p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--zk-muted); }

.zk-kalk-ovl { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }

.zk-segs { display: flex; gap: 4px; max-width: 400px; padding: 4px; border-radius: 8px; background: #0e0a05; border: 1px solid var(--zk-line); }

.zk-seg { flex: 1; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--zk-muted); font: 500 13px 'Jost', sans-serif; letter-spacing: 0.03em; cursor: pointer; transition: background .15s, color .15s; }

.zk-seg:hover { color: var(--brown-dark); }

.zk-seg.on { background: var(--gold); color: #1a1208; }

.zk-rozmery { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }

.zk-rozmery label { display: flex; flex-direction: column; }

.zk-krat { padding-bottom: 12px; font-size: 22px; color: #6f5c48; }

.zk-kalk-vysl { padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, rgba(200,146,42,0.14), rgba(200,146,42,0.04)); }

#zk-vypocet { font-size: 13px; color: var(--zk-text); }

#zk-cena { margin-top: 6px; font-family: 'EB Garamond', serif; font-size: 52px; line-height: 1.1; color: #f0c870; white-space: nowrap; }

#zk-cena.dlouha { font-size: 38px; }

#zk-cena.dlouha2 { font-size: 30px; }

.zk-kalk-vysl small { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--zk-muted); }



/* pole formuláře */

.zk-lbl { display: block; margin-bottom: 9px; font: 500 10.5px 'Jost', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zk-muted); }

.zk-lbl i { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: #8a7260; }

.zk-fld {

  width: 100%; min-height: 50px; box-sizing: border-box; padding: 0 15px;

  background: #0e0a05; border: 1px solid rgba(200,170,120,0.2); border-radius: 6px;

  color: var(--brown-dark); font: 400 15px 'Jost', sans-serif; outline: none;

  transition: border-color .15s, box-shadow .15s;

}

.zk-fld:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,42,0.16); }

.zk-fld::placeholder { color: #76624c; }

textarea.zk-fld { min-height: 128px; padding: 13px 15px; line-height: 1.55; resize: vertical; }

.zk-num { width: 92px; text-align: center; font-size: 18px; }

.zk-form.zkouseno .zk-fld:invalid { border-color: #d4705a; }

/* kameny v poptávce (víc najednou) */

.zk-kameny { display: flex; flex-direction: column; gap: 18px; }

.zk-kamen { display: flex; flex-direction: column; gap: 22px; padding: 24px 24px 22px; border-radius: 10px; border: 1px solid rgba(200,146,42,0.2); background: rgba(14,10,5,0.35); scroll-margin-top: 96px; transition: border-color .2s; }

.zk-kamen.chyba { border-color: rgba(212,112,90,0.7); }

.zk-kamen-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.zk-kamen-c { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 24px; color: var(--brown-dark); }

.zk-kamen-x { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--zk-muted); font: 400 13px 'Jost', sans-serif; cursor: pointer; }

.zk-kamen-x:hover { color: #e08a74; background: rgba(192,80,64,0.08); }

.zk-kamen-x[hidden], .zk-pridat[hidden] { display: none; }

.zk-kamen-chyba { margin: 0; padding: 10px 14px; border-radius: 6px; background: rgba(192,80,64,0.12); border: 1px solid rgba(212,112,90,0.45); color: #e08a74; font-size: 13.5px; line-height: 1.5; }

.zk-rozm3 { display: flex; align-items: flex-end; gap: 12px; }

.zk-rozm3 label { display: flex; flex-direction: column; flex: 1; max-width: 150px; }

.zk-rozm3 .zk-num { width: 100%; }

.zk-rozm3 .zk-lbl { letter-spacing: 0.1em; }

.zk-napoveda { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #8a7260; }

.zk-pridat {

  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px;

  border: 1.5px dashed rgba(200,146,42,0.5); border-radius: 10px; background: transparent;

  color: var(--gold-dark); font: 500 13px 'Jost', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;

  cursor: pointer; transition: background .15s, border-color .15s;

}

.zk-pridat:hover { background: rgba(200,146,42,0.07); border-color: var(--gold); }

.zk-pridat:focus-visible, .zk-kamen-x:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.zk-udaje { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }

.zk-h3 { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 24px; color: var(--brown-dark); }

.zk-poznamka textarea.zk-fld { min-height: 90px; }

.zk-souhrn dd span { font-size: 13px; color: var(--zk-muted); }

.zk-souhrn-sloupce { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }





/* postup */

.zk-kroky { position: relative; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }

.zk-kroky::before { content: ''; position: absolute; left: 30px; right: 30px; top: 29px; height: 1px; background: linear-gradient(90deg, rgba(200,146,42,0.6), rgba(200,146,42,0.15)); }

.zk-krok { position: relative; display: flex; flex-direction: column; gap: 14px; }

.zk-krok-c { width: 58px; height: 58px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--gold); background: var(--cream); display: flex; align-items: center; justify-content: center; font-family: 'EB Garamond', serif; font-size: 28px; color: var(--gold-dark); }

.zk-krok h3 { margin: 8px 0 0; font-family: 'EB Garamond', serif; font-weight: 500; font-size: 22px; color: var(--brown-dark); }

.zk-krok p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--zk-text); }



/* poptávka + boční panel */

.zk-form-sekce { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }

.zk-karta-form { position: relative; padding: 44px 44px 40px; border-radius: 12px; border: 1px solid rgba(200,146,42,0.24); background: linear-gradient(160deg, #20170b 0%, #150f08 100%); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }

.zk-karta-form::before { content: ''; position: absolute; top: 0; left: 44px; right: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.zk-form { display: flex; flex-direction: column; gap: 26px; }

.zk-form-hlava p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--zk-muted); }

.zk-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.zk-chip {

  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;

  border-radius: 8px; border: 1px solid rgba(200,170,120,0.2); background: rgba(255,240,210,0.015);

  color: var(--text-mid); font: 500 14px 'Jost', sans-serif; text-align: left; cursor: pointer;

  transition: border-color .15s, background .15s, color .15s;

}

.zk-chip:hover { border-color: rgba(200,146,42,0.55); color: var(--brown-dark); }

.zk-chip.on { border-color: var(--gold); background: rgba(200,146,42,0.11); color: var(--brown-dark); }

.zk-chip svg { flex-shrink: 0; }

.zk-ck { margin-left: auto; width: 20px; height: 20px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(200,170,120,0.35); display: flex; align-items: center; justify-content: center; color: transparent; }

.zk-chip.on .zk-ck { background: var(--gold); border-color: var(--gold); color: #1a1208; }

.zk-pole2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }

.zk-fotky { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 124px); gap: 12px; }

.zk-drop {

  position: relative; min-height: 124px; box-sizing: border-box; padding: 12px 16px;

  border: 1.5px dashed rgba(200,146,42,0.45); border-radius: 10px; background: rgba(200,146,42,0.04);

  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;

  text-align: center; cursor: pointer; color: var(--text-mid); font-size: 14px;

  transition: border-color .15s, background .15s;

}

.zk-drop:hover, .zk-drop.nad { border-color: var(--gold); background: rgba(200,146,42,0.09); }

.zk-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.zk-drop svg { color: var(--gold-dark); }

.zk-drop u { color: var(--gold-dark); }

.zk-drop small { font-size: 12px; color: #8a7260; }

.zk-slot { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--zk-line); background: #0e0a05; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: 'EB Garamond', serif; font-size: 26px; color: #50402e; }

.zk-slot.ma-fotku { border-color: rgba(200,146,42,0.5); }

.zk-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zk-slot button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(14,10,5,0.85); color: #f0e2c8; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.zk-slot button:hover { background: #1a1208; color: var(--gold-dark); }

.zk-fotky-msg { margin: 10px 0 0; font-size: 13px; color: #e08a74; }

.zk-msg { padding: 12px 16px; border-radius: 6px; font-size: 13.5px; line-height: 1.5; }

.zk-msg.chyba { background: rgba(192,80,64,0.12); color: #e08a74; border: 1px solid rgba(212,112,90,0.5); }

.zk-odeslat { display: flex; align-items: center; gap: 24px; padding-top: 6px; }

.zk-odeslat .zk-btn { padding: 0 40px; }

.zk-odeslat p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #8a7260; }

.zk-odeslat a { color: var(--text-mid); }



.zk-bok { display: flex; flex-direction: column; gap: 20px; }

.zk-karta { padding: 30px 28px; border-radius: 12px; border: 1px solid var(--zk-line); background: #16100a; }

.zk-karta h3 { margin: 0 0 6px; font-family: 'EB Garamond', serif; font-weight: 500; font-size: 24px; color: var(--brown-dark); }

.zk-karta > p { margin: 0 0 20px; font-size: 13px; line-height: 1.55; color: #8a7260; }

.zk-tipy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }

.zk-tipy li { display: flex; gap: 14px; font-size: 13px; line-height: 1.55; color: var(--zk-muted); }

.zk-tipy svg { color: var(--gold-dark); flex-shrink: 0; }

.zk-tipy b { display: block; margin-bottom: 3px; font-weight: 400; font-size: 14.5px; color: var(--brown-dark); }

.zk-kontakt { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }

.zk-kontakt a { display: flex; align-items: center; gap: 12px; color: var(--brown-dark); text-decoration: none; overflow-wrap: anywhere; }

.zk-kontakt a svg { color: var(--gold-dark); flex-shrink: 0; }

.zk-kontakt a:hover { color: var(--gold-dark); }

.zk-kontakt a.wa, .zk-kontakt a.wa svg { color: var(--sage-dark); }

.zk-adresa { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(200,170,120,0.12); font-size: 13px; line-height: 1.55; color: var(--zk-muted); }

.zk-adresa svg { flex-shrink: 0; margin-top: 1px; color: var(--zk-muted); }

.zk-adresa strong { display: block; margin-top: 8px; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--brown-dark); }



/* časté otázky */

.zk-faq-sekce { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 64px; align-items: start; }

.zk-faq-sekce > div:first-child > p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--zk-muted); }

.zk-faq { border-top: 1px solid var(--zk-line); }

.zk-faq details { border-bottom: 1px solid var(--zk-line); }

.zk-faq summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font-family: 'EB Garamond', serif; font-size: 21px; color: var(--brown-dark); }

.zk-faq summary::-webkit-details-marker { display: none; }

.zk-faq summary:hover { color: var(--gold-dark); }

.zk-faq summary svg { margin-left: auto; flex-shrink: 0; color: var(--gold); transition: transform .2s; }

.zk-faq details[open] summary svg { transform: rotate(45deg); }

.zk-faq details p { margin: -6px 0 24px; max-width: 640px; font-size: 14.5px; line-height: 1.75; color: var(--zk-text); }



/* po odeslání */

.zk-hotovo { display: flex; flex-direction: column; align-items: center; text-align: center; }

.zk-hotovo:focus { outline: none; }

.zk-hotovo-art { width: 220px; height: auto; margin-bottom: 14px; }

.zk-hotovo .zk-h2 em { font-style: italic; color: var(--gold-dark); }

.zk-hotovo > p { margin: 16px 0 0; max-width: 560px; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--text-mid); }

.zk-hotovo > p strong { font-weight: 400; color: var(--brown-dark); overflow-wrap: anywhere; }

.zk-mini-kroky { position: relative; list-style: none; width: 100%; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.zk-mini-kroky::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 1px; background: rgba(200,146,42,0.3); }

.zk-mini-kroky li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--zk-muted); }

.zk-mini-kroky .c { width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(200,146,42,0.45); background: #1c150a; display: flex; align-items: center; justify-content: center; font-family: 'EB Garamond', serif; font-size: 21px; color: var(--zk-muted); }

.zk-mini-kroky li.hotovo { color: var(--brown-dark); }

.zk-mini-kroky li.hotovo .c { background: var(--gold); border-color: var(--gold); color: #1a1208; }

.zk-mini-kroky li.dalsi .c { border-color: var(--gold); color: var(--gold-dark); }

.zk-souhrn { width: 100%; box-sizing: border-box; margin: 30px 0 0; padding: 20px 26px; border-radius: 10px; border: 1px solid var(--zk-line); background: rgba(14,10,5,0.5); display: flex; flex-wrap: wrap; gap: 16px 36px; text-align: left; }

.zk-souhrn dt { margin-bottom: 6px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zk-muted); }

.zk-souhrn dd { margin: 0; font-size: 15px; color: var(--brown-dark); }

.zk-hotovo-akce { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 32px; }



/* ── užší obsah ── */

@container zk (max-width: 1080px) {

  .zk-form-sekce { grid-template-columns: minmax(0, 1fr); }

  .zk-bok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  .zk-kalk { grid-template-columns: minmax(0, 1fr) 260px; }

  .zk-kalk-uvod { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(200,170,120,0.1); padding-bottom: 24px; }

  .zk-faq-sekce { grid-template-columns: minmax(0, 1fr); gap: 20px; }

}

@container zk (max-width: 860px) {

  .zk-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }

  .zk-hero-art { order: -1; }

  .zk-hero-art img { max-width: 420px; margin-bottom: -12px; }

  .zk-sluzby { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .zk-sluzba { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 22px 22px 20px; }

  .zk-sluzba-ikona svg { width: 50px; height: 50px; }

  .zk-sluzba h3 { margin: 0; font-size: 25px; }

  .zk-sluzba p { grid-column: 1 / -1; margin-top: 14px; }

  .zk-sluzba .zk-cena { grid-row: 1; grid-column: 3; margin: 0; padding: 0; border: 0; align-items: flex-end; text-align: right; gap: 4px; }

  .zk-sluzba .zk-cena strong { font-size: 30px; }

  .zk-sluzba .zk-cena > span { font-size: 11.5px; }

  .zk-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }

  .zk-kroky::before { display: none; }

  .zk-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .zk-karta-form { padding: 34px 28px 30px; }

  .zk-karta-form::before { left: 28px; right: 28px; }

}

@container zk (max-width: 600px) {

  .zk-sekce { margin-top: 56px; }

  .zk-h2 { font-size: 32px; }

  .zk-h2-s { font-size: 28px; }

  .zk-lead { font-size: 15.5px; }

  .zk-cta .zk-btn { flex: 1 1 100%; }

  .zk-kalk { grid-template-columns: minmax(0, 1fr); }

  .zk-kalk-uvod { padding: 24px 20px 20px; }

  .zk-kalk-ovl { padding: 20px; }

  .zk-segs { max-width: none; }

  .zk-rozmery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  .zk-krat { display: none; }

  .zk-num { width: 100%; }

  .zk-kalk-vysl { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 18px 20px; }

  #zk-cena { margin: 0; font-size: 40px; }

  .zk-kalk-vysl small { flex-basis: 100%; margin-top: 4px; }

  .zk-kroky { grid-template-columns: minmax(0, 1fr); row-gap: 26px; margin-top: 28px; }

  .zk-kroky::before { display: block; left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(200,146,42,0.6), rgba(200,146,42,0.15)); }

  .zk-krok { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }

  .zk-krok-c { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 22px; }

  .zk-krok h3 { margin: 8px 0 0; font-size: 21px; }

  .zk-karta-form { padding: 28px 18px 24px; }

  .zk-karta-form::before { left: 18px; right: 18px; }

  .zk-kamen { padding: 18px 14px 16px; gap: 18px; }

  .zk-rozm3 { gap: 8px; }

  .zk-rozm3 .zk-krat { display: none; }

  .zk-rozm3 label { max-width: none; }

  .zk-pole2 { grid-template-columns: minmax(0, 1fr); }

  .zk-fotky { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .zk-drop { grid-column: 1 / -1; min-height: 108px; }

  .zk-odeslat { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }

  .zk-odeslat .zk-btn { width: 100%; padding: 0 20px; }

  .zk-bok { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .zk-karta { padding: 24px 20px; }

  .zk-faq summary { padding: 18px 0; font-size: 19px; }

  .zk-mini-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }

  .zk-mini-kroky::before { display: none; }

  .zk-souhrn { padding: 18px; }

}

@media (prefers-reduced-motion: reduce) {

  .zk-btn, .zk-chip, .zk-seg, .zk-faq summary svg { transition: none; }

  .zk-btn-gold:hover { transform: none; }

}

/* ═══════════════════════════════════════════════════════════

   FOTKY PODKATEGORIÍ: zobrazení celé fotky (session #29, upraveno #31)



   Historie: contain je nastavené u .subcat-img img výš v tomhle souboru

   (ř. ~118) od session #24, ale fotky se PŘESTO zobrazovaly oříznuté.

   Zdroj přepisu se tehdy nepodařilo najít, takže session #29 přidala

   tenhle blok s !important jako poslední slovo v kaskádě.



   Session #30 příčinu našla: admin-redesign.css byla stará kopie

   TOHOHLE souboru, načítala se po něm a se stejnou specificitou vracela

   object-fit na cover. Je odebraná z index.php, takže obcházka nemá co

   obcházet a session #31 !important odstranila.



   POZOR při dalším úklidu: selektor .subcat-card img se v celém souboru

   vyskytuje JEN tady. Kdyby se blok smazal celý, spadl by na výchozí

   object-fit: fill a fotky v těch kartách by se roztáhly. Zbylé dva

   selektory pokrývá řádek ~118, ten třetí ne.



   Pozn.: fotky podkategorií jsou široké (např. myanmar.png 600×227)

   a rámeček je čtvercový, takže se celá fotka zobrazí jako pruh

   uprostřed s prázdným místem nahoře/dole. To je správné chování

   contain — celá fotka viditelná, nic uříznutého.

═══════════════════════════════════════════════════════════ */

#page-shop .subcat-img img,

#page-shop .subcat-list.expanded .subcat-img img,

.subcat-card img {

  object-fit: contain;

}



/* ═══════════════════════════════════════════════════════════

   Session #29 — ZTÍŽENÍ STAHOVÁNÍ FOTEK

   

   -webkit-touch-callout vypne iOS menu po podržení prstu ("Uložit

   do Fotek", "Sdílet"…), user-select + draggable brání označení

   a přetažení fotky na desktopu.

   

   DŮLEŽITÉ: tohle jsou jen překážky pro běžného uživatele, NE

   ochrana. Kdokoli si fotku pořád stáhne přes devtools, přímou URL

   nebo screenshot — technicky to jinak nejde, prohlížeč obrázek

   musí stáhnout, aby ho mohl zobrazit. Skutečná ochrana by byla

   viditelný vodoznak přes fotku.

═══════════════════════════════════════════════════════════ */

#page-shop .subcat-img img,

#page-shop .product-img,

#home-products-grid .product-img,

#home-new-products-grid .product-img,

#home-categories-grid img,

.category-card-bg,

.product-detail-main-img,

.pd-thumb img {

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  user-select: none;

  -webkit-user-drag: none;

  pointer-events: auto;

}

/* ═══════════════════════════════════════════════════════════

   Session #31 — scrollbar postranního panelu kategorií



   Globální pravidlo ve style.css má width: 6px. To je na trefení

   myší málo, obzvlášť u panelu vysokého přes celou obrazovku.



   Rozšiřuje se ale ZVLÁŠŤ jen tady, ne globálně: hlavní scrollbar

   stránky je vidět pořád a všude, takže jeho ztloustnutí by změnilo

   vzhled celého webu — a o to nešlo.



   Trik s průhledným rámečkem: plocha, kterou lze chytit, je 14 px,

   ale viditelný jezdec zůstává útlý (14 − 2×3 = 8 px). Kurzor tedy

   nemusí trefit tenkou čárku, přitom panel nezhrubne.

   background-clip: padding-box je k tomu nutné — bez něj by se

   pozadí vykreslilo i pod rámeček a jezdec by byl celých 14 px.

═══════════════════════════════════════════════════════════ */

#page-shop .shop-sidebar::-webkit-scrollbar {

  width: 14px;

}

#page-shop .shop-sidebar::-webkit-scrollbar-track {

  background: #1e1608;

}

#page-shop .shop-sidebar::-webkit-scrollbar-thumb {

  background: var(--gold);

  background-clip: padding-box;

  border: 3px solid transparent;

  border-radius: 7px;

  /* Při 16 kategoriích je jezdec krátký; bez tohohle se z něj stane

     útržek o pár pixelech, který se chytá hůř než úzký pruh. */

  min-height: 48px;

}

#page-shop .shop-sidebar::-webkit-scrollbar-thumb:hover {

  background: #e0b050;

  background-clip: padding-box;

}



/* Firefox nezná ::-webkit-* a šířku v pixelech nastavit neumí — má jen

   thin / auto / none. `auto` je jeho standardní, tedy širší varianta. */

#page-shop .shop-sidebar {

  scrollbar-width: auto;

  scrollbar-color: var(--gold) #1e1608;

}



/* ═══════════════════════════════════════════════════════════

   Session #31 — mkConfirm(): potvrzovací dialog



   Nahrazuje nativní confirm(). Ten vypadá podle výrobce prohlížeče

   a na mobilech ho některé prohlížeče v určitých situacích potlačí,

   takže kód pokračoval, jako by uživatel odsouhlasil.



   Mobil má tlačítka pod sebou a přes celou šířku — vedle sebe jsou

   na úzké obrazovce malá a „Potvrdit" se snadno trefí omylem.

   Ničivá akce je dole, aby palec nesahal jako první na ni.

═══════════════════════════════════════════════════════════ */

.mk-confirm-ov{

  position:fixed; inset:0; z-index:10050;

  background:rgba(10,7,3,0.72);

  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);

  display:flex; align-items:center; justify-content:center;

  padding:20px;

  opacity:0; transition:opacity .16s ease;

}

.mk-confirm-ov.open{opacity:1}

.mk-confirm{

  background:#1a1208;

  border:1px solid rgba(200,170,120,0.25);

  border-radius:12px;

  padding:26px 24px 20px;

  width:100%; max-width:380px;

  text-align:center;

  box-shadow:0 20px 60px rgba(0,0,0,0.55);

  transform:translateY(8px) scale(0.98);

  transition:transform .16s ease;

}

.mk-confirm-ov.open .mk-confirm{transform:none}

.mk-confirm-icon{

  width:52px; height:52px; margin:0 auto 14px;

  border-radius:50%;

  border:2px solid #c8922a; color:#c8922a;

  font-family:'EB Garamond',Georgia,serif;

  font-size:28px; font-weight:600;

  display:flex; align-items:center; justify-content:center;

}

.mk-confirm-icon.danger{border-color:#c05040; color:#c05040}

.mk-confirm-title{

  font-family:'EB Garamond',Georgia,serif;

  font-size:21px; color:#f0e2c8; line-height:1.3; margin-bottom:6px;

}

.mk-confirm-text{

  font-family:'Jost',sans-serif;

  font-size:13px; color:#a88060; line-height:1.55; margin-bottom:4px;

}

.mk-confirm-acts{

  display:flex; gap:10px; justify-content:center; margin-top:20px;

}

.mk-confirm-btn{

  font-family:'Jost',sans-serif;

  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;

  padding:11px 22px; border-radius:6px; cursor:pointer;

  border:1px solid #c8922a; background:#c8922a; color:#1a1208;

  min-width:120px;

}

.mk-confirm-btn:hover{background:#e0b050; border-color:#e0b050}

.mk-confirm-btn.ghost{

  background:transparent; color:#c8a880;

  border-color:rgba(200,170,120,0.3);

}

.mk-confirm-btn.ghost:hover{color:#f0e2c8; border-color:rgba(200,170,120,0.55)}

.mk-confirm-btn.danger{background:#c05040; border-color:#c05040; color:#fff}

.mk-confirm-btn.danger:hover{background:#d4705a; border-color:#d4705a}

.mk-confirm-btn:focus-visible{outline:2px solid #e0b050; outline-offset:2px}



@media (max-width:520px){

  .mk-confirm{padding:22px 18px 18px}

  .mk-confirm-acts{flex-direction:column-reverse; gap:8px}

  .mk-confirm-btn{width:100%; padding:13px; font-size:13px}

}



/* ═══════════════════════════════════════════════════════════

   KOŠÍK (#page-cart) — session #31, třetí návrh



   Předchozí verze byly dvousloupcové: úzký seznam vlevo, souhrn

   vpravo. Při dvou položkách zůstala stránka ze čtyř pětin prázdná

   a působila rozestřeně. Zadavatel jako vzor uvedl Alzu a Peltram —

   plná šířka, položky jako řádky tabulky, souhrn a tlačítka dole.



   Zůstává tmavá zlatá paleta a Cormorant na jménech a částkách,

   takže si to drží charakter obchodu s minerály; mění se jen

   rozvržení, ne styl.



   POZOR na dědičnost: .cart-items a .cart-item ve style.css vznikly

   pro vysouvací panel. Řádky proto mají vlastní třídu .cart-row —

   čistší než přebíjet cizí vlastnosti po jedné.

═══════════════════════════════════════════════════════════ */



.cart-page-wrap{

  max-width:1180px; margin:0 auto;

  padding:36px 24px 72px;

  min-height:calc(100vh - 300px);

}



/* ── Krokovník ─────────────────────────────────────────────── */

.mk-steps{

  display:flex; align-items:center; gap:14px;

  margin-bottom:26px; flex-wrap:wrap;

}

.mk-step{

  display:inline-flex; align-items:center; gap:10px;

  background:none; border:none; padding:0;

  font-family:'Jost',sans-serif; font-size:14px;

}

.mk-step-num{

  width:26px; height:26px; border-radius:50%;

  display:inline-flex; align-items:center; justify-content:center;

  font-size:12px; font-weight:500; flex-shrink:0;

  border:1px solid rgba(200,170,120,0.35); color:#8a7260;

}

.mk-step.is-now .mk-step-num{background:#c8922a; border-color:#c8922a; color:#1a1208}

.mk-step.is-now .mk-step-lab{color:#f0e2c8}

.mk-step.is-done{cursor:pointer}

.mk-step.is-done .mk-step-num{border-color:#96b878; color:#96b878}

.mk-step.is-done .mk-step-lab{color:#c8a880}

.mk-step.is-done:hover .mk-step-lab{color:#f0e2c8}

.mk-step.is-next .mk-step-lab{color:#6b5540}

.mk-step-lab{color:#8a7260}

.mk-step-line{

  flex:1 1 40px; max-width:90px; height:1px;

  background:rgba(200,170,120,0.2);

}



/* ── Panel ─────────────────────────────────────────────────── */

.cart-panel{

  background:#150e07;

  border:1px solid rgba(200,170,120,0.14);

  border-radius:10px;

  overflow:hidden;

}

.cart-panel-head{

  display:flex; align-items:center; justify-content:space-between;

  gap:16px; padding:22px 26px 18px;

  border-bottom:1px solid rgba(200,170,120,0.12);

}

.cart-page-title{

  font-family:'EB Garamond',Georgia,serif;

  font-weight:400; font-size:30px; line-height:1;

  color:var(--text, #f0e2c8); margin:0;

}

/* Session #31: byl to podtržený text, který vedle vážného nadpisu působil

   jako nedodělek. Teď malé tlačítko s ikonou koše — čitelné jako akce,

   ale tiché, aby nekonkurovalo tlačítku Pokračovat. Červená až na hover:

   ničivá akce se má hlásit, když na ni člověk míří, ne pořád. */

.cart-clear{

  display:inline-flex; align-items:center; gap:7px;

  background:none; cursor:pointer;

  border:1px solid rgba(200,170,120,0.22); border-radius:4px;

  padding:8px 13px;

  font-family:'Jost',sans-serif; font-size:12px; color:#8a7260;

  letter-spacing:0.03em;

  transition:color .15s, border-color .15s, background .15s;

}

.cart-clear svg{opacity:0.8}

.cart-clear:hover{

  color:#d4705a; border-color:rgba(192,80,64,0.45);

  background:rgba(192,80,64,0.07);

}

.cart-clear:hover svg{opacity:1}



#page-cart .cart-items{display:block; padding:0; gap:0; overflow:visible; flex:none}



/* ── Řádek položky ─────────────────────────────────────────── */

.cart-row{

  display:grid;

  grid-template-columns:76px minmax(0,1fr) 110px 130px 40px;

  gap:18px; align-items:center;

  padding:18px 26px;

  border-bottom:1px solid rgba(200,170,120,0.08);

}

.cart-row:last-of-type{border-bottom:none}

.cart-row.is-gone{opacity:0.6}



.cart-row-img{

  width:76px; height:76px; padding:0; overflow:hidden; cursor:pointer;

  background:#221608; border:1px solid rgba(200,170,120,0.16);

  border-radius:4px; display:block;

}

.cart-row-img img{width:100%; height:100%; object-fit:contain; display:block}

.cart-row.is-gone .cart-row-img img{filter:grayscale(1)}

.cart-row-img:hover{border-color:rgba(224,176,80,0.5)}

.cart-row-noimg{

  display:flex; align-items:center; justify-content:center;

  width:100%; height:100%; font-size:26px; opacity:0.4;

}



.cart-row-main{min-width:0}

.cart-row-name{

  display:block; text-align:left; padding:0;

  background:none; border:none; cursor:pointer;

  font-family:'EB Garamond',Georgia,serif;

  font-size:20px; line-height:1.25; color:var(--text, #f0e2c8);

}

.cart-row-name:hover{color:#e0b050}

.cart-row.is-gone .cart-row-name{text-decoration:line-through}

.cart-row-code{font-size:11px; color:#6b5540; margin-top:3px; letter-spacing:0.04em}

/* Údaje s popiskou: název ztlumený, hodnota světlejší. Bez toho to byla

   jen řada čísel vedle sebe a vypadalo to jako vypsané sloupce z databáze. */

.cart-row-meta{

  display:flex; flex-wrap:wrap; gap:6px 22px;

  margin-top:8px; font-size:12px;

}

.cart-row-fact{color:#c8a880; white-space:nowrap}

.cart-row-fact i{

  display:block; font-style:normal;

  font-size:10px; letter-spacing:0.06em;

  color:#6b5540; margin-bottom:1px;

}

.cart-row-perk{margin-top:6px; font-size:12px; color:#96b878}

.cart-row-note{margin-top:6px; font-size:12px; color:#c05040; line-height:1.45}



.cart-row-stav{font-size:12.5px; text-align:center}

.cart-row-stav.is-ok{color:#96b878}

.cart-row-stav.is-sold{color:#c05040}



.cart-row-price{

  font-family:'EB Garamond',Georgia,serif;

  font-size:22px; color:#e0b050; text-align:right; white-space:nowrap;

}

.cart-row-price-eur{

  display:block; font-family:'Jost',sans-serif;

  font-size:11px; color:#6b5540; margin-top:2px;

}

.cart-row-del{

  background:none; border:none; cursor:pointer;

  font-size:16px; color:#6b5540; padding:6px; line-height:1;

  justify-self:center; border-radius:4px;

}

.cart-row-del:hover{color:#c05040; background:rgba(192,80,64,0.08)}



/* ── Poznámka a patka panelu ───────────────────────────────── */

.cart-reserve-note{

  padding:16px 26px;

  border-top:1px solid rgba(200,170,120,0.12);

  font-size:12.5px; line-height:1.6; color:#8a7260; max-width:70ch;

}

.cart-foot{

  display:flex; align-items:flex-end; justify-content:space-between;

  gap:24px; padding:22px 26px 24px;

  border-top:1px solid rgba(200,170,120,0.12);

  background:#100b06;

}

.cart-page-back{

  background:none; border:1px solid rgba(200,170,120,0.25);

  border-radius:4px; padding:12px 20px; cursor:pointer;

  font-family:'Jost',sans-serif; font-size:12px; color:#c8a880;

  letter-spacing:0.06em;

}

.cart-page-back:hover{border-color:rgba(200,170,120,0.5); color:#f0e2c8}

.cart-foot-sum{

  display:flex; flex-direction:column; align-items:flex-end;

  gap:6px; min-width:260px;

}

.cart-foot-sum .cart-total-row{

  display:flex; align-items:baseline; gap:18px; padding:0;

}

.cart-total-label{font-family:'Jost',sans-serif; font-size:13px; color:#a88060; text-transform:none; letter-spacing:0}

.cart-total-price{

  font-family:'EB Garamond',Georgia,serif;

  font-size:30px; line-height:1; color:var(--text, #f0e2c8);

}

.cart-summary-note{font-size:11.5px; color:#6b5540; margin:0 0 8px; text-align:right}

.cart-foot-sum .btn-checkout{

  background:#c8922a; color:#1a1208; border:none; border-radius:4px;

  padding:14px 34px; cursor:pointer;

  font-family:'Jost',sans-serif; font-size:12px; font-weight:500;

  letter-spacing:0.14em; text-transform:uppercase;

}

.cart-foot-sum .btn-checkout:hover{background:#e0b050}



/* ── Prázdný košík ─────────────────────────────────────────── */

#page-cart .cart-empty{display:block; padding:56px 26px 64px; text-align:left}

#page-cart .cart-empty-icon{display:none}

#page-cart .cart-empty-text{

  font-family:'EB Garamond',Georgia,serif;

  font-size:24px; color:var(--text, #f0e2c8); margin-bottom:8px;

}

#page-cart .cart-empty-sub{font-size:13px; color:#8a7260; margin-bottom:22px; max-width:48ch; line-height:1.6}

#page-cart .cart-empty .btn-checkout{

  background:#c8922a; color:#1a1208; border:none; border-radius:4px;

  padding:13px 26px; font-family:'Jost',sans-serif; font-size:12px;

  letter-spacing:0.13em; text-transform:uppercase; cursor:pointer;

}



/* ── Krokovník na úzké obrazovce ───────────────────────────────

   Popisky všech tří kroků se na mobil nevejdou a krokovník se zalomil

   do dvou řádků — v košíku i na pokladně, jen se to projevilo až tam,

   protože .checkout-layout má jiné vnitřní odsazení. Řešení: mimo

   aktivní krok zůstanou jen čísla. Kde jsem, tam se dočtu; kam mířím,

   to poznám z čísla. Držet tři dlouhé popisky na 360 px nejde. */

@media (max-width:640px){

  .mk-steps{gap:8px; flex-wrap:nowrap}

  .mk-step-lab{display:none}

  .mk-step.is-now .mk-step-lab{display:inline; font-size:12.5px}

  .mk-step-line{flex:1 1 auto; max-width:none; min-width:12px}

  .mk-step-num{width:24px; height:24px; font-size:11px}

}



@media (max-width:900px){

  .cart-page-wrap{padding:22px 14px 48px; min-height:0}

  .cart-panel-head{padding:18px 16px 14px}

  .cart-page-title{font-size:24px}

  .cart-row{

    grid-template-columns:64px minmax(0,1fr) 32px;

    grid-template-areas:"img main del" "img stav stav" "price price price";

    gap:12px 14px; padding:16px;

  }

  .cart-row-img{grid-area:img; width:64px; height:64px; align-self:start}

  .cart-row-main{grid-area:main}

  .cart-row-stav{grid-area:stav; text-align:left; font-size:12px}

  .cart-row-price{grid-area:price; text-align:left; font-size:20px}

  .cart-row-price-eur{display:inline; margin-left:8px}

  .cart-row-del{grid-area:del; align-self:start}

  .cart-reserve-note{padding:14px 16px}

  .cart-foot{flex-direction:column-reverse; align-items:stretch; gap:14px; padding:18px 16px}

  .cart-foot-sum{align-items:stretch; min-width:0}

  .cart-foot-sum .cart-total-row{justify-content:space-between}

  .cart-summary-note{text-align:left}

  .cart-foot-sum .btn-checkout{width:100%; padding:15px}

  .cart-page-back{width:100%; padding:13px}

}

/* Orientační eurová částka pod celkovým součtem (košík i pokladna).

   Skrytá zůstává, dokud renderEurHint() nedostane použitelný kurz. */

.mk-eur-hint {

  text-align: right;

  margin-top: 4px;

  font-size: 12px;

  color: var(--stone);

  letter-spacing: 0.01em;

}



/* Ikony v info kartách (kontakt, o nás). Session #33 — nahradily emoji,

   která se kreslila systémovým barevným písmem (růžová špendlík, modrá

   obálka) a do zlatohnědé palety nesedla. Jednobarevná kresba dědí barvu

   z currentColor, takže stačí změnit --gold a změní se i ikony. */

.mk-ico {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--gold);

  line-height: 0;

}

.info-card .mk-ico { opacity: 0.9; }



/* Ikony Tabler uvnitř textu (stavy objednávek, tlačítka, popisky).

   Session #33 — nahradily emoji, která kreslil operační systém: na iPhonu

   vypadala jinak než na Androidu, měla vlastní barvy mimo paletu a každý

   symbol jinou tloušťku čáry. Kreslená ikona dědí barvu z textu. */

.ti {

  vertical-align: -0.12em;

  font-size: 1.05em;

  line-height: 1;

}

.status-badge .ti,

.odm-info-cell-value .ti { font-size: 1em; }

.empty-state-icon .ti { font-size: 40px; opacity: 0.55; }

.cart-row-noimg .ti,

.product-detail-main-img-placeholder .ti,

.order-item-img .ti,

.odm-item-img .ti { font-size: 1.6em; opacity: 0.5; }



/* ── Patička dole (C8, session #33) ──────────────────────────────

   `body` mělo jen min-height:100vh bez layoutu, takže na krátkých

   stránkách (prázdný košík, výsledky bez shody, děkovná stránka)

   vyjela patička doprostřed obrazovky a pod ní zbylo prázdné místo.



   <footer> je přímý potomek <body>, takže stačí sloupcový flex

   a odsazení auto — patičku to odsune na konec, ať je obsahu

   kolik chce. Modály jsou position:fixed, tedy mimo tok, a flex

   se jich netýká. */

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

body > footer {

  margin-top: auto;

}



/* ── Cena na detailu produktu (session #33) ──────────────────────

   Dřív stála cena a tlačítko vedle sebe na jednom řádku. Jakmile

   měl kámen čtyřmístnou cenu, „6 363 Kč" se zalomilo na dva řádky

   a euro zůstalo viset svisle na středu — viz fotka z #33.



   Teď je cena na svém řádku, euro pod ní a tlačítko přes celou

   šířku sloupce. Velikost ceny je clamp(), takže se u dlouhých

   částek (455 485 Kč) sama zmenší místo zalomení.



   Mobilní lišta u dna obrazovky si řídí layout sama — viz

   media query ve style.css — proto se tyhle úpravy vypínají. */

@media (min-width: 900px) {

  .detail-buybar {

    display: block;

  }

  .detail-price-row {

    display: block;

    margin-bottom: 14px;

  }

  .detail-price {

    font-size: clamp(24px, 2.4vw, 34px);

    line-height: 1.1;

    white-space: nowrap;

  }

  .detail-price-eur {

    display: block;

    margin-top: 2px;

    font-family: 'Jost', sans-serif;

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 0.02em;

    color: var(--stone);

  }

  .detail-buybar .btn-add-to-cart-lg {

    width: 100%;

    justify-content: center;

  }

}



/* Euro pod cenou i v mobilní liště — dřív viselo za cenou. */

.detail-price-eur {

  display: block;

  font-size: 12px;

  color: var(--stone);

}

/* ═══════════════════════════════════════════════════════════

   Session #34 — spodní lišta patičky na jeden nízký řádek



   Dřív dva řádky nad sebou (odkazy, pod nimi copyright zalomený

   na dva řádky) a kolem nich velké odsazení zděděné z `footer`

   ve style.css. Teď copyright vlevo, odkazy vpravo, na mobilu pod

   sebou na střed.



   Nuluje se jen svislé odsazení patičky. Mobilní pravidlo

   `body.pd-buybar-open footer { padding-bottom: 90px }` v index.php

   se načítá později a má stejnou váhu, takže na detailu produktu

   místo pod lištou s tlačítkem zůstane.

═══════════════════════════════════════════════════════════ */

body > footer.mk-foot {

  padding-top: 0;

  padding-bottom: 0;

}

footer .footer-bottom.mk-foot-bar {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px 28px;

  max-width: 1180px;

  margin: 0 auto;

  padding: 18px 24px;

  text-align: left;

}

.mk-foot-bar .footer-copy {

  font-size: 12px;

  color: var(--text-light);

  white-space: nowrap;

}

.mk-foot-links {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px 14px;

  font-size: 12px;

}

.mk-foot-links a {

  color: var(--text-light);

  text-decoration: none;

  transition: color .15s;

}

.mk-foot-links a:hover { color: var(--gold); }

.mk-foot-sep { color: var(--text-light); opacity: 0.45; }



@media (max-width: 720px) {

  footer .footer-bottom.mk-foot-bar {

    flex-direction: column-reverse;

    justify-content: center;

    text-align: center;

    padding: 16px;

    gap: 10px;

  }

  .mk-foot-links { justify-content: center; }

  .mk-foot-bar .footer-copy { white-space: normal; }

}



/* ═══════════════════════════════════════════════════════════

   Session #43 — ikona účtu: horník v kolečku (_AVATAR_HORNIK v index.php).

   !important kvůli .account-avatar ve style.css (pozadí pro písmeno).

═══════════════════════════════════════════════════════════ */

.account-avatar.mk-avatar-hornik {

  --hk-pozadi: #1e150b;

  background: #1e150b !important;

  border: 1px solid rgba(214,163,69,0.55) !important;

  overflow: hidden;

  display: flex;

  padding: 0;

  cursor: default;

}

.account-avatar.mk-avatar-hornik .mk-hk { width: 100%; height: 100%; }



/* ═══════════════════════════════════════════════════════════

   Děkovná stránka „Objednávka přijata"

   Session #42: místo ametystové geody (#34) horník s balíkem, stejný

   blok jako prázdné stavy (.mk-prazdno). Scénu vkládá _dekujemeScena()

   v index.php. Soubor images/geoda-ametyst.svg se už nenačítá.

═══════════════════════════════════════════════════════════ */

.mk-dekujeme { margin: 0 auto 26px; }

.mk-dekujeme .mk-hk { width: min(440px, 100%); height: auto; }

.mk-dekujeme-scena:empty { display: none; }

.mk-dekujeme .mk-prazdno-nadpis { font-size: clamp(32px, 4vw, 46px); }

.mk-kicker {

  margin-top: 10px;

  font-family: 'Jost', sans-serif; font-size: 10.5px;

  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-dark);

}

.mk-dekujeme .mk-prazdno-nadpis { margin-top: 10px; }



@media (max-width: 600px) {

  #page-success .success-page { padding-left: 16px; padding-right: 16px; }

}



/* Děkovná stránka: krokovník na střed a obsah hned pod něj.

   .success-page ve style.css svisle centruje na výšku okna

   (min-height 100vh + justify-content center), obsah by sjel dolů. */

#page-success .mk-steps { justify-content: center; margin-bottom: 0; }

#page-success .success-page {

  margin-top: 0;

  min-height: 0;

  justify-content: flex-start;

  padding-top: 20px;

}



/* Okno „Zpráva odeslána" (kontaktní formulář): horník mává dopisu */

.success-modal-scena { --hk-pozadi: #120d06; margin: -12px auto 6px; }

.success-modal-scena .mk-hk { width: min(280px, 100%); height: auto; margin: 0 auto; }

.success-modal-scena:empty { display: none; }



/* Poptávka zpracování kamene odeslána: horník lupou zkoumá výbrus */

.zk-hotovo-scena { --hk-pozadi: #1d150a; width: min(400px, 100%); margin: -6px auto 4px; }

.zk-hotovo-scena .mk-hk { width: 100%; height: auto; }



/* ═══════════════════════════════════════════════════════════

   Session #34 — úvodní stránka: krystaly, druhé tlačítko, výhody



   V dolních rozích .hero dva zlaté trsy krystalů (rytina). Jsou to

   samostatná SVG (/images/krystaly-*.svg) s animací uvnitř: krystaly

   se odzadu dopředu „vykreslí" a pak na třech z nich občas přeběhne

   světlo. Výška se řídí šířkou okna, aby na menších monitorech

   nevlezly pod text; na mobilu jen vykukují z rohů.

   Výplň krystalů (#090603) odpovídá téměř černým rohům .hero —

   kdyby se měnilo pozadí úvodu, upravit FILL v generátoru.

═══════════════════════════════════════════════════════════ */

/* --zem = výška kamenného podloží (.hero-zem). Krystaly stojí tak, aby

   jejich paty zakryla hrana podloží — vypadá to, že z něj vyrůstají. */

.hero { --zem: clamp(46px, 6.4vw, 100px); padding-bottom: calc(var(--zem) + 40px); }

.hero-content { position: relative; z-index: 3; }

.hero-zem {

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 100%;

  height: calc(var(--zem) + 1px);

  z-index: 2;

  pointer-events: none;

  display: block;

}

#page-home .hero + .section { margin-top: -1px; }

#page-home.active .hero-zem .zem-hrana { animation: mkZemHrana 1.4s cubic-bezier(.4,0,.2,1) .1s both; }

#page-home.active .hero-zem .zem-v { opacity: 0; animation: heroFadeIn 1.2s ease .9s forwards; }

@keyframes mkZemHrana { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

.hero-krystaly {

  position: absolute;

  bottom: calc(var(--zem) * 0.45);

  z-index: 1;

  height: clamp(180px, 26vw, 440px);

  width: auto;

  pointer-events: none;

  user-select: none;

}

.hero-krystaly-l { left: 0; }

.hero-krystaly-r { right: 0; }



.hero-cta-group .hero-cta-secondary { padding-left: 30px; padding-right: 30px; }



.hero-benefits {

  list-style: none;

  margin: 30px 0 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 10px 0;

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  letter-spacing: 0.02em;

  color: #b89c7c;

}

.hero-benefits li { display: flex; align-items: center; gap: 9px; }

.hero-benefits li + li::before {

  content: '';

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: #8a6a3a;

  margin: 0 20px 0 22px;

}

.hero-benefits .mk-ico { color: var(--gold-dark); }



#page-home.active .hero-benefits {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.92s forwards;

}

@media (prefers-reduced-motion: reduce) {

  #page-home.active .hero-benefits,

  #page-home.active .hero-zem .zem-hrana,

  #page-home.active .hero-zem .zem-v { opacity: 1 !important; animation: none !important; clip-path: none !important; }

}



/* Úvod — ikony místo emoji v bloku „Vášeň pro minerály" (stejné jako O nás) */

.trust-signal-icon.mk-ico { display: flex; justify-content: center; color: var(--gold-dark); opacity: 0.9; }



@media (max-width: 768px) {

  .hero-benefits { flex-direction: column; gap: 8px; margin-top: 24px; font-size: 12.5px; }

  .hero-benefits li + li::before { display: none; }

  /* #87: při zvětšeném písmu (zoom, větší text v iOS) se řádek zalomí, nepřeteče přes okraj */

  .hero-benefits li { max-width: 100%; text-align: left; }

  .hero-benefits li .mk-ico { flex: none; }

}

@media (max-width: 600px) {

  .hero { padding-bottom: 150px; }

  .hero-krystaly { height: 150px; opacity: 0.9; }

  .hero-krystaly-l { left: -38px; }

  .hero-krystaly-r { right: -38px; }

}





/* ═══════════════════════════════════════════════════════════════

   PŘEDĚLY MEZI SEKCEMI ÚVODNÍ STRÁNKY (session #34)

   Pás horniny — navazuje na kamenné podloží pod hero, jen je nižší,

   tlumenější a bez krystalů.

   Spodní sekce se vysune o --h nahoru přes spodní odsazení horní sekce

   a clip-path jí ořízne horní okraj do nepravidelné linie — nad linií

   tak prosvítá pozadí horní sekce, pod ní začíná vlastní pozadí spodní

   (včetně radiální záře), takže se nemusí ladit barvy.

   svg.sekce-hrana (home.php) je vysoké 2,2 × --h: v horních 40/88 leží

   hrana (stejné body jako polygon), pod ní prosvětlení, vrstvy,

   praskliny a tečkování. Křivky: x v % šířky, y jako násobek --h.

   Generované skriptem — ručně neupravovat.

═══════════════════════════════════════════════════════════════ */

#page-home .sekce-predel {

  --h: clamp(18px, 2.6vw, 38px);

  position: relative;

  margin-top: calc(var(--h) * -1);

  padding-top: calc(var(--pt, 32px) + var(--h) * 1.5);

}

#page-home .sekce-predel-1 {

  clip-path: polygon(0% calc(var(--h)*0.848),2.59% calc(var(--h)*0.753),5.26% calc(var(--h)*0.608),7.80% calc(var(--h)*0.509),9.35% calc(var(--h)*0.401),10.93% calc(var(--h)*0.415),12.29% calc(var(--h)*0.500),13.96% calc(var(--h)*0.347),15.46% calc(var(--h)*0.293),18.48% calc(var(--h)*0.229),19.84% calc(var(--h)*0.203),22.27% calc(var(--h)*0.258),25.17% calc(var(--h)*0.342),27.71% calc(var(--h)*0.341),29.92% calc(var(--h)*0.235),33.01% calc(var(--h)*0.286),34.81% calc(var(--h)*0.346),36.33% calc(var(--h)*0.175),38.95% calc(var(--h)*0.343),41.58% calc(var(--h)*0.246),44.00% calc(var(--h)*0.294),45.67% calc(var(--h)*0.400),48.33% calc(var(--h)*0.683),51.39% calc(var(--h)*0.662),54.00% calc(var(--h)*0.752),56.79% calc(var(--h)*0.759),58.19% calc(var(--h)*0.815),59.88% calc(var(--h)*0.832),63.05% calc(var(--h)*0.788),65.26% calc(var(--h)*0.660),67.91% calc(var(--h)*0.649),70.60% calc(var(--h)*0.601),72.62% calc(var(--h)*0.639),74.55% calc(var(--h)*0.623),76.10% calc(var(--h)*0.600),79.14% calc(var(--h)*0.582),82.26% calc(var(--h)*0.561),84.86% calc(var(--h)*0.566),87.92% calc(var(--h)*0.508),89.68% calc(var(--h)*0.352),91.17% calc(var(--h)*0.304),93.23% calc(var(--h)*0.213),96.13% calc(var(--h)*0.165),98.24% calc(var(--h)*0.187),100% calc(var(--h)*0.168),100% 100%,0% 100%);

}

#page-home .sekce-predel-2 {

  clip-path: polygon(0% calc(var(--h)*0.743),1.96% calc(var(--h)*0.741),3.28% calc(var(--h)*0.696),4.65% calc(var(--h)*0.796),7.13% calc(var(--h)*0.785),8.81% calc(var(--h)*0.616),10.87% calc(var(--h)*0.494),13.21% calc(var(--h)*0.374),15.52% calc(var(--h)*0.323),17.81% calc(var(--h)*0.463),20.85% calc(var(--h)*0.385),22.45% calc(var(--h)*0.519),25.41% calc(var(--h)*0.486),28.56% calc(var(--h)*0.370),31.28% calc(var(--h)*0.229),32.61% calc(var(--h)*0.228),34.97% calc(var(--h)*0.222),37.58% calc(var(--h)*0.190),39.71% calc(var(--h)*0.184),41.88% calc(var(--h)*0.262),45.07% calc(var(--h)*0.321),47.07% calc(var(--h)*0.484),49.50% calc(var(--h)*0.424),51.31% calc(var(--h)*0.422),54.35% calc(var(--h)*0.394),56.38% calc(var(--h)*0.401),58.46% calc(var(--h)*0.427),61.63% calc(var(--h)*0.395),63.33% calc(var(--h)*0.363),65.86% calc(var(--h)*0.487),67.47% calc(var(--h)*0.610),69.75% calc(var(--h)*0.725),71.25% calc(var(--h)*0.765),73.77% calc(var(--h)*0.777),76.72% calc(var(--h)*0.853),79.05% calc(var(--h)*0.792),81.24% calc(var(--h)*0.708),84.40% calc(var(--h)*0.558),86.76% calc(var(--h)*0.671),89.20% calc(var(--h)*0.686),91.18% calc(var(--h)*0.740),93.60% calc(var(--h)*0.826),95.76% calc(var(--h)*0.648),98.45% calc(var(--h)*0.773),100% calc(var(--h)*0.738),100% 100%,0% 100%);

}

#page-home .sekce-predel-3 {

  clip-path: polygon(0% calc(var(--h)*0.405),2.01% calc(var(--h)*0.363),4.47% calc(var(--h)*0.408),7.34% calc(var(--h)*0.461),8.73% calc(var(--h)*0.559),10.41% calc(var(--h)*0.583),12.81% calc(var(--h)*0.625),15.80% calc(var(--h)*0.605),18.83% calc(var(--h)*0.843),20.48% calc(var(--h)*0.863),22.03% calc(var(--h)*0.855),24.73% calc(var(--h)*0.823),26.30% calc(var(--h)*0.851),28.59% calc(var(--h)*0.697),31.22% calc(var(--h)*0.652),32.63% calc(var(--h)*0.531),33.93% calc(var(--h)*0.601),36.16% calc(var(--h)*0.520),39.10% calc(var(--h)*0.376),41.96% calc(var(--h)*0.291),43.73% calc(var(--h)*0.190),45.29% calc(var(--h)*0.219),47.16% calc(var(--h)*0.229),49.55% calc(var(--h)*0.310),52.61% calc(var(--h)*0.355),54.13% calc(var(--h)*0.330),56.12% calc(var(--h)*0.373),58.83% calc(var(--h)*0.394),61.33% calc(var(--h)*0.397),62.73% calc(var(--h)*0.380),65.74% calc(var(--h)*0.427),68.04% calc(var(--h)*0.422),71.12% calc(var(--h)*0.449),73.58% calc(var(--h)*0.545),76.23% calc(var(--h)*0.616),77.58% calc(var(--h)*0.707),79.42% calc(var(--h)*0.739),81.53% calc(var(--h)*0.884),83.61% calc(var(--h)*0.815),86.69% calc(var(--h)*0.678),88.34% calc(var(--h)*0.807),90.85% calc(var(--h)*0.773),92.58% calc(var(--h)*0.804),93.98% calc(var(--h)*0.765),97.07% calc(var(--h)*0.595),99.60% calc(var(--h)*0.376),100% calc(var(--h)*0.387),100% 100%,0% 100%);

}

#page-home .sekce-predel-4 {

  clip-path: polygon(0% calc(var(--h)*0.560),3.08% calc(var(--h)*0.433),5.21% calc(var(--h)*0.403),7.59% calc(var(--h)*0.282),10.30% calc(var(--h)*0.187),12.84% calc(var(--h)*0.101),15.60% calc(var(--h)*0.145),17.42% calc(var(--h)*0.184),19.14% calc(var(--h)*0.175),20.65% calc(var(--h)*0.269),22.41% calc(var(--h)*0.238),24.59% calc(var(--h)*0.336),26.98% calc(var(--h)*0.397),29.01% calc(var(--h)*0.388),32.01% calc(var(--h)*0.344),34.47% calc(var(--h)*0.235),36.68% calc(var(--h)*0.251),38.87% calc(var(--h)*0.339),41.98% calc(var(--h)*0.406),44.24% calc(var(--h)*0.267),45.73% calc(var(--h)*0.493),48.59% calc(var(--h)*0.632),50.83% calc(var(--h)*0.721),52.22% calc(var(--h)*0.744),54.75% calc(var(--h)*0.701),56.20% calc(var(--h)*0.696),57.75% calc(var(--h)*0.667),59.42% calc(var(--h)*0.608),62.38% calc(var(--h)*0.626),64.36% calc(var(--h)*0.777),67.39% calc(var(--h)*0.607),70.10% calc(var(--h)*0.695),72.17% calc(var(--h)*0.783),74.68% calc(var(--h)*0.833),77.06% calc(var(--h)*0.873),80.07% calc(var(--h)*0.723),82.08% calc(var(--h)*0.769),84.23% calc(var(--h)*0.725),86.23% calc(var(--h)*0.725),87.70% calc(var(--h)*0.599),89.00% calc(var(--h)*0.569),91.38% calc(var(--h)*0.515),93.34% calc(var(--h)*0.512),96.29% calc(var(--h)*0.566),98.17% calc(var(--h)*0.630),100% calc(var(--h)*0.568),100% 100%,0% 100%);

}

.sekce-hrana {

  position: absolute;

  left: 0;

  top: 0.5px;              /* hrana leží těsně pod ořezem, aby ji clip-path nepůlil */

  width: 100%;

  height: calc(var(--h) * 2.2);

  display: block;

  overflow: visible;

  pointer-events: none;

  clip-path: inset(0 0 0 0);

  transition: clip-path 1.6s cubic-bezier(.4, 0, .2, 1) .1s;

}

.sekce-hrana path {

  fill: none;

  stroke: #c8922a;

  stroke-width: 1;

  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

}

.sekce-hrana .ph-plocha { stroke: none; }

.sekce-hrana .ph-t { stroke-width: 1.6; stroke-linecap: round; }

@media (max-width: 900px) { .sekce-hrana .ph-t-pc { display: none; } }

.sekce-hrana .ph-hrana { stroke-width: 1.2; stroke-opacity: 0.78; }

.sekce-hrana .ph-v { transition: opacity 1.1s ease .8s; }

/* než sekce vjede do obrazu, hrana čeká schovaná; pak se rozvine od středu

   a za ní se dokreslí vrstvy a tečkování */

.reveal-on-scroll:not(.is-visible) > .sekce-hrana { clip-path: inset(0 50% 0 50%); }

.reveal-on-scroll:not(.is-visible) > .sekce-hrana .ph-v { opacity: 0; }

@media (prefers-reduced-motion: reduce) {

  .sekce-hrana,

  .reveal-on-scroll:not(.is-visible) > .sekce-hrana { clip-path: none; transition: none; }

  .sekce-hrana .ph-v,

  .reveal-on-scroll:not(.is-visible) > .sekce-hrana .ph-v { opacity: 1; transition: none; }

}



/* ═══════════════════════════════════════════════════════════

   Session #39 — stránka s nabídkou (návrh na plátně „E-shop, návrh úprav")

   Karta: lokalita a rozměry místo popisu, euro vpravo, druhá fotka po

   najetí. Menu: prázdné kategorie ztlumené, služba zvlášť. Lišta: počet

   kusů česky, rychlé filtry. Záhlaví: souhrn. Prázdný výpis: horník.

   Úvod: prázdné sekce se stejným horníkem. Pruh naposledy prohlížených.

═══════════════════════════════════════════════════════════ */



/* ── Karta produktu ── */

.product-card .product-meta {

  display: flex; flex-wrap: wrap; gap: 4px 12px;

  margin: 0 0 12px;

  font-size: 12px; line-height: 1.4; color: #a88c70;

}

.product-card .product-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }

.product-card .pm-i {

  width: 13px; height: 13px; flex: 0 0 13px;

  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;

}

.product-card .pm-kr { display: none; }

.product-card .product-footer { align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }

.product-card .product-eur { font-size: 11.5px; color: var(--stone); white-space: nowrap; }

@media (max-width: 600px) {

  .product-card .product-meta { font-size: 11px; gap: 3px 8px; margin-bottom: 8px; }

  .product-card .pm-dl { display: none; }

  .product-card .pm-kr { display: inline; }

}



/* Druhá fotka po najetí myší. Stejné pozadí jako rámeček fotky, takže

   první fotku úplně zakryje i u fotek jiného formátu (contain). */

.product-card .product-img-2 {

  position: absolute; inset: 0;

  opacity: 0;

  transition: opacity .35s ease, transform .4s;

  background: var(--cream-mid);

}

.product-card .product-dots {

  position: absolute; top: 14px; right: 12px; z-index: 2;

  display: flex; gap: 5px;

  opacity: 0; transition: opacity .3s; pointer-events: none;

}

.product-card .product-dots i {

  display: block; width: 6px; height: 6px; border-radius: 50%;

  background: rgba(240,226,200,0.4);

}

.product-card .product-dots i:nth-child(2) { background: #f0e2c8; }

@media (hover: hover) {

  .product-card:hover .product-img-2[src] { opacity: 1; }

  .product-card:hover .product-dots { opacity: 1; }

}



/* ── Postranní menu ── */

#page-shop .shop-sidebar .filter-option.prazdna { color: #7a6450; }

#page-shop .shop-sidebar .filter-option.prazdna:hover { color: var(--text-mid); }

#page-shop .shop-sidebar .filter-option.prazdna.active { color: var(--brown-dark); }

#page-shop .sidebar-sluzby { padding-top: 22px; border-top: 1px solid var(--border); }

#page-shop .shop-sidebar .filter-sluzba { gap: 10px; color: var(--gold-dark); }

#page-shop .shop-sidebar .filter-sluzba i { font-size: 17px; }



/* ── Záhlaví: souhrn ── */

#page-shop .category-hero-meta {

  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;

  margin-top: 14px; font-size: 13px; color: #a88c70;

}

#page-shop .category-hero-meta[hidden] { display: none; }

#page-shop .category-hero-meta b { font-weight: 500; color: var(--brown-dark); }

#page-shop .category-hero-meta i { font-style: normal; color: var(--stone-light); }



/* ── Lišta: počet kusů a rychlé filtry ── */

#page-shop .shop-results-count strong { font-weight: 500; color: var(--brown-dark); }

#page-shop .shop-rychle { display: flex; flex-wrap: wrap; gap: 8px; }

#page-shop .shop-rychle:empty { display: none; }

#page-shop .rf {

  display: inline-flex; align-items: center; gap: 7px;

  height: 34px; padding: 0 13px; border-radius: 17px;

  border: 1px solid var(--border-strong); background: transparent;

  color: var(--text-mid); font: 400 12.5px 'Jost', sans-serif;

  cursor: pointer; transition: border-color .2s, color .2s, background .2s;

}

#page-shop .rf:hover { border-color: var(--gold); color: var(--brown-dark); }

#page-shop .rf.on { border-color: var(--gold); background: rgba(200,146,42,0.12); color: var(--brown-dark); }

#page-shop .rf svg {

  width: 15px; height: 15px; flex: 0 0 15px;

  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;

}

#page-shop .rf-n { font-size: 11px; color: var(--brown-light); }

#page-shop .rf.on .rf-n { color: var(--gold-dark); }

#page-shop .rf-kr { display: none; }

@media (max-width: 600px) {

  #page-shop .rf-dl { display: none; }

  #page-shop .rf-kr { display: inline; }

}



/* ── Mobilní lišta kategorií ── */

@media (max-width: 900px) {

  #page-shop .chip .chip-n { font-size: 10.5px; color: var(--brown-light); }

  #page-shop .chip.active .chip-n { color: #1e1608; opacity: .7; }

  #page-shop .chip.prazdna { color: #7a6450; border-color: rgba(200,170,120,0.08); }

  #page-shop .chip.prazdna.active { color: #1e1608; }

  #page-shop .chip.sluzba { color: var(--gold-dark); border-color: rgba(224,176,80,0.4); }

  #page-shop .chip.sluzba.active { color: #1e1608; }

  #page-shop .chip.sluzba i { font-size: 14px; }

}



/* ── Prázdný výpis ── */

#page-shop #shop-empty { padding: 28px 0 8px; text-align: center; }

.mk-prazdno {

  display: flex; flex-direction: column; align-items: center; text-align: center;

  padding: 0 8px;

  background: radial-gradient(420px 220px at 50% 32%, rgba(200,146,42,0.08), transparent 70%);

}

.mk-prazdno .mk-hk { width: min(420px, 100%); height: auto; }

.mk-prazdno-nadpis {

  margin: 16px 0 0;

  font-family: 'EB Garamond', serif; font-weight: 400;

  font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--brown-dark);

}

.mk-prazdno-text { max-width: 480px; margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-mid); }

.mk-prazdno-tlacitka { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

.mk-btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 10px;

  min-height: 44px; padding: 0 22px; border-radius: 5px;

  font: 500 11px 'Jost', sans-serif; letter-spacing: .16em; text-transform: uppercase;

  text-decoration: none; cursor: pointer;

  transition: background .2s, border-color .2s, color .2s;

}

.mk-btn i { font-size: 16px; }

.mk-btn-g { background: var(--gold); color: #1e1608; border: 1px solid var(--gold); }

.mk-btn-g:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #1e1608; }

.mk-btn-o { background: transparent; color: var(--brown-dark); border: 1px solid rgba(240,226,200,0.35); }

.mk-btn-o:hover { border-color: var(--gold-dark); color: var(--brown-dark); }

@media (max-width: 600px) {

  .mk-prazdno-tlacitka { flex-direction: column; align-self: stretch; }

  .mk-btn { width: 100%; min-height: 48px; }

}



/* „Mezitím se podívejte" */

.mk-tipy { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--border); text-align: left; }

.mk-tipy h4 { margin: 0 0 16px; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 24px; color: var(--brown-dark); }

.mk-tipy-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.mk-tip {

  display: flex; align-items: center; gap: 14px;

  padding: 10px 16px 10px 10px; border-radius: 8px;

  border: 1px solid rgba(200,170,120,0.14); background: #1e150b;

  color: inherit; font: inherit; text-align: left; cursor: pointer;

  transition: border-color .2s, transform .2s;

}

.mk-tip:hover { border-color: rgba(224,176,80,0.45); transform: translateY(-2px); }

.mk-tip img, .mk-tip-ph {

  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px;

  object-fit: cover; display: block; background: #221608;

}

.mk-tip-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.mk-tip-n { font-family: 'EB Garamond', serif; font-size: 18px; line-height: 1.2; color: var(--brown-dark); }

.mk-tip-p { font-size: 12.5px; color: #a88c70; }



/* Dlaždice „Máte vlastní kámen?" — jen mobil (2 sloupce), při lichém počtu kusů */

#page-shop .mk-dlazdice { display: none; }

@media (max-width: 768px) {

  #page-shop .mk-dlazdice {

    display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;

    padding: 14px 12px; border-radius: var(--radius-md);

    border: 1px dashed rgba(224,176,80,0.4);

    background: radial-gradient(120px 110px at 50% 30%, rgba(200,146,42,0.14), transparent), #1e150b;

    color: var(--brown-dark); font: inherit; text-align: left; cursor: pointer;

  }

  #page-shop .mk-dlazdice img { width: 75%; max-width: 140px; align-self: center; margin: 4px auto auto; }

  #page-shop .mk-dl-stitek { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }

  #page-shop .mk-dl-nadpis { font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.2; }

  #page-shop .mk-dl-text { font-size: 11.5px; line-height: 1.5; color: var(--text-mid); }

  #page-shop .mk-dl-odkaz { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }

}



/* ── Naposledy prohlížené ── */

#page-shop .mk-naposledy { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }

#page-shop .mk-naposledy[hidden] { display: none; }

.mk-naposledy-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.mk-naposledy-hlava h3 { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 26px; color: var(--brown-dark); }

.mk-naposledy-smaz {

  background: none; border: 0; padding: 4px 0; cursor: pointer;

  font: 400 12.5px 'Jost', sans-serif; color: var(--brown-light);

  text-decoration: underline; text-underline-offset: 3px;

}

.mk-naposledy-smaz:hover { color: var(--gold-dark); }

.mk-naposledy-rada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.mk-np {

  display: flex; align-items: center; gap: 14px; padding: 10px;

  border-radius: 8px; border: 1px solid var(--border); background: #1e150b;

  color: inherit; font: inherit; text-align: left; cursor: pointer;

  transition: border-color .2s;

}

.mk-np:hover { border-color: var(--border-strong); }

.mk-np img, .mk-np-ph {

  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px;

  object-fit: contain; display: block; background: #221608;

}

.mk-np-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.mk-np-n {

  font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.2; color: var(--brown-dark);

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

}

.mk-np-c { font-size: 13px; color: var(--text-mid); }

.mk-np:nth-child(n+5) { display: none; }

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

@media (max-width: 600px) {

  #page-shop .mk-naposledy { margin-top: 40px; }

  .mk-naposledy-rada {

    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;

    padding-bottom: 6px; scrollbar-width: none;

  }

  .mk-naposledy-rada::-webkit-scrollbar { display: none; }

  .mk-np {

    flex: 0 0 124px; flex-direction: column; align-items: flex-start; gap: 6px;

    padding: 0; border: 0; background: none; scroll-snap-align: start;

  }

  .mk-np:nth-child(n+5) { display: flex; }

  .mk-np img, .mk-np-ph { width: 124px; height: 124px; flex-basis: auto; }

}



/* ── Úvodní stránka: prázdné sekce ── */

.mk-prazdno-domu { grid-column: 1 / -1; background: none; padding: 8px 0 0; }

.mk-prazdno-domu .mk-hk { width: min(330px, 100%); }

.mk-prazdno-domu .mk-prazdno-nadpis { font-size: clamp(24px, 2.4vw, 30px); }

.mk-prazdno-domu .mk-prazdno-text { font-size: 14.5px; }

#home-products-grid .mk-hk { --hk-pozadi: #110d06; }

.hero-cta .ti-brand-instagram { font-size: 16px; }



/* ═══════════════════════════════════════════════════════════

   Session #43: horník na dalších místech (bloky skládá mkBlok v shop-redesign.js)

═══════════════════════════════════════════════════════════ */

/* Hledání bez výsledků: kategorie jako štítky pod textem */

.mk-hledani-kategorie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; max-width: 560px; }

.mk-hledani-kat {

  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;

  border-radius: 999px; border: 1px solid rgba(200,170,120,0.3); background: transparent;

  color: var(--brown-dark); font: 400 13.5px 'Jost', sans-serif; cursor: pointer;

  transition: border-color .2s, color .2s;

}

.mk-hledani-kat:hover { border-color: var(--gold); color: var(--gold-dark); }

.mk-hledani-kat:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }



/* Odkaz na prodaný kus: místo detailu blok s horníkem a podobné kusy */

.product-detail.mk-prodano-rezim { max-width: 980px; }

.mk-prodano { padding-top: 8px; }

.mk-prodano .mk-prazdno-nadpis { font-size: clamp(30px, 3.4vw, 40px); }

.mk-prodano-podobne { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border); }

.mk-prodano-podobne h2 { margin: 0 0 16px; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 26px; color: var(--brown-dark); }



/* Stránka 404 */

#page-nenalezeno .mk-nenalezeno { max-width: 640px; margin: 0 auto; padding: 48px 16px 90px; }

#page-nenalezeno .mk-prazdno-nadpis { font-size: clamp(30px, 3.4vw, 40px); }



/* Prázdný košík: horník nad textem, vše na střed */

#page-cart .cart-empty.s-hornikem { text-align: center; padding-top: 20px; }

#page-cart .cart-empty.s-hornikem .mk-hk { --hk-pozadi: #150e07; width: min(300px, 100%); height: auto; margin: 0 auto 6px; }

#page-cart .cart-empty.s-hornikem .cart-empty-sub { margin-left: auto; margin-right: auto; }



/* Prázdné objednávky v účtu */

#user-orders-list .mk-ucet-prazdno { padding: 12px 0 8px; background: none; }

#user-orders-list .mk-ucet-prazdno .mk-hk { --hk-pozadi: #0e0a05; width: min(320px, 100%); }

#user-orders-list .mk-ucet-prazdno .mk-prazdno-nadpis { font-size: clamp(24px, 2.6vw, 30px); }



/* Okno „Vítejte mezi sběrateli" (a další okna s horníkem) */

.mk-okno-pozadi {

  position: fixed; inset: 0; z-index: 3000;

  display: flex; align-items: center; justify-content: center; padding: 16px;

  background: rgba(8,5,2,0.74);

}

.mk-okno {

  position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto;

  box-sizing: border-box; padding: 16px 20px 24px;

  background: #120d06; border: 1px solid rgba(200,170,120,0.24); border-radius: 12px;

  box-shadow: 0 12px 48px rgba(0,0,0,0.6);

}

.mk-okno .mk-prazdno { background: none; padding: 0; }

.mk-okno .mk-hk { --hk-pozadi: #120d06; width: min(300px, 100%); }

.mk-okno .mk-prazdno-nadpis { font-size: 30px; }

.mk-okno-zavrit {

  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;

  display: flex; align-items: center; justify-content: center;

  background: none; border: 0; color: #a88060; font-size: 20px; cursor: pointer;

}

.mk-okno-zavrit:hover { color: var(--gold-dark); }



/* ── Session #43: pozastavení odesílání (pruh, detail, pokladna) ── */

.mk-pauza-pruh {

  display: flex; align-items: center; justify-content: center; gap: 12px;

  padding: 8px 6px 8px 14px; background: #221608; border-bottom: 1px solid rgba(200,146,42,0.35);

  color: var(--brown-dark); font-size: 13.5px; line-height: 1.45;

}

.mk-pauza-pruh[hidden], body.na-adminu .mk-pauza-pruh { display: none; }

.mk-pauza-pruh .mk-hk { --hk-pozadi: #221608; width: 54px; height: 54px; flex: 0 0 54px; }

.mk-pauza-pruh p { margin: 0; flex: 0 1 auto; max-width: 900px; }

.mk-pauza-pruh strong { font-weight: 500; }

.mk-pauza-skryt {

  width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;

  background: none; border: 0; color: #c8a880; font-size: 17px; cursor: pointer;

}

.mk-pauza-skryt:hover { color: var(--gold-dark); }

@media (max-width: 600px) { .mk-pauza-pruh { justify-content: flex-start; } .mk-pauza-pruh p { flex: 1; } }



.mk-pauza-detail {

  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px;

  border-radius: 8px; background: #1a1208; border: 1px solid rgba(200,146,42,0.3);

  font-size: 14px; line-height: 1.5; color: var(--brown-dark);

}

.mk-pauza-detail .ti { color: var(--gold-dark); font-size: 19px; margin-top: 1px; }



.mk-pauza-box {

  display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 14px 12px 10px;

  background: #221608; border: 1px solid rgba(200,146,42,0.4); border-radius: 10px; text-align: left;

}

.mk-pauza-box .mk-hk { --hk-pozadi: #221608; width: 64px; height: 64px; flex: 0 0 64px; }

.mk-pauza-box-t { font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.2; color: var(--brown-dark); }

.mk-pauza-box-p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }

.btn-checkout.mk-zamceno, #checkout-place-btn.mk-zamceno {

  background: #2a2014 !important; color: #c8a880 !important; border: 1px solid rgba(200,170,120,0.2) !important;

  cursor: not-allowed; box-shadow: none !important; transform: none !important;

}

.mk-pauza-kosik-pozn { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #a88060; }

/* Session #44: po odeslání zprávy během dovolené nebo nemoci (_ukazKontaktHotovo) */

.mk-pauza-odpoved {

  margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; text-align: left;

  background: #221608; border: 1px solid rgba(200,146,42,0.35);

  font-size: 14px; line-height: 1.5; color: var(--brown-dark);

}

.mk-pauza-odpoved[hidden] { display: none; }



/* ═══════════════════════════════════════════════════════════

   HORNÍK (.mk-hk) — tři scény, kresba v shop-redesign.js (mkScena).

   Výplň tvarů = barva pozadí sekce (--hk-pozadi), aby čáry ležely

   „na" stránce. .stoji = scéna mimo obrazovku, animace stojí.

═══════════════════════════════════════════════════════════ */

.mk-hk { display: block; overflow: visible; }

.mk-hk .l { fill: none; stroke: #d6a345; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mk-hk .t { fill: var(--hk-pozadi, #1a1208); stroke: #d6a345; stroke-width: 2; stroke-linejoin: round; }

.mk-hk .jemna { stroke-opacity: .45; stroke-width: 1.4; }

.mk-hk .w32 { stroke-width: 3.2; }

.mk-hk .w3 { stroke-width: 3; }

.mk-hk .w16 { stroke-width: 1.6; }

.mk-hk .hvezda { fill: #f6dc96; }

.mk-hk.stoji, .mk-hk.stoji * { animation-play-state: paused !important; }



/* Kope: švih krumpáčem 1,4 s — nápřah, rychlý úder špičkou, odraz, pomalý nápřah */

.mk-hk-kope .ruce { transform-box: view-box; transform-origin: 150px 114px; animation: mkhSvih 1.4s cubic-bezier(.45,0,.3,1) infinite; }

@keyframes mkhSvih {

  0%   { transform: rotate(-148deg); }

  38%  { transform: rotate(-160deg); }

  54%  { transform: rotate(2deg); animation-timing-function: ease-out; }

  60%  { transform: rotate(-7deg); }

  68%  { transform: rotate(0deg); }

  100% { transform: rotate(-148deg); }

}

.mk-hk-kope .telo { transform-box: view-box; transform-origin: 146px 204px; animation: mkhTelo 1.4s ease-in-out infinite; }

@keyframes mkhTelo { 0%, 38% { transform: rotate(-3deg); } 54%, 68% { transform: rotate(2.5deg); } 100% { transform: rotate(-3deg); } }

.mk-hk-kope .u1, .mk-hk-kope .u2, .mk-hk-kope .u3, .mk-hk-kope .u4, .mk-hk-kope .u5 { opacity: 0; animation: 1.4s linear infinite; }

.mk-hk-kope .u1 { animation-name: mkhU1; }

.mk-hk-kope .u2 { animation-name: mkhU2; }

.mk-hk-kope .u3 { animation-name: mkhU3; }

.mk-hk-kope .u4 { animation-name: mkhU4; }

.mk-hk-kope .u5 { animation-name: mkhU5; }

@keyframes mkhU1 { 0%, 53% { opacity: 0; transform: none; } 55% { opacity: 1; } 80% { opacity: 0; transform: translate(-26px,-30px) rotate(-120deg); } 100% { opacity: 0; } }

@keyframes mkhU2 { 0%, 53% { opacity: 0; transform: none; } 55% { opacity: 1; } 80% { opacity: 0; transform: translate(-38px,-10px) rotate(90deg); } 100% { opacity: 0; } }

@keyframes mkhU3 { 0%, 53% { opacity: 0; transform: none; } 55% { opacity: 1; } 80% { opacity: 0; transform: translate(-18px,-40px) rotate(200deg); } 100% { opacity: 0; } }

@keyframes mkhU4 { 0%, 53% { opacity: 0; transform: none; } 55% { opacity: 1; } 80% { opacity: 0; transform: translate(-32px,22px) rotate(-60deg); } 100% { opacity: 0; } }

@keyframes mkhU5 { 0%, 53% { opacity: 0; transform: none; } 55% { opacity: 1; } 80% { opacity: 0; transform: translate(-10px,-26px) rotate(140deg); } 100% { opacity: 0; } }

.mk-hk-kope .jiskra { stroke: #f6dc96; stroke-width: 1.6; opacity: 0; animation: mkhJiskra 1.4s linear infinite; }

@keyframes mkhJiskra { 0%, 53% { opacity: 0; } 55% { opacity: 1; } 64%, 100% { opacity: 0; } }

.mk-hk-kope .prach { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mkhPrach 1.4s ease-out infinite; }

.mk-hk-kope .prach.p2 { animation-delay: .05s; }

@keyframes mkhPrach { 0%, 54% { opacity: 0; transform: scale(.4); } 60% { opacity: .5; } 95%, 100% { opacity: 0; transform: scale(1.6); } }

.mk-hk-kope .krystal { animation: mkhKrystal 4.2s ease-in-out infinite; }

@keyframes mkhKrystal { 0%, 85% { stroke-opacity: .35; } 90% { stroke-opacity: 1; filter: drop-shadow(0 0 4px rgba(246,220,150,.9)); } 100% { stroke-opacity: .35; } }

.mk-hk-kope .paprsek { animation: mkhPaprsek 1.4s ease-in-out infinite; }

@keyframes mkhPaprsek { 0%, 38% { opacity: .35; } 54%, 70% { opacity: .6; } 100% { opacity: .35; } }



/* Vozík: pražce ujedou o jeden rozestup (24) za 0,9 s, kola a nohy tomu odpovídají */

.mk-hk-vozik .prazce { animation: mkvPrazce .9s linear infinite; }

@keyframes mkvPrazce { from { transform: translateX(0); } to { transform: translateX(-24px); } }

.mk-hk-vozik .kolo { transform-box: fill-box; transform-origin: center; animation: mkvKolo 2.35s linear infinite; }

@keyframes mkvKolo { to { transform: rotate(360deg); } }

.mk-hk-vozik .hunt, .mk-hk-vozik .trup { animation: mkvHup .9s ease-in-out infinite; }

@keyframes mkvHup { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-.7px); } }

.mk-hk-vozik .nohaA { transform-box: view-box; transform-origin: 138px 153px; animation: mkvNohaA 1.8s ease-in-out infinite; }

.mk-hk-vozik .nohaB { transform-box: view-box; transform-origin: 142px 153px; animation: mkvNohaB 1.8s ease-in-out infinite; }

@keyframes mkvNohaA { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-10deg); } }

@keyframes mkvNohaB { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(24deg); } }

.mk-hk-vozik .krystal { animation: mkvKrystal 3.6s ease-in-out infinite; }

@keyframes mkvKrystal { 0%, 70% { stroke-opacity: .5; } 80% { stroke-opacity: 1; filter: drop-shadow(0 0 4px rgba(246,220,150,.9)); } 100% { stroke-opacity: .5; } }

.mk-hk-vozik .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkvHvezda 3.6s ease-in-out infinite; }

@keyframes mkvHvezda { 0%, 72% { transform: scale(0) rotate(0); } 80% { transform: scale(1) rotate(45deg); } 90%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-vozik .paprsek { animation: mkvPaprsek 1.8s ease-in-out infinite; }

@keyframes mkvPaprsek { 0%, 100% { opacity: .4; } 50% { opacity: .6; } }



/* Lupa: pomalu otáčí krystalem (4 s), občas se zablýskne; podstavec čeká */

.mk-hk-lupa .drzeny { transform-box: view-box; transform-origin: 195px 110px; animation: mklOtoc 4s ease-in-out infinite; }

@keyframes mklOtoc { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }

.mk-hk-lupa .lupa { transform-box: view-box; transform-origin: 165px 117px; animation: mklLupa 4s ease-in-out infinite; }

@keyframes mklLupa { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-4deg); } }

.mk-hk-lupa .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mklHvezda 4s ease-in-out infinite; }

.mk-hk-lupa .hvezda.h2 { animation-delay: 2s; }

@keyframes mklHvezda { 0%, 40% { transform: scale(0) rotate(0); } 50% { transform: scale(1) rotate(45deg); } 62%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-lupa .krystal { animation: mklKrystal 4s ease-in-out infinite; }

@keyframes mklKrystal { 0%, 38% { stroke-opacity: .8; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 5px rgba(246,220,150,.85)); } 64%, 100% { stroke-opacity: .8; } }

.mk-hk-lupa .paprsek { animation: mklPaprsek 4s ease-in-out infinite; }

@keyframes mklPaprsek { 0%, 100% { opacity: .4; } 50% { opacity: .65; } }

.mk-hk-lupa .misto {

  fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round;

  animation: mklMisto 4s ease-in-out infinite;

}

@keyframes mklMisto { 0%, 100% { stroke-opacity: .25; } 50% { stroke-opacity: .6; } }



/* ── Session #42: děkovné scény (balik, dopis, posudek) ── */

.mk-hk .sklo { fill: rgba(246,220,150,.07); stroke: #d6a345; stroke-width: 2.2; }



/* Balík: chůze 1,2 s, zem ujede o rozestup čárek (24) za půl kroku */

.mk-hk-balik .zemcary { animation: mkbZem .6s linear infinite; }

@keyframes mkbZem { from { transform: translateX(0); } to { transform: translateX(-24px); } }

.mk-hk-balik .nohaA { transform-box: view-box; transform-origin: 139px 156px; animation: mkbNohaA 1.2s ease-in-out infinite; }

.mk-hk-balik .nohaB { transform-box: view-box; transform-origin: 151px 156px; animation: mkbNohaB 1.2s ease-in-out infinite; }

@keyframes mkbNohaA { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-13deg); } }

@keyframes mkbNohaB { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(15deg); } }

.mk-hk-balik .nese { animation: mkbHup .6s ease-in-out infinite; }

@keyframes mkbHup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

.mk-hk-balik .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkbHvezda 3s ease-in-out infinite; }

@keyframes mkbHvezda { 0%, 60% { transform: scale(0) rotate(0); } 72% { transform: scale(1) rotate(45deg); } 86%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-balik .paprsek { animation: mkbPaprsek 1.2s ease-in-out infinite; }

@keyframes mkbPaprsek { 0%, 100% { opacity: .4; } 50% { opacity: .58; } }



/* Dopis: mává rukou, dopis odlétá po čárkované stopě (3,2 s) */

.mk-hk-dopis .mava { transform-box: view-box; transform-origin: 150px 116px; animation: mkdMava 1.6s ease-in-out infinite; }

@keyframes mkdMava { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(9deg); } }

.mk-hk-dopis .obalka { transform: translate(262px, 46px) rotate(-8deg); animation: mkdLet 3.2s ease-in-out infinite; }

@keyframes mkdLet {

  0%       { transform: translate(190px, 82px) scale(.5) rotate(10deg); opacity: 0; }

  12%      { opacity: 1; }

  70%      { transform: translate(292px, 36px) scale(1) rotate(-10deg); opacity: 1; }

  86%, 100% { transform: translate(314px, 26px) scale(1) rotate(-14deg); opacity: 0; }

}

.mk-hk-dopis .stopa {

  fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-linecap: round;

  stroke-dasharray: 2 7; stroke-opacity: .5; animation: mkdStopa 1.6s linear infinite;

}

@keyframes mkdStopa { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -18; } }

.mk-hk-dopis .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkdHvezda 3.2s ease-in-out infinite; }

@keyframes mkdHvezda { 0%, 72% { transform: scale(0) rotate(0); } 82% { transform: scale(1) rotate(45deg); } 94%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-dopis .paprsek { animation: mkdPaprsek 3.2s ease-in-out infinite; }

@keyframes mkdPaprsek { 0%, 100% { opacity: .35; } 60% { opacity: .6; } }



/* Posudek: lupou pomalu přejíždí po výbrusu, letokruhy se postupně rozsvítí */

.mk-hk-posudek .lupa2 { transform-box: view-box; transform-origin: 196px 117px; animation: mkpLupa 4s ease-in-out infinite; }

@keyframes mkpLupa { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-5deg); } }

.mk-hk-posudek .kruh { stroke-opacity: .5; animation: mkpKruh 4s ease-in-out infinite; }

.mk-hk-posudek .kruh.k2 { animation-delay: .25s; }

.mk-hk-posudek .kruh.k3 { animation-delay: .5s; }

@keyframes mkpKruh { 0%, 36%, 100% { stroke-opacity: .5; } 52% { stroke-opacity: 1; filter: drop-shadow(0 0 3px rgba(246,220,150,.8)); } }

.mk-hk-posudek .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkpHvezda 4s ease-in-out infinite; }

@keyframes mkpHvezda { 0%, 46% { transform: scale(0) rotate(0); } 56% { transform: scale(1) rotate(45deg); } 68%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-posudek .paprsek { animation: mkpPaprsek 4s ease-in-out infinite; }

@keyframes mkpPaprsek { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }



/* ── Session #43: prodano, kosik, hleda, mapa, vitej, zaval, volno ── */

/* společné: čárkovaný obrys toho, co tu chybí (jako .misto u lupy) */

.mk-hk .misto { fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .45; }



/* Prodáno: drbe se na přilbě, hlavou kroutí, obrys kamene pomalu bledne a vrací se */

.mk-hk-prodano .drbe { transform-box: view-box; transform-origin: 148px 117px; animation: mksDrbe 2.6s ease-in-out infinite; }

@keyframes mksDrbe { 0%, 40%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(-4deg); } 16%, 32% { transform: rotate(2deg); } }

.mk-hk-prodano .hlava { transform-box: view-box; transform-origin: 147px 108px; animation: mksHlava 5.2s ease-in-out infinite; }

@keyframes mksHlava { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }

.mk-hk-prodano .misto { animation: mksMisto 5.2s ease-in-out infinite; }

@keyframes mksMisto { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: .2; } }

.mk-hk-prodano .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mksHvezda 5.2s ease-in-out infinite; }

.mk-hk-prodano .hvezda.h2 { animation-delay: 2.6s; }

@keyframes mksHvezda { 0%, 30% { transform: scale(0) rotate(0); } 40% { transform: scale(1) rotate(45deg); } 52%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-prodano .paprsek { animation: mksPaprsek 5.2s ease-in-out infinite; }

@keyframes mksPaprsek { 0%, 100% { opacity: .45; } 50% { opacity: .3; } }



/* Košík: nakloní se nad vozík a zase zpátky, kopa kamení jen čárkovaně */

.mk-hk-kosik .hlava { transform-box: view-box; transform-origin: 147px 108px; animation: mkkHlava 4.4s ease-in-out infinite; }

@keyframes mkkHlava { 0%, 100% { transform: rotate(0); } 35%, 60% { transform: rotate(9deg); } }

.mk-hk-kosik .misto { animation: mkkMisto 4.4s ease-in-out infinite; }

@keyframes mkkMisto { 0%, 100% { stroke-opacity: .3; } 45% { stroke-opacity: .6; } }

.mk-hk-kosik .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkkHvezda 4.4s ease-in-out infinite; }

@keyframes mkkHvezda { 0%, 42% { transform: scale(0) rotate(0); } 52% { transform: scale(1) rotate(45deg); } 64%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-kosik .paprsek { animation: mkkPaprsek 4.4s ease-in-out infinite; }

@keyframes mkkPaprsek { 0%, 100% { opacity: .38; } 45% { opacity: .6; } }



/* Hledá: v podřepu rýžuje, miska krouží, kapky padají do potoka, voda teče */

.mk-hk .voda { fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-linecap: round; stroke-opacity: .5; stroke-dasharray: 11 5; }

.mk-hk .voda.v2 { stroke-opacity: .3; }

.mk-hk-hleda .voda { animation: mkqVoda 1.6s linear infinite; }

.mk-hk-hleda .voda.v2 { animation-duration: 2.2s; }

@keyframes mkqVoda { to { stroke-dashoffset: -16; } }

.mk-hk-hleda .miska { transform-box: view-box; transform-origin: 208px 178px; animation: mkqMiska 1.3s ease-in-out infinite; }

@keyframes mkqMiska { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.mk-hk-hleda .kapka { opacity: 0; animation: mkqKapka 1.3s ease-in infinite; }

.mk-hk-hleda .kapka.k2 { animation-delay: .65s; }

@keyframes mkqKapka { 0%, 20% { opacity: 0; transform: translateY(0); } 30% { opacity: .8; } 85% { opacity: .8; transform: translateY(26px); } 100% { opacity: 0; transform: translateY(28px); } }

.mk-hk-hleda .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkqHvezda 3.9s ease-in-out infinite; }

@keyframes mkqHvezda { 0%, 42% { transform: scale(0) rotate(0); } 52% { transform: scale(1) rotate(45deg); } 64%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-hleda .paprsek { opacity: .45; }



/* Vyhlíží: dalekohledem pomalu přejíždí po obzoru, přelétnou ptáci */

.mk-hk-vyhlizi .dalekohled { transform-box: view-box; transform-origin: 155px 95px; animation: mkyDal 5s ease-in-out infinite; }

@keyframes mkyDal { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

.mk-hk-vyhlizi .ptak { animation: mkyPtak 10s linear infinite; }

.mk-hk-vyhlizi .ptak.p2 { animation-duration: 13s; animation-delay: -5s; }

@keyframes mkyPtak {

  0%   { transform: translate(350px, 70px); opacity: 0; }

  8%   { opacity: .9; }

  90%  { opacity: .9; }

  100% { transform: translate(200px, 52px); opacity: 0; }

}

.mk-hk-vyhlizi .mava { transform-box: fill-box; transform-origin: center; animation: mkyMava .5s ease-in-out infinite alternate; }

@keyframes mkyMava { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }

.mk-hk-vyhlizi .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkyHvezda 5s ease-in-out infinite; }

@keyframes mkyHvezda { 0%, 44% { transform: scale(0) rotate(0); } 52% { transform: scale(1) rotate(45deg); } 62%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-vyhlizi .paprsek { opacity: .4; }

.mk-hk-vyhlizi .kolo2 { transform-box: fill-box; transform-origin: center; animation: mkyKolo 7s linear infinite; }

@keyframes mkyKolo { to { transform: rotate(360deg); } }



/* Výřez scény (malý horník v pruhu nebo v pokladně): nic nesmí přečnívat ven */

.mk-hk.vyrez { overflow: hidden; }



/* Mapa: kouká střídavě do mapy a na rozcestník, cesta v mapě běží */

.mk-hk-mapa .hlava { transform-box: view-box; transform-origin: 147px 107px; animation: mkmHlava 4.4s ease-in-out infinite; }

@keyframes mkmHlava { 0%, 12%, 100% { transform: rotate(16deg); } 40%, 70% { transform: rotate(-3deg); } }

.mk-hk-mapa .cesta { fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 4; animation: mkmCesta 1.8s linear infinite; }

@keyframes mkmCesta { to { stroke-dashoffset: -12; } }

.mk-hk-mapa .cedule { animation: mkmCedule 4.4s ease-in-out infinite; }

.mk-hk-mapa .cedule.c2 { animation-delay: .5s; }

@keyframes mkmCedule { 0%, 30%, 80%, 100% { stroke-opacity: .7; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 3px rgba(246,220,150,.7)); } }

.mk-hk-mapa .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkmHvezda 4.4s ease-in-out infinite; }

@keyframes mkmHvezda { 0%, 44% { transform: scale(0) rotate(0); } 54% { transform: scale(1) rotate(45deg); } 66%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-mapa .paprsek { animation: mkmPaprsek 4.4s ease-in-out infinite; }

@keyframes mkmPaprsek { 0%, 12%, 100% { opacity: .25; } 40%, 70% { opacity: .55; } }



/* Vítej: mává přilbou, kolem se zablýská */

.mk-hk-vitej .smeka { transform-box: view-box; transform-origin: 149px 117px; animation: mkwSmeka 1.5s ease-in-out infinite; }

@keyframes mkwSmeka { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

.mk-hk-vitej .hvezda { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mkwHvezda 3s ease-in-out infinite; }

.mk-hk-vitej .hvezda.h2 { animation-delay: 1s; }

.mk-hk-vitej .hvezda.h3 { animation-delay: 2s; }

@keyframes mkwHvezda { 0%, 20% { transform: scale(0) rotate(0); } 32% { transform: scale(1) rotate(45deg); } 46%, 100% { transform: scale(0) rotate(90deg); } }

.mk-hk-vitej .paprsek { animation: mkwPaprsek 1.5s ease-in-out infinite; }

@keyframes mkwPaprsek { 0%, 100% { opacity: .4; } 50% { opacity: .62; } }



/* Zával: nabírá lopatou, z hromady se občas skutálí kámen */

.mk-hk-zaval .lopata { transform-box: view-box; transform-origin: 150px 116px; animation: mkrLopata 1.8s ease-in-out infinite; }

@keyframes mkrLopata { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-9deg); } 62% { transform: rotate(3deg); } }

.mk-hk-zaval .prach { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mkrPrach 1.8s ease-out infinite; }

@keyframes mkrPrach { 0%, 58% { opacity: 0; transform: scale(.4); } 64% { opacity: .5; } 95%, 100% { opacity: 0; transform: scale(1.6); } }

.mk-hk-zaval .kutali { opacity: 0; animation: mkrKutali 3.6s ease-in infinite; }

@keyframes mkrKutali {

  0%, 30% { opacity: 0; transform: translate(300px, 124px) rotate(0); }

  36%     { opacity: 1; }

  62%     { transform: translate(262px, 156px) rotate(-200deg); }

  82%     { opacity: 1; transform: translate(236px, 184px) rotate(-360deg); }

  92%, 100% { opacity: 0; transform: translate(230px, 188px) rotate(-380deg); }

}

.mk-hk-zaval .paprsek { animation: mkrPaprsek 1.8s ease-in-out infinite; }

@keyframes mkrPaprsek { 0%, 100% { opacity: .4; } 50% { opacity: .58; } }



/* Volno: pomalu dýchá, z hrnku stoupá pára, lampa nesvítí */

.mk-hk-volno .dech { transform-box: view-box; transform-origin: 146px 176px; animation: mktDech 4s ease-in-out infinite; }

@keyframes mktDech { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }

.mk-hk-volno .para { fill: none; stroke: #d6a345; stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: mktPara 3s ease-out infinite; }

.mk-hk-volno .para.p2 { animation-delay: 1.5s; }

@keyframes mktPara { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-14px); } }



@media (prefers-reduced-motion: reduce) {

  .mk-hk * { animation: none !important; }

  .mk-hk-kope .ruce { transform: rotate(-40deg); }

  .mk-hk .hvezda { transform: scale(0); }

  .mk-hk-dopis .obalka { transform: translate(262px, 46px) rotate(-8deg); opacity: 1; }

  .mk-hk-vyhlizi .ptak { display: none; }

  .mk-hk-mapa .hlava { transform: rotate(4deg); }

  .mk-hk-volno .para { opacity: .45; }

}

/* ═══════════════════════════════════════════════════════════════

   Session #48: doprava v pokladně s logy dopravců (manuály Zásilkovny a PPL)

   ═══════════════════════════════════════════════════════════════ */

.mk-ship-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }

.mk-ship .payment-option-info { width: 100%; min-width: 0; }

.mk-ship-row { display: flex; align-items: center; gap: 14px; }

.mk-ship-logo { flex-shrink: 0; width: 72px; height: 36px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.mk-ship-logo img { width: 72px; height: 36px; object-fit: contain; }

.mk-ship-logo img.lang-en { display: none; }

.lang-active-en .mk-ship-logo img.lang-en { display: block; }

.lang-active-en .mk-ship-logo img.lang-cs { display: none; }

.mk-ship-logo-ikona { border: 1px solid var(--border, rgba(200,170,120,0.2)); color: var(--gold, #c8922a); font-size: 20px; }

.mk-ship-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mk-ship-text .payment-option-name { margin-bottom: 0; }

.mk-ship-when { flex-shrink: 0; font-size: 12px; color: var(--stone); white-space: nowrap; }

.mk-ship-price { flex-shrink: 0; min-width: 70px; text-align: right; font-size: 15px; color: var(--gold-dark, #c8922a); font-weight: 600; white-space: nowrap; }

.mk-ship .ship-block-reason { margin-left: 86px; }

@media (max-width: 600px) {

  .mk-ship-row { gap: 10px; flex-wrap: wrap; }

  .mk-ship-logo, .mk-ship-logo img { width: 56px; height: 28px; }

  .mk-ship-text { flex-basis: calc(100% - 66px - 80px); }

  .mk-ship-when { order: 4; width: 100%; padding-left: 66px; margin-top: -4px; }

  .mk-ship .ship-block-reason { margin-left: 0; }

}

.mk-ship-list .payment-option { margin-bottom: 0; align-items: center; }



/* ── Session #49: karta produktu s popisem a celými rozměry ── */

.product-card .product-desc-short,

#page-shop .product-card .product-desc-short {

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

  font-size: 12.5px; line-height: 1.45; color: var(--text-light); margin: 0 0 10px;

}

.product-card .pm-rozmer { white-space: nowrap; }

.product-card .pm-rozmery { flex-wrap: wrap; row-gap: 2px; }

@media (max-width: 600px) {

  .product-card .product-desc-short,

  #page-shop .product-card .product-desc-short { font-size: 11.5px; margin-bottom: 7px; }

}



/* ── Session #53: rozměry na kartě jako pruh tří údajů ──

   Tenká linka nahoře i dole, sloupce stejně široké, popisek drobnými

   verzálkami, číslo stejným písmem jako cena. Stejné na počítači i mobilu. */

.product-card .pm-rozmery {

  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;

  margin: 2px 0 14px; padding: 9px 0 8px;

  border-top: 1px solid rgba(200,170,120,0.16); border-bottom: 1px solid rgba(200,170,120,0.16);

}

.product-card .pm-rozmery[data-pocet="1"] { grid-auto-columns: max-content; }

.product-card .pm-roz { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 12px; border-left: 1px solid rgba(200,170,120,0.16); }

.product-card .pm-roz:first-child { padding-left: 0; border-left: 0; }

.product-card .pm-roz i {

  font-style: normal; font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);

}

.product-card .pm-roz b {

  font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 18px; line-height: 1.05;

  color: var(--brown-dark); white-space: nowrap;

}

.product-card .pm-roz small { font-family: 'Jost', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.04em; color: var(--stone); margin-left: 3px; }

.product-card .product-meta + .pm-rozmery { margin-top: -4px; }

@media (max-width: 600px) {

  .product-card .pm-rozmery { margin: 0 0 10px; padding: 7px 0 6px; }

  .product-card .pm-roz { padding-left: 7px; gap: 2px; }

  .product-card .pm-roz i { font-size: 8px; letter-spacing: 0.06em; }

  .product-card .pm-roz b { font-size: 15px; }

  .product-card .pm-roz small { font-size: 8.5px; margin-left: 2px; letter-spacing: 0; }

}

@media (max-width: 370px) {

  .product-card .pm-roz { padding-left: 5px; }

  .product-card .pm-roz i { font-size: 7.5px; letter-spacing: 0.02em; }

  .product-card .pm-roz b { font-size: 13.5px; }

}

/* ── Balík #82: víc kusů jednoho produktu (krabičky, piliny) ─────── */

.cart-row-qty{display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap}

.cart-row-qty button{

  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;

  background:#221608; border:1px solid rgba(200,170,120,0.25); border-radius:4px;

  color:#e0b050; cursor:pointer; font-size:14px; padding:0;

}

.cart-row-qty button:hover:not(:disabled){border-color:rgba(224,176,80,0.6)}

.cart-row-qty button:disabled{opacity:0.35; cursor:default}

.cart-row-qty input{

  width:52px; height:30px; text-align:center; font-size:14px;

  background:#1a1108; border:1px solid rgba(200,170,120,0.25); border-radius:4px;

  color:var(--text, #f0e2c8); -moz-appearance:textfield; appearance:textfield;

}

.cart-row-qty input::-webkit-outer-spin-button,

.cart-row-qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.cart-row-qty-max{font-size:11.5px; color:#8a7260; margin-left:4px}

.cart-row-price-ks{

  display:block; font-family:'Jost',sans-serif;

  font-size:11.5px; color:#8a7260; margin-top:2px;

}

@media (max-width:900px){ .cart-row-price-ks{display:inline; margin-left:8px} }

.order-item-ks{display:block; font-size:11.5px; color:var(--stone, #8a7260); margin-top:2px}

.product-card .pm-ks{font-size:12px; color:#96b878; white-space:nowrap}

.detail-ks{

  margin:0 0 18px; padding:12px 14px;

  border:1px solid rgba(150,184,120,0.3); border-radius:6px;

  background:rgba(150,184,120,0.06);

}

.detail-ks-pocet{font-size:14px; color:#96b878; display:flex; align-items:center; gap:6px}

.detail-ks-pozn{font-size:12.5px; line-height:1.55; color:var(--text-mid, #c8a880); margin-top:4px}



/* ═══════════════════════════════════════════════════════════

   Balík #92: lišta s cenou u dna obrazovky na počítači

   (#pd-lista, index.php _pdLista). Vyjede, až cena v pravém

   sloupci odjede nahoru; na mobilu ji nahrazuje .detail-buybar.

═══════════════════════════════════════════════════════════ */

#pd-lista {

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;

  background: rgba(20, 14, 8, 0.97);

  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);

  border-top: 1px solid var(--border-strong, rgba(200,170,120,0.25));

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);

  transform: translateY(110%); visibility: hidden;

  transition: transform 0.25s ease, visibility 0s linear 0.25s;

}

#pd-lista.je-videt { transform: none; visibility: visible; transition: transform 0.25s ease; }

.pd-lista-in {

  max-width: 1400px; margin: 0 auto; padding: 10px 32px;

  display: flex; align-items: center; gap: 18px;

}

.pd-lista-img {

  width: 48px; height: 48px; object-fit: contain; flex: none;

  background: var(--cream-mid, #2a1f14); border-radius: 4px;

}

.pd-lista-nazev {

  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

  font-family: 'EB Garamond', Georgia, serif; font-size: 20px; color: var(--brown-dark, #f0e2c8);

}

.pd-lista-cena {

  font-family: 'EB Garamond', Georgia, serif; font-size: 26px; font-weight: 500;

  color: var(--brown-dark, #f0e2c8); white-space: nowrap; text-align: right; line-height: 1.1;

}

.pd-lista-cena span { display: block; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400; color: var(--stone, #8a7260); }

#pd-lista .btn-add-to-cart-lg { width: auto; flex: none; padding: 13px 26px; }

body.pd-lista-open footer { padding-bottom: 76px; }

@media (max-width: 768px) { #pd-lista { display: none; } }

@media (prefers-reduced-motion: reduce) { #pd-lista, #pd-lista.je-videt { transition: none; } }



/* ═══════════════════════════════════════════════════════════

   Balík #93: nové uspořádání detailu produktu (index.php

   renderProductDetail). Vpravo nákupní sloupec, pod ním přes celou

   šířku Popis, Parametry, Doprava a platba a podobné kusy.

═══════════════════════════════════════════════════════════ */

.detail-sidebar.pd-nakup { gap: 16px; }

.pd-nakup .detail-category { margin-bottom: -6px; }

.pd-podkat { color: var(--stone, #8a7260); letter-spacing: 0.14em; }

.pd-nakup .detail-title { font-size: clamp(28px, 2.4vw, 38px); }

.pd-fakta {

  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;

  font-size: 13.5px; color: var(--text-mid, #c8a880); letter-spacing: 0.01em;

}

.pd-fakt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.pd-fakt .ti { color: var(--gold, #c8922a); font-size: 15px; }

.pd-fakt-tecka { color: var(--stone, #8a7260); font-style: normal; }

.pd-nakup .detail-buybar {

  border-top: 1px solid var(--border, rgba(200,170,120,0.12));

  padding-top: 18px; margin-top: 4px;

}

.pd-dostupnost {

  display: flex; align-items: flex-start; gap: 10px;

  font-size: 13px; line-height: 1.55; color: var(--text-mid, #c8a880);

  padding: 11px 13px; border-radius: 6px;

  border: 1px solid rgba(150,184,120,0.28); background: rgba(150,184,120,0.06);

}

.pd-dostupnost .ti { color: #96b878; font-size: 17px; margin-top: 1px; flex: none; }

.pd-dostupnost strong { color: #96b878; font-weight: 500; }

.pd-vyhody { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.pd-vyhody li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--text-mid, #c8a880); }

.pd-vyhody .ti { color: var(--gold, #c8922a); font-size: 17px; flex: none; margin-top: 1px; }

.pd-vyhody strong { color: var(--text, #f0e2c8); font-weight: 500; }

.pd-odkaz {

  background: none; border: none; padding: 0; margin-left: 4px; cursor: pointer;

  font: inherit; color: var(--gold, #c8922a); text-decoration: underline; text-underline-offset: 3px;

}

.pd-kod { font-size: 11px; color: var(--stone, #8a7260); letter-spacing: 0.04em; }



.pd-spodek {

  margin-top: 64px; display: grid; gap: 40px 56px;

  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);

}

.pd-sekce-doprava { grid-column: 1 / -1; }

.pd-sekce-parametry:only-child, .pd-sekce-popis:only-child { grid-column: 1 / -1; }

.pd-sekce-nadpis {

  font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 24px;

  color: var(--brown-dark, #f0e2c8); margin: 0 0 14px; padding-bottom: 10px;

  border-bottom: 1px solid var(--border, rgba(200,170,120,0.12));

}

.pd-sekce-popis .detail-desc { font-size: 14.5px; line-height: 1.85; white-space: pre-line; }

.pd-parametry { margin: 0; display: flex; flex-direction: column; }

.pd-param {

  display: flex; justify-content: space-between; gap: 16px;

  padding: 9px 0; border-bottom: 1px dashed rgba(200,170,120,0.12); font-size: 13.5px;

}

.pd-param dt { color: var(--text-light, #a88a6c); }

.pd-param dd { margin: 0; color: var(--text, #f0e2c8); text-align: right; }

.pd-doprava-boxy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pd-box-nadpis { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone, #8a7260); margin-bottom: 4px; }

.pd-box-pozn { font-size: 10.5px; color: var(--stone, #8a7260); margin-top: 2px; padding-left: 34px; }

.pd-podobne { margin-top: 64px; }

.pd-podobne-mrizka { margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }



@media (max-width: 1024px) {

  .pd-podobne-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pd-podobne-mrizka > :nth-child(4) { display: none; }

}

@media (max-width: 768px) {

  .pd-nakup .detail-buybar { border-top: 0; padding-top: 12px; margin-top: 0; }

  .pd-spodek { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }

  .pd-doprava-boxy { grid-template-columns: 1fr; }

  .pd-podobne { margin-top: 40px; }

  .pd-podobne-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pd-podobne-mrizka > :nth-child(4) { display: block; }

  .pd-sekce-nadpis { font-size: 21px; }

}

.breadcrumb { flex-wrap: wrap; row-gap: 4px; }

.breadcrumb .breadcrumb-ted { color: var(--text, #f0e2c8); cursor: default; }

.breadcrumb .breadcrumb-konec { display: inline-flex; gap: 8px; cursor: default; }

@media (max-width: 768px) {

  .breadcrumb .breadcrumb-konec { display: none; }   /* název je hned pod fotkou */

  .detail-buybar .detail-price { white-space: nowrap; }

  .detail-buybar .detail-price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

}

.breadcrumb .breadcrumb-konec, .breadcrumb .breadcrumb-konec span { cursor: default; }



/* ═══ Balík #95: popis a parametry v pravém sloupci ═══ */

.pd-blok { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border, rgba(200,170,120,0.12)); }

.pd-blok-nadpis {

  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.18em;

  text-transform: uppercase; color: var(--stone, #8a7260); margin: 0;

}

.pd-blok-popis .detail-desc { font-size: 14.5px; line-height: 1.75; white-space: pre-line; }

.pd-blok .pd-param { padding: 7px 0; }

.pd-spodek { grid-template-columns: 1fr; margin-top: 56px; }

/* Fotka zůstává vidět, když se čte delší popis vpravo (jen počítač). */

@media (min-width: 1025px) {

  .product-detail-grid { align-items: start; }

  .product-detail-imgs { position: sticky; top: 96px; }

}