/* Mnemos — eshop frontend
   Bootstrap 5.3.2 (CDN) rieši grid/utility triedy; tento súbor len shop-špecifické komponenty.
   Paleta: papier/plátno (svetlé pozadie) + ultramarín (primárna akcia, farba pigmentu) +
   okrová/broskyňová (akciová cena) — obe zámerne z rovnakej rodiny sýtosti, len iný odtieň. */

:root {
  --esh-bg:          #f7f5f0;
  --esh-surface:     #ffffff;
  --esh-ink:         #262523;
  --esh-ink-soft:    #6b6760;
  --esh-border:      #e2ddd2;
  --esh-border-soft: #ece7db;

  --esh-accent:       #3948ab;
  --esh-accent-ink:   #ffffff;
  --esh-accent-soft:  #eceefa;
  --esh-accent-dark:  #2b3585;

  --esh-sale:        #c1701e;
  --esh-sale-soft:   #fbeee0;

  --esh-radius: 10px;
  --esh-radius-sm: 6px;
  --esh-shadow: 0 1px 2px rgba(38,37,35,.06), 0 4px 14px rgba(38,37,35,.05);
}

body.esh {
  background: var(--esh-bg);
  color: var(--esh-ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.esh a { color: var(--esh-accent); text-decoration: none; }
.esh a:hover { color: var(--esh-accent-dark); }
.esh h1, .esh h2, .esh h3, .esh h4 {
  font-family: "Bitter", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--esh-ink);
}
.esh .text-soft { color: var(--esh-ink-soft); }
.esh .eyebrow {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--esh-ink-soft);
}

/* ── Top contact bar ─────────────────────────────────────────────── */
.esh-topbar {
  font-size: .8rem; color: var(--esh-ink-soft);
  border-bottom: 1px solid var(--esh-border-soft);
}
.esh-topbar a { color: var(--esh-ink-soft); }
.esh-topbar svg { vertical-align: -2px; margin-right: 4px; }

/* ── Header ───────────────────────────────────────────────────────── */
.esh-header { background: var(--esh-surface); border-bottom: 1px solid var(--esh-border); }
.esh-logo {
  font-family: "Bitter", serif; font-weight: 700; font-size: 1.4rem; color: var(--esh-ink);
  white-space: nowrap;
}
.esh-search { flex: 1 1 auto; max-width: 520px; position: relative; }
.esh-search .form-control {
  border-radius: var(--esh-radius-sm) 0 0 var(--esh-radius-sm);
  border-color: var(--esh-border);
}
.esh-search .btn {
  border-radius: 0 var(--esh-radius-sm) var(--esh-radius-sm) 0;
  background: var(--esh-ink); border-color: var(--esh-ink); color: #fff;
}

/* ── Live vyhľadávacie návrhy (assets/js/search.js) ──────────────────────────────────── */
.esh-search-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  box-shadow: 0 10px 24px rgba(0,0,0,.12); z-index: 20; max-height: 70vh; overflow-y: auto; padding: 10px;
}
.esh-search-suggest-empty { padding: 8px 4px; color: var(--esh-ink-soft); font-size: .85rem; }
.esh-search-suggest-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--esh-border); }
.esh-search-suggest-badge {
  background: var(--esh-bg); border: 1px solid var(--esh-border); border-radius: 999px;
  padding: 4px 12px; font-size: .78rem; color: var(--esh-ink); text-decoration: none;
}
.esh-search-suggest-badge:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-search-suggest-products { display: flex; flex-direction: column; gap: 2px; }
.esh-search-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--esh-radius-sm);
  text-decoration: none; color: var(--esh-ink);
}
.esh-search-suggest-item:hover { background: var(--esh-bg); }
.esh-search-suggest-thumb {
  width: 38px; height: 38px; border-radius: var(--esh-radius-sm); background: var(--esh-bg);
  flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.esh-search-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.esh-search-suggest-name { font-size: .85rem; line-height: 1.3; }
.esh-header-actions { gap: 22px; }
.esh-icon-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--esh-ink); font-size: .72rem; position: relative;
}
.esh-icon-link:hover { color: var(--esh-accent); }
.esh-badge-count {
  position: absolute; top: -6px; right: -10px;
  background: var(--esh-accent); color: #fff; font-size: .62rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
/* Skrytý, kým JS nezistí počet, aj natrvalo pri prázdnom košíku (žiadna "0" v badge) — bez tohto
   pravidla by `display: flex` vyššie prebilo predvolené `[hidden]{display:none}` (rovnaká
   špecifickosť, autorský štýl je v kaskáde za UA štýlom). */
.esh-badge-count[hidden] { display: none; }

/* ── Category nav ─────────────────────────────────────────────────── */
.esh-catnav { background: var(--esh-ink); }
.esh-catnav .nav-link {
  color: rgba(255,255,255,.82); font-size: .85rem; padding: 12px 16px; white-space: nowrap;
}
.esh-catnav .nav-link:hover, .esh-catnav .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.esh-hero {
  background: linear-gradient(135deg, var(--esh-accent) 0%, var(--esh-accent-dark) 100%);
  color: #fff; border-radius: var(--esh-radius); padding: 44px 40px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.esh-hero .eyebrow { color: rgba(255,255,255,.75); }
.esh-hero h1 { color: #fff; font-size: 2rem; max-width: 22ch; }
.esh-hero-side {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 138px;
}

/* ── Trust badges ─────────────────────────────────────────────────── */
.esh-trust { background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius); }
.esh-trust-item { display: flex; align-items: center; gap: 12px; }
.esh-trust-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--esh-accent-soft); color: var(--esh-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Product card ─────────────────────────────────────────────────── */
.esh-card {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s;
}
.esh-card:hover { box-shadow: var(--esh-shadow); border-color: var(--esh-border-soft); }
.esh-card-img {
  aspect-ratio: 1 / 1; background: var(--esh-bg); display: flex; align-items: center; justify-content: center;
  color: var(--esh-ink-soft); position: relative; overflow: hidden;
}
.esh-card-img img { width: 100%; height: 100%; object-fit: cover; }
.esh-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.esh-card-title {
  font-size: .92rem; font-weight: 600; color: var(--esh-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.esh-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esh-price { font-weight: 700; color: var(--esh-ink); font-variant-numeric: tabular-nums; }
.esh-price-old { text-decoration: line-through; color: var(--esh-ink-soft); font-weight: 500; font-size: .85rem; }
.esh-price-sale { color: var(--esh-sale); }
.esh-badge-sale {
  position: absolute; top: 10px; left: 10px; background: var(--esh-sale); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 1;
}
.esh-add-cart {
  width: 34px; height: 34px; border-radius: 50%; background: var(--esh-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0;
}
.esh-add-cart:hover { background: var(--esh-accent); }
.esh-wishlist-btn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--esh-surface); color: var(--esh-ink-soft);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--esh-border); flex-shrink: 0;
}
.esh-wishlist-btn:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-wishlist-btn.active { color: var(--esh-accent); border-color: var(--esh-accent); }
.esh-wishlist-btn.active svg { fill: var(--esh-accent); }
.esh-wishlist-tip {
  /* Vždy TESNE NAD tlačidlom (žiadosť používateľa) — position:fixed voči VIEWPORTU (nie voči
     karte produktu), pripojené priamo do <body> a umiestnené cez getBoundingClientRect() v
     assets/js/wishlist.js. Karty produktov majú overflow:hidden (zaoblené rohy), takže absolútne
     pozicovanie voči karte by hlášku pri okraji orezalo — fixed + body totiž obchádza tento
     problém úplne (14.9.2026 oprava orezanej hlášky v listingu). */
  position: fixed; z-index: 1000; transform: translate(-50%, -100%); margin-top: -8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.esh-wishlist-hint {
  background: var(--esh-ink); color: #fff; font-size: .78rem; padding: 6px 10px;
  border-radius: var(--esh-radius-sm); width: max-content; max-width: 220px; text-align: center;
}
.esh-wishlist-hint::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--esh-ink);
}
.esh-wishlist-hint a { color: #fff; text-decoration: underline; }

/* Výberový popup — keď má zákazník viac než 1 zoznam, klik na srdiečko namiesto okamžitého
   prepnutia ponúkne, do ktorého zoznamu (zoznamov) sa má produkt uložiť (14.9.2026). */
.esh-wishlist-picker {
  background: var(--esh-surface); color: var(--esh-ink); border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); padding: 10px 12px; width: 220px; text-align: left;
}
.esh-wishlist-picker::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--esh-surface);
}
.esh-wishlist-picker-heading {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--esh-ink-soft);
  margin-bottom: 6px;
}
.esh-wishlist-picker label {
  display: flex; align-items: center; gap: 8px; font-size: .85rem; padding: 4px 0; cursor: pointer;
}
.esh-wishlist-picker .esh-wishlist-picker-link {
  display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--esh-border);
  font-size: .78rem; color: var(--esh-accent); text-decoration: underline;
}

/* ── No-image placeholder (real "bez fotky" state, nie wireframe krížiky) ─ */
.esh-noimg { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--esh-ink-soft); }
.esh-noimg svg { opacity: .55; }
.esh-noimg span { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }

/* ── Tabs (Novinky / Akcie) ───────────────────────────────────────── */
.esh-tabs .nav-link {
  border: 1px solid var(--esh-border); border-radius: 999px; color: var(--esh-ink-soft);
  padding: 7px 18px; font-size: .85rem; margin-right: 8px;
}
.esh-tabs .nav-link.active { background: var(--esh-ink); color: #fff; border-color: var(--esh-ink); }

/* ── Newsletter band ──────────────────────────────────────────────── */
.esh-newsletter {
  background: var(--esh-accent-soft); border-radius: var(--esh-radius); padding: 28px 32px;
}
.esh-newsletter .btn { background: var(--esh-accent); border-color: var(--esh-accent); }
.esh-newsletter .btn:hover { background: var(--esh-accent-dark); border-color: var(--esh-accent-dark); }

/* ── Footer ───────────────────────────────────────────────────────── */
.esh-footer { background: var(--esh-ink); color: rgba(255,255,255,.72); }
.esh-footer h6 { color: #fff; font-family: inherit; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; }
.esh-footer a { color: rgba(255,255,255,.72); }
.esh-footer a:hover { color: #fff; }
.esh-footer hr { border-color: rgba(255,255,255,.14); }
.esh-social {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.esh-breadcrumb { font-size: .82rem; color: var(--esh-ink-soft); }
.esh-breadcrumb a { color: var(--esh-ink-soft); }
.esh-breadcrumb a:hover { color: var(--esh-accent); }

/* ── Category sidebar tree / subcategory tiles ───────────────────── */
.esh-sidebar { background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius); padding: 20px; }

.esh-cat-tree, .esh-cat-tree ul { list-style: none; margin: 0; padding: 0; }
.esh-cat-tree ul { padding-left: 16px; margin-top: 2px; }
.esh-cat-tree li { margin: 0; }
.esh-cat-tree a {
  display: block; padding: 6px 0; color: var(--esh-ink-soft); font-size: .87rem;
  border-left: 2px solid transparent; padding-left: 8px; margin-left: -8px;
}
.esh-cat-tree > li > a { font-weight: 700; color: var(--esh-ink); font-size: .92rem; }
.esh-cat-tree a:hover { color: var(--esh-accent); }
.esh-cat-tree a.active { color: var(--esh-accent); font-weight: 700; border-left-color: var(--esh-accent); }

.esh-subcat-tile {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  padding: 8px 16px; display: inline-flex; align-items: center; color: var(--esh-ink); font-weight: 600; font-size: .85rem;
  transition: border-color .15s, color .15s;
}
.esh-subcat-tile:hover { border-color: var(--esh-accent); color: var(--esh-accent); }

/* ── Sort / toolbar ───────────────────────────────────────────────── */
.esh-sort .form-select { border-color: var(--esh-border); font-size: .85rem; }

/* ── Pagination ───────────────────────────────────────────────────── */
.esh-pagination .page-link { color: var(--esh-ink); border-color: var(--esh-border); }
.esh-pagination .page-item.active .page-link { background: var(--esh-ink); border-color: var(--esh-ink); }

/* ── Product page ─────────────────────────────────────────────────── */
.esh-gallery-main {
  background: var(--esh-bg); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.esh-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.esh-gallery-thumb {
  width: 76px; height: 76px; border-radius: var(--esh-radius-sm); border: 1px solid var(--esh-border);
  background: var(--esh-bg); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.esh-price-lg { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.esh-price-lg .esh-price-old { font-size: 1.1rem; }
.esh-variant-chip {
  border: 1px solid var(--esh-border); border-radius: 999px; padding: 7px 18px; font-size: .85rem;
  background: var(--esh-surface); color: var(--esh-ink); cursor: default;
}
.esh-variant-chip.active { background: var(--esh-ink); color: #fff; border-color: var(--esh-ink); }
.esh-stock-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #3a9a5c; }
.esh-stock-dot.out { background: #c1701e; }
.esh-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  overflow: hidden;
}
.esh-qty button {
  width: 38px; height: 42px; border: none; background: var(--esh-surface); color: var(--esh-ink); font-size: 1rem;
}
.esh-qty input {
  width: 46px; height: 42px; border: none; border-left: 1px solid var(--esh-border); border-right: 1px solid var(--esh-border);
  text-align: center; font-size: .9rem;
}
.esh-btn-cart {
  background: var(--esh-ink); color: #fff; border: none; border-radius: var(--esh-radius-sm);
  height: 42px; font-weight: 600; padding: 0 22px;
}
.esh-btn-cart:hover { background: var(--esh-accent); color: #fff; }
.esh-icon-btn {
  width: 42px; height: 42px; border-radius: var(--esh-radius-sm); border: 1px solid var(--esh-border);
  background: var(--esh-surface); color: var(--esh-ink); display: flex; align-items: center; justify-content: center;
}
.esh-icon-btn:hover { border-color: var(--esh-accent); color: var(--esh-accent); }

.esh-spec-table tr { border-bottom: 1px solid var(--esh-border-soft); }
.esh-spec-table td { padding: 10px 0; font-size: .88rem; }
.esh-spec-table td:first-child { color: var(--esh-ink-soft); width: 40%; }

/* ── Košík — offcanvas panel ──────────────────────────────────────── */
.esh-cart-offcanvas { width: 400px; max-width: 100%; }
.esh-cart-offcanvas .offcanvas-header { border-bottom: 1px solid var(--esh-border); }
.esh-cart-offcanvas .offcanvas-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.esh-cart-empty svg { opacity: .4; }

.esh-cart-list { display: flex; flex-direction: column; gap: 14px; }
.esh-cart-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--esh-border-soft); }
.esh-cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.esh-cart-item-img {
  width: 56px; height: 56px; border-radius: var(--esh-radius-sm); background: var(--esh-bg);
  border: 1px solid var(--esh-border); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; color: var(--esh-ink-soft);
}
.esh-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.esh-cart-item-body { flex: 1; min-width: 0; }
.esh-cart-item-title { font-size: .87rem; font-weight: 600; color: var(--esh-ink); display: block; }
.esh-cart-item-unavailable { opacity: .6; }
.esh-cart-remove { border: none; background: none; color: var(--esh-ink-soft); flex-shrink: 0; padding: 4px; }
.esh-cart-remove:hover { color: var(--esh-sale); }

.esh-qty-sm button { width: 28px; height: 30px; }
.esh-qty-sm input { width: 34px; height: 30px; font-size: .8rem; }

.esh-cart-total { border-top: 1px solid var(--esh-border); }

/* ── Animácie — pridanie do košíka ────────────────────────────────── */
@keyframes esh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.esh-add-cart.esh-added, .esh-btn-cart.esh-added { animation: esh-pop .35s ease; background: var(--esh-accent) !important; }

@keyframes esh-bump { 0% { transform: scale(1); } 50% { transform: scale(1.45); } 100% { transform: scale(1); } }
.esh-badge-count.esh-bump { animation: esh-bump .4s ease; }

.esh-add-cart:disabled { background: var(--esh-border); color: var(--esh-ink-soft); cursor: not-allowed; }
.esh-btn-cart:disabled { background: var(--esh-border); color: var(--esh-ink-soft); cursor: not-allowed; }

/* ── Formuláre (registrácia a ďalšie budúce, napr. prihlásenie) ──────────── */
.esh-form-card {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  padding: 28px;
}
.esh-btn-primary {
  background: var(--esh-ink); color: #fff; border: none; border-radius: var(--esh-radius-sm);
  height: 44px; font-weight: 600; padding: 0 22px;
}
.esh-btn-primary:hover { background: var(--esh-accent); color: #fff; }

.esh-review {
  display: flex; gap: 14px; padding-top: 16px; border-top: 1px solid var(--esh-border-soft);
}
.esh-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--esh-accent-soft); color: var(--esh-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .esh-hero { padding: 32px 24px; min-height: 220px; }
  .esh-hero h1 { font-size: 1.5rem; }
  .esh-topbar { display: none; }
}