/* ============================================================
   Znamky.cz — 2026 redesign
   Single-file theme stylesheet.
   Browser floor: Safari 14.1+ / Chrome 88+ / Firefox 90+ / Edge 90+
   ============================================================ */

/* Load Inter (primary) + JetBrains Mono (numeric) — matches the design spec. */
/* Inter + JetBrains Mono now load via <link> in header.twig (no chained @import). */

/* ============================================================
   1. RESET — minimal modern reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; font-family: var(--z-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--z-border); margin: 0; }

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* — brand */
  --z-header-bg:        #0F1216;
  --z-header-bg-2:      #1A1F26;
  --z-primary:          #2E4BDB;
  --z-primary-hover:    #2540C2;
  --z-primary-dark:     #1E33A8;
  --z-yellow:           #FFC93A;
  --z-yellow-hover:     #F5BC1F;

  /* — surfaces */
  --z-paper:            #FFFFFF;
  --z-canvas:           #F5F3EF;
  --z-canvas-2:         #EDEAE3;
  --z-canvas-warm:      #FAF8F3;
  --z-border:           #E5E1D8;
  --z-border-strong:    #D1CCC0;
  --z-divider:          #EEEAE0;

  /* — ink */
  --z-ink:              #15181D;
  --z-ink-2:            #3C414B;
  --z-ink-3:            #6B7280;
  --z-ink-4:            #9AA0A8;

  /* — semantic */
  --z-success:          #0F7A3C;
  --z-success-bg:       #E6F4EC;
  --z-success-border:   #C8E6D4;
  --z-warn:             #B45309;
  --z-warn-bg:          #FEF3C7;
  --z-warn-border:      #FDE68A;
  --z-danger:           #B91C1C;
  --z-danger-bg:        #FEE2E2;
  --z-danger-border:    #FECACA;
  --z-info:             #1E40AF;
  --z-info-bg:          #E0E7FF;
  --z-info-border:      #C7D2FE;

  /* — typography */
  --z-font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --z-font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --z-font-serif:       Georgia, 'Times New Roman', serif;

  /* — type scale */
  --z-text-xs:          11px;
  --z-text-sm:          13px;
  --z-text-base:        14px;
  --z-text-md:          16px;
  --z-text-lg:          20px;
  --z-text-xl:          26px;
  --z-text-2xl:         26px;
  --z-text-3xl:         32px;
  --z-text-4xl:         40px;
  --z-text-5xl:         40px;

  /* — spacing scale (4px base) */
  --z-space-1:          4px;
  --z-space-2:          8px;
  --z-space-3:          12px;
  --z-space-4:          16px;
  --z-space-5:          20px;
  --z-space-6:          24px;
  --z-space-7:          28px;
  --z-space-8:          32px;
  --z-space-10:         40px;
  --z-space-12:         48px;
  --z-space-16:         64px;

  /* — radii */
  --z-radius-sm:        6px;
  --z-radius:           6px;
  --z-radius-md:        10px;
  --z-radius-lg:        14px;
  --z-radius-xl:        14px;
  --z-radius-pill:      999px;

  /* — shadows */
  --z-shadow-sm:        0 1px 2px rgba(15, 18, 22, 0.04);
  --z-shadow:           0 2px 6px rgba(15, 18, 22, 0.06), 0 1px 2px rgba(15, 18, 22, 0.04);
  --z-shadow-md:        0 6px 16px rgba(15, 18, 22, 0.08);
  --z-shadow-lg:        0 14px 32px rgba(15, 18, 22, 0.10);

  /* — layout */
  --z-container:        1280px;
  --z-container-pad:    32px;
  --z-header-height:    64px;
  --z-topstrip-height:  32px;

  /* — motion */
  --z-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --z-fast:             140ms;
  --z-base:             220ms;
  --z-slow:             400ms;
}

/* Znamky+ priority purchase lock — intentionally different from an active
   add-to-cart button on both desktop and mobile listings. */
.z-pc__cart.z-pc__cart--prio {
  background: linear-gradient(120deg,#12161c,#1a2540) !important;
  color: #ffc93a !important;
  border: 1px solid rgba(255,201,58,.58) !important;
  cursor: pointer;
}
.z-pc__cart.z-pc__cart--prio:hover { filter: brightness(1.13); }

.z-gprio { position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:18px; }
.z-gprio[hidden] { display:none; }
.z-gprio__bg { position:absolute; inset:0; background:rgba(15,18,22,.62); }
.z-gprio__card { position:relative; width:100%; max-width:420px; padding:26px 24px 22px; border-radius:17px; background:#fff; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.z-gprio__x { position:absolute; top:8px; right:12px; width:40px; height:40px; border:0; background:transparent; color:#777; font-size:26px; }
.z-gprio__badge { display:inline-block; margin-bottom:10px; padding:5px 12px; border-radius:999px; background:#12161c; color:#ffc93a; font-size:11px; font-weight:850; letter-spacing:.6px; }
.z-gprio__card h3 { margin:0 0 9px; font-size:20px; font-weight:850; }
.z-gprio__desc { margin:0 0 14px; color:#5f6470; font-size:14px; line-height:1.55; }
.z-gprio__card form { text-align:left; }
.z-gprio__card label { display:block; margin:9px 0 4px; font-size:12px; font-weight:700; }
.z-gprio__card input { width:100%; min-height:44px; padding:9px 11px; border:1px solid #d9d4c8; border-radius:9px; }
.z-gprio__btn { display:flex; width:100%; min-height:46px; margin-top:14px; align-items:center; justify-content:center; border:0; border-radius:10px; background:#ffc93a; color:#1a1406 !important; font-size:14px; font-weight:800; text-decoration:none; }
.z-gprio__alt { margin-top:12px; color:#777; font-size:13px; }

/* ============================================================
   3. BASE / TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--z-font-sans);
  font-size: var(--z-text-base);
  color: var(--z-ink);
  background: var(--z-canvas);
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--z-ink);
}
h1 { font-size: var(--z-text-4xl); letter-spacing: -1px; }
h2 { font-size: var(--z-text-2xl); }
h3 { font-size: var(--z-text-xl); }
h4 { font-size: var(--z-text-lg); }
h5, h6 { font-size: var(--z-text-md); font-weight: 600; }

p { line-height: 1.55; color: var(--z-ink-2); }

a {
  color: var(--z-primary);
  transition: color var(--z-fast) var(--z-ease);
}
a:hover { color: var(--z-primary-hover); }

code, kbd, pre, samp {
  font-family: var(--z-font-mono);
  font-size: 0.92em;
}

::selection { background: rgba(46, 75, 219, 0.18); }

/* ============================================================
   4. LAYOUT primitives
   ============================================================ */
.z-container {
  max-width: var(--z-container);
  margin: 0 auto;
  padding: 0 var(--z-container-pad);
}

.z-section { padding: var(--z-space-12) 0; }
.z-section--tight { padding: var(--z-space-6) 0; }
/* When a section is ALSO a .z-container, the vertical-only shorthands above
   reset horizontal padding to 0 (single-class, later in the cascade), which made
   these rows span the full 1280 grid — wider than the hero (which keeps its 32px
   inset) and even overflowing the viewport. Re-assert the container gutter so
   every content row lines up with the hero. Desktop only — mobile rows are
   full-bleed scrollers with their own edge handling. */
@media (min-width: 768px) {
  .z-section.z-container,
  .z-section--tight.z-container {
    padding-left: var(--z-container-pad);
    padding-right: var(--z-container-pad);
  }
}

.z-grid { display: grid; gap: var(--z-space-4); }
.z-stack { display: flex; flex-direction: column; gap: var(--z-space-3); }
.z-row { display: flex; align-items: center; gap: var(--z-space-3); flex-wrap: wrap; }
.z-row--tight { gap: var(--z-space-2); }
.z-spacer { flex: 1; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--z-space-2);
  font-family: var(--z-font-sans);
  font-weight: 600;
  font-size: var(--z-text-base);
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--z-radius-md);
  transition: background-color var(--z-fast) var(--z-ease),
              color var(--z-fast) var(--z-ease),
              border-color var(--z-fast) var(--z-ease),
              box-shadow var(--z-fast) var(--z-ease),
              transform var(--z-fast) var(--z-ease);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.z-btn:active { transform: translateY(1px); }
.z-btn:focus-visible { outline: 2px solid var(--z-primary); outline-offset: 2px; }

.z-btn--primary { background: var(--z-primary); color: #fff; }
.z-btn--primary:hover { background: var(--z-primary-hover); color: #fff; }

.z-btn--cart {
  background: var(--z-yellow);
  color: #15181D;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--z-radius-md);
}
.z-btn--cart:hover { background: var(--z-yellow-hover); }
.z-cart-total {
  font-size: var(--z-text-base);
  font-weight: 800;
  color: #15181D;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.z-btn--ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.z-btn--ghost:hover { background: rgba(255,255,255,0.18); }

.z-btn--outline {
  background: transparent;
  color: var(--z-ink);
  border-color: var(--z-border-strong);
}
.z-btn--outline:hover { background: var(--z-canvas-warm); border-color: var(--z-ink-3); }

.z-btn--sm { padding: 7px 12px; font-size: var(--z-text-sm); border-radius: var(--z-radius); }
.z-btn--lg { padding: 13px 24px; font-size: var(--z-text-md); }

/* ============================================================
   6. FORMS
   ============================================================ */
.z-input,
.z-select,
.z-textarea {
  font-family: var(--z-font-sans);
  font-size: var(--z-text-base);
  color: var(--z-ink);
  background: var(--z-paper);
  border: 1px solid var(--z-border-strong);
  border-radius: var(--z-radius);
  padding: 9px 12px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--z-fast) var(--z-ease), box-shadow var(--z-fast) var(--z-ease);
}
.z-input:focus,
.z-select:focus,
.z-textarea:focus {
  outline: none;
  border-color: var(--z-primary);
  box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.15);
}

/* ============================================================
   7. BADGES & CHIPS
   ============================================================ */
.z-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-1);
  background: #F1EEE7;
  color: var(--z-ink-2);
  border: 1px solid var(--z-border);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--z-radius-sm);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.z-badge--mono { font-family: var(--z-font-mono); letter-spacing: 0; text-transform: none; }
.z-badge--success { background: var(--z-success-bg); color: var(--z-success); border-color: var(--z-success-border); }
.z-badge--warn { background: var(--z-warn-bg); color: var(--z-warn); border-color: var(--z-warn-border); }
.z-badge--info { background: var(--z-info-bg); color: var(--z-info); border-color: var(--z-info-border); }
.z-badge--sale { background: var(--z-danger-bg); color: var(--z-danger); border-color: var(--z-danger-border); }
.z-badge--dark { background: #1F2530; color: #E8ECF2; border-color: #1F2530; }
.z-badge__dot { width: 5px; height: 5px; border-radius: var(--z-radius-pill); background: currentColor; }

/* ============================================================
   8. CARDS / PRODUCT CARDS
   ============================================================ */
.z-card {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--z-base) var(--z-ease), transform var(--z-base) var(--z-ease), border-color var(--z-base) var(--z-ease);
}
.z-card:hover {
  box-shadow: var(--z-shadow-md);
  border-color: var(--z-border-strong);
  transform: translateY(-2px);
}

.z-product-card { position: relative; display: flex; flex-direction: column; }
.z-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;          /* with fallback below */
  background: var(--z-canvas-2);
  border-bottom: 1px solid var(--z-border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* fallback for browsers without aspect-ratio (Safari < 15) */
@supports not (aspect-ratio: 1 / 1) {
  .z-product-card__media { height: 0; padding-bottom: 100%; }
  .z-product-card__media > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
.z-product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.z-product-card__body { padding: var(--z-space-4); display: flex; flex-direction: column; gap: var(--z-space-2); }
.z-product-card__title { font-size: var(--z-text-md); font-weight: 600; color: var(--z-ink); }
.z-product-card__meta { font-size: var(--z-text-sm); color: var(--z-ink-3); font-family: var(--z-font-mono); }
.z-product-card__price { font-size: var(--z-text-lg); font-weight: 700; color: var(--z-ink); }
.z-product-card__price-old { font-size: var(--z-text-sm); color: var(--z-ink-4); text-decoration: line-through; margin-left: var(--z-space-2); }
.z-product-card__badges { position: absolute; top: var(--z-space-2); left: var(--z-space-2); display: flex; gap: var(--z-space-1); flex-wrap: wrap; z-index: 1; }

/* ============================================================
   9. HEADER (top utility strip + main bar)
   ============================================================ */
.z-topstrip {
  background: var(--z-header-bg);
  color: #9AA0A8;
  font-size: var(--z-text-xs);
  padding: 7px var(--z-container-pad);
  display: flex;
  align-items: center;
  gap: var(--z-space-4);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
  position: relative;
  z-index: 200;
}
.z-topstrip a, .z-topstrip a:hover { color: #D8DCE3; text-decoration: none; }
.z-topstrip__divider { opacity: 0.3; }
.z-topstrip__free-ship strong { color: #fff; }
.z-topstrip__bank { font-family: var(--z-font-mono); color: #fff; }
.z-topstrip__promo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--z-yellow, #FFC93A);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.z-topstrip__promo:hover { color: #FFD96A; transform: translateY(-1px); }
.z-topstrip__promo-arrow { display: inline-block; transition: transform 0.18s ease; }
.z-topstrip__promo:hover .z-topstrip__promo-arrow { transform: translateX(3px); }
.z-topstrip__account { margin-left: auto; color: #D8DCE3; }
.z-topstrip__account:hover { color: #fff !important; }

/* ============================================================
   9b. DROPDOWN (z-dd) — used in topstrip for lang/curr
   ============================================================ */
.z-dd { position: relative; display: inline-block; }
.z-dd__btn {
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--z-text-xs);
  padding: 3px 8px;
  border-radius: var(--z-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background-color var(--z-fast) var(--z-ease), border-color var(--z-fast) var(--z-ease);
  -webkit-appearance: none;
  appearance: none;
}
.z-dd__btn:hover { background: rgba(255,255,255,0.08); }
.z-dd.is-open > .z-dd__btn { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.10); color: #fff; }
.z-dd__caret { opacity: 0.55; font-size: 11px; line-height: 1; transition: transform var(--z-fast) var(--z-ease); }
.z-dd.is-open .z-dd__caret { transform: rotate(180deg); opacity: 0.9; }

.z-dd__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: #181D24;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--z-radius);
  padding: 6px;
  box-shadow: var(--z-shadow-lg), 0 0 0 1px rgba(0,0,0,0.5);
  list-style: none;
  margin: 0;
  z-index: 250;
  /* hidden by default; .is-open reveals it */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--z-fast) var(--z-ease),
              transform var(--z-fast) var(--z-ease),
              visibility 0s linear var(--z-fast);
}
.z-dd.is-open > .z-dd__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--z-fast) var(--z-ease), transform var(--z-fast) var(--z-ease);
}
.z-dd__menu li { list-style: none; margin: 0; }
.z-dd__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--z-text-xs);
  color: #D8DCE3;
  border-radius: var(--z-radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
.z-dd__menu a:hover { background: rgba(255,255,255,0.08); color: #fff !important; }
.z-dd__menu a svg { flex-shrink: 0; opacity: 0.7; }
.z-dd__menu a:hover svg { opacity: 1; }
.z-dd__menu-sep {
  height: 1px; background: rgba(255,255,255,0.08); margin: 6px 4px;
  list-style: none;
}
.z-dd__menu-primary { color: var(--z-yellow) !important; font-weight: 600; }
.z-dd__menu-primary:hover { color: var(--z-yellow) !important; }
.z-dd__menu-primary svg { opacity: 1 !important; }
.z-dd__menu-danger { color: #FCA5A5 !important; }
.z-dd__menu-danger:hover { color: #FECACA !important; }

/* Account dropdown: push to far right of the topstrip + menu aligns right */
.z-topstrip__account-wrap { margin-left: auto; }
.z-dd__menu--right { left: auto; right: 0; min-width: 200px; }

.z-header {
  background: var(--z-header-bg);
  padding: 14px var(--z-container-pad);
  display: flex;
  align-items: center;
  gap: var(--z-space-6);
  color: #fff;
}
.z-header__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.z-header__logo img {
  height: 38px;
  width: auto;
  display: block;
  /* if logo has dark colour, invert so it works on dark header */
  filter: brightness(1.1);
}

.z-header__nav {
  display: flex;
  gap: var(--z-space-7);
  margin-left: var(--z-space-6);
  font-size: var(--z-text-md);
  font-weight: 600;
  flex-wrap: wrap;
  align-items: center;
}
.z-header__nav a { color: #fff; }
.z-header__nav a:hover { color: var(--z-yellow); }

/* Mega-menu — hover dropdown under top nav items */
.z-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.z-nav-link {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.z-nav-link:hover { color: var(--z-yellow); }
.z-nav-caret {
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.z-nav-item--has-mega:hover .z-nav-caret { transform: rotate(180deg); }

.z-megamenu {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 1500;
  min-width: 640px;
  max-width: 860px;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  padding: 16px;
  margin-top: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
/* small invisible bridge so cursor can travel without losing hover */
.z-nav-item--has-mega::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 12px;
  background: transparent;
  display: none;
}
.z-nav-item--has-mega:hover::after,
.z-nav-item--has-mega:focus-within::after {
  display: block;
}
.z-nav-item--has-mega:hover .z-megamenu,
.z-nav-item--has-mega:focus-within .z-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.z-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;
}
.z-megamenu__item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  color: #15181D !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.z-megamenu__item:hover {
  background: #FAF8F3;
  color: #2E4BDB !important;
}
.z-megamenu__img {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #FAF8F3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.z-megamenu__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.z-megamenu__img--placeholder {
  background: linear-gradient(135deg, #ECE7DA 0%, #FAF8F3 100%);
}
.z-megamenu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On small viewports the mega-menu is hidden (drawer takes over) */
@media (max-width: 900px) {
  .z-megamenu { display: none !important; }
  .z-nav-caret { display: none !important; }
}

.z-header__search {
  background: #fff;
  border-radius: var(--z-radius);
  padding: 8px 12px 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  flex-shrink: 1;
  min-width: 0;
  position: relative;
  z-index: 150;               /* lift above any decorative overlays / VWO layers */
  pointer-events: auto;
}
.z-header__search input[type="text"] {
  border: 0;
  outline: none;
  font-size: 13px;
  flex: 1 1 auto;
  background: transparent;
  font-family: var(--z-font-sans);
  min-width: 0;
  color: var(--z-ink);
  caret-color: var(--z-ink);
  pointer-events: auto !important;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}
.z-header__search input[type="text"]:focus { outline: none; }
.z-header__search-icon { color: var(--z-ink-3); flex-shrink: 0; pointer-events: none; }
.z-header__search kbd {
  font-family: var(--z-font-mono);
  font-size: 11px;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  border-radius: var(--z-radius-sm);
  padding: 1px 5px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   SEARCH SUGGESTIONS DROPDOWN (autocomplete)
   ============================================================ */
.z-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--z-border-strong);
  border-radius: var(--z-radius-md);
  box-shadow: var(--z-shadow-lg);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 480px;
  overflow-y: auto;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms var(--z-ease), transform 140ms var(--z-ease), visibility 0s linear 140ms;
}
.z-search-suggestions.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 140ms var(--z-ease), transform 140ms var(--z-ease);
}
.z-search-suggestions li { list-style: none; margin: 0; }
.z-search-suggestions li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--z-radius);
  color: var(--z-ink);
  text-decoration: none;
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-search-suggestions li a:hover { background: var(--z-canvas-warm); color: var(--z-ink); }
.z-search-suggestions img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: var(--z-radius-sm);
  background: var(--z-canvas-2);
  flex-shrink: 0;
}
.z-sg__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.z-sg__name {
  font-size: 13px; font-weight: 600; color: var(--z-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.z-sg__price { font-size: 13px; font-weight: 700; color: var(--z-primary); }
.z-sg__none {
  padding: 14px; text-align: center;
  color: var(--z-ink-3);
  font-size: var(--z-text-sm);
}
.z-sg__all a {
  justify-content: center;
  background: var(--z-canvas-warm);
  color: var(--z-primary);
  font-weight: 700;
  font-size: var(--z-text-sm);
  margin-top: 4px;
}
.z-sg__all a:hover { background: var(--z-primary); color: #fff; }

/* Mobile variant of the suggestions popup */
.z-search-suggestions--mobile {
  top: calc(100% + 8px);
  border-radius: var(--z-radius);
  max-height: 60vh;
}

/* Ensure mobile-only elements never appear on desktop and steal clicks */
@media (min-width: 768px) {
  .mobile-search-bar,
  .mobile-search-toggle,
  .mobile-hamburger,
  .mobile-cart-btn,
  .mobile-bottom-nav,
  .mobile-cart-panel,
  body > .menu-overlay,
  body > .cart-overlay,
  body > .menu-close,
  body > .cart-close { display: none !important; }
}

/* ============================================================
   MOBILE HEADER — burger + search icon button + compact cart
   ============================================================ */
.z-header__burger,
.z-header__search-btn {
  display: none;          /* visible only on mobile */
  background: transparent;
  border: 0;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  border-radius: var(--z-radius);
  flex-shrink: 0;
}
.z-header__burger:hover,
.z-header__search-btn:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 767px) {
  /* Hide ALL legacy QuickStore header structure on mobile too */
  body > header > nav.header_nav,
  body > header > #header_top,
  body > header > .header_top,
  body > header .left-nav,
  body > header .right-nav,
  body > header .mobile-header-controls { display: none !important; }
  body > .menu-overlay,
  body > .cart-overlay,
  body > .menu-close,
  body > .cart-close,
  .mobile-search-bar,
  .mobile-cart-panel { display: none !important; }
  /* OPTIONAL: keep the mobile-bottom-nav if you want — comment to hide
  .mobile-bottom-nav { display: none !important; } */

  /* Topstrip also hidden on mobile — info moves into drawer */
  .z-topstrip { display: none !important; }

  /* Compact mobile header */
  .z-header {
    padding: 10px 12px;
    gap: 8px;
    position: sticky; top: 0; z-index: 100;
  }
  .z-header__burger,
  .z-header__search-btn { display: inline-flex; align-items: center; justify-content: center; }
  .z-header__logo { flex: 1; justify-content: center; }
  .z-header__logo img { height: 28px; }
  .z-header__nav { display: none; }          /* moved to drawer */
  .z-header__search { display: none; }       /* opens via search button */
  .z-header__cart,
  .z-btn--cart {
    padding: 8px 10px;
    border-radius: var(--z-radius-md);
  }
  .z-header .z-cart-total { display: none; } /* icon only on mobile */
  .z-header__cart svg,
  #z-cart-link svg { margin: 0; }
}

/* ============================================================
   MOBILE SLIDE-OUT MENU + OVERLAY
   ============================================================ */
.z-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,18,22,0.55);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--z-ease), visibility 0s linear 200ms;
}
.z-mobile-overlay.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 200ms var(--z-ease);
}

.z-mobile-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(80vw, 320px);
  background: var(--z-header-bg);
  color: #fff;
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 260ms var(--z-ease);
  overflow-y: auto;
  padding: 0;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.z-mobile-menu.is-open { transform: translateX(0); }
.z-mobile-menu__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.z-mobile-menu__title { font-size: var(--z-text-md); font-weight: 700; }
.z-mobile-menu__close {
  background: transparent; border: 0; color: #fff;
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.z-mobile-menu__nav { display: flex; flex-direction: column; padding: 12px 0; }
.z-mobile-menu__nav a {
  display: block; padding: 12px 20px;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-mobile-menu__nav a:hover { background: rgba(255,255,255,0.06); color: var(--z-yellow); }
.z-mobile-menu__sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 20px; }
.z-mobile-menu__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px;
}
.z-mobile-menu__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--z-radius-pill);
  color: #fff !important;
  text-decoration: none;
  font-size: var(--z-text-sm);
  cursor: pointer;
}
.z-mobile-menu__chip:hover { background: rgba(255,255,255,0.06); }
.z-mobile-menu__chip.is-active { background: var(--z-yellow); color: #15181D !important; border-color: var(--z-yellow); }

/* ============================================================
   MOBILE FULL-WIDTH SEARCH OVERLAY (opens on search-icon tap)
   ============================================================ */
.z-mobile-search {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--z-header-bg);
  padding: 12px;
  z-index: 1001;
  transform: translateY(-100%);
  /* Keep the closed overlay non-painting & non-interactive. A transform-only
     hide lets mobile browsers briefly repaint a position:fixed element at its
     untransformed spot during scroll (URL-bar collapse) — it would flash in
     above the header. opacity:0 + pointer-events:none prevents that peek. */
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms var(--z-ease), opacity 220ms var(--z-ease);
}
.z-mobile-search.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.z-mobile-search__form {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border-radius: var(--z-radius);
  padding: 8px 10px;
}
.z-mobile-search__form input[type="text"] {
  flex: 1; border: 0; outline: none;
  background: transparent;
  font-size: 14px;
  font-family: var(--z-font-sans);
  color: var(--z-ink);
  caret-color: var(--z-ink);
  padding: 4px 0;
}
.z-mobile-search__close {
  background: transparent; border: 0;
  color: var(--z-ink-3);
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 6px;
}

/* On desktop the mobile drawer/search/overlay never show */
@media (min-width: 768px) {
  .z-mobile-overlay,
  .z-mobile-menu,
  .z-mobile-search { display: none !important; }
}

/* ============================================================
   MOBILE: native horizontal scroll for carousels + compact rows
   The owl-carousel init is skipped on mobile; instead each .z-carousel
   becomes a horizontally scrolling flex strip with snap.
   ============================================================ */
@media (max-width: 767px) {
  /* Legacy class hidden — we use .z-bottom-nav now */
  .mobile-bottom-nav:not(.z-bottom-nav) { display: none !important; }
  body { padding-bottom: 64px !important; }   /* room for fixed bottom-nav */

  /* HERO — main banner + the two tiles each stacked full-width, with clear
     spacing between every banner. */
  .z-hero { gap: 12px !important; padding: 12px !important; grid-template-columns: 1fr !important; }
  .z-hero__main { min-height: 220px !important; }
  .z-hero__main--slideshow { min-height: 220px !important; }
  .z-hero__slide { padding: 18px 20px !important; }
  .z-hero__title { font-size: 26px !important; letter-spacing: -0.4px !important; }
  .z-hero__desc { font-size: 13px !important; max-width: none !important; }
  .z-hero__eyebrow { font-size: 11px !important; margin-bottom: 8px !important; }
  .z-hero__cta { margin-top: 12px !important; }
  .z-hero__cta .z-btn { padding: 8px 14px !important; font-size: 13px !important; }

  .z-hero__side {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .z-hero__tile {
    padding: 16px 18px !important;
    border-radius: var(--z-radius-lg) !important;
    min-height: 118px !important;
    justify-content: center;
  }
  .z-hero__tile-title { font-size: 20px !important; margin-top: 6px !important; }
  .z-hero__tile-desc  { font-size: 11px !important; margin-top: 2px !important; }
  .z-hero__tile-link  { font-size: 13px !important; margin-top: 8px !important; }
  .z-hero__tile .z-badge { font-size: 11px !important; padding: 1px 5px !important; }

  /* SECTION HEAD — tighter spacing */
  .z-section--tight { padding: 20px 0 0 !important; }
  .z-section-head   { margin-bottom: 10px !important; padding: 0 12px !important; }
  .z-section-title  { font-size: 20px !important; }

  /* CONTAINERS — full-bleed scroll edge-to-edge */
  .z-cat-tiles,
  .z-deal-grid,
  .z-feat-grid,
  .z-auc-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 10px !important;
    padding: 0 12px !important;
    margin: 0 -12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .z-cat-tiles::-webkit-scrollbar,
  .z-deal-grid::-webkit-scrollbar,
  .z-feat-grid::-webkit-scrollbar,
  .z-auc-grid::-webkit-scrollbar { display: none; }

  /* CATEGORY TILE — fixed compact width */
  .z-cat-tile {
    flex: 0 0 130px !important;
    scroll-snap-align: start;
    padding: 10px 8px !important;
  }
  .z-cat-tile__img { width: 56px !important; height: 56px !important; }
  .z-cat-tile__name { font-size: 13px !important; line-height: 1.25 !important; }
  .z-cat-tile__count { font-size: 11px !important; }

  /* DEAL / FEATURED / AUCTION cards — fixed width (larger, less cramped) */
  .z-deal,
  .z-feat,
  .z-auc {
    flex: 0 0 186px !important;
    scroll-snap-align: start;
  }
  .z-deal__name,
  .z-feat__name,
  .z-auc__name { font-size: 13px !important; min-height: 30px !important; }
  .z-deal__new,
  .z-feat__price,
  .z-auc__rv { font-size: 14px !important; }
  .z-deal__old,
  .z-feat__old { font-size: 11px !important; }
  .z-deal__pct,
  .z-auc__badge { font-size: 11px !important; padding: 2px 6px !important; }
  .z-deal__cart { font-size: 11px !important; padding: 6px !important; }
  .z-auc__btn { font-size: 11px !important; padding: 6px !important; }
  .z-auc__cd-num { font-size: 11px !important; }
  .z-auc__cd-label { display: none; }  /* save space */

  /* DOD green + PROMO red containers — full-bleed to both screen edges */
  .z-dod, .z-promo {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .z-dod { padding: 18px 16px !important; }
  .z-dod__title { font-size: 20px !important; }
  .z-dod__desc { font-size: 13px !important; }
  .z-dod__head { padding: 0 0 var(--z-space-3) !important; }
  .z-dod .z-deal-grid { margin: 0 -16px !important; padding: 0 16px !important; }

  /* PROMO red container */
  .z-promo { padding: 0 !important; }
  .z-promo__head { padding: 16px !important; }
  .z-promo__title { font-size: 20px !important; }
  .z-promo__emoji { font-size: 26px !important; }
  .z-promo__body { padding: 16px !important; }
  .z-promo__body .z-deal-grid { margin: 0 -16px !important; padding: 0 16px !important; }

  /* FEATURE boxes — single column stack */
  .z-fbox-grid { padding: 0 12px !important; }
  .z-fbox { padding: 16px 18px !important; }
  .z-fbox__title { font-size: 14px !important; }
  .z-fbox__desc { font-size: 13px !important; }

  /* TRUST — 2x2 grid */
  .z-trust {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 12px !important;
  }
  .z-trust__item { padding: 10px 12px !important; gap: 8px !important; }
  .z-trust__icon { width: 32px !important; height: 32px !important; }
  .z-trust__title { font-size: 11px !important; }
  .z-trust__desc { font-size: 11px !important; }

  /* NEWSLETTER */
  .z-newsletter { margin: 18px 12px !important; padding: 18px !important; }
  .z-newsletter__title { font-size: 20px !important; }
  .z-newsletter__desc { font-size: 13px !important; }

  /* BLOG */
  .z-blog-grid { padding: 0 12px !important; }

  /* SECTION container override */
  .z-container { padding: 0 !important; }
  .z-section--tight .z-section-head { padding: 0 12px !important; }
}

@media (max-width: 480px) {
  .z-hero__side { flex-direction: column !important; }
  .z-trust { grid-template-columns: 1fr !important; }
}

/* Hide the legacy QuickStore desktop header on desktop sizes — keep mobile parts working */
@media (min-width: 768px) {
  header > nav.header_nav,
  header > #header_top,
  header > .header_top,
  body > header:not(.z-header) .left-nav,
  body > header:not(.z-header) .right-nav { display: none !important; }
}

/* responsive — collapse nav under header on mobile */
@media (max-width: 1023px) {
  .z-header { flex-wrap: wrap; }
  .z-header__nav { order: 3; flex-basis: 100%; margin-left: 0; gap: var(--z-space-4); }
  .z-header__search { width: auto; flex: 1; }
}
@media (max-width: 640px) {
  .z-topstrip { font-size: 11px; padding: 6px 16px; gap: var(--z-space-2); }
  .z-topstrip__free-ship, .z-topstrip__bank { display: none; }
  .z-header { padding: 10px 16px; gap: var(--z-space-3); }
  .z-header__nav { font-size: var(--z-text-sm); gap: var(--z-space-3); }
}

/* ============================================================
   10. BREADCRUMB
   ============================================================ */
.z-breadcrumb {
  background: var(--z-canvas-warm);
  border-bottom: 1px solid var(--z-divider);
  padding: 14px var(--z-container-pad);
  font-size: var(--z-text-sm);
  color: var(--z-ink-3);
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
  flex-wrap: wrap;
}
.z-breadcrumb__sep { opacity: 0.4; }
.z-breadcrumb a { color: var(--z-ink-3); }
.z-breadcrumb a:hover { color: var(--z-primary); }
.z-breadcrumb__current { color: var(--z-ink); font-weight: 600; }

/* ============================================================
   11. FOOTER
   ============================================================ */
.z-footer {
  background: var(--z-header-bg);
  color: #9AA0A8;
  padding: var(--z-space-12) var(--z-container-pad) var(--z-space-6);
  font-size: var(--z-text-sm);
}
.z-footer h4 { color: #fff; font-size: var(--z-text-md); margin-bottom: var(--z-space-3); }
.z-footer a { color: #9AA0A8; }
.z-footer a:hover { color: #fff; }
.z-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--z-space-8); margin-bottom: var(--z-space-8); }
.z-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--z-space-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--z-space-3); }

/* ============================================================
   12. CATEGORY HERO
   ============================================================ */
.z-cat-hero {
  background: linear-gradient(135deg, #0F1216 0%, #1A2540 60%, #1E3370 100%);
  color: #fff;
  padding: var(--z-space-8) var(--z-container-pad);
  position: relative;
  overflow: hidden;
}
.z-cat-hero__eyebrow {
  font-size: var(--z-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--z-yellow);
  margin-bottom: var(--z-space-2);
}
.z-cat-hero h1 {
  font-size: var(--z-text-4xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.05;
}
.z-cat-hero p {
  margin-top: var(--z-space-3);
  font-size: var(--z-text-base);
  color: #C8CDD8;
  max-width: 580px;
}
.z-cat-hero__stats { display: flex; gap: var(--z-space-6); margin-top: var(--z-space-5); font-size: var(--z-text-sm); }
.z-cat-hero__stat-num { font-size: var(--z-text-xl); font-weight: 700; font-family: var(--z-font-mono); color: #fff; }

/* ============================================================
   13. CATEGORY GRID
   ============================================================ */
.z-cat-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--z-space-6);
  padding: var(--z-space-6) var(--z-container-pad);
}
/* (older .z-cat-sidebar / .z-cat-grid rules removed — superseded by canonical block lower in file) */
.z-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--z-space-4); }

/* ============================================================
   14. PAGINATION
   ============================================================ */
.z-pagination { display: flex; gap: var(--z-space-2); align-items: center; padding: var(--z-space-6) 0; justify-content: center; flex-wrap: wrap; }
.z-pagination a, .z-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--z-border-strong);
  border-radius: var(--z-radius);
  background: var(--z-paper);
  color: var(--z-ink-2);
  font-size: var(--z-text-sm);
  font-weight: 600;
  transition: all var(--z-fast) var(--z-ease);
}
.z-pagination a:hover { border-color: var(--z-ink-3); }
.z-pagination .active, .z-pagination__current { background: var(--z-ink); color: #fff; border-color: var(--z-ink); }

/* ============================================================
   15. PRODUCT PAGE
   ============================================================ */
.z-product { padding: var(--z-space-8) var(--z-container-pad); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--z-space-10); }
.z-product__gallery { background: var(--z-paper); border-radius: var(--z-radius-lg); padding: var(--z-space-6); border: 1px solid var(--z-border); }
.z-product__title { font-size: var(--z-text-3xl); margin-bottom: var(--z-space-3); }
.z-product__codes { display: flex; gap: var(--z-space-2); flex-wrap: wrap; margin-bottom: var(--z-space-4); }
.z-product__price { font-size: var(--z-text-3xl); font-weight: 800; color: var(--z-ink); margin-block: var(--z-space-4); }
.z-product__row { display: flex; align-items: center; gap: var(--z-space-3); padding: var(--z-space-3) 0; border-top: 1px solid var(--z-divider); font-size: var(--z-text-sm); }
.z-product__row dt { color: var(--z-ink-3); min-width: 130px; font-weight: 500; }
.z-product__row dd { color: var(--z-ink); margin: 0; font-weight: 600; }

@media (max-width: 900px) {
  .z-product { grid-template-columns: 1fr; gap: var(--z-space-6); }
}

/* ============================================================
   16. CART / CHECKOUT
   ============================================================ */
.z-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--z-space-6); padding: var(--z-space-6) var(--z-container-pad); }
.z-cart-table { background: var(--z-paper); border-radius: var(--z-radius-lg); border: 1px solid var(--z-border); overflow: hidden; }
.z-cart-summary { background: var(--z-paper); border-radius: var(--z-radius-lg); border: 1px solid var(--z-border); padding: var(--z-space-5); position: sticky; top: var(--z-space-3); align-self: start; }

@media (max-width: 900px) {
  .z-cart-layout { grid-template-columns: 1fr; }
  .z-cart-summary { position: static; }
}

/* ============================================================
   17. UTILITIES
   ============================================================ */
.z-mono   { font-family: var(--z-font-mono); }
.z-muted  { color: var(--z-ink-3); }
.z-bold   { font-weight: 700; }
.z-hidden { display: none !important; }
.z-only-sm { display: none; }
@media (max-width: 640px) { .z-only-sm { display: initial; } .z-hide-sm { display: none !important; } }

/* ============================================================
   18. COMPAT — bridge classes used by existing JS
   ============================================================ */
/* OpenCart still uses these on buttons inside templates — restyle gently */
.btn-primary { background: var(--z-primary); color: #fff; border: 0; border-radius: var(--z-radius-md); padding: 10px 18px; font-weight: 600; }
.btn-primary:hover { background: var(--z-primary-hover); color: #fff; }
.btn-default { background: var(--z-paper); color: var(--z-ink); border: 1px solid var(--z-border-strong); border-radius: var(--z-radius-md); padding: 10px 18px; font-weight: 600; }
.btn-default:hover { background: var(--z-canvas-warm); }
.btn-success { background: var(--z-success); color: #fff; border: 0; border-radius: var(--z-radius-md); padding: 10px 18px; font-weight: 600; }
.btn-danger { background: var(--z-danger); color: #fff; border: 0; border-radius: var(--z-radius-md); padding: 10px 18px; font-weight: 600; }

.form-control { font-family: var(--z-font-sans); font-size: var(--z-text-base); color: var(--z-ink); background: var(--z-paper); border: 1px solid var(--z-border-strong); border-radius: var(--z-radius); padding: 9px 12px; width: 100%; }
.form-control:focus { outline: none; border-color: var(--z-primary); box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.15); }

.alert { padding: var(--z-space-3) var(--z-space-4); border-radius: var(--z-radius); border: 1px solid; font-size: var(--z-text-sm); margin-bottom: var(--z-space-3); }
.alert-success { background: var(--z-success-bg); color: var(--z-success); border-color: var(--z-success-border); }
.alert-warning { background: var(--z-warn-bg); color: var(--z-warn); border-color: var(--z-warn-border); }
.alert-danger  { background: var(--z-danger-bg); color: var(--z-danger); border-color: var(--z-danger-border); }
.alert-info    { background: var(--z-info-bg); color: var(--z-info); border-color: var(--z-info-border); }

/* ============================================================
   MOBILE RESPONSIVE — keep parity with design across all sections
   The legacy QuickStore mobile header stays (visible-xs elements);
   we only adapt the NEW sections (hero, rows, footer) for small screens.
   ============================================================ */
@media (max-width: 900px) {
  .z-section--tight { padding: var(--z-space-5) 0 0; }
  .z-section-title { font-size: var(--z-text-lg); }
  .z-hero { padding: var(--z-space-3) var(--z-space-3) 0; }
}

@media (max-width: 700px) {
  :root { --z-container-pad: 16px; }
  .z-container { padding: 0 var(--z-container-pad); }

  /* HERO */
  .z-hero { grid-template-columns: 1fr; gap: var(--z-space-3); }
  .z-hero__main { padding: var(--z-space-5) var(--z-space-4); min-height: 240px; }
  .z-hero__title { font-size: 26px; letter-spacing: -0.5px; }
  .z-hero__desc { font-size: var(--z-text-sm); }
  .z-hero__cta { flex-wrap: wrap; gap: var(--z-space-2); }
  .z-hero__cta .z-btn { flex: 1; min-width: 130px; padding: 11px 14px; font-size: var(--z-text-sm); }
  .z-hero__side { flex-direction: row; gap: var(--z-space-3); }
  .z-hero__tile { padding: 14px 16px; }
  .z-hero__tile-title { font-size: var(--z-text-md); }

  /* DEAL OF DAY container */
  .z-dod { padding: 16px; border-radius: var(--z-radius-lg); }
  .z-dod__title { font-size: 20px; }
  .z-dod__desc { font-size: 13px; }
  .z-dod__head { flex-direction: column; align-items: flex-start; gap: var(--z-space-3); }
  .z-dod__right { width: 100%; justify-content: space-between; }
  .z-dod__timer-num { font-size: 14px; padding: 4px 7px; min-width: 30px; }
  .z-dod__timer-label { font-size: 11px; }

  /* PROMO banner */
  .z-promo__head { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: var(--z-space-3); }
  .z-promo__title { font-size: 20px; }
  .z-promo__desc { font-size: 13px; }
  .z-promo__emoji { font-size: 26px; }
  .z-promo__body { padding: 16px; }
  .z-promo__right { width: 100%; justify-content: space-between; }

  /* FEATURE boxes stack vertically */
  .z-fbox-grid { grid-template-columns: 1fr; gap: var(--z-space-3); }
  .z-fbox { padding: 18px 20px; }
  .z-fbox__title { font-size: var(--z-text-md); }
  .z-fbox__desc { font-size: 13px; }

  /* TRUST strip — 2 columns on small */
  .z-trust { grid-template-columns: repeat(2, 1fr); gap: var(--z-space-2); }
  .z-trust__item { padding: 12px 14px; gap: 10px; }
  .z-trust__icon { width: 36px; height: 36px; }
  .z-trust__title { font-size: 13px; }
  .z-trust__desc { font-size: 11px; }

  /* NEWSLETTER stacks */
  .z-newsletter { padding: 22px 18px; flex-direction: column; align-items: stretch; }
  .z-newsletter__form { flex-direction: column; min-width: 0; max-width: none; }
  .z-newsletter__form button { width: 100%; }

  /* BLOG single column */
  .z-blog-grid { grid-template-columns: 1fr; }

  /* SECTION HEAD */
  .z-section-head { gap: var(--z-space-2); flex-wrap: wrap; align-items: flex-start; }
  .z-section-title { font-size: var(--z-text-lg); }

  /* CATEGORY tiles — smaller */
  .z-cat-tile { padding: 10px 8px; }
  .z-cat-tile__img { width: 50px; height: 50px; }
  .z-cat-tile__name { font-size: 11px; }
  .z-cat-tile__count { font-size: 11px; }

  /* PRODUCT/DEAL cards — adjust */
  .z-deal__name, .z-feat__name, .z-auc__name { font-size: 11px; min-height: 30px; }
  .z-deal__new, .z-feat__price, .z-auc__rv { font-size: 14px; }
  .z-deal__cart { font-size: 11px; padding: 7px; }

  /* FOOTER on mobile */
  body > footer { padding: var(--z-space-6) 0 var(--z-space-3); margin-top: var(--z-space-5); }
  footer .row { grid-template-columns: 1fr; gap: var(--z-space-4); }
  footer .container { padding: 0 var(--z-container-pad); }
  footer h4, footer h5, footer h6 { font-size: var(--z-text-md); }
}

@media (max-width: 480px) {
  .z-hero__side { flex-direction: column; }
  .z-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   TABS (used in Featured Products section: Novinky/Nejprodávanější)
   ============================================================ */
/* Záložky Novinky/Nejprodávanější a odkaz „zobrazit vše" drží pohromadě
   na pravé straně hlavičky sekce, aby .z-section-head zůstal dvouprvkový. */
/* Lišta v košíku míří na nejbližší cíl. U kreditu zlatá, ať se to opticky
   pojí se Znamky+ a s kreditním boxem níž, a odliší se od dopravy zdarma. */
/* Dvojitá třída schválně: základní .z-ship-progress je v souboru až o čtyři
   tisíce řádků níž a při stejné specificitě by přebila barvy níže. */
.z-ship-progress.z-ship-progress--credit { border-color: rgba(200,150,30,.35); background: linear-gradient(180deg,#fffdf5,#fff9e9); }
.z-ship-progress.z-ship-progress--credit .z-ship-progress__icon { color: #a97b12; }
.z-ship-progress.z-ship-progress--credit .z-ship-progress__amt { color: #a97b12; }
.z-ship-progress.z-ship-progress--credit .z-ship-progress__fill { background: linear-gradient(90deg,#e0b23c,#c8961e); }

/* Facetová lišta nad výpisem kategorie (celistvosti, pohlednice). */
.z-facets { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 12px 14px;
            border: 1px solid #e8eaed; border-radius: 12px; background: #fcfcfd; }
.z-facets.is-loading { opacity: .55; pointer-events: none; }
.z-facet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.z-facet__label { flex: 0 0 118px; font-size: 12px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .03em; color: #6b7280; }
.z-facet__vals { display: flex; flex-wrap: wrap; gap: 6px; }
.z-facet__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
                 border: 1px solid #dfe3e8; border-radius: 999px; background: #fff;
                 font-size: 13px; color: #374151 !important; text-decoration: none; }
.z-facet__chip:hover { border-color: #9aa1ab; }
.z-facet__chip.is-active { background: #111827; border-color: #111827; color: #fff !important; }
.z-facet__n { font-size: 11px; opacity: .6; }
.z-facet__chip.is-active .z-facet__n { opacity: .75; }
/* Rozbalovací panel megamenu byl 2381 px vysoký při okně 900 a měl
   overflow-y: hidden — co se nevešlo, nešlo ani odscrollovat a bylo fakticky
   nedostupné. Strop podle výšky okna a scroll uvnitř panelu. */
.li-top-item .mega-menu-content,
.li-top-item [class*="mega-menu-content"] {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.z-facet__chip.is-extra { display: none; }
.z-facet.is-open .z-facet__chip.is-extra { display: inline-flex; }
.z-facet__more { padding: 4px 10px; border: 1px dashed #cbd0d7; border-radius: 999px;
                 background: transparent; font-size: 12px; color: #6b7280; cursor: pointer; }
.z-facet__more:hover { border-color: #9aa1ab; color: #374151; }
.z-facet__clear { align-self: flex-start; font-size: 13px; color: #b42318 !important; text-decoration: none; }
@media (max-width: 720px) {
  .z-facets { padding: 10px; }
  .z-facet { flex-direction: column; gap: 4px; }
  .z-facet__label { flex: none; }
  .z-facet__vals { gap: 5px; }
  .z-facet__chip { font-size: 12px; padding: 3px 9px; }
}

.z-feat-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .z-feat-head-right { gap: 8px; }
  .z-feat-head-right .z-section-action { font-size: 13px; }
}

.z-tabs {
  display: inline-flex;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  overflow: hidden;
  background: var(--z-paper);
}
.z-tab {
  padding: 7px 14px;
  border: 0;
  background: var(--z-paper);
  color: var(--z-ink-2);
  font-size: var(--z-text-sm);
  font-weight: 600;
  font-family: var(--z-font-sans);
  cursor: pointer;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
.z-tab:hover { background: var(--z-canvas-warm); }
.z-tab.is-active { background: var(--z-ink); color: #fff; }

/* ============================================================
   CAROUSEL — owl-carousel overrides for our homepage rows
   Arrows sit INSIDE the first/last card so they're never clipped
   ============================================================ */
.z-carousel { position: relative; }
/* OpenCart's owl.carousel.css adds `.owl-carousel { overflow: hidden }` (line 95,
   the "OpenCart Code" block). Our arrows sit in the side gutter at
   left/right: -46px, i.e. OUTSIDE the container box, so that rule clipped them
   away entirely once Owl initialised. The slide track is already clipped by
   `.owl-wrapper-outer` (overflow:hidden, set by owl itself), so the container
   can safely overflow. */
.z-carousel.owl-carousel { overflow: visible !important; }
.z-carousel.owl-carousel .owl-buttons { position: static; }
.z-carousel.owl-carousel .owl-buttons div {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: var(--z-radius-pill);
  background: var(--z-paper) !important;
  color: var(--z-ink) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  text-align: center !important;
  border: 1px solid var(--z-border-strong);
  box-shadow: var(--z-shadow-md);
  opacity: 0.95 !important;
  padding: 0 !important;
  z-index: 5;
  cursor: pointer;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease), opacity var(--z-fast) var(--z-ease);
}
/* Sit in the side gutter, OUTSIDE the card track, so arrows never cover a
   product. Offset = the free space between the container edge and the viewport,
   capped at 46px and floored at 6px so the arrow is pushed as far out as the
   layout allows yet always stays on screen. Container content = 1216 → half 608,
   so the left gutter starts at (50vw − 608px). */
.z-carousel.owl-carousel .owl-buttons .owl-prev { left: calc(-1 * max(6px, min(46px, 50vw - 628px))); }
.z-carousel.owl-carousel .owl-buttons .owl-next { right: calc(-1 * max(6px, min(46px, 50vw - 628px))); }
.z-carousel.owl-carousel .owl-buttons div:hover {
  background: var(--z-ink) !important;
  color: #fff !important;
  opacity: 1 !important;
}
.z-carousel.owl-carousel .owl-item { padding: 0 7px; }
.z-carousel.owl-carousel .owl-wrapper-outer { overflow: hidden; }

/* Full-width bands (green Daily-deal / red Special): the cards sit on the 1280
   grid, so the coloured gutter beside them is deep (starts at 50vw − 640px).
   Push the arrows out into that gutter, fully clear of the cards. */
/* clamp(), not max(min()): below ~1420px viewport the band has no gutter left,
   so the offset must be allowed to flip POSITIVE (arrow inside the track).
   The old max(6px, …) floor kept it negative and pushed the arrow off screen. */
.z-dod  .z-carousel.owl-carousel .owl-buttons .owl-prev,
.z-promo .z-carousel.owl-carousel .owl-buttons .owl-prev { left: calc(-1 * clamp(-8px, 50vw - 662px, 48px)); }
.z-dod  .z-carousel.owl-carousel .owl-buttons .owl-next,
.z-promo .z-carousel.owl-carousel .owl-buttons .owl-next { right: calc(-1 * clamp(-8px, 50vw - 662px, 48px)); }

/* --- FOUC guard: pre-Owl single-row layout -----------------------------------
   On slower connections the owl-carousel JS runs late; until it adds its
   `.owl-carousel` class the underlying CSS grid wraps the boxes into several
   stacked rows (the flash the user sees). Until then, lay the items out as ONE
   clipped horizontal row (6 across, matching owl items:6) so the section keeps
   its final shape and never stacks. Desktop only — mobile uses native scroll
   (.z-carousel--native) and is left alone. Once Owl initialises, the
   :not(.owl-carousel) selector stops matching and owl takes over. */
@media (min-width: 768px) {
  .z-carousel:not(.owl-carousel):not(.z-carousel--native) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .z-carousel:not(.owl-carousel):not(.z-carousel--native) > * {
    flex: 0 0 calc((100% - 5 * var(--z-space-3)) / 6);
    min-width: 0;
  }
}

/* ── 2026-07-25: mobile cart + checkout usability pass ─────────────────── */
.z-cart-sticky-cta {
  display: none;
}

@media (max-width: 720px) {
  /* A transformed ancestor turns position:fixed into a scrolling element.
     Skip the decorative step animation on phones so the checkout action bar
     stays attached to the viewport and never covers the payment choices. */
  html body.checkout-simple_checkout .z-co-step.is-active {
    animation: none !important;
    transform: none !important;
  }

  html body.checkout-simple_checkout .z-co-step.is-active .z-co-step-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    min-height: 68px;
    margin: 0 !important;
    padding: 8px 10px !important;
  }

  html body.checkout-simple_checkout .z-co-step-nav .z-co-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 48px;
    min-width: 44px;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 10px;
    color: #374151;
  }

  html body.checkout-simple_checkout .z-co-step-nav .z-co-back svg {
    width: 19px;
    height: 19px;
  }

  html body.checkout-simple_checkout .z-co-step-nav .z-co-btn--confirm {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px !important;
  }

  html body.checkout-simple_checkout .z-co-check {
    min-height: 44px;
    align-items: center;
  }

  html body.checkout-simple_checkout .z-co-check__box {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }

  html body.checkout-simple_checkout .z-co-field input,
  html body.checkout-simple_checkout .z-co-field select,
  html body.checkout-simple_checkout .z-co-select {
    font-size: 16px !important;
  }

  html body.checkout-simple_checkout .z-co-pay-option {
    gap: 10px;
    padding: 12px !important;
    min-height: 68px;
    touch-action: manipulation;
  }

  html body.checkout-simple_checkout .z-co-pay-option__icon {
    width: 34px;
    height: 34px;
  }

  html body.checkout-simple_checkout .z-co-pay-option__title {
    line-height: 1.35;
  }

  html body.checkout-simple_checkout .z-co-pay-option__title img {
    display: block;
    width: auto;
    max-width: 42px;
    height: 15px !important;
    margin: 4px 0 0;
  }

  /* Larger, thumb-friendly cart controls without widening the product card. */
  html body.checkout-cart .z-cart-line__qty-btn,
  html body.checkout-simple_cart .z-cart-line__qty-btn {
    width: 42px !important;
    height: 42px !important;
  }

  html body.checkout-cart .z-cart-line__qty-input,
  html body.checkout-simple_cart .z-cart-line__qty-input {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  html body.checkout-cart .z-cart-line__remove,
  html body.checkout-simple_cart .z-cart-line__remove {
    width: 42px !important;
    height: 42px !important;
  }

  html body.checkout-cart .z-cart-promo__btn,
  html body.checkout-simple_cart .z-cart-promo__btn {
    min-height: 44px;
  }

  html body.checkout-cart .z-cart-back,
  html body.checkout-simple_cart .z-cart-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Functional mobile checkout CTA: visible only while the in-flow button is
     outside the viewport, and stacked directly above the 60px bottom nav. */
  html body.checkout-cart .z-cart-sticky-cta,
  html body.checkout-simple_cart .z-cart-sticky-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 9985;
    padding: 9px 14px;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #E8E4D9;
    box-shadow: 0 -4px 16px rgba(15, 20, 30, .10);
    opacity: 0;
    transform: translateY(110%);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }

  html body.checkout-cart .z-cart-sticky-cta.is-stuck,
  html body.checkout-simple_cart .z-cart-sticky-cta.is-stuck {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  html body.checkout-cart .z-cart-sticky-cta a,
  html body.checkout-simple_cart .z-cart-sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--z-primary, #2E4BDB);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 0 #1A2E9E, 0 4px 12px rgba(46, 75, 219, .28);
  }
}

@media (max-width: 360px) {
  /* Give long localized payment names enough room on very narrow phones.
     The card remains recognizable from its title and selected radio state. */
  html body.checkout-simple_checkout .z-co-pay-option {
    gap: 10px !important;
    padding: 11px !important;
  }

  html body.checkout-simple_checkout .z-co-pay-option__icon {
    display: none !important;
  }
}

/* Hide arrows on mobile — swipe instead */
@media (max-width: 640px) {
  .z-carousel.owl-carousel .owl-buttons div { display: none !important; }
}

/* ============================================================
   SECTION HEAD — used between homepage rows
   ============================================================ */
.z-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--z-space-4);
  gap: var(--z-space-3);
  flex-wrap: wrap;
}
.z-kicker {
  font-size: var(--z-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--z-primary);
  margin-bottom: var(--z-space-1);
}
.z-section-title {
  margin: 0;
  font-size: var(--z-text-xl);
  font-weight: 800;
  color: var(--z-ink);
  letter-spacing: -0.5px;
}
.z-section-action {
  font-size: var(--z-text-sm);
  font-weight: 600;
  color: var(--z-primary);
  white-space: nowrap;
}
.z-section--tight { padding: var(--z-space-7) 0 0; }

/* ============================================================
   CATEGORY TILES (horizontal scroll on overflow)
   ============================================================ */
.z-cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--z-space-3);
}
.z-cat-tile {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  text-decoration: none;
  color: var(--z-ink);
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease), border-color var(--z-base) var(--z-ease);
}
.z-cat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--z-border-strong);
  box-shadow: var(--z-shadow-md);
  color: var(--z-ink);
}
.z-cat-tile__img {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  background: var(--z-canvas-warm);
  border: 1px solid var(--z-border);
  overflow: hidden;
  position: relative;
}
.z-cat-tile__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Reserve two lines for the name so every tile is the same height regardless of
   whether the category name wraps to one or two lines. */
.z-cat-tile__name { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--z-ink); min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; }
.z-cat-tile__count { font-size: 11px; color: var(--z-ink-4); font-family: var(--z-font-mono); margin-top: 2px; }

/* --- CLS fix: dlaždice kategorií -----------------------------------------
   owl.carousel.css (blok oznaceny jako "fix", ř. 76-86) dává .owl-wrapper i .owl-item
   margin-top:10px. Než se Owl inicializuje, pás měří 162 px; po inicializaci
   182 px — a těch 20 px posune celý obsah pod sebou (naměřený desktop CLS 0,207).
   Řešení: prostor rezervovat dopředu paddingem a Owlu ty marginy sebrat.
   Výsledná podoba je stejná, jen nevzniká posun. Specificita 0,3,0 přebíjí
   owlových 0,2,0, takže !important není potřeba. */
.z-cat-tiles { padding-top: 20px; }
.z-cat-tiles.owl-carousel .owl-wrapper,
.z-cat-tiles.owl-carousel .owl-item { margin-top: 0; }

/* ============================================================
   DEAL OF DAY — green gradient container
   ============================================================ */
.z-dod {
  background: linear-gradient(135deg, #14492F 0%, #0C3322 100%);
  border-radius: var(--z-radius-xl);
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(12,51,34,0.18);
}
.z-dod__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--z-space-4); gap: var(--z-space-3); flex-wrap: wrap;
}
.z-dod__title { margin: 0; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.z-dod__desc { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }
.z-dod__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.z-dod__timer { display: inline-flex; align-items: center; gap: 7px; }
.z-dod__timer-label { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.z-dod__timer-num { background: rgba(0,0,0,0.32); color: #fff; font-family: var(--z-font-mono); font-size: 16px; font-weight: 700; padding: 5px 9px; border-radius: 10px; min-width: 36px; text-align: center; }
.z-dod__timer-sep { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.5); }
.z-dod__action { font-size: 13px; font-weight: 700; color: var(--z-yellow); white-space: nowrap; }

/* ============================================================
   DEAL CARD
   ============================================================ */
.z-deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--z-space-3);
}
.z-deal {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease);
}
.z-deal:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-md); }
.z-deal__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--z-ink); }
.z-deal__link:hover { color: var(--z-ink); }
.z-deal__cart {
  width: 100%; background: var(--z-primary); color: #fff; border: 0; border-radius: var(--z-radius);
  padding: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--z-font-sans);
  margin-top: var(--z-space-2);
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-deal__cart:hover { background: var(--z-primary-hover); }
.z-deal__media {
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-border);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.z-deal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* OC's resize() pads to fit-square — zoom in to crop the white margins */
  transform: scale(1);
  transition: transform var(--z-base) var(--z-ease);
}
.z-deal:hover .z-deal__media img { transform: scale(1.05); }
@supports not (aspect-ratio: 1 / 1) {
  .z-deal__media { height: 0; padding-bottom: 100%; }
}
.z-deal__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.z-deal__pct {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--z-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  z-index: 2;
}
.z-deal__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.z-deal__name { font-size: 13px; font-weight: 600; color: var(--z-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.z-deal__price-row { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.z-deal__new { font-size: 20px; font-weight: 800; color: var(--z-danger); }
.z-deal__old { font-size: 13px; color: var(--z-ink-4); text-decoration: line-through; }

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.z-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--z-space-3);
}
.z-feat {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--z-ink);
  display: flex;
  flex-direction: column;
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease);
}
.z-feat:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-md); color: var(--z-ink); }
.z-feat__media {
  aspect-ratio: 1 / 1;
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-border);
  overflow: hidden;
}
.z-feat__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transform: scale(1);
  transition: transform var(--z-base) var(--z-ease);
}
.z-feat:hover .z-feat__media img { transform: scale(1.05); }
@supports not (aspect-ratio: 1 / 1) {
  .z-feat__media { height: 0; padding-bottom: 100%; position: relative; }
}
.z-feat__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.z-feat__body { padding: var(--z-space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.z-feat__name { font-size: 13px; font-weight: 600; color: var(--z-ink); line-height: 1.35; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.z-feat__price-row { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.z-feat__price { font-size: 16px; font-weight: 800; color: var(--z-ink); }
.z-feat__old { font-size: 13px; color: var(--z-ink-4); text-decoration: line-through; }

/* ============================================================
   AUCTIONS
   ============================================================ */
.z-auc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--z-space-3);
}
.z-auc {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--z-ink);
  display: flex; flex-direction: column;
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease);
}
.z-auc:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-md); color: var(--z-ink); }
.z-auc__media {
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-border);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) {
  .z-auc__media { height: 0; padding-bottom: 100%; }
}
.z-auc__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transform: scale(1);
  transition: transform var(--z-base) var(--z-ease);
}
.z-auc:hover .z-auc__media img { transform: scale(1.05); }
.z-auc__badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(46,75,219,0.92); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.z-auc__countdown {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: rgba(15,18,22,0.82); color: #fff;
  border-radius: 10px; padding: 5px 9px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px;
}
.z-auc__countdown--urgent { background: rgba(185,28,28,0.94); }
.z-auc__cd-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
.z-auc__cd-num { font-size: 13px; font-weight: 800; font-family: var(--z-font-mono); }
.z-auc__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.z-auc__name { font-size: 13px; font-weight: 600; color: var(--z-ink); line-height: 1.35; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.z-auc__row { display: flex; justify-content: space-between; align-items: flex-end; }
.z-auc__rl { font-size: 11px; color: var(--z-ink-4); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.z-auc__rv { font-size: 16px; font-weight: 800; color: var(--z-ink); }
.z-auc__bids { font-size: 11px; color: var(--z-ink-3); font-weight: 600; }
.z-auc__btn {
  width: 100%; background: #fff; color: var(--z-primary);
  border: 1.5px solid var(--z-primary); border-radius: var(--z-radius);
  padding: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--z-font-sans);
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
.z-auc__btn:hover { background: var(--z-primary); color: #fff; }

/* ============================================================
   PROMO / AKČNÍ NABÍDKA
   ============================================================ */
/* Specials band — matches the production znamky.cz "Akční nabídka" red design:
   a deep crimson gradient across the whole band, white cards floating on it. */
.z-promo {
  border-radius: var(--z-radius-xl);
  overflow: hidden;
  border: 0;
  background: linear-gradient(135deg, #8b0a2a 0%, #c4193f 45%, #dd3153 100%);
  box-shadow: 0 8px 28px rgba(139,10,42,0.14);
}
.z-promo__head {
  background: transparent;
  color: #fff;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--z-space-4); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.z-promo__head::before {
  content: ''; position: absolute; inset: 0; opacity: 0.12;
  background-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 16px);
  pointer-events: none;
}
.z-promo__title-block { display: flex; align-items: center; gap: 14px; position: relative; }
.z-promo__emoji { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.z-promo__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.6px; color: #fff; }
.z-promo__desc { font-size: 13px; color: rgba(255,255,255,0.9); margin-top: 2px; }
.z-promo__right { display: flex; align-items: center; gap: 14px; position: relative; flex-wrap: wrap; }
.z-promo__code { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.22); border-radius: var(--z-radius); padding: 7px 12px; }
.z-promo__code-label { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.z-promo__code-value { font-family: var(--z-font-mono); font-size: 14px; font-weight: 700; }
.z-promo__body { background: transparent; padding: 20px 24px; }
.z-promo__body .z-deal-grid { background: transparent; }
/* Outline "view all" button, like production's .bc-sale-link */
.z-promo__right .z-btn--cart {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.z-promo__right .z-btn--cart:hover {
  background: #fff !important;
  color: #8b0a2a !important;
  border-color: #fff !important;
}

/* ============================================================
   FEATURE BOXES (chyběnka / app / catalog)
   ============================================================ */
.z-fbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--z-space-4);
}
.z-fbox {
  border-radius: var(--z-radius-lg);
  padding: 22px 24px;
  color: #fff;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  text-decoration: none;
}
.z-fbox--blue  { background: linear-gradient(120deg, #1A2540 0%, #21408A 100%); }
.z-fbox--green { background: linear-gradient(120deg, #1F8A5B 0%, #0F5C3A 100%); }
.z-fbox--red   { background: linear-gradient(120deg, #B23A2E 0%, #7A2018 100%); }
.z-fbox__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.z-fbox__title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
.z-fbox__desc { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.5; flex: 1; }
.z-fbox__cta {
  align-self: flex-start; margin-top: 4px;
  background: rgba(255,255,255,0.16); color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--z-radius);
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-fbox__cta:hover { background: rgba(255,255,255,0.26); color: #fff !important; }
.z-fbox__badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--z-yellow); color: #15181D;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--z-radius-pill);
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.z-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--z-space-3);
}
.z-trust__item {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: center;
}
.z-trust__icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--z-info-bg);
  color: var(--z-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-trust__title { font-size: 13px; font-weight: 700; color: var(--z-ink); }
.z-trust__desc { font-size: 13px; color: var(--z-ink-3); margin-top: 2px; }

/* ============================================================
   BLOG ROW
   ============================================================ */
.z-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--z-space-3);
}
.z-blog {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--z-ink);
  display: flex;
  flex-direction: column;
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease);
}
.z-blog:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-md); color: var(--z-ink); }
.z-blog__media {
  height: 150px;
  background: repeating-linear-gradient(135deg, var(--z-canvas-2) 0 14px, #E4E0D6 14px 28px);
  display: flex; align-items: center; justify-content: center;
}
.z-blog__media img { width: 100%; height: 100%; object-fit: cover; }
.z-blog__body { padding: 14px 16px 16px; }
.z-blog__date { font-size: 11px; color: var(--z-ink-4); font-family: var(--z-font-mono); margin-bottom: 6px; }
.z-blog__title { font-size: 14px; font-weight: 700; color: var(--z-ink); line-height: 1.35; margin-bottom: 10px; }
.z-blog__more { font-size: 13px; font-weight: 600; color: var(--z-primary); }

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.z-newsletter {
  background: linear-gradient(120deg, #0F1216 0%, #1A2540 100%);
  border-radius: var(--z-radius-xl);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-6);
  flex-wrap: wrap;
  margin: var(--z-space-8) 0;
}
.z-newsletter__copy { color: #fff; max-width: 520px; }
.z-newsletter__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--z-yellow); margin-bottom: 7px; }
.z-newsletter__title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.z-newsletter__desc { font-size: 13px; color: #C8CDD8; margin-top: 5px; }
.z-newsletter__desc strong { color: #fff; }
.z-newsletter__form { display: flex; gap: 10px; flex: 1; min-width: 320px; max-width: 460px; }
.z-newsletter__form input {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  outline: none;
  font-family: var(--z-font-sans);
}
.z-newsletter__form button { white-space: nowrap; padding: 13px 24px; }
.z-newsletter__feedback {
  display: block;
  flex-basis: 100%;
  margin-top: var(--z-space-2);
  font-size: var(--z-text-sm);
  color: rgba(255,255,255,0.7);
}
.z-newsletter__feedback.is-ok { color: #B6E8C9; }
.z-newsletter__feedback.is-err { color: #FCA5A5; }

/* ============================================================
   19. HOMEPAGE HERO
   ============================================================ */
.z-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--z-space-4);
  padding: var(--z-space-6) var(--z-container-pad) 0;
  max-width: var(--z-container);
  margin: 0 auto;
}
.z-hero__main {
  position: relative;
  border-radius: var(--z-radius-xl);
  overflow: hidden;
  background: #E9EDF1;
  color: var(--z-ink);
  min-height: 360px;
}

/* --- Slideshow: stacked slides, only one .is-active visible --- */
.z-hero__main--slideshow { display: block; }
.z-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 36px 40px;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--z-ease), visibility 0s linear 600ms;
  z-index: 1;
}
.z-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--z-ease), visibility 0s;
  z-index: 2;
}
.z-hero__overlay {
  position: absolute;
  inset: 0;
  /* Banners are light with stamps on the right — use a soft LIGHT scrim on the
     left (not a heavy dark one) so dark copy stays readable and the stamps show
     through cleanly on the right. */
  background: linear-gradient(90deg,
    rgba(247,248,250,0.94) 0%,
    rgba(247,248,250,0.86) 30%,
    rgba(247,248,250,0.45) 56%,
    rgba(247,248,250,0.05) 80%,
    rgba(247,248,250,0) 100%);
  pointer-events: none;
  z-index: 0;
}

.z-hero__dots {
  position: absolute;
  bottom: 16px;
  left: 40px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.z-hero__dot {
  width: 9px; height: 9px;
  border-radius: var(--z-radius-pill);
  background: rgba(15,18,22,0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--z-fast) var(--z-ease), transform var(--z-fast) var(--z-ease);
}
.z-hero__dot:hover { background: rgba(15,18,22,0.45); }
.z-hero__dot.is-active { background: #0F5C3A; transform: scale(1.2); }

.z-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: var(--z-radius-pill);
  background: rgba(255,255,255,0.75);
  color: var(--z-ink);
  border: 1px solid rgba(15,18,22,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 4;
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-hero__arrow:hover { background: #fff; }
.z-hero__arrow--prev { left: 14px; }
.z-hero__arrow--next { right: 14px; }

/* hero arrows into the bottom controls row. Vertically centred at the left edge, the
   prev arrow's right edge (14px + 40px wide = 54px) overhung the slide's 40px
   padding-left and painted over the title/description at every width -- it also
   swallowed clicks on the text. The card is overflow:hidden so the arrows cannot
   live in the gutter; instead they join the dots (bottom:16px; left:40px) in the
   bottom controls row, mirrored to the right at the same 40px inset. Below 701px
   the arrows are display:none, so desktop only. */
@media (min-width: 701px) {
  .z-hero__arrow {
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .z-hero__arrow--prev { left: auto; right: 88px; }
  .z-hero__arrow--next { right: 40px; }
}

@media (max-width: 700px) {
  .z-hero__slide { padding: var(--z-space-5) var(--z-space-4); }
  .z-hero__arrow { display: none; }
  .z-hero__dots { left: 50%; transform: translateX(-50%); }
}

.z-hero__copy { position: relative; max-width: 460px; }
.z-hero__eyebrow {
  font-size: var(--z-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #0F5C3A;
  margin-bottom: var(--z-space-3);
}
.z-hero__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.05;
  color: var(--z-ink);
  margin: 0;
}
.z-hero__desc {
  margin: var(--z-space-3) 0 0;
  font-size: var(--z-text-md);
  color: var(--z-ink-2);
  line-height: 1.55;
  max-width: 400px;
}
.z-hero__cta { display: flex; gap: var(--z-space-2); margin-top: 22px; flex-wrap: wrap; }

.z-hero__side { display: flex; flex-direction: column; gap: var(--z-space-4); }
.z-hero__tile {
  flex: 1;
  border-radius: var(--z-radius-xl);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  color: var(--z-ink);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease);
}
.z-hero__tile:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-md); color: var(--z-ink); }
.z-hero__tile--green {
  background: linear-gradient(135deg, #E8F4EB 0%, #CDE7D5 100%);
  border-color: #BFE0C9;
}
.z-hero__tile--orange {
  background: linear-gradient(135deg, #FCEDE6 0%, #F7D8CC 100%);
  border-color: #F0CDBF;
}
.z-hero__tile-title { font-size: var(--z-text-xl); font-weight: 800; margin-top: var(--z-space-2); letter-spacing: -0.5px; }
.z-hero__tile-desc { font-size: var(--z-text-sm); color: var(--z-ink-2); margin-top: var(--z-space-1); }
.z-hero__tile-link { font-size: var(--z-text-sm); font-weight: 700; margin-top: var(--z-space-3); display: inline-flex; align-items: center; gap: 6px; }
.z-hero__tile--green .z-hero__tile-link { color: #0F5C3A; }
.z-hero__tile--orange .z-hero__tile-link { color: #9A3412; }

@media (max-width: 900px) {
  .z-hero { grid-template-columns: 1fr; }
  .z-hero__main { padding: var(--z-space-6); }
  .z-hero__title { font-size: var(--z-text-3xl); }
  .z-hero__side { flex-direction: row; }
}
@media (max-width: 640px) {
  .z-hero__side { flex-direction: column; }
}

/* ============================================================
   20. OPENCART PRODUCT CARDS — restyle .product-thumb / .product-layout
        These classes appear EVERYWHERE products are rendered
        (featured, latest, bestsellers, category grids, search results).
   ============================================================ */
.product-thumb {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--z-base) var(--z-ease), transform var(--z-base) var(--z-ease), border-color var(--z-base) var(--z-ease);
  display: flex;
  flex-direction: column;
}
.product-thumb:hover {
  box-shadow: var(--z-shadow-md);
  border-color: var(--z-border-strong);
  transform: translateY(-2px);
}
.product-thumb .image,
.product-thumb .product-image {
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-border);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.product-thumb .image img,
.product-thumb .product-image img,
.product-thumb .image a,
.product-thumb .product-image a {
  width: 100% !important; height: 100% !important;
  display: block; max-width: none !important; max-height: none !important;
}
.product-thumb .image img,
.product-thumb .product-image img {
  object-fit: cover; object-position: center;
  transform: scale(1);
  transition: transform var(--z-base) var(--z-ease);
}
.product-thumb:hover .image img,
.product-thumb:hover .product-image img { transform: scale(1.05); }

.product-thumb .caption,
.product-thumb .product-info {
  padding: var(--z-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-2);
  flex: 1;
}
.product-thumb h4,
.product-thumb .name,
.product-thumb .product-name {
  font-size: var(--z-text-md);
  font-weight: 600;
  color: var(--z-ink);
  margin: 0;
  letter-spacing: -0.1px;
  line-height: 1.35;
}
.product-thumb .price,
.product-thumb .price-new {
  font-size: var(--z-text-lg);
  font-weight: 700;
  color: var(--z-ink);
}
.product-thumb .price-old {
  font-size: var(--z-text-sm);
  color: var(--z-ink-4);
  text-decoration: line-through;
}
.product-thumb .rating { color: var(--z-ink-4); }
.product-thumb .button-group {
  margin-top: auto;
  display: flex;
  gap: var(--z-space-2);
}
.product-thumb .button-group .btn,
.product-thumb .button-group button {
  flex: 1;
  background: var(--z-primary);
  color: #fff;
  border: 0;
  border-radius: var(--z-radius);
  padding: 8px 12px;
  font-size: var(--z-text-sm);
  font-weight: 700;
  cursor: pointer;
}
.product-thumb .button-group .btn:hover,
.product-thumb .button-group button:hover { background: var(--z-primary-hover); color: #fff; }

/* product grid container — Bootstrap .row + .product-layout/.col-* */
.product-layout { margin-bottom: var(--z-space-4); }

/* ============================================================
   21. FOOTER — restyle OpenCart's default footer
   ============================================================ */
body > footer,
.bottom-to-top {
  background: var(--z-header-bg);
  color: #9AA0A8;
  padding: var(--z-space-10) 0 var(--z-space-4);
  font-size: var(--z-text-sm);
  margin-top: var(--z-space-8);
}
footer .footer-container,
footer #footer,
footer .footer-top {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
}
footer .container {
  max-width: var(--z-container);
  margin: 0 auto;
  padding: 0 var(--z-container-pad);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
footer .row {
  display: block; margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Kill empty wrappers + stray empty paragraphs that legacy CSS leaves visible */
footer .footer-top,
footer .footer-top .container,
footer .footer-top .row { padding: 0 !important; margin: 0 !important; border: 0 !important; min-height: 0 !important; }
footer .footer-top:empty,
footer .footer-top .container:empty,
footer .footer-top .row:empty { display: none !important; }
/* Hide empty content paragraphs (e.g. <p></p>) inside payment block */
footer .bottomfooter p:empty,
footer .paymentcmsblock p:empty { display: none !important; }
/* Override any horizontal-rule pseudo elements legacy theme paints between rows */
footer hr,
footer .footer-top::before,
footer .footer-top::after,
footer #footer::before,
footer .footer-container::before { display: none !important; border: 0 !important; }

/* ── Footer newsletter (newsletters module) — unified 2026 bar, aligned to the
      same container width/padding as the columns + bottom row below ── */
footer .footer-top .container {
  max-width: var(--z-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--z-container-pad) !important;
}
footer #footer-top { display: block; width: 100%; }
footer #footer-top .newsletter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 48px; flex-wrap: wrap;
  padding: 4px 0 26px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
/* Copy block (title + description) stacked together on the left */
footer #footer-top .news-copy {
  display: flex; flex-direction: column; gap: 5px;
  flex: 1 1 auto; min-width: 260px; max-width: 640px;
}
footer #footer-top .news-title {
  color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; margin: 0;
  display: inline-flex; align-items: center; gap: 11px;
}
footer #footer-top .news-title::before {
  content: ''; width: 24px; height: 24px; flex: 0 0 24px;
  background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC93A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
}
footer #footer-top .news-des { color: #9AA0A8; font-size: 13px; margin: 0; line-height: 1.45; padding-left: 35px; }
/* Form on the right */
footer #footer-top .news-form { flex: 0 0 auto; margin: 0; }
footer #footer-top .news-form .form-group { margin: 0; padding: 0; }
footer #footer-top .news-form .control-label { display: none !important; }
footer #footer-top .input-news { display: flex; gap: 10px; align-items: center; margin: 0; }
footer #footer-top .input-news input {
  border: 0 !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 14px !important;
  width: 260px !important; min-width: 0; flex: 0 0 260px; height: auto !important; font-family: var(--z-font-sans); background: #fff !important; color: var(--z-ink) !important; outline: none; box-shadow: none !important;
}
footer #footer-top .input-news button,
footer #footer-top .input-news .btn {
  white-space: nowrap; padding: 12px 26px !important; border-radius: 10px !important; border: 0 !important;
  background: var(--z-primary) !important; color: #fff !important; font-weight: 700; font-size: 14px !important;
  cursor: pointer; height: auto !important; display: inline-flex; align-items: center; gap: 6px;
}
footer #footer-top .input-news button:hover,
footer #footer-top .input-news .btn:hover { background: var(--z-primary-hover) !important; }
footer #footer-top .input-news button i,
footer #footer-top .input-news .material-icons { display: none !important; }
@media (max-width: 860px) {
  footer #footer-top .newsletter { flex-direction: column; align-items: stretch; }
  footer #footer-top .news-copy { max-width: none; }
  footer #footer-top .news-des { padding-left: 0; }
  footer #footer-top .news-form { width: 100%; }
  footer #footer-top .input-news { flex-direction: column; align-items: stretch; }
  footer #footer-top .input-news input, footer #footer-top .input-news button { width: 100% !important; flex: 1 1 auto; min-width: 0; }
}

/* The grid lives on .footer-blocks (the parent of the 5 column wrappers) */
footer .footer-blocks {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
  gap: var(--z-space-6);
  align-items: start;
}
@media (max-width: 1100px) {
  footer .footer-blocks { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
  footer .footer-blocks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  footer .footer-blocks { grid-template-columns: 1fr; gap: var(--z-space-4); }
}

footer .col-sm-3,
footer .col-sm-4,
footer .col-sm-6,
footer .col-md-3,
footer .col-md-4,
footer .column {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
footer #footer-left,
footer #footer-right { all: revert; display: block; }
footer #footer-left .footerleft { margin: 0 !important; }

footer h4, footer h5, footer h6 {
  color: #fff;
  font-size: var(--z-text-md);
  margin-bottom: var(--z-space-3);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
footer a { color: #9AA0A8; text-decoration: none; transition: color var(--z-fast) var(--z-ease); }
footer a:hover { color: #fff; }
footer ul,
footer .list-unstyled { list-style: none; padding: 0; margin: 0; }
footer ul li { padding: 4px 0; }
footer p { color: #9AA0A8; margin: 0 0 var(--z-space-2); }
footer img { filter: grayscale(0.2) brightness(0.95); }

/* Suppress legacy theme animation that may leave footer invisible */
footer.hb-animate-element { opacity: 1 !important; transform: none !important; }

/* Kill the legacy newsletter popup completely — even if JS calls bPopup() */
.newletter-popup,
footer .newletter-popup,
#boxes,
footer #boxes,
#dialog,
footer #dialog,
.newletter-container {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Also block bPopup overlay if it ever fires */
.b-modal { display: none !important; }

/* Social icons (Facebook / Instagram) inside footer-left */
footer .social-block ul {
  display: flex; gap: 10px; padding: 0; margin: 8px 0 0; list-style: none;
}
footer .social-block li { padding: 0; }
footer .social-block a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--z-radius-pill);
  background: rgba(255,255,255,0.08);
  color: #9AA0A8;
  font-size: 16px;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
footer .social-block a:hover { background: var(--z-yellow); color: #15181D; }
footer .social-block h5 { color: #fff; font-size: var(--z-text-md); margin-bottom: 8px; }
footer .contact-block h5 { color: #fff !important; font-family: var(--z-font-sans) !important; font-size: var(--z-text-md) !important; }
footer .contact-block .fa { color: var(--z-yellow); margin-right: 6px; }

/* bottomfooter — copyright + payment icons row (no divider line above) */
footer .bottomfooter {
  border-top: 0 !important;
  margin-top: var(--z-space-6);
  padding-top: var(--z-space-4);
}
footer .bottomfooter .container { padding: 0 var(--z-container-pad); }
footer .bottomfooter .row { padding: 0 !important; border: 0 !important; }
footer .bottomfooter-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--z-space-4); flex-wrap: wrap;
}
footer .bottomfooter p,
footer .powered { color: var(--z-ink-3); font-size: var(--z-text-xs); margin: 0; }
footer .bottomfooter p:empty,
footer .paymentcmsblock,
footer .paymentcmsblock p:empty { margin: 0; padding: 0; }
footer .paymentcmsblock { display: inline-flex; align-items: center; }
footer .payment-block { display: inline-flex; align-items: center; }
footer .payment-block ul {
  display: inline-flex; gap: 10px; align-items: center; padding: 0; margin: 0; list-style: none;
}
footer .payment-block img { height: 22px; width: auto; opacity: 0.8; filter: none; }
footer .payment-block img:hover { opacity: 1; }

/* footer-right wrapper (Katalogy známek block) */
footer #footer-right,
footer #footer-left {
  display: block;
  width: auto; max-width: 100%;
  padding: 0; margin: 0;
}

/* powered-by / copyright row — no border line above */
footer .copyright,
footer .powered,
.footer-bottom,
footer .footer-bottom {
  border-top: 0 !important;
  padding: 0;
  margin: 0;
  color: var(--z-ink-3);
  font-size: var(--z-text-xs);
}

/* ============================================================
   CATEGORY PAGE — hero, subcats, sidebar, toolbar, product grid
   ============================================================ */
/* Breadcrumb — high-specificity to beat legacy category-refresh.css */
nav.z-breadcrumb {
  display: block !important;
  background: #FAF8F3 !important;
  border-bottom: 1px solid #E8E4D9 !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  color: #3C414B !important;
  margin: 0 !important;
}
nav.z-breadcrumb .z-breadcrumb__inner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
nav.z-breadcrumb a {
  color: #3C414B !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
nav.z-breadcrumb a:hover { color: #2E4BDB !important; }
nav.z-breadcrumb a i.fa-home { font-size: 14px; }
nav.z-breadcrumb .z-breadcrumb__sep { color: #B0B5C0 !important; padding: 0 2px; }
nav.z-breadcrumb .z-breadcrumb__current {
  color: #15181D !important;
  font-weight: 600 !important;
}

/* CATEGORY HERO ------------------------------------------------ */
.z-cat-hero {
  position: relative;
  background: linear-gradient(135deg, #0F1216 0%, #1A2540 60%, #1E3370 100%);
  color: #fff;
  overflow: hidden;
  padding: 0;
}
.z-cat-hero__bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 200px 220px at 88% 30%, rgba(255,201,58,0.10), transparent 60%),
    radial-gradient(ellipse 320px 240px at 70% 75%, rgba(46,75,219,0.18), transparent 60%);
  pointer-events: none;
}

/* AI-generated banner — applied as inline background-image on .z-cat-hero.
   A navy gradient overlay sits above the banner so the title + description
   stay readable on any image. The decorative .z-cat-hero__stamps are NOT
   rendered when a banner is present (controller / template skips them). */
.z-cat-hero--has-banner {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center right !important;
  min-height: 220px;
}
.z-cat-hero--has-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(15, 18, 22, 0.92) 0%,
      rgba(20, 33, 61, 0.82) 35%,
      rgba(20, 33, 61, 0.55) 65%,
      rgba(20, 33, 61, 0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
.z-cat-hero--has-banner .z-cat-hero__inner {
  position: relative;
  z-index: 1;
}
.z-cat-hero__inner {
  position: relative;
  padding: 32px var(--z-container-pad) 28px;
}
.z-cat-hero__eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--z-yellow);
  margin-bottom: 8px;
}
.z-cat-hero__title {
  margin: 0;
  font-size: 40px; font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.05;
}
.z-cat-hero__desc {
  margin: 12px 0 0;
  font-size: 14px;
  color: #C8CDD8;
  line-height: 1.55;
  max-width: 754px; /* +30% (was 580px) — wider description on desktop */
}
.z-cat-hero__stats { display: flex; gap: var(--z-space-6); margin-top: 18px; align-items: center; }
.z-cat-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.z-cat-hero__stat-num {
  font-size: 26px; font-weight: 700;
  font-family: var(--z-font-mono);
  color: #fff;
  line-height: 1;
}
.z-cat-hero__stat-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: rgba(255,255,255,0.6);
}
.z-cat-hero__stat-sep { width: 1px; height: 30px; background: rgba(255,255,255,0.15); }

/* SUBCATEGORY STRIP ------------------------------------------- */
/* "Kategorie" subheadline above subcategory pills (per mockup) */
.z-subcats-section { display: flex; flex-direction: column; gap: 10px; }
.z-subcats-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px;
}
.z-subcats-head__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--z-ink, #1A1F29);
}
.z-subcats-head__count {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--z-ink-4, #9AA0AE);
}
/* Grid auto-fit so pills fill the full row (no fixed-width gaps) */
.z-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.z-subcat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-md);
  color: var(--z-ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--z-fast) var(--z-ease), background-color var(--z-fast) var(--z-ease), transform var(--z-fast) var(--z-ease);
}
.z-subcat:hover {
  border-color: var(--z-border-strong);
  background: var(--z-canvas-warm);
  color: var(--z-ink);
  transform: translateY(-1px);
}
.z-subcat__img {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--z-canvas-warm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.z-subcat__img--placeholder {
  background: linear-gradient(135deg, var(--z-canvas-2) 0%, var(--z-canvas-warm) 100%);
}
.z-subcat__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.z-subcat__label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) {
  .z-subcats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* MAIN LAYOUT -------------------------------------------------- */
.z-cat-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 20px;
  padding: var(--z-space-5) var(--z-container-pad) var(--z-space-10);
  align-items: start;
}

/* No sidebar (e.g. /special): collapse to one full-width column, otherwise
   .z-cat-main falls into the empty 268px sidebar track and the grid renders
   as a single narrow strip. Element+class beats the plain .z-cat-layout above. */
section.z-cat-layout--nosidebar {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 900px) {
  .z-cat-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* SIDEBAR ------------------------------------------------------ */
.z-cat-main {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px; /* breathing room between subcats / featured / toolbar / grid / pagination */
}
.z-cat-main > * { margin: 0; }   /* nuke any legacy margin-bottom that double-stacks */
.z-cat-sidebar {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  padding: 14px 18px;   /* more breathing room left/right */
  align-self: start;
  min-width: 0;
}
.z-cat-sidebar__qlinks {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 12px;
  margin: 0 0 10px;
  border-bottom: 1px solid #ECE7DA;
}
.z-qlink {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--z-radius);
  text-decoration: none;
  border: 1px solid;
  transition: transform var(--z-fast) var(--z-ease), box-shadow var(--z-fast) var(--z-ease);
}
.z-qlink:hover { transform: translateY(-1px); box-shadow: var(--z-shadow-sm); }
.z-qlink--red    { background: #FCEAEA; border-color: #F3C7C7; }
.z-qlink--green  { background: #E8F5EE; border-color: #BFE3CE; }
.z-qlink--yellow { background: #FFFBEB; border-color: #F0E0B0; }
.z-qlink__icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-qlink--red    .z-qlink__icon { color: var(--z-danger); }
.z-qlink--green  .z-qlink__icon { color: var(--z-success); }
.z-qlink--yellow .z-qlink__icon { color: #B8860B; }
.z-qlink__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-qlink__label {
  font-size: 13px; font-weight: 700;
  color: var(--z-ink);
  line-height: 1.2;
}
.z-qlink__sub {
  font-size: 11px; font-weight: 600;
  line-height: 1.3;
}
.z-qlink--red    .z-qlink__sub { color: var(--z-danger); }
.z-qlink--green  .z-qlink__sub { color: var(--z-success); }
.z-qlink--yellow .z-qlink__sub { color: #B8860B; }

.z-cat-sidebar__filters { margin-top: 0; }
.z-cat-sidebar__filters .box { margin: 0 !important; padding: 0 !important; }
.z-cat-sidebar__filters .box-heading {
  padding: 4px 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  color: #15181D !important;
}

/* ── OC FILTER MODULE markup: <a.list-group-item.heading> + <div.list-group-item><div.checkbox><label><input>text ── */
.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item,
.z-cat-sidebar .z-cat-sidebar__filters div.list-group-item,
.z-cat-sidebar .z-cat-sidebar__filters .list-group,
.z-cat-sidebar .z-cat-sidebar__filters .panel,
.z-cat-sidebar .z-cat-sidebar__filters .panel-body,
.z-cat-sidebar .z-cat-sidebar__filters .panel-heading,
.z-cat-sidebar .z-cat-sidebar__filters .panel-footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}
.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #15181D !important;
  padding: 12px 0 6px !important;
  border-top: 1px solid #ECE7DA !important;
  margin-top: 6px !important;
  cursor: default !important;
  text-decoration: none !important;
}
.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading:first-child,
.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading:first-of-type {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 4px !important;
}
.z-cat-sidebar .z-cat-sidebar__filters div.list-group-item { padding: 0 0 8px !important; }
.z-cat-sidebar .z-cat-sidebar__filters .checkbox {
  margin: 0 !important;
  padding: 3px 0 !important;
  min-height: auto !important;
}
.z-cat-sidebar .z-cat-sidebar__filters .checkbox label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #3C414B !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  transition: background 0.12s ease, color 0.12s ease;
}
.z-cat-sidebar .z-cat-sidebar__filters .checkbox label:hover {
  background: #FAF8F3 !important;
  color: #15181D !important;
}
.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"] {
  margin: 0 !important;
  flex-shrink: 0;
  accent-color: #2E4BDB;
}
.z-cat-sidebar .z-cat-sidebar__filters .panel-footer {
  padding: 10px 0 6px !important;
  margin-top: 6px !important;
  border-top: 1px solid #ECE7DA !important;
}
/* Filter submit button — dark ink (no blue) */
.z-cat-sidebar .z-cat-sidebar__filters #button-filter,
.z-cat-sidebar .z-cat-sidebar__filters button#button-filter.btn-primary,
.z-cat-sidebar .z-cat-sidebar__filters .btn.btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  background: #1A1F29 !important;
  background-color: #1A1F29 !important;
  background-image: none !important;
  border: 0 !important;
  border-color: #1A1F29 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.12s ease, transform 0.12s ease;
}
.z-cat-sidebar .z-cat-sidebar__filters #button-filter:hover,
.z-cat-sidebar .z-cat-sidebar__filters button#button-filter.btn-primary:hover,
.z-cat-sidebar .z-cat-sidebar__filters .btn.btn-primary:hover {
  background: #000 !important;
  background-color: #000 !important;
  transform: translateY(-1px);
}

/* Belt-and-braces: ensure the sidebar itself is clearly white + zero blue (no blue inherited from legacy CSS) */
aside.z-cat-sidebar {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #E8E4D9 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters,
aside.z-cat-sidebar .z-cat-sidebar__filters #column-left,
aside.z-cat-sidebar .z-cat-sidebar__filters .box,
aside.z-cat-sidebar .z-cat-sidebar__filters .box-content,
aside.z-cat-sidebar .z-cat-sidebar__filters .box-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: #ECE7DA !important;
}
/* Nuke any blue borders the legacy stylesheet might apply to anything inside the sidebar */
aside.z-cat-sidebar *,
aside.z-cat-sidebar *::before,
aside.z-cat-sidebar *::after {
  border-color: #ECE7DA !important;
}
/* But preserve the qlink coloured pills (red+green) — they SHOULD keep their colour */
aside.z-cat-sidebar .z-qlink--red    { border-color: #F3C7C7 !important; }
aside.z-cat-sidebar .z-qlink--green  { border-color: #BFE3CE !important; }
aside.z-cat-sidebar .z-qlink--yellow { border-color: #F0E0B0 !important; }
/* divider between qlinks and tree should be warm-neutral, not blue */
aside.z-cat-sidebar .z-cat-sidebar__qlinks {
  border-bottom: 1px solid #ECE7DA !important;
}

/* CRITICAL: Neutralise nested OC column_left so it doesn't fight our grid.
   Default OC renders <aside id="column-left" class="col-sm-3 hidden-xs"> which
   would force 25% width and float — we want it to fill our sidebar slot. */
.z-cat-sidebar__filters #column-left,
.z-cat-sidebar__filters .col-sm-3,
.z-cat-sidebar__filters .col-sm-9 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide the duplicate quick-links the OC categories module already prints —
   we render our own (Slevy/Novinky) at the top of the sidebar */
.z-cat-sidebar__filters .quick-links-top { display: none !important; }
/* Box wrapper styling */
.z-cat-sidebar__filters .box {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.z-cat-sidebar__filters .box-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--z-ink);
  padding: 12px 0 8px;
  border: 0;
  background: transparent;
}
.z-cat-sidebar__filters .box-content { padding: 0; background: transparent; border: 0; }
/* ── OC CATEGORY TREE: <ul.box-category.level-1> > <li> > <a> + nested <ul.level-2/3/4> ── */
.z-cat-sidebar .z-cat-sidebar__filters ul.box-category,
.z-cat-sidebar .z-cat-sidebar__filters ul.level-1,
.z-cat-sidebar .z-cat-sidebar__filters ul.level-2,
.z-cat-sidebar .z-cat-sidebar__filters ul.level-3,
.z-cat-sidebar .z-cat-sidebar__filters ul.level-4,
.z-cat-sidebar .z-cat-sidebar__filters ul.treeview,
.z-cat-sidebar .z-cat-sidebar__filters ul.treeview-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.z-cat-sidebar .z-cat-sidebar__filters ul.level-2 { padding-left: 10px !important; }
.z-cat-sidebar .z-cat-sidebar__filters ul.level-3 { padding-left: 10px !important; }
.z-cat-sidebar .z-cat-sidebar__filters ul.level-4 { padding-left: 10px !important; }

.z-cat-sidebar .z-cat-sidebar__filters .box-category li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
}
.z-cat-sidebar .z-cat-sidebar__filters .box-category li > a {
  display: block !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #3C414B !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  margin: 1px 0 !important;
  background: transparent !important;
  transition: background 0.12s ease, color 0.12s ease;
}
.z-cat-sidebar .z-cat-sidebar__filters .box-category li > a:hover {
  background: #FAF8F3 !important;
  color: #15181D !important;
}
/* Active item — dark ink, no blue tint */
.z-cat-sidebar .z-cat-sidebar__filters .box-category a.active {
  background: #F0EBDC !important;
  color: #15181D !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.z-cat-sidebar .z-cat-sidebar__filters .box-category .level-1 > li > a {
  font-weight: 700 !important;
  color: #15181D !important;
  font-size: 13px !important;
}
/* Hide stray <i> from box-heading */
.z-cat-sidebar .z-cat-sidebar__filters .box-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #15181D !important;
  padding: 12px 0 8px !important;
  background: transparent !important;
  border: 0 !important;
}

/* FEATURED EDITORIAL ROW (wired to admin Featured Products extension) ---- */
.z-cat-featured { margin-bottom: 18px; }
.z-cat-featured__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.z-cat-featured__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--z-ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.z-cat-featured__subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--z-ink-3);
}
.z-cat-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.z-cat-featured__card {
  display: flex;
  align-items: stretch;
  min-height: 110px;
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--z-fast) var(--z-ease), box-shadow var(--z-fast) var(--z-ease), border-color var(--z-fast) var(--z-ease);
}
.z-cat-featured__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--z-shadow-md);
  border-color: var(--z-border-strong);
}
.z-cat-featured__media {
  position: relative;
  width: 110px;
  flex-shrink: 0;
  background: var(--z-canvas-warm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.z-cat-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.z-cat-featured__kind {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #15181D;
}
.z-cat-featured__kind--featured { background: var(--z-yellow, #FFC93A); }
.z-cat-featured__kind--topcat   { background: #FFB4A8; }
.z-cat-featured__kind--sale     { background: var(--z-danger); color: #fff; }
.z-cat-featured__kind--new      { background: #9DDCC8; }
.z-cat-featured__body {
  flex: 1; min-width: 0;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.z-cat-featured__name {
  font-size: 13px; font-weight: 700;
  color: var(--z-ink);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.z-cat-featured__meta { font-size: 13px; color: var(--z-ink-3); margin-bottom: 6px; }
.z-cat-featured__price { color: var(--z-ink); font-weight: 700; }
.z-cat-featured__price-old { color: var(--z-ink-4); text-decoration: line-through; margin-left: 4px; }
.z-cat-featured__stock { color: var(--z-danger); font-weight: 600; }
.z-cat-featured__cta {
  font-size: 13px; font-weight: 600; color: var(--z-primary);
}
@media (max-width: 900px) {
  .z-cat-featured__grid { grid-template-columns: 1fr; }
}

/* "Vše" first pill — dark like design's active chip */
.z-subcat--all {
  background: #1A1F29 !important;
  border-color: #1A1F29 !important;
  color: #fff !important;
}
.z-subcat--all:hover { background: #000 !important; color: #fff !important; }
.z-subcat__img--all {
  background: rgba(255,255,255,0.12) !important;
  color: #fff;
}
.z-subcat__count {
  font-size: 11px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
  color: var(--z-ink-4, #9AA0AE);
  flex-shrink: 0;
}
.z-subcat--all .z-subcat__count { color: rgba(255,255,255,0.55); }

/* Hero decorative floating stamp illustrations */
.z-cat-hero__stamps {
  position: absolute;
  top: 0; right: 0;
  width: 360px; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.z-cat-hero__stamp {
  position: absolute;
  width: 70px; height: 86px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}
.z-cat-hero__stamp::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}
.z-cat-hero__stamp--1 { top: 22px;  right: 50px;  transform: rotate(8deg);   opacity: 0.4;  width: 76px; height: 92px; }
.z-cat-hero__stamp--2 { top: 50px;  right: 150px; transform: rotate(-6deg);  opacity: 0.28; width: 62px; height: 76px; }
.z-cat-hero__stamp--3 { top: 12px;  right: 250px; transform: rotate(12deg);  opacity: 0.18; width: 52px; height: 64px; }
@media (max-width: 900px) { .z-cat-hero__stamps { display: none; } }

/* "PROCHÁZET KATALOG" custom heading in sidebar */
.z-cat-sidebar__catalog-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #15181D;
  padding: 12px 0 8px;
  margin: 10px 0 0;
  border-top: 1px solid #ECE7DA;
}
/* Hide OC's "Kategorie" box-heading (we provide our own above) */
.z-cat-sidebar__filters .box:first-of-type > .box-heading { display: none !important; }

/* === LEFT MENU REFINEMENT === */
/* Tighter qlinks */
aside.z-cat-sidebar .z-qlink { padding: 8px 9px !important; }
aside.z-cat-sidebar .z-qlink__label { font-size: 13px !important; line-height: 1.2 !important; }
aside.z-cat-sidebar .z-qlink__sub { font-size: 11px !important; line-height: 1.3 !important; }
aside.z-cat-sidebar .z-qlink__icon { width: 26px !important; height: 26px !important; }
aside.z-cat-sidebar .z-cat-sidebar__qlinks {
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  border-bottom: 0 !important;
}

/* ============================================================
   NEW CLEAN TREE — controller renders our own data into .z-tree
   The OC .box-category dump is hidden below.
   ============================================================ */
.z-tree {
  margin: 0 0 12px;
  font-size: 13px;
  font-family: var(--z-font-sans, system-ui, sans-serif);
  color: #15181D;
}
.z-tree__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.z-tree__list--lvl2 { padding-left: 12px !important; }
.z-tree__list--lvl3 { padding-left: 12px !important; }
.z-tree__item {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.z-tree__link {
  display: block;
  padding: 4px 8px;
  color: #3C414B;
  text-decoration: none;
  border-radius: 6px;
  margin: 1px 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.z-tree__link:hover {
  background: #FAF8F3;
  color: #15181D;
}
.z-tree__link--lvl1 {
  font-weight: 700;
  color: #15181D;
  font-size: 13px;
}
.z-tree__link--lvl2 { font-size: 13px; }
.z-tree__link--lvl3 { font-size: 13px; color: #6B7280; }
.z-tree__link.is-active {
  background: #F0EBDC;
  color: #15181D;
  font-weight: 700;
}
.z-tree__item.is-open > .z-tree__link::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
  opacity: 0.55;
}

/* Hide ALL legacy OC categories markup inside our sidebar — we render our own tree above */
aside.z-cat-sidebar .z-cat-sidebar__filters > #column-left > .box:first-of-type,
aside.z-cat-sidebar .z-cat-sidebar__filters .box-category,
aside.z-cat-sidebar .z-cat-sidebar__filters ul.box-category,
aside.z-cat-sidebar .z-cat-sidebar__filters ul.level-1,
aside.z-cat-sidebar .z-cat-sidebar__filters ul.treeview,
aside.z-cat-sidebar .z-cat-sidebar__filters .treeview-list,
aside.z-cat-sidebar .z-cat-sidebar__filters .quick-links-top,
aside.z-cat-sidebar .z-cat-sidebar__filters .hitarea {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}
/* Suppress the inline <style> rules' effects within sidebar */
aside.z-cat-sidebar .z-cat-sidebar__filters .box-category .quick-link-icon { display: none !important; }
/* (legacy .box-category tree CSS removed — we now render our own clean .z-tree above and hide OC's box) */

/* Filter checkboxes — count badge right-aligned */
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox label {
  justify-content: space-between !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox label::after {
  /* count badges aren't provided by OC filter module by default; reserve space if styling later */
}
/* Custom-looking checkbox */
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important; height: 16px !important;
  border: 1.5px solid #C4BFB1 !important;
  border-radius: 6px !important;
  background: #fff !important;
  position: relative;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"]:checked {
  background: #1A1F29 !important;
  border-color: #1A1F29 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* CENA — price filter with histogram + dual-range slider */
.z-price-filter {
  padding: 14px 4px 8px;
  margin-top: 10px;
  border-top: 1px solid #ECE7DA;
}
.z-price-filter__head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #15181D;
  padding: 0 0 10px;
}
.z-price-filter__hist { display: none; }   /* histogram removed per request */
.z-price-filter__track {
  position: relative;
  height: 16px;
  padding: 4px;
}
.z-price-filter__track::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 4px;
  background: #ECE7DA;
  border-radius: 6px;
  transform: translateY(-50%);
}
.z-price-filter__range {
  position: absolute;
  top: 50%;
  height: 4px;
  background: #1A1F29;
  border-radius: 6px;
  transform: translateY(-50%);
  pointer-events: none;
}
.z-price-filter__handle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  padding: 0;
}
.z-price-filter__handle::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1A1F29;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.z-price-filter__handle::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1A1F29;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.z-price-filter__handle::-webkit-slider-runnable-track { background: transparent; }
.z-price-filter__handle::-moz-range-track { background: transparent; }
.z-price-filter__values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.z-price-filter__val {
  flex: 1;
  background: #FAF8F3;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 700;
  color: #15181D;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.z-price-filter__val-lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #9AA0AE;
  font-family: var(--z-font-sans);
}

/* Filter section collapse */
.z-cat-sidebar__filters a.list-group-item.heading.z-filter-head {
  position: relative;
  cursor: pointer !important;
  user-select: none;
  padding-right: 20px !important;
}
.z-cat-sidebar__filters a.list-group-item.heading.z-filter-head::after {
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.6;
}
.z-cat-sidebar__filters a.list-group-item.heading.z-filter-head.is-collapsed::after {
  transform: translateY(-30%) rotate(-45deg);
}

/* TOOLBAR — per design: left = view-toggle + count, right = sort buttons + limit dropdown */
.z-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.z-toolbar__left, .z-toolbar__right {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.z-toolbar__count { font-size: 13px; color: var(--z-ink-3, #6B7280); }
.z-toolbar__count strong { color: var(--z-ink, #1A1F29); font-weight: 700; }
.z-toolbar__view {
  display: inline-flex;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
}
.z-toolbar__view-btn {
  background: transparent;
  color: #6B7280;
  border: 0;
  padding: 7px 9px;
  cursor: pointer;
  display: inline-flex; align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.z-toolbar__view-btn:hover { background: #FAF8F3; }
.z-toolbar__view-btn.is-active { background: #1A1F29; color: #fff; }

.z-toolbar__sort-label {
  font-size: 13px;
  color: #6B7280;
  letter-spacing: 0.2px;
  margin-right: 2px;
}
.z-toolbar__sortgroup {
  display: inline-flex;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.z-toolbar__sort-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3C414B;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.z-toolbar__sort-btn:hover { background: #FAF8F3; color: #15181D; }
.z-toolbar__sort-btn.is-active {
  background: #1A1F29;
  color: #fff;
}

.z-toolbar__limit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #6B7280;
}
.z-toolbar__limit select {
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: #15181D;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 5px 26px 5px 10px;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
@media (max-width: 700px) {
  .z-toolbar__sort-label { display: none; }
  .z-toolbar__sortgroup { font-size: 11px; }
  .z-toolbar__sort-btn { padding: 5px 7px; font-size: 11px; }
}

/* PRODUCT GRID ------------------------------------------------- */
/* Design uses fixed 4-col on desktop, 3 on tablet, 2 on mobile */
.z-product-grid {
  display: grid;
  /* adaptive: fills the available width (≈3 cols next to the sidebar, more when full-width) — no squeezing */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .z-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* Dark navy media + chips per design */
.z-pc { position: relative; }
.z-pc__media-link { display: block; text-decoration: none; }
.z-pc .z-pc__media {
  background: linear-gradient(180deg, #0F1216 0%, #1A2540 100%) !important;
  border-bottom: 0 !important;
}
.z-pc__badges {
  position: absolute;
  top: 9px; left: 9px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
  max-width: calc(100% - 50px);
}
.z-pc__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.z-pc__badge--sale { background: var(--z-danger, #DC2626); color: #fff; }
.z-pc__badge--top  { background: #FFF6E6; color: #B86A20; }
.z-pc__badge--new  { background: #DCFCE7; color: #0F7A3C; }
.z-pc__wish {
  position: absolute;
  top: 9px; right: 9px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3C414B;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.z-pc__wish:hover { background: #fff; color: var(--z-danger, #DC2626); transform: scale(1.05); }
.z-pc__media img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.z-pc__body {
  background: #fff;
  padding: 12px;
}
.z-pc__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.z-pc__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.z-pc__chip--quality { background: #FAF8F3; color: #3C414B; }
.z-pc__chip--qty { color: var(--z-success, #1F8A5B); font-family: inherit; font-size: 11px; font-weight: 600; padding-left: 0; padding-right: 4px; background: transparent; }
.z-pc__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  color: #15181D;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
  min-height: 34px;
}
.z-pc__name:hover { color: var(--z-primary, #2E4BDB); }
.z-pc__zplus {
  margin-left: auto;
  padding: 4px 9px;
  background: linear-gradient(135deg, #FFC93A 0%, #FFB000 100%);
  color: #15181D;
  border-radius: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  letter-spacing: 0.2px;
  max-width: 100%;
}
.z-pc__zplus-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 5px;
}
.z-pc__zplus-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #15181D !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.z-pc__zplus-tag:hover { text-decoration: underline; color: #15181D !important; }
.z-pc__zplus-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .68;
}
.z-pc__zplus-price { font-size: 14px; font-weight: 900; line-height: 1.15; }
.z-pc__zplus-save { font-size: 11px; font-weight: 700; opacity: .78; }
.z-pc__countdown {
  margin-top: 6px;
  padding: 5px 8px;
  background: #FCEAEA;
  color: #B91C1C;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-pc__cd-val { letter-spacing: 0.4px; }

/* Per-card random promo code box */
.z-pc__promo {
  margin-top: 6px;
  padding: 7px 9px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px dashed #F0C849;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.z-pc__promo-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #B8860B;
  line-height: 1.2;
}
.z-pc__promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  background: #fff;
  border: 1.5px solid #F0C849;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #15181D;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.z-pc__promo-btn:hover {
  background: #FFFBEB;
  border-color: #B8860B;
  transform: translateY(-1px);
}
.z-pc__promo-btn.is-applied {
  background: #16A34A;
  border-color: #16A34A;
  color: #fff;
}
.z-pc__promo-code {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-pc__promo-discount {
  padding: 2px 6px;
  background: #16A34A;
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.z-pc__promo-btn.is-applied .z-pc__promo-discount {
  background: #fff;
  color: #16A34A;
}
.z-pc__cart--with-promo {
  background: #16A34A !important;
}
.z-pc__cart--with-promo:hover { background: #128A3D !important; }
.z-pc {
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--z-ink);
  box-shadow: var(--z-shadow-sm);
  transition: transform var(--z-base) var(--z-ease), box-shadow var(--z-base) var(--z-ease), border-color var(--z-base) var(--z-ease);
}
.z-pc:hover {
  transform: translateY(-2px);
  box-shadow: var(--z-shadow-md);
  border-color: var(--z-border-strong);
  color: var(--z-ink);
}
.z-pc__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-border);
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) {
  .z-pc__media { height: 0; padding-bottom: 100%; }
}
.z-pc__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--z-base) var(--z-ease);
}
.z-pc:hover .z-pc__media img { transform: scale(1.05); }
.z-pc__badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 11px; font-weight: 800;
  padding: 3px 7px;
  border-radius: var(--z-radius-sm);
  text-transform: uppercase; letter-spacing: 0.4px;
  z-index: 2;
}
.z-pc__badge--sale { background: var(--z-danger); color: #fff; }
.z-pc__badge--top  { background: var(--z-yellow); color: #15181D; }
.z-pc__body {
  padding: var(--z-space-3);
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1;
}
.z-pc__name {
  font-size: 13px; font-weight: 600;
  color: var(--z-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}
.z-pc__price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: auto; }
.z-pc__price {
  font-size: 20px; font-weight: 800;
  color: var(--z-ink);
}
.z-pc__price--special { color: var(--z-danger); }
.z-pc__price-old {
  font-size: 13px;
  color: var(--z-ink-4);
  text-decoration: line-through;
}
.z-pc__cart {
  width: 100%;
  background: var(--z-primary); color: #fff;
  border: 0; border-radius: var(--z-radius);
  padding: 9px 10px;
  font-size: 13px; font-weight: 700;
  font-family: var(--z-font-sans);
  cursor: pointer;
  margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: background-color var(--z-fast) var(--z-ease);
}
.z-pc__cart:hover { background: var(--z-primary-hover); }

/* LIST VIEW VARIANT ------------------------------------------- */
.z-product-grid--list {
  grid-template-columns: 1fr;
  gap: var(--z-space-3);
}
.z-product-grid--list .z-pc {
  flex-direction: row;
  align-items: stretch;
  min-height: 140px;
}
.z-product-grid--list .z-pc__media {
  width: 140px; min-width: 140px; aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--z-border);
}
@supports not (aspect-ratio: 1 / 1) {
  .z-product-grid--list .z-pc__media { padding-bottom: 0; height: auto; }
}
.z-product-grid--list .z-pc__body { padding: 14px 18px; }
.z-product-grid--list .z-pc__name { -webkit-line-clamp: 3; min-height: 0; font-size: 14px; }
.z-product-grid--list .z-pc__cart { width: auto; align-self: flex-start; padding: 9px 18px; }

/* PAGINATION + RESULTS --------------------------------------- */
.z-pagination-wrap {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--z-space-6);
  padding-top: var(--z-space-4);
  border-top: 1px solid var(--z-divider);
  flex-wrap: wrap;
  gap: var(--z-space-3);
}
.z-pagination-inner .pagination { display: flex; gap: 4px; margin: 0; padding: 0; }
.z-pagination-inner li { list-style: none; }
.z-pagination-inner a,
.z-pagination-inner span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border: 1px solid var(--z-border-strong);
  border-radius: var(--z-radius);
  background: var(--z-paper);
  color: var(--z-ink-2);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: all var(--z-fast) var(--z-ease);
}
.z-pagination-inner a:hover { border-color: var(--z-ink-3); color: var(--z-ink); }
.z-pagination-inner .active span,
.z-pagination-inner .active a { background: var(--z-ink); color: #fff; border-color: var(--z-ink); }
.z-pagination-results { font-size: 13px; color: var(--z-ink-3); }

/* EMPTY STATE ------------------------------------------------- */
.z-cat-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--z-ink-3);
}
.z-cat-empty svg { margin: 0 auto 12px; color: var(--z-ink-4); }
.z-cat-empty p { font-size: 16px; margin: 0 0 18px; }

/* CATEGORY GUIDE / SEO --------------------------------------- */
.z-cat-guide {
  margin-top: var(--z-space-6);
  background: var(--z-paper);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: 22px 24px;
}
.z-cat-guide__title { font-size: 20px; font-weight: 700; margin: 6px 0 10px; }
.z-cat-guide__body {
  font-size: 13px; color: var(--z-ink-2);
  line-height: 1.6;
}
.z-cat-guide__body p { margin: 0 0 8px; color: inherit; }

/* MOBILE OVERRIDES for category page ------------------------- */
@media (max-width: 900px) {
  .z-cat-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .z-cat-hero__inner { padding: 22px 16px 20px; }
  .z-cat-hero__title { font-size: 26px !important; }
  .z-cat-hero__desc { font-size: 13px; }
  .z-cat-hero__stats { flex-wrap: wrap; gap: 14px; }
  .z-cat-hero__stat-num { font-size: 20px; }
  .z-cat-hero__stat-label { font-size: 11px; }
  .z-cat-hero__stat-sep { display: none; }

  .z-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 12px;
    margin: 0 -12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .z-subcats::-webkit-scrollbar { display: none; }
  .z-subcat { width: 160px; flex-shrink: 0; scroll-snap-align: start; }

  .z-cat-layout { padding: var(--z-space-3) 12px var(--z-space-6); }
  .z-cat-sidebar { padding: 12px; }
  .z-cat-sidebar__qlinks { flex-direction: row; overflow-x: auto; padding-bottom: 12px; }
  .z-cat-sidebar__qlinks .z-qlink { flex: 0 0 200px; }

  .z-toolbar { gap: 8px; }
  .z-toolbar__count { font-size: 13px; }
  .z-toolbar__select select { padding: 6px 26px 6px 10px; font-size: 13px; }
  .z-toolbar__view-btn { padding: 6px 8px; }

  .z-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .z-pc__name { font-size: 13px; min-height: 30px; }
  .z-pc__price { font-size: 14px; }
  .z-pc__cart { font-size: 11px; padding: 7px; }

  .z-product-grid--list .z-pc__media { width: 100px; min-width: 100px; }
  .z-product-grid--list .z-pc__body { padding: 10px 12px; }
}

/* ============================================================
   FINAL FILTER STYLE (rendered LAST so it wins all cascade battles)
   Target the OC filter module markup exactly as it ships:
     <div class="box">
       <div class="box-heading">Filtrovat výsledky</div>
       <div class="list-group">
         <a class="list-group-item heading z-filter-head is-open|is-collapsed">Stav známky</a>
         <div class="list-group-item z-filter-body" [style="display: none"]>
           <div id="filter-groupN">
             <div class="checkbox">
               <label>
                 <input type="checkbox" name="filter[]" value="X">
                 Text
               </label>
             </div>
             ...
           </div>
         </div>
         ... (more heading + body pairs)
         <div class="panel-footer">
           <button id="button-filter" class="btn btn-primary">Filtrovat výsledky</button>
         </div>
       </div>
     </div>
   ============================================================ */
/* FILTER block — visually matches the .z-tree categories above (same fonts, hover, spacing) */
aside.z-cat-sidebar .z-cat-sidebar__filters .box {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Top "Filtrovat výsledky" heading — same style as PROCHÁZET KATALOG above the tree */
aside.z-cat-sidebar .z-cat-sidebar__filters .box > .box-heading {
  display: block !important;
  margin: 12px 0 4px !important;
  padding: 10px 0 4px !important;
  border-top: 1px solid #ECE7DA !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #15181D !important;
  line-height: 1.3 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .list-group {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Section heading rows (Stav, Druh, Pofis…) — same look as level-1 tree links: bold dark, normal case */
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading,
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading.z-filter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 4px 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #15181D !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.4 !important;
  position: relative !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading:hover,
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading.z-filter-head:hover {
  background: #FAF8F3 !important;
}
/* Chevron — same style as the tree's expand indicator */
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  border-right: 1.5px solid #9AA0AE;
  border-bottom: 1.5px solid #9AA0AE;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.7;
  flex-shrink: 0;
  margin-bottom: 2px;
}
aside.z-cat-sidebar .z-cat-sidebar__filters a.list-group-item.heading.is-collapsed::after {
  transform: rotate(-45deg);
  margin-bottom: -2px;
}

/* Body — checkboxes container */
aside.z-cat-sidebar .z-cat-sidebar__filters div.list-group-item,
aside.z-cat-sidebar .z-cat-sidebar__filters div.list-group-item.z-filter-body {
  display: block !important;
  margin: 0 !important;
  padding: 2px 0 4px 10px !important;   /* indent matches tree's lvl-2 (padding-left: 12px) */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters div.list-group-item > div[id^="filter-group"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each checkbox row — same row style as tree items */
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 4px 8px !important;     /* matches .z-tree__link padding exactly */
  margin: 1px 0 !important;        /* matches .z-tree__link margin */
  border-radius: 6px !important;   /* matches .z-tree__link radius */
  font-size: 13px !important;      /* matches .z-tree__link--lvl2/3 size */
  font-weight: 500 !important;
  color: #3C414B !important;       /* matches tree sublink color */
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  min-height: 0 !important;
  text-indent: 0 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox label:hover {
  background: #FAF8F3 !important;
  color: #15181D !important;
}
/* Wrapped text span (JS adds .z-filter-text wrapping the bare text node) */
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox label .z-filter-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: normal !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Custom dark navy checkbox */
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #C4BFB1 !important;
  border-radius: 6px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"]:hover {
  border-color: #1A1F29 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"]:checked {
  background: #1A1F29 !important;
  background-color: #1A1F29 !important;
  border-color: #1A1F29 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters .checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute !important;
  left: 4px !important;
  top: 0 !important;
  width: 4px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Submit button — dark ink, no Bootstrap blue */
aside.z-cat-sidebar .z-cat-sidebar__filters .panel-footer {
  display: block !important;
  margin: 10px 0 0 !important;
  padding: 10px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #ECE7DA !important;
  border-radius: 0 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters #button-filter,
aside.z-cat-sidebar .z-cat-sidebar__filters .btn.btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  background: #1A1F29 !important;
  background-color: #1A1F29 !important;
  background-image: none !important;
  border: 0 !important;
  border-color: #1A1F29 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.12s ease, transform 0.12s ease !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}
aside.z-cat-sidebar .z-cat-sidebar__filters #button-filter:hover,
aside.z-cat-sidebar .z-cat-sidebar__filters .btn.btn-primary:hover {
  background: #000 !important;
  background-color: #000 !important;
  transform: translateY(-1px);
}

/* ============================================================
   HERO COLOR VARIANTS (for bestseller/special/latest pages)
   ============================================================ */
.z-cat-hero--red {
  background: linear-gradient(135deg, #5C0F12 0%, #8B1A20 55%, #C92834 100%) !important;
}
.z-cat-hero--green {
  background: linear-gradient(135deg, #064E3B 0%, #047857 55%, #10B981 100%) !important;
}
.z-cat-hero--gold {
  background: linear-gradient(135deg, #5C3B0A 0%, #B86A20 55%, #FFB000 100%) !important;
}
.z-cat-hero--red .z-cat-hero__eyebrow,
.z-cat-hero--green .z-cat-hero__eyebrow,
.z-cat-hero--gold .z-cat-hero__eyebrow {
  color: rgba(255,255,255,0.9);
}

/* Bestseller medal/sales badge */
.z-pc__badge--bestseller {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #15181D;
}

/* Out-of-stock cart button */
.z-pc__cart--oos {
  background: #B0B5C0 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.z-product-page {
  padding: 24px var(--z-container-pad, 24px) 40px;
}
.z-product-form { margin: 0; }
.z-product-grid-2col {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-bottom: 28px;
}
@media (max-width: 1100px) {
  .z-product-grid-2col { grid-template-columns: 1fr; gap: 24px; }
}

/* Gallery */
.z-product-gallery {
  display: flex;
  gap: 12px;
  align-self: flex-start;
}
.z-product-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.z-product-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid #E8E4D9;
  background: linear-gradient(180deg, #0F1216 0%, #1A2540 100%);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease;
}
.z-product-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}
.z-product-thumb:hover { border-color: var(--z-border-strong, #C4BFB1); }
.z-product-thumb.is-active { border-color: var(--z-primary, #2E4BDB); }

.z-product-gallery__main {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #0F1216 0%, #1A2540 100%);
  border-radius: 14px;
  border: 1px solid #E8E4D9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1.1) {
  .z-product-gallery__main { height: 460px; }
}
.z-product-gallery__main a.thumbnail,
.z-product-gallery__main .thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.z-product-gallery__main img,
.z-product-gallery__main .thumbnail img,
.z-product-gallery__main a.thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.z-product-gallery__badges {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.z-product-gallery__photo-chip {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.16);
  color: #E8ECF2;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.z-product-gallery__code {
  position: absolute;
  bottom: 14px; left: 14px;
  background: rgba(15,18,22,0.7);
  color: #E8ECF2;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Buy panel */
.z-product-buy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.z-product-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.z-product-eyebrow__code {
  display: inline-flex; align-items: center;
  background: rgba(46,75,219,0.08);
  color: var(--z-primary, #2E4BDB);
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.z-product-eyebrow__sub {
  font-size: 13px;
  color: var(--z-ink-3, #6B7280);
}
.z-product-eyebrow__sub a { color: inherit; text-decoration: none; }
.z-product-eyebrow__sub a:hover { color: var(--z-primary, #2E4BDB); }
.z-product-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--z-ink, #1A1F29);
  letter-spacing: -0.8px;
  line-height: 1.1;
}

/* ── Catalog refs + Quick facts STACK vertically (full-width each) ── */
.z-product-catalogfacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Catalog refs — 4-col single row (Pofis / Michel / SG / Scott) */
.z-product-catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E8E4D9;
}
@media (max-width: 600px) {
  .z-product-catalog { grid-template-columns: repeat(2, 1fr); }
}
.z-product-catalog__cell {
  background: linear-gradient(135deg, #FFFFFF 0%, #F6F4EF 100%);
  padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 56px;
}
.z-product-catalog__cell.is-primary {
  background: linear-gradient(135deg, #FFF8E6 0%, #FAEFC8 100%);
}
.z-product-catalog__cell.is-primary .z-product-catalog__name { color: #B8860B; }
.z-product-catalog__cell.is-primary .z-product-catalog__num { color: #15181D; }
.z-product-catalog__name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9AA0AE;
}
.z-product-catalog__num {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--z-ink, #1A1F29);
}

/* Quick facts — 2×2 grid */
.z-product-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F1EA 100%);
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff;
  align-content: center;
}
.z-product-fact { display: flex; flex-direction: column; gap: 2px; }
.z-product-fact__label {
  font-size: 11px;
  color: #9AA0AE;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.z-product-fact__val {
  font-size: 13px;
  color: var(--z-ink, #1A1F29);
  font-weight: 600;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-product-fact__val--ok {
  color: var(--z-success, #1F8A5B);
  font-weight: 700;
  font-family: var(--z-font-sans, system-ui);
  display: inline-flex; align-items: center; gap: 5px;
}

/* Free-ship promo strip */
.z-product-ship {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(120deg, #EAF1FE 0%, #F4F8FF 100%);
  border: 1px solid #C7D2FE;
}
.z-product-ship__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #C7D2FE;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--z-primary, #2E4BDB);
}
.z-product-ship__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--z-ink, #1A1F29);
}
.z-product-ship__sub {
  font-size: 13px;
  color: var(--z-ink-2, #5F6470);
}
.z-product-ship__chip {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #C7D2FE;
  color: var(--z-primary, #2E4BDB);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.z-product-ship__chip strong {
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.4px;
}
@media (max-width: 600px) {
  .z-product-ship__chip { display: none; }   /* compact on mobile */
}

/* Coupon hint box inside pricebox */
.z-product-coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFF7E6;
  border: 1px dashed #F0C24B;
  margin-top: -4px;
}
.z-product-coupon__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.z-product-coupon__text {
  font-size: 13px;
  color: var(--z-ink-2, #5F6470);
  line-height: 1.4;
}
.z-product-coupon__text strong {
  color: var(--z-ink, #1A1F29);
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 700;
}

/* Make-offer button with sub-label */
.z-product-offer-btn__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--z-ink-4, #9AA0AE);
  margin-left: 4px;
}
@media (max-width: 600px) {
  .z-product-offer-btn__sub { display: none; }
}

/* product_promo wrapper */
.z-product-promo-wrap {
  margin: 0;
}

/* ============================================================
   OFFER MODAL (z-modal — reusable)
   ============================================================ */
.z-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.z-modal[style*="display:flex"],
.z-modal[style*="display: flex"] { display: flex !important; }
.z-modal__card {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  animation: zModalFadeIn .3s ease;
  margin: auto;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes zModalFadeIn {
  from { transform: scale(.94) translateY(16px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.z-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  background: #F4F1EA;
  border: 0;
  font-size: 26px;
  color: #3C414B;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  line-height: 1;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}
.z-modal__close:hover { background: #E8E4D9; color: var(--z-ink, #1A1F29); }
.z-modal__body { padding: 28px 28px 22px; }
.z-modal__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--z-ink, #1A1F29);
  text-align: center;
  line-height: 1.3;
}
.z-modal__lead {
  text-align: center;
  color: var(--z-ink-2, #5F6470);
  margin-bottom: 16px;
  font-size: 13px;
}
.z-modal__or {
  text-align: center;
  margin: 14px 0;
  position: relative;
  font-size: 13px;
  color: var(--z-ink-4, #9AA0AE);
}
.z-modal__or::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--z-divider, #ECE7DA);
}
.z-modal__or span {
  background: #fff;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}
.z-modal__err, .z-modal__ok, .z-modal__warn {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 14px;
}
.z-modal__err { background: #FFEBEE; color: #C62828; }
.z-modal__ok { background: #E8F5E9; color: #2E7D32; }
.z-modal__warn { background: #FFF8E1; color: #E65100; border: 1px solid #FFE0B2; }
.z-modal__price {
  background: #FAF8F3;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.z-modal__price span { color: var(--z-ink-2, #5F6470); font-size: 13px; }
.z-modal__price strong { font-weight: 700; font-size: 20px; color: var(--z-ink, #1A1F29); }
.z-modal__field {
  margin-bottom: 14px;
}
.z-modal__field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--z-ink, #1A1F29);
  font-size: 13px;
}
.z-modal__field input, .z-modal__field textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  border: 1px solid var(--z-border-strong, #C4BFB1);
  border-radius: 10px;
  box-sizing: border-box;
  font-family: inherit;
  outline: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.z-modal__field input:focus, .z-modal__field textarea:focus {
  border-color: var(--z-primary, #2E4BDB);
  box-shadow: 0 0 0 3px rgba(46,75,219,0.12);
}
.z-modal__field small {
  color: var(--z-ink-3, #6B7280);
  font-size: 11px;
  display: block;
  margin-top: 4px;
}
.z-modal__btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.z-modal__btn--primary {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
}
.z-modal__btn--primary:hover { background: #2540B8; transform: translateY(-1px); }
.z-modal__foot {
  text-align: center;
  margin: 14px 0 0;
  color: var(--z-ink-3, #6B7280);
  font-size: 13px;
}
.z-modal__foot a {
  color: var(--z-primary, #2E4BDB);
  font-weight: 600;
  text-decoration: none;
}
.z-modal__foot a:hover { text-decoration: underline; }

/* Price box */
.z-product-pricebox {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 20px rgba(15,20,30,0.05);
}
.z-product-pricebox__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.z-product-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--z-ink, #1A1F29);
  letter-spacing: -1px;
  line-height: 1.05;
}
.z-product-price-old {
  font-size: 16px;
  font-weight: 600;
  color: #9AA0AE;
  text-decoration: line-through;
  margin-left: 8px;
  letter-spacing: 0;
}
.z-product-price-end {
  font-size: 11px;
  color: var(--z-danger, #DC2626);
  font-weight: 600;
  margin-top: 4px;
}
.z-product-pricebox__meta { text-align: right; }
.z-product-sku {
  font-size: 11px;
  color: var(--z-ink-3, #6B7280);
  margin-top: 6px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-product-zplus {
  padding: 7px 13px;
  background: linear-gradient(135deg, #FFC93A 0%, #FFB000 100%);
  color: #15181D;
  border-radius: 10px;
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
}
.z-product-zplus__tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.z-product-zplus__price { font-size: 16px; font-weight: 900; }
.z-product-zplus__save { font-size: 11px; font-weight: 700; opacity: .8; }

/* Cart + qty + wish actions */
.z-product-actions { display: flex; gap: 10px; align-items: stretch; }
.z-product-qty {
  display: flex; align-items: center;
  border: 1px solid var(--z-border-strong, #C4BFB1);
  border-radius: 10px;
  overflow: hidden;
}
.z-product-qty__btn {
  width: 40px; height: 48px;
  border: 0;
  background: #fff;
  font-size: 20px;
  color: var(--z-ink-2, #5F6470);
  cursor: pointer;
}
.z-product-qty__btn:hover { background: #FAF8F3; }
.z-product-qty__val {
  width: 44px;
  height: 48px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--z-ink, #1A1F29);
  border: 0;
  background: #fff;
  padding: 0;
  outline: 0;
}
.z-product-cart-btn {
  flex: 1;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  box-shadow: 0 1px 0 #1A2E9E, 0 3px 12px rgba(46,75,219,0.25);
  padding: 0 18px;
  height: 50px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.z-product-cart-btn:hover { background: #2540B8; transform: translateY(-1px); }
.z-product-wish-btn {
  width: 50px; height: 50px;
  border-radius: 10px;
  border: 1px solid var(--z-border-strong, #C4BFB1);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--z-ink-3, #6B7280);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.z-product-wish-btn:hover {
  background: #FFF0F0;
  color: var(--z-danger, #DC2626);
  border-color: var(--z-danger, #DC2626);
}
.z-product-offer-btn {
  width: 100%;
  background: #fff;
  color: var(--z-ink, #1A1F29);
  border: 1.5px solid var(--z-border-strong, #C4BFB1);
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.z-product-offer-btn:hover {
  background: #FAF8F3;
  border-color: var(--z-ink, #1A1F29);
}

/* Trust rows */
.z-product-trust {
  display: flex; flex-direction: column;
  gap: 1px;
  background: #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E8E4D9;
}
.z-product-trust__row {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  padding: 12px 16px;
}
.z-product-trust__row svg {
  color: var(--z-primary, #2E4BDB);
  flex-shrink: 0;
}
.z-product-trust__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--z-ink, #1A1F29);
}
.z-product-trust__sub {
  font-size: 13px;
  color: var(--z-ink-3, #6B7280);
}

/* Tabs */
.z-product-tabs {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
}
.z-product-tabs__nav {
  display: flex;
  border-bottom: 1px solid #E8E4D9;
}
.z-product-tabs__btn {
  padding: 14px 22px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--z-ink-3, #6B7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.z-product-tabs__btn:hover { color: var(--z-ink, #1A1F29); }
.z-product-tabs__btn.is-active {
  color: var(--z-ink, #1A1F29);
  border-bottom-color: var(--z-primary, #2E4BDB);
}
.z-product-tabs__body { padding: 22px 26px; }
.z-product-tabs__panel { display: none; }
.z-product-tabs__panel.is-active { display: block; }

.z-product-desc {
  font-size: 14px;
  color: var(--z-ink-2, #5F6470);
  line-height: 1.65;
  max-width: 680px;
}
.z-product-desc p { margin: 0 0 14px; }

.z-product-tags { margin-top: 18px; }
.z-product-tags__label {
  font-size: 11px;
  font-weight: 700;
  color: #9AA0AE;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.z-product-tags__list { display: flex; flex-wrap: wrap; gap: 7px; }
.z-product-tag {
  font-size: 13px;
  color: var(--z-ink-2, #5F6470);
  background: #FAF8F3;
  border: 1px solid #E8E4D9;
  border-radius: 999px;
  padding: 4px 11px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.z-product-tag:hover {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border-color: var(--z-primary, #2E4BDB);
}

.z-product-spec {
  width: 100%;
  border-collapse: collapse;
  max-width: 680px;
}
.z-product-spec tr:nth-child(even) { background: #FAF8F3; }
.z-product-spec__key {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--z-ink-3, #6B7280);
  font-weight: 600;
  width: 220px;
  border-bottom: 1px solid var(--z-divider, #ECE7DA);
}
.z-product-spec__val {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--z-ink, #1A1F29);
  border-bottom: 1px solid var(--z-divider, #ECE7DA);
}

/* Related */
.z-product-related {
  margin-top: 28px;
}
.z-product-related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.z-product-related__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--z-ink, #1A1F29);
  letter-spacing: -0.4px;
}

@media (max-width: 767px) {
  .z-product-page { padding: 16px 14px 28px; }
  .z-product-gallery { flex-direction: column-reverse; gap: 10px; }
  .z-product-gallery__thumbs { flex-direction: row; gap: 6px; overflow-x: auto; }
  .z-product-thumb { width: 56px; height: 56px; }
  .z-product-title { font-size: 26px; }
  .z-product-price { font-size: 26px; }
  .z-product-pricebox { padding: 14px; }
  .z-product-pricebox__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .z-product-pricebox__meta { text-align: left; }
  .z-product-tabs__btn { padding: 12px 14px; font-size: 13px; }
  .z-product-tabs__body { padding: 16px 18px; }
}

/* ============================================================
   MOBILE BOTTOM NAV (sticky 5-tab bar per Znamky2026 mobile design)
   Hidden on desktop, fixed bottom on mobile
   ============================================================ */
.z-bottom-nav { display: none; }
@media (max-width: 767px) {
  .z-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    background: #fff;
    border-top: 1px solid #E8E4D9;
    box-shadow: 0 -4px 16px rgba(15,20,30,0.06);
    padding: 6px 4px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
  }
  .z-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    color: #6B7280;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    position: relative;
    transition: color 0.12s ease;
    min-width: 0;
  }
  .z-bottom-nav__item:hover,
  .z-bottom-nav__item.is-active {
    color: #15181D;
  }
  .z-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30%; right: 30%;
    height: 2px;
    background: #2E4BDB;
    border-radius: 0 0 2px 2px;
  }
  .z-bottom-nav__item svg {
    flex-shrink: 0;
  }
  .z-bottom-nav__item span:not(.z-bottom-nav__badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .z-bottom-nav__badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    background: var(--z-danger, #DC2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }
  .z-bottom-nav__badge:empty { display: none; }

  /* Make sure modals/dropdowns sit above the bottom-nav */
  .z-mobile-menu, .z-mobile-overlay, .z-search-overlay { z-index: 10000; }
}

/* ============================================================
   MOBILE PRODUCT PAGE — sticky bottom action bar (price + cart)
   ============================================================ */
.z-product-mobile-bar { display: none; }
@media (max-width: 767px) {
  /* Hide the desktop pricebox actions footer on mobile — we use a sticky bar */
  .z-product-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 64px;        /* sits above the bottom-nav */
    left: 0; right: 0;
    z-index: 9985;
    background: #fff;
    border-top: 1px solid #E8E4D9;
    box-shadow: 0 -4px 16px rgba(15,20,30,0.06);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .z-product-mobile-bar__price {
    display: flex; flex-direction: column;
    line-height: 1.1;
    flex-shrink: 0;
  }
  .z-product-mobile-bar__price-main {
    font-size: 20px;
    font-weight: 800;
    color: #15181D;
    letter-spacing: -0.4px;
  }
  .z-product-mobile-bar__price-sub {
    font-size: 11px;
    color: var(--z-danger, #DC2626);
    font-weight: 700;
    margin-top: 1px;
  }
  .z-product-mobile-bar__cart {
    flex: 1;
    height: 46px;
    background: var(--z-primary, #2E4BDB);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
  }
  .z-product-mobile-bar__wish {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--z-border-strong, #C4BFB1);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--z-ink-3, #6B7280);
    cursor: pointer;
  }
  /* Push product page content above the sticky bar */
  body[class*="product-product"] { padding-bottom: 130px !important; }

  /* ===== Mobile-specific category page tweaks ===== */
  .z-cat-hero__inner { padding: 22px 14px 18px; }
  .z-cat-hero__title { font-size: 26px !important; line-height: 1.15; }
  .z-cat-hero__desc { font-size: 13px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .z-cat-hero__stats { gap: 14px !important; }
  .z-cat-hero__stat-num { font-size: 20px !important; }
  .z-cat-hero__stat-label { font-size: 11px !important; }
  .z-cat-layout { padding: 12px 14px 24px; gap: 14px; }
  /* Sidebar collapses BELOW main content on mobile */
  .z-cat-layout { grid-template-columns: 1fr !important; }
  .z-cat-sidebar {
    order: 2;
    margin-top: 8px;
  }
  /* Subcategory pills — horizontal scroll with snap */
  .z-subcats-section { margin-bottom: 12px; }
  .z-subcats {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    padding: 2px 0 10px;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .z-subcats::-webkit-scrollbar { display: none; }
  .z-subcat {
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 100px;
    scroll-snap-align: start;
    padding: 5px 12px 5px 5px !important;
  }
  .z-subcat__img { width: 30px !important; height: 30px !important; }
  .z-subcat__label { font-size: 13px; }

  /* Product grid mobile: 2 cols */
  .z-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .z-pc__body { padding: 9px 10px; }
  .z-pc__name { font-size: 13px; min-height: 30px; }
  .z-pc__meta { font-size: 11px; }
  .z-pc__chip { font-size: 11px; padding: 1px 5px; }
  .z-pc__price { font-size: 14px; }
  .z-pc__cart { font-size: 11px; padding: 7px 8px; }
  .z-pc__cart span { display: none; }   /* show just the icon on mobile */
  .z-pc__cart svg { margin: 0; }

  /* Toolbar collapses to single row "Filtry / Řadit" buttons + count */
  .z-toolbar {
    gap: 8px;
    padding: 8px 0;
  }
  .z-toolbar__left, .z-toolbar__right { flex-wrap: wrap; gap: 6px; }
  .z-toolbar__sortgroup { font-size: 11px; padding: 1px; }
  .z-toolbar__sort-btn { padding: 4px 7px; font-size: 11px; }
  .z-toolbar__count { font-size: 13px; }

  /* FeaturedRow stacks vertically on mobile */
  .z-cat-featured__grid { grid-template-columns: 1fr !important; }

  /* Product page mobile: stack gallery + buy, hide pricebox cart actions (use sticky bar instead) */
  .z-product-grid-2col { grid-template-columns: 1fr !important; }
  .z-product-gallery__main { aspect-ratio: 1 / 1; max-width: 100%; }
  .z-product-pricebox .z-product-actions { display: none; }   /* hide on mobile — sticky bar takes over */
  .z-product-page { padding: 12px 14px 24px; }
  .z-product-title { font-size: 20px; }
  .z-product-catalog { grid-template-columns: repeat(2, 1fr); }
  .z-product-facts { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  .z-product-mobile-bar { display: none !important; }
}

/* ============================================================
   EXPANDABLE CATEGORY SELECTOR — below hero on category pages.
   Uses native <details>/<summary>. On mobile it's collapsed; on
   desktop it's open by default (the sidebar tree is its own copy).
   ============================================================ */
.z-cat-expander-wrap {
  padding: 12px var(--z-container-pad, 24px) 0;
}
.z-cat-expander {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
}
.z-cat-expander__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #FAF8F3;
  border-bottom: 1px solid #ECE7DA;
}
.z-cat-expander__head::-webkit-details-marker { display: none; }
.z-cat-expander__label {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #15181D;
}
.z-cat-expander__hint {
  font-size: 11px;
  font-weight: 600;
  color: #9AA0AE;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.z-cat-expander__chev {
  color: #6B7280;
  transition: transform 0.2s ease;
}
.z-cat-expander[open] > .z-cat-expander__head { border-bottom-color: #ECE7DA; }
.z-cat-expander[open] .z-cat-expander__chev { transform: rotate(180deg); }
.z-cat-expander__body {
  padding: 8px 14px 12px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0 !important;
}
/* On desktop, this expander is redundant with the sidebar tree — hide */
@media (min-width: 901px) {
  .z-cat-expander-wrap { display: none; }
}
/* On mobile (≤900px) it lives below hero, collapsed by default */
@media (max-width: 900px) {
  .z-cat-expander-wrap { padding: 10px 14px 0; }
  .z-cat-expander[open] .z-cat-expander__body { max-height: 50vh; }
}

/* ============================================================
   MOBILE HP — make sure upper part (header + hero strip) renders
   without being clipped by fixed elements or overflow rules
   ============================================================ */
@media (max-width: 767px) {
  /* The new sticky bottom-nav already pads body 64px. Make sure top isn't ALSO padded. */
  body { padding-top: 0 !important; }

  /* Ensure main HP hero is visible (some legacy CSS may have set display:none on the wrap) */
  .z-hero {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
  }
  .z-hero__main {
    display: flex !important;
    visibility: visible !important;
  }
  /* Top utility strip should still show on mobile */
  .z-topstrip {
    display: flex !important;
    flex-wrap: wrap;
    font-size: 11px !important;
    padding: 6px 12px !important;
    gap: 8px;
  }
  .z-topstrip__promo,
  .z-topstrip__free-ship strong { white-space: nowrap; }
  /* Hide the very-secondary topstrip items on tiny screens */
  .z-topstrip__bank,
  .z-topstrip__promo { display: none !important; }

  /* Main header — make sure logo + burger + search-btn + cart all fit in one row */
  .z-header {
    flex-wrap: wrap;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .z-header__burger { display: inline-flex !important; }
  .z-header__nav { display: none !important; }    /* nav moves to mobile drawer */
  .z-header__search { display: none !important; } /* desktop search input hidden, mobile search overlay handles it */
  .z-header__search-btn { display: inline-flex !important; }
}

/* ============================================================
   MOBILE CATEGORY HERO — MAXIMUM specificity override (was being
   overridden by legacy category-refresh.css)
   ============================================================ */
@media (max-width: 767px) {
  html body section.z-cat-hero,
  html body .z-cat-hero,
  body .z-cat-hero {
    background: linear-gradient(135deg, #0F1216 0%, #1A2540 60%, #1E3370 100%) !important;
    background-color: #1A2540 !important;
    background-image: linear-gradient(135deg, #0F1216 0%, #1A2540 60%, #1E3370 100%) !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
  }
  html body .z-cat-hero .z-cat-hero__bg,
  html body .z-cat-hero .z-cat-hero__stamps {
    display: none !important;
  }
  html body .z-cat-hero .z-cat-hero__inner,
  body .z-cat-hero .z-cat-hero__inner {
    display: block !important;
    visibility: visible !important;
    padding: 20px 16px 18px !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
  }
  html body .z-cat-hero .z-cat-hero__title,
  body .z-cat-hero h1.z-cat-hero__title {
    display: block !important;
    visibility: visible !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    letter-spacing: -0.5px !important;
  }
  html body .z-cat-hero .z-cat-hero__eyebrow {
    display: block !important;
    visibility: visible !important;
    color: #FFC93A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 4px !important;
  }
  html body .z-cat-hero .z-cat-hero__desc {
    display: -webkit-box !important;
    visibility: visible !important;
    color: #C8CDD8 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 100% !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html body .z-cat-hero .z-cat-hero__stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 12px 0 0 !important;
    align-items: center !important;
  }
  html body .z-cat-hero .z-cat-hero__stat {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
  }
  html body .z-cat-hero .z-cat-hero__stat-num {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    visibility: visible !important;
  }
  html body .z-cat-hero .z-cat-hero__stat-label {
    color: rgba(255,255,255,0.6) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: 2px !important;
  }
  html body .z-cat-hero .z-cat-hero__stat-sep {
    display: inline-block !important;
    width: 1px !important;
    height: 22px !important;
    background: rgba(255,255,255,0.18) !important;
  }
  /* Expander immediately follows hero — kill the gap */
  html body .z-cat-expander-wrap {
    padding: 10px 14px 0 !important;
    margin: 0 !important;
  }

  /* ===== HP — force every section to render visibly ===== */
  html body section.z-hero,
  html body .z-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    visibility: visible !important;
    padding: 14px 12px 18px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .z-hero__main,
  html body .z-hero .z-hero__main--slideshow {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    min-height: 240px !important;
    background: #0F1216 !important;
    background-color: #0F1216 !important;
    color: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  html body .z-hero .z-hero__slide {
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 18px 18px !important;
    color: #fff !important;
    text-decoration: none !important;
    align-items: flex-end !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html body .z-hero .z-hero__slide.is-active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }
  html body .z-hero .z-hero__overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15,18,22,0.45) 0%, rgba(15,18,22,0.85) 70%, rgba(15,18,22,0.95) 100%) !important;
    z-index: 1;
  }
  html body .z-hero .z-hero__copy {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    visibility: visible !important;
    display: block !important;
  }
  html body .z-hero .z-hero__eyebrow {
    color: #FFC93A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 4px !important;
    display: block !important;
    visibility: visible !important;
  }
  html body .z-hero .z-hero__title {
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
    display: block !important;
    visibility: visible !important;
  }
  html body .z-hero .z-hero__desc {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    display: block !important;
    visibility: visible !important;
    max-width: 100% !important;
  }
  html body .z-hero .z-hero__cta { display: block !important; margin-top: 8px !important; }
  html body .z-hero .z-hero__cta .z-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: #FFC93A !important;
    color: #15181D !important;
    border-radius: 10px !important;
    text-decoration: none !important;
  }
  html body .z-hero .z-hero__dots,
  html body .z-hero .z-hero__arrow {
    display: none !important;   /* skip nav controls on mobile for simplicity */
  }
  html body .z-hero .z-hero__side {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    visibility: visible !important;
  }
  html body .z-hero .z-hero__tile {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Force every section under hero to be visible */
  html body section[class*="z-section"]:not(.z-hero),
  html body section[class*="z-container"]:not(.z-hero) {
    display: block !important;
    visibility: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   MOBILE OVERFLOW + LAYOUT FIXES — hard reset for category page
   ============================================================ */
@media (max-width: 767px) {
  /* Kill horizontal overflow globally so swipes don't expose page bleed */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  body > * { max-width: 100vw; }

  /* Container should never exceed viewport */
  .z-container,
  .z-cat-layout,
  .z-cat-hero,
  .z-cat-hero__inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* HERO — ensure text is visible (force readable color/size) */
  .z-cat-hero {
    padding: 0 !important;
    min-height: 0 !important;
  }
  .z-cat-hero__bg, .z-cat-hero__stamps { display: none !important; }   /* skip decorative overlays on mobile */
  .z-cat-hero__inner {
    padding: 22px 16px 18px !important;
    position: relative;
    z-index: 2;
  }
  .z-cat-hero__eyebrow {
    font-size: 11px !important;
    color: #FFC93A !important;
    display: block !important;
  }
  .z-cat-hero__title {
    font-size: 26px !important;
    color: #fff !important;
    margin: 4px 0 6px !important;
    line-height: 1.15 !important;
    display: block !important;
  }
  .z-cat-hero__desc {
    font-size: 13px !important;
    color: #C8CDD8 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
  }
  .z-cat-hero__stats { gap: 12px !important; margin-top: 12px !important; flex-wrap: wrap; }
  .z-cat-hero__stat-num { font-size: 20px !important; }
  .z-cat-hero__stat-label { font-size: 11px !important; }

  /* Layout — proper container width, no negative margins */
  .z-cat-layout {
    grid-template-columns: 1fr !important;
    padding: 14px 14px 24px !important;
    gap: 14px !important;
  }

  /* Subcategory pills — proper horizontal scroll WITHIN viewport (no overflow off the page) */
  .z-subcats-section {
    margin: 0 -14px 12px;
    width: calc(100% + 28px);
    max-width: calc(100vw + 0px);
    overflow: hidden;
  }
  .z-subcats-head { padding: 0 14px; }
  .z-subcats {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px 12px !important;
    margin: 0 !important;
    scrollbar-width: none;
  }
  .z-subcats::-webkit-scrollbar { display: none; }
  .z-subcat {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 180px;
    scroll-snap-align: start;
  }

  /* Toolbar — stacked rows, no overflow */
  .z-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 4px 0 8px;
  }
  .z-toolbar__left, .z-toolbar__right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  .z-toolbar__sort-label { display: none !important; }
  .z-toolbar__sortgroup {
    flex-wrap: wrap;
    width: 100%;
    padding: 2px;
  }
  .z-toolbar__sort-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    flex: 0 0 auto;
  }
  .z-toolbar__limit { margin-left: auto; }
  .z-toolbar__view { flex-shrink: 0; }

  /* Sidebar — moves below main, full-width white card */
  .z-cat-sidebar {
    order: 2;
    margin-top: 8px;
    padding: 12px 14px;
  }

  /* Product page mobile — kill horizontal overflow on gallery */
  .z-product-page { padding: 12px 14px 24px !important; max-width: 100%; }
  .z-product-grid-2col { grid-template-columns: 1fr !important; gap: 18px !important; }
  .z-product-gallery { flex-direction: column-reverse !important; gap: 10px !important; }
  .z-product-gallery__main {
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .z-product-gallery__thumbs {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .z-product-gallery__thumbs::-webkit-scrollbar { display: none; }
  .z-product-thumb { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; }

  /* HP hero — make sure it never overflows */
  .z-hero, .z-hero__main, .z-hero__side {
    max-width: 100% !important;
  }
}

/* ============================================================
   CART PAGE — Znamky 2026
   ============================================================ */
.z-cart-page {
  padding: 24px var(--z-container-pad, 24px) 40px;
}
.z-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .z-cart-layout { grid-template-columns: 1fr; }
}
.z-cart-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* — Steps indicator — */
.z-steps {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 0;
}
.z-step { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.z-step__bullet {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #F1EEE7;
  color: #9AA0AE;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-step.is-active .z-step__bullet {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(46,75,219,0.15);
}
.z-step.is-done .z-step__bullet {
  background: var(--z-success, #1F8A5B);
  color: #fff;
}
.z-step__num {
  font-size: 11px;
  font-weight: 700;
  color: #9AA0AE;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-step__label {
  font-size: 13px;
  color: #3C414B;
  font-weight: 500;
}
.z-step.is-active .z-step__label { color: #15181D; font-weight: 700; }
.z-step__bar {
  flex: 1; height: 2px;
  background: #E8E4D9;
  margin: 0 14px;
  border-radius: 6px;
  min-width: 30px;
  display: block;
}
.z-step:not(.is-active):not(:last-child) ~ .z-step .z-step__bar {}
@media (max-width: 700px) {
  .z-steps { overflow-x: auto; padding: 12px; }
  .z-step__label { font-size: 13px; }
  .z-step__bar { min-width: 20px; margin: 0 8px; }
}

/* — Shipping progress — */
.z-ship-progress {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 14px 16px;
}
.z-ship-progress.is-achieved { background: #F0FDF4; border-color: #BBF7D0; }
.z-ship-progress__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.z-ship-progress__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: #FFC93A;
  color: #15181D;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-ship-progress.is-achieved .z-ship-progress__icon {
  background: var(--z-success, #1F8A5B);
  color: #fff;
}
.z-ship-progress__title {
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
}
.z-ship-progress.is-achieved .z-ship-progress__title { color: var(--z-success, #1F8A5B); }
.z-ship-progress__amt {
  color: #B45309;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-ship-progress__sub {
  font-size: 11px;
  color: #6B7280;
  margin-top: 1px;
}
.z-ship-progress__track {
  height: 6px;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 999px;
  overflow: hidden;
}
.z-ship-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #FFC93A, #F59E0B);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.z-ship-progress.is-achieved .z-ship-progress__fill {
  background: linear-gradient(90deg, #1F8A5B, #22C55E);
}

/* — Cart panel — */
.z-cart-panel {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 4px 20px 16px;
  margin: 0;
}
.z-cart-panel__head {
  padding: 14px 0 8px;
  border-bottom: 1px solid #ECE7DA;
  display: flex; align-items: center; justify-content: space-between;
}
.z-cart-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
  display: inline-flex; align-items: center; gap: 10px;
}
.z-cart-panel__count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 24px;
}
.z-cart-alert {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin: 10px 0 0;
}
.z-cart-alert--err { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.z-cart-alert--ok  { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }

/* — Cart line — */
.z-cart-list { display: flex; flex-direction: column; }
.z-cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto auto;
  gap: 16px;
  padding: 16px 0;
  align-items: center;
  border-bottom: 1px solid #ECE7DA;
}
.z-cart-line:last-child { border-bottom: 0; }
.z-cart-line__media {
  width: 84px; height: 84px;
  background: linear-gradient(180deg, #0F1216 0%, #1A2540 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid #E8E4D9;
}
.z-cart-line__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.z-cart-line__body { min-width: 0; }
.z-cart-line__meta {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 4px;
}
.z-cart-line__chip {
  display: inline-flex;
  background: #F0FDF4;
  color: var(--z-success, #1F8A5B);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}
.z-cart-line__chip--warn {
  background: #FEF2F2;
  color: var(--z-danger, #DC2626);
}
.z-cart-line__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #15181D;
  line-height: 1.3;
  text-decoration: none;
}
.z-cart-line__name:hover { color: var(--z-primary, #2E4BDB); }
.z-cart-line__sub {
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: #6B7280;
  margin-top: 4px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.z-cart-line__ship {
  color: var(--z-success, #1F8A5B);
  font-family: var(--z-font-sans, system-ui);
  font-weight: 600;
}
.z-cart-line__opts small { display: block; font-size: 11px; color: #6B7280; margin-top: 2px; }

.z-cart-line__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
}
.z-cart-line__qty-btn {
  width: 30px; height: 32px;
  border: 0;
  background: #F7F5EF;
  color: #3C414B;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
.z-cart-line__qty-btn:hover { background: #ECE7DA; color: #15181D; }
.z-cart-line__qty-input {
  min-width: 38px; width: 38px;
  height: 32px;
  text-align: center;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 700;
  color: #15181D;
  border: 0;
  background: #fff;
  padding: 0;
  outline: 0;
}

.z-cart-line__price { text-align: right; min-width: 80px; }
.z-cart-line__total {
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
}
.z-cart-line__unit {
  font-size: 11px;
  color: #9AA0AE;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  margin-top: 1px;
}

.z-cart-line__remove {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  color: #6B7280;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.z-cart-line__remove:hover { color: var(--z-danger, #DC2626); border-color: var(--z-danger, #DC2626); }

/* A quantity of zero keeps the product recoverable on the current cart page. */
.z-cart-line.is-zero {
  background: #F7F7F5;
  border-radius: 10px;
}
.z-cart-line.is-zero .z-cart-line__media,
.z-cart-line.is-zero .z-cart-line__body,
.z-cart-line.is-zero .z-cart-line__price,
.z-cart-line.is-zero .z-cart-line__remove {
  opacity: 0.42;
  filter: grayscale(1);
}
.z-cart-line.is-zero .z-cart-line__qty {
  border-color: #CDD2DC;
  background: #fff;
}
.z-cart-line.is-zero .btn-qty-minus,
.z-cart-line.is-zero .z-cart-line__remove {
  cursor: not-allowed;
}
.z-cart-line.is-zero .btn-qty-plus {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
}
.z-cart-line.is-zero .btn-qty-plus:hover {
  background: #2540B8;
  color: #fff;
}

/* — Promo input — */
.z-cart-promo {
  margin-top: 16px;
  background: #FAF8F3;
  border: 1px dashed var(--z-border-strong, #C4BFB1);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: center;
}
.z-cart-promo__icon { font-size: 20px; flex-shrink: 0; }
.z-cart-promo__text { flex: 1; font-size: 13px; font-weight: 600; color: #15181D; }
.z-cart-promo__input {
  flex: 0 0 180px;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: #fff;
  outline: 0;
}
.z-cart-promo__input:focus { border-color: var(--z-primary, #2E4BDB); }
.z-cart-promo__btn {
  background: #fff;
  border: 1px solid #1A1F29;
  color: #15181D;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.z-cart-promo__btn:hover { background: #1A1F29; color: #fff; }

/* — Continue shopping — */
.z-cart-back {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--z-primary, #2E4BDB);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.z-cart-back:hover { color: #15181D; }

/* — Expert callout — */
.z-expert-callout {
  background: linear-gradient(135deg, #0F1216 0%, #1A1F26 100%);
  color: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: center;
}
.z-expert-callout__shield {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: #FFC93A;
  color: #15181D;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-expert-callout__body { flex: 1; }
.z-expert-callout__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.z-expert-callout__sub {
  font-size: 13px;
  color: #9AA0A8;
  line-height: 1.45;
}
.z-expert-callout__sub strong { color: #fff; }
.z-expert-callout__cta {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.z-expert-callout__cta:hover { background: rgba(255,255,255,0.2); }

/* — Trust strip — */
.z-trust-strip {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  overflow: hidden;
}
.z-trust-strip__head {
  padding: 10px 16px;
  background: #0F1216;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex; align-items: center; gap: 8px;
}
.z-trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
  .z-trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
.z-trust-strip__cell {
  padding: 14px 16px;
  border-right: 1px solid #ECE7DA;
  background: #fff;
}
.z-trust-strip__cell:last-child { border-right: 0; }
.z-trust-strip__cell.is-highlight { background: #FFFBEB; }
.z-trust-strip__icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: #F1EEE7;
  color: #15181D;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.z-trust-strip__title {
  font-size: 13px;
  font-weight: 700;
  color: #15181D;
  margin-bottom: 2px;
}
.z-trust-strip__sub {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.35;
}

/* — Sidebar / Summary — */
.z-cart-sidebar { min-width: 0; }
.z-summary {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 20px;
  position: sticky;
  top: 20px;
}
.z-summary__head {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ECE7DA;
  display: flex; align-items: center; gap: 8px;
}
.z-summary__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.z-summary__row {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: #3C414B;
}
.z-summary__row-val {
  color: #15181D;
  font-weight: 600;
  font-family: var(--z-font-sans, system-ui);
}
.z-summary__row--discount .z-summary__row-val {
  color: var(--z-success, #1F8A5B);
  font-weight: 700;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-summary__total {
  border-top: 1.5px solid #1A1F29;
  padding-top: 14px;
  margin-bottom: 18px;
}
.z-summary__total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.z-summary__total-label {
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
}
.z-summary__total-val {
  font-size: 26px;
  font-weight: 800;
  color: #15181D;
  letter-spacing: -0.6px;
}
.z-summary__total-note {
  font-size: 11px;
  color: #6B7280;
  text-align: right;
}
.z-summary__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border: 0;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 #1A2E9E, 0 4px 12px rgba(46,75,219,0.35);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.z-summary__cta:hover {
  background: #2540B8;
  color: #fff;
  transform: translateY(-1px);
}
.z-summary__divider {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0;
  color: #9AA0AE;
  font-size: 11px;
}
.z-summary__divider::before, .z-summary__divider::after {
  content: '';
  flex: 1; height: 1px;
  background: #ECE7DA;
}
.z-summary__divider span {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.z-summary__pay {
  padding: 12px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  display: flex; gap: 10px; align-items: center;
  color: var(--z-success, #1F8A5B);
}
.z-summary__pay-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--z-success, #1F8A5B);
}
.z-summary__pay-sub {
  font-size: 11px;
  color: #3C414B;
  margin-top: 1px;
}
.z-summary__cta.is-disabled,
.z-cart-sticky-cta a.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* — Empty cart — */
.z-cart-empty {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  padding: 60px 24px;
  text-align: center;
  max-width: 520px;
  margin: 40px auto;
}
.z-cart-empty__icon { color: #C4BFB1; margin-bottom: 18px; display: inline-block; }
.z-cart-empty__title { font-size: 26px; font-weight: 800; color: #15181D; margin: 0 0 6px; letter-spacing: -0.3px; }
.z-cart-empty__sub { font-size: 14px; color: #6B7280; margin: 0 0 20px; }
.z-cart-empty__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.z-cart-empty__cta:hover { background: #2540B8; color: #fff; }

/* — Mobile tweaks — */
@media (max-width: 700px) {
  .z-cart-page { padding: 16px 12px 32px; }
  .z-cart-line {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    grid-template-areas:
      'media body price'
      'media qty   remove';
    gap: 10px 14px;
    padding: 14px 0;
  }
  .z-cart-line__media { grid-area: media; width: 70px; height: 70px; }
  .z-cart-line__body { grid-area: body; }
  .z-cart-line__qty { grid-area: qty; }
  .z-cart-line__price { grid-area: price; }
  .z-cart-line__remove { grid-area: remove; justify-self: end; }
  .z-cart-promo { flex-wrap: wrap; }
  .z-cart-promo__input { flex: 1 1 100%; }
  .z-summary { position: static; }
  .z-summary__total-val { font-size: 26px; }
}

/* ============================================================
   CHECKOUT PAGE — same shell as cart, with form panels
   ============================================================ */
.z-checkout-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

/* — Panel — */
.z-co-panel {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 10px;
  padding: 18px 20px 20px;
}
.z-co-panel__head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
}
.z-co-panel__head svg { color: var(--z-primary, #2E4BDB); flex-shrink: 0; }
.z-co-panel__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #15181D;
  letter-spacing: -0.3px;
}

/* — Account-type tiles — */
.z-acct-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 760px) {
  .z-acct-tiles { grid-template-columns: 1fr; }
}
.z-acct-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 18px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    'radio icon  title'
    '.     desc  desc';
  column-gap: 9px;
  row-gap: 3px;
  background: #fff;
  border: 1.5px solid #E8E4D9;
  border-radius: 10px;
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.z-acct-tile:hover { border-color: var(--z-border-strong, #C4BFB1); }
.z-acct-tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.z-acct-tile__radio {
  grid-area: radio;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--z-border-strong, #C4BFB1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.z-acct-tile input:checked + .z-acct-tile__radio {
  border-color: var(--z-primary, #2E4BDB);
}
.z-acct-tile input:checked + .z-acct-tile__radio::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--z-primary, #2E4BDB);
}
.z-acct-tile__icon { grid-area: icon; color: #6B7280; align-self: center; }
.z-acct-tile__title {
  grid-area: title;
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
  align-self: center;
}
.z-acct-tile__desc {
  grid-area: desc;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.4;
}
.z-acct-tile:has(input:checked) {
  background: rgba(46,75,219,0.04);
  border-color: var(--z-primary, #2E4BDB);
  box-shadow: 0 2px 10px rgba(46,75,219,0.12);
}
.z-acct-tile:has(input:checked) .z-acct-tile__icon { color: var(--z-primary, #2E4BDB); }

/* — Form rows + fields — */
.z-co-section { display: flex; flex-direction: column; gap: 14px; }
.z-co-row { display: flex; gap: 14px; flex-wrap: wrap; }
.z-co-row > .z-co-field { flex: 1; min-width: 0; }
.z-co-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) {
  .z-co-row { flex-direction: column; }
  .z-co-row--3 { grid-template-columns: 1fr; }
}
.z-co-field { display: flex; flex-direction: column; gap: 6px; }
.z-co-field__label {
  font-size: 13px;
  font-weight: 600;
  color: #3C414B;
}
.z-co-field__req { color: var(--z-danger, #DC2626); margin-left: 3px; }
.z-co-field input,
.z-co-field select,
.z-co-field textarea,
.z-co-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--z-border-strong, #C4BFB1);
  border-radius: 10px;
  font-size: 14px;
  color: #15181D;
  background: #fff;
  font-family: inherit;
  outline: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.z-co-field input:focus,
.z-co-field select:focus,
.z-co-field textarea:focus {
  border-color: var(--z-primary, #2E4BDB);
  box-shadow: 0 0 0 3px rgba(46,75,219,0.12);
}
.z-co-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* — Checkboxes — */
.z-co-check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.z-co-check input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.z-co-check__box {
  width: 19px; height: 19px;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid var(--z-border-strong, #C4BFB1);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.z-co-check input:checked + .z-co-check__box {
  background: var(--z-primary, #2E4BDB);
  border-color: var(--z-primary, #2E4BDB);
}
.z-co-check input:checked + .z-co-check__box::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.z-co-check__label {
  font-size: 13px;
  color: #3C414B;
  line-height: 1.45;
}
.z-co-check__label strong { color: #15181D; }

/* — Invoice toggle box — */
.z-co-toggle {
  margin-top: 14px;
  padding: 12px 14px;
  background: #FFFBEB;
  border: 1px dashed #F0C24B;
  border-radius: 10px;
}

/* — Billing nested section — */
.z-co-billing {
  margin-top: 16px;
  padding: 16px;
  background: #FAF8F3;
  border: 1px solid #ECE7DA;
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 14px;
}

/* — Shipping + Payment options — */
.z-co-shipping, .z-co-payment { display: flex; flex-direction: column; gap: 10px; }
.z-co-ship-option, .z-co-pay-option {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: #fff;
  border: 1.5px solid #E8E4D9;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.z-co-ship-option:hover, .z-co-pay-option:hover { border-color: var(--z-border-strong, #C4BFB1); }
.z-co-ship-option input[type="radio"],
.z-co-pay-option input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.z-co-ship-option__radio, .z-co-pay-option__radio {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--z-border-strong, #C4BFB1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.z-co-ship-option input:checked + .z-co-ship-option__radio::after,
.z-co-pay-option input:checked + .z-co-pay-option__radio::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--z-primary, #2E4BDB);
}
.z-co-ship-option:has(input:checked),
.z-co-pay-option:has(input:checked) {
  background: rgba(46,75,219,0.04);
  border-color: var(--z-primary, #2E4BDB);
  box-shadow: 0 2px 10px rgba(46,75,219,0.12);
}
.z-co-ship-option:has(input:checked) .z-co-ship-option__radio,
.z-co-pay-option:has(input:checked) .z-co-pay-option__radio {
  border-color: var(--z-primary, #2E4BDB);
}
.z-co-ship-option__icon, .z-co-pay-option__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #FAF8F3;
  border: 1px solid #E8E4D9;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--z-primary, #2E4BDB);
  flex-shrink: 0;
}
.z-co-ship-option:has(input:checked) .z-co-ship-option__icon,
.z-co-pay-option:has(input:checked) .z-co-pay-option__icon {
  background: #fff;
}
.z-co-ship-option__body, .z-co-pay-option__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-co-ship-option__title, .z-co-pay-option__title {
  font-size: 14px;
  font-weight: 700;
  color: #15181D;
}
.z-co-ship-option__desc, .z-co-pay-option__desc {
  font-size: 13px;
  color: #6B7280;
  margin-top: 1px;
}
.z-co-ship-option__price {
  font-size: 14px;
  font-weight: 800;
  color: #15181D;
  white-space: nowrap;
}
.z-co-empty {
  padding: 14px 16px;
  background: #FAF8F3;
  border: 1px dashed #E8E4D9;
  border-radius: 10px;
  font-size: 13px;
  color: #6B7280;
  text-align: center;
}

/* — Buttons — */
.z-co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: background 0.12s ease, transform 0.12s ease;
}
.z-co-btn--primary {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  box-shadow: 0 1px 0 #1A2E9E, 0 3px 12px rgba(46,75,219,0.25);
}
.z-co-btn--primary:hover { background: #2540B8; transform: translateY(-1px); }
.z-co-btn--confirm {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  padding: 14px 28px;
  font-size: 14px;
  box-shadow: 0 1px 0 #1A2E9E, 0 4px 14px rgba(46,75,219,0.45);
}
.z-co-btn--confirm:hover { background: #2540B8; transform: translateY(-1px); color: #fff; }

/* — Nav row — */
.z-co-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.z-co-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  text-decoration: none;
  padding: 8px 0;
}
.z-co-back:hover { color: #15181D; }

/* — Summary item recap on right (checkout-specific) — */
.z-summary__items {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ECE7DA;
}
.z-summary__item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 11px;
  align-items: center;
}
.z-summary__item-media {
  width: 46px; height: 54px;
  border-radius: 6px;
  background: linear-gradient(180deg, #0F1216, #1A2540);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.z-summary__item-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.z-summary__item-qty {
  position: absolute;
  top: -4px; right: -4px;
  background: #1A1F29;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.z-summary__item-body { min-width: 0; }
.z-summary__item-name {
  font-size: 13px;
  font-weight: 600;
  color: #15181D;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.z-summary__item-code {
  font-size: 11px;
  color: #9AA0AE;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  margin-top: 1px;
}
.z-summary__item-total {
  font-size: 13px;
  font-weight: 700;
  color: #15181D;
  white-space: nowrap;
}

/* ============================================================
   CHECKOUT — multi-step progressive reveal
   ============================================================ */
.z-co-step {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.z-co-step.is-active {
  display: flex;
  animation: zCoStepFadeIn 0.28s ease;
}
@keyframes zCoStepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Per-step footer nav (back + continue / confirm) */
.z-co-step-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.z-co-step-nav .z-co-back {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
}

/* Clickable step indicator (covers entire step block) */
.z-step { position: relative; cursor: default; }
.z-step.is-done, .z-step.is-active { cursor: pointer; }
.z-step__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
}
.z-step:not(.is-active):not(.is-done) { opacity: 0.55; }

/* Field error state — red border + ring (3s flash) */
.z-co-field.has-error input,
.z-co-field.has-error select,
.z-co-field.has-error textarea {
  border-color: var(--z-danger, #DC2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.z-co-field.has-error .z-co-field__label { color: var(--z-danger, #DC2626); }
.z-co-ship-option.has-error,
.z-co-pay-option.has-error {
  border-color: var(--z-danger, #DC2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* Mobile step indicator — horizontal scroll, smaller bullets */
@media (max-width: 700px) {
  .z-co-step-nav { flex-direction: column-reverse; align-items: stretch; }
  .z-co-step-nav .z-co-btn--confirm { width: 100%; }
  .z-co-step-nav .z-co-back { align-self: flex-start; }
}

/* — Google login section — */
.z-co-google {
  display: flex; flex-direction: column;
  align-items: stretch;
  margin-bottom: 4px;
}
.z-co-google .g_id_signin {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.z-co-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 8px;
  color: #9AA0AE;
  font-size: 13px;
}
.z-co-divider::before, .z-co-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: #ECE7DA;
}
.z-co-divider span {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

/* — Login button row (sign in + forgot password) — */
.z-co-login-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.z-co-login-forgot {
  font-size: 13px;
  font-weight: 600;
  color: var(--z-primary, #2E4BDB);
  text-decoration: none;
}
.z-co-login-forgot:hover { text-decoration: underline; }

/* — Inline consents (when placed inside contact panel) — */
.z-co-consents--inline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ECE7DA;
  display: flex; flex-direction: column; gap: 10px;
}

/* — Login error message — */
.z-co-login-error {
  margin-top: 10px;
  padding: 10px 14px;
  background: #FEE7E2;
  color: #8E2A1A;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid #C53824;
  animation: z-fade-in 0.25s ease;
}
.z-co-login-error.is-success {
  background: #DFF5E2;
  color: #1E7F3A;
  border-left-color: #1E7F3A;
}
@keyframes z-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Shake animation on login error — */
.login-section.shake {
  animation: z-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes z-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* — Welcome banner shown after successful AJAX login — */
.z-co-welcome-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #E8F6EC 0%, #DFF5E2 100%);
  color: #1E5C2C;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid #1E7F3A;
  box-shadow: 0 1px 3px rgba(30, 127, 58, 0.08);
  animation: z-fade-in 0.4s ease;
}
.z-co-welcome-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: #1E7F3A;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.z-co-welcome-text {
  letter-spacing: -0.01em;
}

/* — Summary item thumbs (right sidebar product list) — */
.z-summary__items {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 4px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #ECE7DA;
}
.z-summary__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
}
.z-summary__item-media {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #F4EFE3;
  border: 1px solid #ECE7DA;
  flex-shrink: 0;
}
.z-summary__item-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.z-summary__item-qty {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--z-ink, #14213D);
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.z-summary__item-body { min-width: 0; }
.z-summary__item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--z-ink, #14213D);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.z-summary__item-code {
  font-size: 11px;
  color: #8A8478;
  margin-top: 2px;
}
.z-summary__item-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--z-ink, #14213D);
  white-space: nowrap;
}

/* — Summary shipping row — */
.z-summary__row--shipping {
  font-weight: 600;
}
.z-summary__row-val--free {
  color: var(--z-success, #1E7F3A) !important;
  font-weight: 700;
}

/* — Loading spinner for async sections — */
.z-co-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid #ECE7DA;
  border-top-color: var(--z-primary, #2E4BDB);
  border-radius: 50%;
  animation: z-spin 0.7s linear infinite;
  margin: 0 auto 10px;
}
@keyframes z-spin {
  to { transform: rotate(360deg); }
}
.z-co-shipping-placeholder, .z-co-payment-placeholder {
  text-align: center;
  padding: 22px 14px;
  color: #8A8478;
  font-size: 13px;
}

/* — Packeta pickup picker inside shipping option — */
.z-co-ship-option--packeta { flex-wrap: wrap; }
.z-co-packeta-pick, .z-co-packeta-row {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}
.z-co-packeta-row {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  background: #F4EFE3;
  border-radius: 10px;
}
.z-co-pick-btn {
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.z-co-pick-btn:hover { opacity: 0.9; }
.z-co-packeta-name {
  color: #1E7F3A;
  font-weight: 600;
}

/* — Single shipping card (only cheapest option, auto-selected, non-clickable) — */
.z-co-ship-single {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F8F9FE 100%);
  border: 1.5px solid var(--z-primary, #2E4BDB);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(46, 75, 219, 0.08);
  position: relative;
}
.z-co-ship-single.is-free {
  background: linear-gradient(135deg, #E8F6EC 0%, #F2FBF4 100%);
  border-color: #1E7F3A;
  box-shadow: 0 1px 3px rgba(30, 127, 58, 0.1);
}
.z-co-ship-single__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.z-co-ship-single.is-free .z-co-ship-single__check {
  background: #1E7F3A;
}
.z-co-ship-single__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--z-ink, #14213D);
  flex-shrink: 0;
}
.z-co-ship-single__body {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.z-co-ship-single__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--z-ink, #14213D);
  letter-spacing: -0.01em;
}
.z-co-ship-single__desc {
  font-size: 13px;
  color: #6B6759;
  font-weight: 500;
}
.z-co-ship-single__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--z-ink, #14213D);
  white-space: nowrap;
}
.z-co-ship-single__price.is-free {
  color: #1E7F3A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* — Informational free-shipping threshold banner (NOT a checkbox/radio) — */
.z-co-ship-info {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  padding: 12px 16px;
  background: #FFF8E6;
  border: 1px solid #F0D580;
  border-radius: 10px;
  font-size: 13px;
  color: #6B5818;
  font-weight: 500;
}
.z-co-ship-info.is-unlocked {
  background: linear-gradient(135deg, #E8F6EC 0%, #F2FBF4 100%);
  border-color: #1E7F3A;
  color: #1E5C2C;
  font-weight: 600;
}
.z-co-ship-info__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.z-co-ship-info__text {
  flex: 1;
  line-height: 1.4;
}

/* Mobile — keep the single card readable */
@media (max-width: 720px) {
  .z-co-ship-single {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "check title"
      "icon  price";
    gap: 8px 12px;
    padding: 14px;
  }
  .z-co-ship-single__check { grid-area: check; }
  .z-co-ship-single__body { grid-area: title; }
  .z-co-ship-single__icon { grid-area: icon; width: 28px; height: 28px; }
  .z-co-ship-single__price { grid-area: price; justify-self: end; }
}

/* — Payment option title supports inline images (Stripe logo etc.) — */
.z-co-pay-option__title img {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-left: 8px;
  display: inline-block;
}
.z-co-pay-option__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.z-co-pay-option.is-selected {
  border-color: var(--z-primary, #2E4BDB);
  background: linear-gradient(135deg, #EEF2FF 0%, #F8F9FE 100%);
  box-shadow: 0 1px 3px rgba(46, 75, 219, 0.08);
}
.z-co-pay-option.is-selected .z-co-pay-option__radio::after {
  content: '';
  width: 10px; height: 10px;
  background: var(--z-primary, #2E4BDB);
  border-radius: 50%;
  display: block;
}

/* — Container for the dynamically loaded payment form (Stripe iframe, bank info) — */
.z-co-pay-form {
  margin: -4px 0 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-top: none;
  border-radius: 0 0 12px 12px;
  animation: z-fade-in 0.25s ease;
}
.z-co-pay-form:empty {
  display: none;
}
.z-co-pay-form-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
}
.z-co-pay-form-error {
  padding: 12px 14px;
  background: #FEE7E2;
  color: #8E2A1A;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}

/* Style any form fields/iframes the loaded payment form ships */
.z-co-pay-form input[type="text"],
.z-co-pay-form input[type="email"],
.z-co-pay-form input[type="tel"],
.z-co-pay-form input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  background: #FAF7EE;
  border: 1.5px solid #ECE7DA;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.z-co-pay-form input:focus {
  outline: none;
  border-color: var(--z-primary, #2E4BDB);
}
.z-co-pay-form iframe {
  width: 100%;
  border: none;
}

/* ═══════════════════════════════════════════════════════════ */
/*  SUCCESS PAGE                                                */
/* ═══════════════════════════════════════════════════════════ */

.z-success-page {
  padding: 28px 16px 60px;
  max-width: 1080px;
  margin: 0 auto;
}

/* — Hero with confetti + check icon — */
.z-success-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 40px 44px;
  margin-bottom: 28px;
  /* Dark forest-green per design (shared.jsx success-page) */
  background: linear-gradient(135deg, #14492F 0%, #0C3322 100%);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(20, 73, 47, 0.25);
  color: #fff;
}
.z-success-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.z-confetti {
  position: absolute;
  border-radius: 6px;
  opacity: 0.55;
  animation: z-confetti-fall 7s ease-in-out infinite;
}
.z-confetti--1 { top: 12%; left: 18%; width: 8px; height: 8px; background: var(--z-yellow, #FFC93A); transform: rotate(15deg); animation-delay: 0s; }
.z-confetti--2 { top: 24%; left: 36%; width: 6px; height: 14px; background: var(--z-primary, #2E4BDB); transform: rotate(-25deg); animation-delay: 0.5s; }
.z-confetti--3 { top: 14%; right: 22%; width: 10px; height: 6px; background: #E8556D; transform: rotate(40deg); animation-delay: 1.1s; }
.z-confetti--4 { top: 38%; right: 12%; width: 7px; height: 7px; background: #1E7F3A; border-radius: 50%; animation-delay: 1.6s; }
.z-confetti--5 { bottom: 22%; left: 12%; width: 9px; height: 9px; background: #FFB347; transform: rotate(-15deg); animation-delay: 2s; }
.z-confetti--6 { bottom: 32%; left: 42%; width: 6px; height: 12px; background: var(--z-primary, #2E4BDB); transform: rotate(25deg); animation-delay: 2.6s; }
.z-confetti--7 { bottom: 18%; right: 36%; width: 8px; height: 8px; background: var(--z-yellow, #FFC93A); border-radius: 50%; animation-delay: 3.2s; }
.z-confetti--8 { top: 52%; right: 44%; width: 5px; height: 11px; background: #E8556D; transform: rotate(-10deg); animation-delay: 3.8s; }
@keyframes z-confetti-fall {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 0.55; }
  50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); opacity: 0.85; }
}

.z-success-hero__check {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  animation: z-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes z-pop-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.z-success-hero__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.z-success-hero__eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.z-success-hero__title {
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.z-success-hero__order {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}
.z-success-hero__order-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.z-success-hero__order-num {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

/* — Confirmed card payment — */
.z-success-paid {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 28px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  color: #166534;
}
.z-success-paid__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1E7F3A;
  color: #fff;
}
.z-success-paid__title {
  font-size: 16px;
  font-weight: 800;
}
.z-success-paid__text {
  margin-top: 2px;
  font-size: 13px;
  color: #357048;
}

/* — Payment QR + bank-transfer card — */
.z-success-payment {
  background: #fff;
  border: 2px solid #F2C94C;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(107, 88, 24, 0.10);
}
.z-success-payment__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ECE7DA;
}
.z-success-payment__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: #FFF8E6;
  color: #6B5818;
  border-radius: 10px;
  flex-shrink: 0;
}
.z-success-payment__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--z-ink, #14213D);
  letter-spacing: -0.01em;
}
.z-success-payment__sub {
  font-size: 13px;
  color: #6B6759;
  margin-top: 2px;
}
.z-success-payment__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.z-success-payment__qr {
  padding: 14px;
  background: #FAF7EE;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.z-success-payment__qr img {
  width: 220px;
  height: 220px;
  display: block;
}
.z-success-payment__qr-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--z-ink, #14213D);
}
.z-success-payment__qr-hint {
  font-size: 11px;
  color: #6B6759;
  text-align: center;
}
.z-success-payment__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.z-success-payment--text-only .z-success-payment__body {
  grid-template-columns: 1fr;
}
.z-success-payment__urgent {
  padding: 14px 16px;
  background: #FFF8E6;
  border-left: 4px solid var(--z-yellow, #FFC93A);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #4A3F1A;
}
.z-success-payment__bank {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
}
.z-success-payment__bank > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid #E5E7EB;
  background: #fff;
}
.z-success-payment__bank > div:last-child {
  border-bottom: 0;
}
.z-success-payment__bank dt {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
}
.z-success-payment__bank dd {
  margin: 0;
  font-family: var(--z-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--z-ink, #14213D);
}
.z-success-payment__msg {
  padding: 14px 16px;
  background: #FFF8E6;
  border-left: 3px solid var(--z-yellow, #FFC93A);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #4A3F1A;
}
.z-success-payment__msg p { margin: 0 0 6px; }
.z-success-payment__msg p:last-child { margin-bottom: 0; }
.z-success-payment__ref {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F4EFE3;
  border-radius: 10px;
  font-size: 14px;
  color: var(--z-ink, #14213D);
}
.z-success-payment__ref-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--z-primary, #2E4BDB);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.z-success-payment__hint {
  font-size: 13px;
  color: #6B6759;
  font-style: italic;
}

/* — Two-up grid: steps + message — */
.z-success-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.z-success-card {
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.z-success-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--z-ink, #14213D);
}
.z-success-card__head h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

/* — Steps timeline — */
.z-success-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.z-success-steps::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: #ECE7DA;
}
.z-success-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}
.z-success-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: #fff;
  color: #6B6759;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50%;
  border: 2px solid #ECE7DA;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.z-success-step.is-done .z-success-step__dot {
  background: #1E7F3A;
  color: #fff;
  border-color: #1E7F3A;
}
.z-success-step__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--z-ink, #14213D);
  margin-top: 4px;
}
.z-success-step__desc {
  font-size: 13px;
  color: #6B6759;
  margin-top: 2px;
}

/* — Customer message panel — */
.z-success-message {
  font-size: 14px;
  line-height: 1.6;
  color: #4A4439;
}
.z-success-message p {
  margin: 0 0 12px;
}
.z-success-message a {
  color: var(--z-primary, #2E4BDB);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.z-success-message a:hover {
  border-bottom-color: var(--z-primary, #2E4BDB);
}

/* — Trust strip variant for success — */
.z-trust-strip--success {
  margin-bottom: 28px;
}

/* — CTA — */
.z-success-cta {
  display: flex;
  justify-content: center;
}
.z-success-cta__primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--z-ink, #14213D);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.25);
}
.z-success-cta__primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.32);
  color: #fff;
}
.z-success-cta__primary svg {
  transform: rotate(180deg);
}

/* Mobile responsiveness */
@media (max-width: 820px) {
  .z-success-page { padding: 18px 12px 40px; }
  .z-success-hero {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
    gap: 18px;
  }
  .z-success-hero__check { width: 64px; height: 64px; }
  .z-success-payment { padding: 18px; }
  .z-success-payment__body { grid-template-columns: 1fr; gap: 18px; }
  .z-success-payment__qr img { width: 200px; height: 200px; }
  .z-success-payment__bank > div { grid-template-columns: 1fr; gap: 3px; }
  .z-success-payment__bank dd { overflow-wrap: anywhere; }
  .z-success-paid { align-items: flex-start; padding: 16px 18px; }
  .z-success-grid { grid-template-columns: 1fr; gap: 14px; }
  .z-success-card { padding: 18px; }
}

/* — Mobile fix for step indicator (was breaking the upper part on small viewports) — */
@media (max-width: 720px) {
  .z-steps {
    flex-direction: row;
    gap: 4px;
    padding: 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .z-steps::-webkit-scrollbar { display: none; }
  .z-step {
    flex: 0 0 auto;
    gap: 6px;
    padding: 6px 4px;
    min-width: 0;
  }
  .z-step__bullet {
    width: 26px; height: 26px;
    flex-shrink: 0;
  }
  .z-step__num {
    font-size: 11px;
    white-space: nowrap;
  }
  .z-step__label {
    font-size: 13px;
    white-space: nowrap;
    font-weight: 600;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .z-step__bar {
    display: none;
  }
  /* Non-active steps: collapse to just the bullet on mobile */
  .z-step:not(.is-active) > div {
    display: none;
  }
  /* layout: ensure cart page main + sidebar stack and sidebar reordered above */
  .z-cart-layout { grid-template-columns: 1fr !important; }
  .z-cart-sidebar { order: -1; margin-bottom: 16px; }
  .z-summary__items { max-height: 240px; overflow-y: auto; }
  .z-co-row { grid-template-columns: 1fr !important; }
  .z-co-row--3 { grid-template-columns: 1fr !important; }
  .z-co-panel { padding: 16px; }
  .z-co-panel__head { font-size: 14px; }
  .z-acct-tiles { grid-template-columns: 1fr !important; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REPAIR PASS — 2026-06-10
   Comprehensive mobile audit fix across HP / Category / Product /
   Cart / Checkout / Success pages. Repair only — no redesign.
   The existing CSS evolved with many breakpoints (480, 600, 640, 700, 720,
   767, 820, 900, 980, 1100). This pass consolidates the mobile contract
   at 720px (primary) and 480px (small-phone refinement), and adds explicit
   overrides where earlier rules cascaded incorrectly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. GLOBAL MOBILE HYGIENE (≤720px) ─────────────────────────────────── */
@media (max-width: 720px) {

  /* Stop the whole page from horizontally scrolling. Hard rule against
     wide elements pushing the viewport. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Any container fenced to 1200/1080/1280px on desktop gets fluid padding */
  .z-container,
  .z-success-page,
  .z-cart-page,
  .z-cat-page,
  .z-product-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Images never exceed their parent */
  img { max-width: 100%; height: auto; }

  /* Tables that the email/comment template might shove in get scrollable */
  .z-co-panel table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tap-friendly targets */
  button, .z-btn, .z-co-btn, a.z-btn { min-height: 40px; }
}

/* ─── 2. HEADER + TOPSTRIP + MOBILE MENU ────────────────────────────────── */
@media (max-width: 720px) {

  /* Hide the desktop top strip on mobile — it overflows with currency, lang,
     bank account, promo link and account dropdown. Important: the legacy
     theme already adds .hidden-xs but the breakpoint was different. */
  .z-topstrip,
  .z-topstrip.hidden-xs {
    display: none !important;
  }

  /* Header: tight row — burger | logo | search-icon | cart */
  .z-header {
    padding: 10px 12px !important;
    gap: 8px !important;
    min-height: 56px;
  }
  .z-header__burger {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }
  .z-header__logo {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .z-header__logo img {
    max-height: 32px;
    width: auto;
    display: block;
  }
  /* Hide the primary nav on mobile — burger handles it */
  .z-header__nav {
    display: none !important;
  }
  /* Inline search collapses to icon-only */
  .z-header__search {
    display: none !important;
  }
  .z-header__search-btn,
  .z-mobile-search-btn,
  #z-mobile-search-btn {
    display: inline-flex !important;
    width: 38px; height: 38px;
    flex-shrink: 0;
    align-items: center; justify-content: center;
  }
  /* Cart icon button */
  .z-btn--cart {
    padding: 8px 10px !important;
    font-size: 13px !important;
    gap: 4px;
    flex-shrink: 0;
  }
  .z-btn--cart svg { width: 18px; height: 18px; }
  #z-cart-total {
    font-size: 13px !important;
    font-weight: 700;
  }

  /* Mobile menu overlay panel — make sure it sits above page + is scrollable */
  .z-mobile-menu {
    position: fixed;
    inset: 0 24% 0 0;
    max-width: 360px;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 24px rgba(20, 33, 61, 0.18);
  }
  .z-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 33, 61, 0.45);
    z-index: 9998;
  }
  .z-mobile-menu__head {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 14px 18px;
    border-bottom: 1px solid #ECE7DA;
    z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
  }
  .z-mobile-menu__close {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F4EFE3;
    border-radius: 50%;
    border: none;
  }

  /* Kill the legacy duplicate mobile bars (visible-xs system) so they don't
     stack with the new Znamky2026 header */
  .mobile-hamburger.visible-xs,
  .mobile-search-toggle.visible-xs,
  .mobile-cart-btn.visible-xs,
  .menu-overlay.visible-xs,
  .menu-close.visible-xs,
  .cart-overlay.visible-xs,
  .cart-close.visible-xs,
  .mobile-search-bar.visible-xs {
    display: none !important;
  }
}

/* ─── 3. HOMEPAGE HERO + SECTIONS ───────────────────────────────────────── */
@media (max-width: 720px) {

  /* Hero — single column, side tiles stack below main */
  .z-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 12px !important;
    margin-top: 8px;
  }
  .z-hero__main {
    min-height: 320px !important;
    padding: 24px 18px !important;
    border-radius: 14px;
  }
  .z-hero__eyebrow {
    font-size: 11px !important;
    letter-spacing: 1.5px;
  }
  .z-hero__title {
    font-size: 26px !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 10px !important;
  }
  .z-hero__desc {
    font-size: 13px !important;
    margin-bottom: 14px;
  }
  .z-hero__cta {
    flex-direction: column;
    gap: 8px !important;
    width: 100%;
  }
  .z-hero__cta .z-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  /* Slideshow dots smaller and centered */
  .z-hero__dots {
    bottom: 10px;
    gap: 6px;
  }
  .z-hero__dot {
    width: 7px; height: 7px;
  }
  /* Arrows: hidden on small touch screens */
  .z-hero__arrow {
    display: none !important;
  }
  /* Side tiles row → 2 column grid on mobile (was column on desktop) */
  .z-hero__side {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .z-hero__tile {
    padding: 14px !important;
    border-radius: 14px;
  }
  .z-hero__tile-title {
    font-size: 13px !important;
  }
  .z-hero__tile-desc {
    font-size: 11px !important;
    line-height: 1.35;
  }

  /* Category tiles carousel — slimmer cards, smaller text */
  .z-cat-tiles.z-carousel {
    gap: 10px !important;
    padding: 4px 2px 10px !important;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .z-cat-tiles.z-carousel::-webkit-scrollbar { display: none; }
  .z-cat-tile {
    flex: 0 0 140px !important;
    min-width: 140px;
    scroll-snap-align: start;
    padding: 12px 12px 14px !important;
    border-radius: 14px;
  }
  .z-cat-tile__img {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 8px !important;
  }
  .z-cat-tile__name {
    font-size: 13px !important;
    line-height: 1.25;
  }
  .z-cat-tile__count {
    font-size: 11px !important;
  }

  /* Generic homepage section spacing breathes */
  .z-section,
  .z-section--tight {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .z-section__title,
  .z-section-title {
    font-size: 20px !important;
    margin-bottom: 14px;
  }
}

/* ─── 4. CATEGORY PAGE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Cat hero — kill the absolute-positioned stamps that overflow */
  .z-cat-hero {
    min-height: auto !important;
    padding: 18px 0 !important;
  }
  .z-cat-hero__bg,
  .z-cat-hero__stamps,
  .z-cat-hero__stamp {
    display: none !important;
  }
  .z-cat-hero__inner {
    padding: 18px 16px !important;
  }
  .z-cat-hero__title {
    font-size: 26px !important;
    line-height: 1.2;
    margin-bottom: 8px !important;
  }
  .z-cat-hero__desc {
    font-size: 13px !important;
    line-height: 1.45;
  }
  .z-cat-hero__stats {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start;
  }
  .z-cat-hero__stat {
    flex: 0 0 calc(33% - 8px);
    min-width: 0;
  }
  .z-cat-hero__stat-num { font-size: 16px !important; }
  .z-cat-hero__stat-label { font-size: 11px !important; }
  .z-cat-hero__stat-sep { display: none !important; }

  /* Two-column layout collapses; sidebar (filters / cat tree) above main */
  .z-cat-page,
  .z-cat-layout {
    display: block !important;
  }
  .z-cat-sidebar {
    order: -1;
    width: 100% !important;
    margin-bottom: 14px;
  }
  .z-cat-main {
    width: 100% !important;
  }

  /* Expander (categories tree + filters) — full width, padded */
  .z-cat-expander {
    border-radius: 14px;
    margin-bottom: 10px;
  }
  .z-cat-expander__head {
    padding: 12px 14px !important;
    gap: 10px;
  }
  .z-cat-expander__label {
    font-size: 13px !important;
  }
  .z-cat-expander__hint {
    font-size: 11px !important;
  }
  .z-cat-expander__body {
    padding: 6px 14px 14px !important;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Guide card collapses cleanly */
  .z-cat-guide {
    margin: 14px 0;
  }
  .z-cat-guide__inner {
    flex-direction: column !important;
    padding: 16px !important;
    text-align: center;
    gap: 10px;
  }
  .z-cat-guide__title {
    font-size: 16px !important;
  }
  .z-cat-guide__body {
    font-size: 13px !important;
  }

  /* Product grid — 2 columns on phones (was 3/4 on desktop) */
  .z-product-grid,
  .z-cat-products,
  .z-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .z-card,
  .z-product-card {
    border-radius: 10px;
  }
  .z-card__media,
  .z-product-card__media {
    aspect-ratio: 1 / 1;
  }
  .z-card__title,
  .z-product-card__title {
    font-size: 13px !important;
    line-height: 1.3;
  }
  .z-card__price,
  .z-product-card__price {
    font-size: 14px !important;
  }
}

/* Extra-small phones */
@media (max-width: 480px) {
  .z-cat-hero__stat {
    flex: 0 0 calc(50% - 8px);
  }
  .z-product-grid,
  .z-cat-products,
  .z-cat-grid {
    gap: 8px !important;
  }
}

/* ─── 5. PRODUCT PAGE ──────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Two-column gallery+info collapses; gallery first */
  .z-product-grid-2col,
  .z-product-page__inner {
    display: block !important;
  }
  .z-product-gallery {
    width: 100% !important;
    margin-bottom: 16px;
  }
  .z-product-gallery__main {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
  }
  .z-product-gallery__main img {
    width: 100%; height: 100%; object-fit: contain;
  }
  .z-product-gallery__thumbs {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 2px;
    margin-top: 8px;
    scrollbar-width: none;
  }
  .z-product-gallery__thumbs::-webkit-scrollbar { display: none; }
  .z-product-gallery__thumb,
  .z-product-gallery__thumbs > * {
    flex: 0 0 64px !important;
    width: 64px !important; height: 64px !important;
    border-radius: 10px;
  }
  .z-product-gallery__badges {
    top: 10px; left: 10px;
    flex-direction: column;
    gap: 5px;
  }
  .z-product-gallery__code {
    bottom: 10px; right: 10px;
    font-size: 11px;
    padding: 4px 9px;
  }
  .z-product-gallery__photo-chip {
    font-size: 11px;
    padding: 3px 7px;
  }

  /* Title + eyebrow + sub */
  .z-product-eyebrow {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11px !important;
  }
  .z-product-eyebrow__code {
    font-size: 11px !important;
  }
  .z-product-title,
  h1.z-product-title {
    font-size: 26px !important;
    line-height: 1.18;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
  }
  .z-product-desc,
  .z-product-eyebrow__sub {
    font-size: 13px !important;
    line-height: 1.45;
  }

  /* Catalog + facts — collapse z-product-catalogfacts grid to single col */
  .z-product-catalogfacts {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .z-product-catalog {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 12px 14px !important;
    gap: 10px 12px !important;
  }
  .z-product-catalog__cell {
    min-width: 0;
  }
  .z-product-catalog__name {
    font-size: 11px !important;
  }
  .z-product-catalog__num {
    font-size: 13px !important;
  }
  .z-product-facts {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 12px 14px !important;
    gap: 10px 12px !important;
  }
  .z-product-fact__label {
    font-size: 11px !important;
  }
  .z-product-fact__val {
    font-size: 13px !important;
  }

  /* Pricebox + buy actions */
  .z-product-pricebox,
  .z-product-buy {
    padding: 16px !important;
    border-radius: 14px;
  }
  .z-product-actions {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .z-product-cart-btn,
  .z-product-actions .z-btn {
    width: 100% !important;
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  /* Form fields (quantity etc.) */
  .z-product-form input,
  .z-product-form select {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Related / recommended row → 2 cols */
  .z-product-related,
  .z-product-related .z-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ─── 6. CART PAGE ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Layout: sidebar (summary) goes ABOVE main */
  .z-cart-layout {
    display: block !important;
  }
  .z-cart-sidebar {
    order: -1;
    width: 100% !important;
    margin-bottom: 14px;
  }
  .z-cart-main {
    width: 100% !important;
  }

  /* Sticky summary becomes static on mobile (no point sticking it above) */
  .z-cart-sidebar .z-summary {
    position: static !important;
    top: auto !important;
  }

  /* Free-ship progress card slimmer */
  .z-ship-progress {
    padding: 12px 14px !important;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .z-ship-progress__title {
    font-size: 13px !important;
    line-height: 1.35;
  }
  .z-ship-progress__sub {
    font-size: 11px !important;
  }

  /* Cart line: grid → grid with the qty/price wrapping below */
  .z-cart-list { gap: 10px; }
  .z-cart-line {
    display: grid !important;
    grid-template-columns: 70px 1fr auto !important;
    grid-template-areas:
      "media body remove"
      "media qty   price" !important;
    gap: 6px 12px !important;
    padding: 12px !important;
    border-radius: 14px;
    align-items: center;
  }
  .z-cart-line__media { grid-area: media; width: 70px; height: 70px; }
  .z-cart-line__body  { grid-area: body; min-width: 0; }
  .z-cart-line__qty   { grid-area: qty; justify-self: start; }
  .z-cart-line__price { grid-area: price; justify-self: end; text-align: right; }
  .z-cart-line__remove {
    grid-area: remove;
    width: 32px; height: 32px;
    align-self: start;
  }
  .z-cart-line__name {
    font-size: 14px !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .z-cart-line__sub,
  .z-cart-line__meta {
    font-size: 11px !important;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .z-cart-line__total {
    font-size: 14px !important;
    font-weight: 800;
  }
  .z-cart-line__unit {
    font-size: 11px !important;
  }

  /* Quantity buttons bigger for touch */
  .z-cart-line__qty {
    gap: 4px;
  }
  .z-cart-line__qty-btn {
    width: 30px; height: 30px;
    font-size: 16px;
  }
  .z-cart-line__qty-input {
    width: 40px !important;
    height: 30px;
    font-size: 14px;
  }

  /* Promo input row stacks */
  .z-cart-promo {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px !important;
    align-items: stretch !important;
  }
  .z-cart-promo__text {
    font-size: 13px !important;
    text-align: center;
  }
  .z-cart-promo__input {
    width: 100% !important;
  }
  .z-cart-promo__btn {
    width: 100% !important;
    padding: 11px 14px !important;
  }

  /* Expert callout collapses gracefully */
  .z-expert-callout {
    flex-direction: column !important;
    text-align: center;
    padding: 16px !important;
    gap: 10px !important;
  }
  .z-expert-callout__title {
    font-size: 14px !important;
  }
  .z-expert-callout__sub {
    font-size: 13px !important;
    line-height: 1.45;
  }

  /* Trust strip 2×2 grid on mobile */
  .z-trust-strip {
    padding: 16px !important;
  }
  .z-trust-strip__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .z-trust-strip__cell {
    padding: 12px !important;
  }
  .z-trust-strip__title { font-size: 13px !important; }
  .z-trust-strip__sub   { font-size: 11px !important; }

  /* Summary panel */
  .z-summary {
    padding: 16px !important;
    border-radius: 14px;
  }
  .z-summary__head {
    font-size: 13px !important;
  }
  .z-summary__total-row {
    flex-direction: row;
    align-items: baseline;
  }
  .z-summary__total-label { font-size: 13px !important; }
  .z-summary__total-val   { font-size: 20px !important; }
  .z-summary__cta {
    padding: 14px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center;
  }

  /* Empty-cart block */
  .z-cart-empty {
    padding: 40px 20px !important;
  }
  .z-cart-empty__title {
    font-size: 20px !important;
  }
  .z-cart-empty__sub {
    font-size: 13px !important;
  }
  .z-cart-empty__cta {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    justify-content: center;
  }
}

/* ─── 7. CHECKOUT PAGE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Steps indicator — already horizontally scrollable; refine */
  .z-steps {
    padding: 10px 8px !important;
    gap: 2px !important;
    background: #fff;
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(20,33,61,0.06);
  }
  .z-step {
    padding: 6px 6px !important;
  }
  .z-step__num { display: none !important; }
  .z-step__label {
    font-size: 11px !important;
    max-width: 70px !important;
  }
  .z-step__bullet {
    width: 24px !important; height: 24px !important;
  }
  .z-step.is-active .z-step__label,
  .z-step.is-done   .z-step__label {
    display: inline-block;
  }

  /* Layout: form full width, sidebar above */
  .z-cart-layout {
    display: block !important;
  }
  .z-checkout-form,
  .z-cart-main {
    width: 100% !important;
  }

  /* Panel boxes */
  .z-co-panel {
    padding: 14px 14px !important;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .z-co-panel__head {
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .z-co-panel__title {
    font-size: 14px !important;
    letter-spacing: -0.01em;
  }

  /* Account-type tiles — column stack (already set elsewhere, reinforce) */
  .z-acct-tiles {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .z-acct-tile {
    padding: 12px 14px !important;
    gap: 10px;
  }
  .z-acct-tile__title { font-size: 14px !important; }
  .z-acct-tile__desc  { font-size: 13px !important; }

  /* Field rows collapse */
  .z-co-row,
  .z-co-row--3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .z-co-field input,
  .z-co-field select,
  .z-co-select {
    padding: 12px 14px !important;
    font-size: 14px !important;     /* >=16px would be better for iOS no-zoom — but matches design */
  }

  /* Google login button + email/pw row */
  .z-co-google .g_id_signin {
    width: 100% !important;
  }
  .z-co-google .g_id_signin > div {
    width: 100% !important;
    max-width: 100%;
  }
  .z-co-login-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .z-co-login-row .z-co-btn--primary {
    width: 100%;
    justify-content: center;
  }
  .z-co-login-forgot {
    text-align: center;
  }

  /* Step navigation row → confirm full-width, back below */
  .z-co-step-nav {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 16px;
  }
  .z-co-step-nav .z-co-btn--confirm {
    width: 100% !important;
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }
  .z-co-step-nav .z-co-back {
    align-self: center;
    font-size: 13px;
  }

  /* Single shipping card on mobile (cheapest-only is already grid-fluid; reinforce) */
  .z-co-ship-single {
    padding: 14px !important;
  }
  .z-co-ship-single__title { font-size: 14px !important; }
  .z-co-ship-single__desc  { font-size: 11px !important; }
  .z-co-ship-single__price { font-size: 14px !important; }

  /* Info banner (free shipping threshold) */
  .z-co-ship-info {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  /* Payment options */
  .z-co-pay-option {
    padding: 14px !important;
  }
  .z-co-pay-option__title {
    font-size: 14px !important;
    gap: 4px;
  }
  .z-co-pay-option__title img {
    height: 16px !important;
  }
  .z-co-pay-option__desc {
    font-size: 11px !important;
  }
  .z-co-pay-form {
    padding: 12px 14px !important;
  }

  /* Summary on checkout (sticks above form) */
  .z-cart-sidebar {
    order: -1;
    width: 100% !important;
    margin-bottom: 14px;
  }
  .z-cart-sidebar .z-summary {
    position: static !important;
  }
  /* Hide product thumbnails on the checkout's right-rail summary on the smallest
     screens — they're already in the cart step. Keeps the summary compact above
     the form. Show again on tablets. */
  .z-summary__items {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── 8. SUCCESS PAGE ──────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Hero stacks fully */
  .z-success-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 26px 20px !important;
    gap: 14px !important;
  }
  .z-success-hero__check {
    width: 56px !important;
    height: 56px !important;
  }
  .z-success-hero__check svg {
    width: 30px; height: 30px;
  }
  .z-success-hero__eyebrow {
    font-size: 11px !important;
    letter-spacing: 1px;
  }
  .z-success-hero {
    padding: 26px 22px !important;
    border-radius: 14px;
  }
  .z-success-hero__title {
    font-size: 26px !important;
    line-height: 1.2;
    margin-bottom: 10px !important;
    color: #fff !important;
  }
  .z-success-hero__order {
    padding: 7px 14px !important;
  }
  .z-success-hero__order-num {
    font-size: 16px !important;
  }

  /* Payment QR card stacks vertically + centers the QR */
  .z-success-payment {
    padding: 18px 16px !important;
    border-radius: 14px;
  }
  .z-success-payment__head {
    gap: 10px !important;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .z-success-payment__icon {
    width: 38px; height: 38px;
  }
  .z-success-payment__title { font-size: 14px !important; }
  .z-success-payment__sub   { font-size: 13px !important; }
  .z-success-payment__body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
  }
  .z-success-payment__qr {
    justify-self: center;
    padding: 10px;
  }
  .z-success-payment__qr img {
    width: 180px !important;
    height: 180px !important;
  }
  .z-success-payment__details {
    text-align: left;
  }
  .z-success-payment__msg,
  .z-success-payment__ref {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
  .z-success-payment__hint {
    font-size: 11px !important;
  }

  /* Two-up steps + message → single column */
  .z-success-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px;
  }
  .z-success-card {
    padding: 18px 16px !important;
    border-radius: 14px;
  }
  .z-success-card__head h2 {
    font-size: 14px !important;
  }
  .z-success-step__title { font-size: 13px !important; }
  .z-success-step__desc  { font-size: 11px !important; }

  /* CTA full width */
  .z-success-cta__primary {
    width: 100%;
    justify-content: center;
    padding: 14px 22px !important;
    font-size: 14px !important;
  }
}

/* ─── 9. EXTRA SMALL PHONES (≤480px) — final polish ────────────────────── */
@media (max-width: 480px) {

  /* Tighter container padding on tiny screens */
  .z-container,
  .z-success-page,
  .z-cart-page,
  .z-cat-page,
  .z-product-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Hero title shrinks one more notch */
  .z-hero__title { font-size: 26px !important; }
  .z-hero__main  { padding: 20px 16px !important; min-height: 280px !important; }

  /* Side tile single column on tiny phones */
  .z-hero__side {
    grid-template-columns: 1fr !important;
  }

  /* Step labels become invisible on tiny phones — only bullets visible */
  .z-step:not(.is-active):not(.is-done) > div { display: none; }
  .z-step.is-active .z-step__label,
  .z-step.is-done .z-step__label {
    max-width: 100px;
  }

  /* Product gallery thumbs smaller */
  .z-product-gallery__thumb,
  .z-product-gallery__thumbs > * {
    flex: 0 0 56px !important;
    width: 56px !important; height: 56px !important;
  }

  /* Cart line — drop media to 60px on tiny phones */
  .z-cart-line {
    grid-template-columns: 60px 1fr auto !important;
    padding: 10px !important;
  }
  .z-cart-line__media { width: 60px; height: 60px; }

  /* Success QR smaller still */
  .z-success-payment__qr img {
    width: 160px !important;
    height: 160px !important;
  }
}

/* ─── 10. iOS QUIRKS + ACCESSIBILITY ────────────────────────────────────── */
@media (max-width: 720px) {

  /* Prevent iOS from auto-zooming form fields when focused */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Reduce motion respectfully */
  @media (prefers-reduced-motion: reduce) {
    .z-confetti,
    .z-success-hero__check,
    .z-co-login-error,
    .z-co-welcome-banner {
      animation: none !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REPAIR PASS — PATCH 2  (2026-06-10)
   Fixes from user feedback after first pass:
   • A) Empty space below header — legacy <header><nav class="header_nav">
     (default OC theme) was still rendering on mobile underneath the new
     z-header. Also kills the empty .content-top-breadcum block.
   • B) Cart icon button must display the running total on mobile.
   • C) Swipe ergonomics on hero slideshow + carousels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── A. NUKE THE LEGACY HEADER + EMPTY BREADCRUMB BLOCK ─────────────────── */
@media (max-width: 720px) {
  /* The legacy OC theme header still renders below the new z-header on mobile,
     producing a tall empty zone with stale .header_nav / .mobile-header-controls
     / .mobile-lang-dropdown / .mobile-login etc. Hide the whole block. */
  body > header:not(.z-header),
  header > nav.header_nav,
  nav.header_nav,
  .header_nav,
  .mobile-header-controls,
  .mobile-lang-dropdown,
  .mobile-login,
  .mobile-left,
  .mobile-right,
  .mobile-lang-curr {
    display: none !important;
  }

  /* Empty breadcrumb shell from default theme — collapses to ~30px Bootstrap
     .container padding. Pure vertical waste. */
  .content-top-breadcum,
  .content-top-breadcum > .container,
  .content-top-breadcum:empty,
  .container:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
  }

  /* Default OC main wrapper that the legacy theme injects between header & content */
  #main-container,
  .main-container,
  .common-home > .container:first-of-type:empty,
  .common-home > .container > .row:empty {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Ensure the new z-header sits flush with the hero — no surprise gap */
  .z-header + *,
  .z-header ~ .z-container:first-of-type,
  .z-header ~ section.z-hero {
    margin-top: 0 !important;
  }

  /* z-bottom-nav: reserve space at page bottom so it doesn't cover footer/CTA */
  .z-bottom-nav {
    box-shadow: 0 -2px 12px rgba(20,33,61,0.08);
    background: #fff;
  }
  body {
    /* room for the fixed bottom nav (≈64px) */
    padding-bottom: 64px;
  }
}

/* ─── B. CART BUTTON SHOWS TOTAL ON MOBILE ────────────────────────────────── */
@media (max-width: 720px) {
  /* Override the earlier `display: none` on .z-cart-total — show the running
     total as a pill next to the cart icon. Compact, never wraps. */
  .z-header .z-cart-total,
  .z-btn--cart .z-cart-total,
  #z-cart-total {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1;
    color: #15181D;
    letter-spacing: -0.2px;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .z-btn--cart {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 11px 7px 9px !important;
    border-radius: 999px !important;       /* pill shape on mobile */
    background: var(--z-yellow, #FFC93A);
    color: #15181D;
    flex-shrink: 0;
    height: 36px;
    line-height: 1;
  }

  .z-btn--cart svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0;
  }

  /* Hide the total when 0 Kč (visual clutter on first visit). JS in header
     keeps it filled, so we use a parent attribute trick via :has() where
     supported; fallback is still visible (acceptable). */
  .z-btn--cart:has(#z-cart-total:empty) #z-cart-total,
  .z-btn--cart:has(#z-cart-total[data-zero="1"]) #z-cart-total {
    display: none !important;
  }
}

/* ─── C. SWIPE & TOUCH ERGONOMICS ─────────────────────────────────────────── */

/* Generic touch-friendly scroll regions: smooth momentum, no overscroll trap.
   Applies on ALL viewports for carousels — desktop drag on trackpad benefits too. */
.z-cat-tiles.z-carousel,
.z-product-gallery__thumbs,
.z-summary__items,
.z-co-shipping,
.z-mobile-menu {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Hero slideshow — swipe-aware touch zone (mobile only). The slideshow
   already has JS-driven slide changes; this CSS makes the touch zone
   absorb horizontal pan gestures without scrolling the page. */
@media (max-width: 720px) {
  .z-hero__main--slideshow,
  .z-hero__main {
    touch-action: pan-y pinch-zoom;       /* lets vertical scroll through, captures horizontal */
    user-select: none;
    -webkit-user-select: none;
  }
  .z-hero__slide {
    pointer-events: auto;
  }
  /* Slide track: when slides change via .is-active toggle, fade smoothly */
  .z-hero__slide {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /* Category tiles carousel: snap, no scrollbar, visible peek at right edge */
  .z-cat-tiles.z-carousel {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
    padding-left: 14px !important;
    padding-right: 28px !important;       /* leaves a teaser of the next card */
    -webkit-overflow-scrolling: touch;
  }
  .z-cat-tile {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-tap-highlight-color: transparent;
  }
  /* Tile pressed-state for tactile feedback */
  .z-cat-tile:active {
    transform: scale(0.97);
    transition: transform 0.12s ease;
  }

  /* Product gallery thumbnails carousel */
  .z-product-gallery__thumbs {
    scroll-snap-type: x mandatory;
    scroll-padding: 6px;
  }
  .z-product-gallery__thumb,
  .z-product-gallery__thumbs > * {
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }

  /* Product gallery MAIN image: pinch-zoom enabled, swipe-friendly between photos */
  .z-product-gallery__main {
    touch-action: pan-y pinch-zoom;
    -webkit-tap-highlight-color: rgba(46,75,219,0.08);
  }

  /* Cart line "remove" button — generous tap target */
  .z-cart-line__remove {
    width: 36px !important;
    height: 36px !important;
    -webkit-tap-highlight-color: rgba(232,85,109,0.1);
  }

  /* Step indicator: horizontal scroll with snap — user can swipe between steps */
  .z-steps {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .z-step {
    scroll-snap-align: center;
  }

  /* Native momentum scrolling on the mobile menu drawer */
  .z-mobile-menu {
    overscroll-behavior: contain;
  }
}

/* ─── HERO SLIDESHOW: SWIPE-DRIVEN JS HOOK ───────────────────────────────── */
/* The hero already has dots and arrow buttons. We add a small inline JS
   in header.twig (next deploy step) that wires touchstart/touchend to call
   the existing slide-change hooks. Pure CSS hint here: cursor + crosshair. */
@media (hover: hover) {
  .z-hero__main--slideshow { cursor: grab; }
  .z-hero__main--slideshow:active { cursor: grabbing; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REPAIR PASS — PATCH 3  (2026-06-10)
   Fixes from user screenshots after patch 2:
   1) Mobile menu chip / text colors were white-on-white (because I switched
      panel bg to #fff in patch 1 but children still expected dark bg).
      → Revert panel to dark navy so existing children read correctly.
   2) Homepage section spacing was random — normalise with consistent rhythm.
   3) Category sidebar shows "Procházet katalog" twice (expander head + custom
      heading). Hide the custom heading on mobile.
   4) Mobile search opens OVER the header. Slide it BELOW so the header stays
      visible and tap targets aren't covered.
   5) 1px gap below the sticky product CTA bar — remove the safe-area + add
      flush stacking with the bottom nav.
   6) Sticky bottom nav (Home / Cat / Search / Cart / Account icons) wasn't
      visible. Re-assert display + raise z-index + restyle for the navy-on-cream
      design language.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. MOBILE MENU — restore dark navy panel ───────────────────────────── */
@media (max-width: 720px) {
  .z-mobile-menu {
    /* Children were authored for dark bg (color:#fff, border:rgba(255,255,255,.18)).
       Override the white panel I set in patch 1. */
    background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%) !important;
    color: #fff;
  }
  /* Menu head sits flush, navy background */
  .z-mobile-menu__head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    padding: 14px 18px !important;
  }
  .z-mobile-menu__title {
    color: #fff !important;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  /* Close button: pale circle on dark navy */
  .z-mobile-menu__close {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    line-height: 1;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border: none !important;
  }
  .z-mobile-menu__close:hover {
    background: rgba(255,255,255,0.20) !important;
  }
  /* Nav items: white text, padded rows */
  .z-mobile-menu__nav {
    padding: 8px 0 !important;
  }
  .z-mobile-menu__nav a {
    color: rgba(255,255,255,0.92) !important;
    display: block;
    padding: 12px 22px !important;
    font-size: 14px !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-weight: 500;
  }
  .z-mobile-menu__nav a:hover,
  .z-mobile-menu__nav a:active {
    background: rgba(255,255,255,0.06);
    color: #fff !important;
  }
  /* Separator hairlines */
  .z-mobile-menu__sep {
    background: rgba(255,255,255,0.10) !important;
    margin: 6px 22px !important;
  }
  /* Chips row: language + currency pills */
  .z-mobile-menu__chips {
    padding: 14px 22px !important;
    gap: 8px;
  }
  .z-mobile-menu__chip {
    border: 1px solid rgba(255,255,255,0.20) !important;
    color: #fff !important;
    background: rgba(255,255,255,0.05);
    padding: 7px 14px !important;
    font-size: 13px;
    border-radius: 999px;
  }
  .z-mobile-menu__chip.is-active {
    background: var(--z-yellow, #FFC93A) !important;
    color: #15181D !important;
    border-color: var(--z-yellow, #FFC93A) !important;
    font-weight: 700;
  }
}

/* ─── 2. HOMEPAGE — normalise section spacing rhythm ─────────────────────── */
@media (max-width: 720px) {
  /* All HP sections wear the same vertical rhythm. The earlier rules had
     inconsistent paddings (var(--z-space-3), 24px, 12px, etc). Force one. */
  .z-section,
  .z-section--tight,
  .z-cat-tiles,
  .z-dod,
  .z-deal-grid,
  .common-home > section,
  .common-home > .z-container > section {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Re-apply inner padding to section-shaped cards/containers */
  .z-dod,
  .z-section--tight > .z-section-head,
  .z-deal-grid {
    padding: 0 !important;
  }
  /* Hero gets its own breathing room (already padded by .z-hero) */
  .z-hero {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  /* Section heads: same baseline gap everywhere */
  .z-section-head,
  .z-dod__head {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
    gap: 8px;
  }
  /* Force same h-padding to all HP containers so nothing wanders */
  section.z-container,
  .z-container.z-section--tight {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Kicker eyebrow consistent */
  .z-kicker {
    font-size: 11px !important;
    letter-spacing: 1.2px;
    margin-bottom: 4px !important;
  }
  /* The deal-of-the-day green block: tighten internal padding */
  .z-dod__head {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 14px 16px 10px !important;
  }
  .z-dod__title { font-size: 20px !important; }
  .z-dod__desc  { font-size: 13px !important; line-height: 1.45; }
  .z-dod__right {
    flex-direction: row !important;
    align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
  }
  .z-dod__timer {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
  }
  .z-dod__timer-label { font-size: 11px !important; }
  .z-dod__timer-num   { font-size: 13px !important; }
  .z-dod__action {
    font-size: 13px !important;
    white-space: nowrap;
  }
  .z-deal-grid {
    padding: 4px 14px 14px !important;
    gap: 10px;
  }
}

/* ─── 3. CATEGORY PAGE — kill the duplicate catalog tree ─────────────────── */
@media (max-width: 720px) {
  /* Two separate <nav class="z-tree"> blocks both render the full tree on
     this page:
        a) <section class="z-cat-expander-wrap">…<details class="z-cat-expander">
        b) <aside class="z-cat-sidebar">…<nav class="z-tree">
     On mobile we keep the sidebar (which also carries the quick-link cards)
     and hide the standalone expander wrap entirely. That gives ONE tree,
     ONE label, ONE quick-links row. */
  .z-cat-expander-wrap {
    display: none !important;
  }
  /* Re-show the sidebar's own heading (we hid it in patch 3 to fix the
     dup-with-expander problem; now that the expander itself is gone, this
     is the only label for the tree and should be visible). */
  .z-cat-sidebar__catalog-head {
    display: block !important;
    margin: 12px 14px 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #14213D !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
  }
  /* Quick-links (Slevy / Bestsellery / Novinky) row */
  .z-cat-sidebar__qlinks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .z-qlink {
    padding: 10px 12px !important;
    border-radius: 10px;
  }
  .z-qlink__label { font-size: 13px !important; }
  .z-qlink__sub   { font-size: 11px !important; }
  .z-qlink__icon  { width: 30px !important; height: 30px !important; }
  /* The sidebar itself becomes a card */
  .z-cat-sidebar {
    background: #fff;
    border-radius: 14px;
    padding: 0 !important;
    margin: 12px 14px 16px !important;
    box-shadow: 0 1px 3px rgba(20,33,61,0.04);
    overflow: hidden;
  }
  /* Tree spacing inside the sidebar card */
  .z-cat-sidebar > .z-tree {
    padding: 0 14px 14px !important;
  }
  .z-cat-sidebar .z-tree__link--lvl1 {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE DESIGN POLISH — 2026-06-10
   ─────────────────────────────────────────────────────────────────────────
   Comprehensive refactor of element sizes, spacing, and proportions on
   mobile (≤720px). Earlier mobile patches stacked competing constraints
   that squashed the logo and produced inconsistent card padding.
   This block sets the DEFINITIVE mobile contract — uses `html body` ancestor
   to defeat any earlier rules in the cascade.
   ─────────────────────────────────────────────────────────────────────────
   Design tokens (mobile):
     • Header height        60px
     • Logo height          44px (up from squashed 28-32px)
     • Touch target min     44px
     • Card radius          14px
     • Card padding         16px
     • Section vertical gap 22px
     • Container H-padding  14px
     • Font scale           text 14, button 15, h1 22, h2 18, h3 16
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* HEADER + LOGO — comfortable proportions, no more squashed logo */
  html body header.z-header,
  html body .z-header {
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  html body .z-header__burger {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  html body .z-header__burger svg { width: 22px; height: 22px; }

  html body .z-header__logo {
    flex: 0 1 auto !important;
    max-width: none !important;
    min-width: 0;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    overflow: hidden;
  }
  html body .z-header__logo img {
    height: 44px !important;          /* was being squashed to 28-32px — fix */
    max-height: 44px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain;
    display: block;
  }

  html body .z-header__search-btn,
  html body #z-mobile-search-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  html body .z-header__search-btn svg { width: 20px; height: 20px; }

  /* CART PILL — yellow pill, comfortable tap zone */
  html body .z-btn--cart,
  html body #z-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 12px 0 11px !important;
    border-radius: 999px !important;
    background: var(--z-yellow, #FFC93A) !important;
    color: #15181D !important;
    flex-shrink: 0;
  }
  html body .z-btn--cart svg { width: 18px; height: 18px; }
  html body #z-cart-total {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #15181D !important;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* CONTAINER — consistent horizontal padding everywhere */
  html body .z-container,
  html body section.z-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* SECTION RHYTHM — every section gets the same vertical spacing */
  html body main > section,
  html body main > .z-container,
  html body .common-home > section,
  html body section.z-container,
  html body section.z-section,
  html body section.z-section--tight {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
  }
  html body .z-hero { margin-top: 10px !important; }

  /* SECTION HEADS — consistent title scale + spacing */
  html body .z-section-head,
  html body .z-section__head {
    margin-bottom: 12px !important;
    padding: 0 !important;
    gap: 6px;
  }
  html body .z-kicker {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6B6759;
    margin-bottom: 4px !important;
  }
  html body .z-section-title,
  html body .z-section__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--z-ink, #14213D) !important;
    margin: 0 !important;
  }

  /* CARDS — universal card padding + radius (deal-of-day, callout, summary, etc.) */
  html body .z-dod,
  html body .z-expert-callout,
  html body .z-trust-strip,
  html body .z-summary,
  html body .z-co-panel,
  html body .z-success-card,
  html body .z-success-payment,
  html body .z-cat-sidebar,
  html body .z-cat-guide,
  html body .z-product-buy,
  html body .z-product-pricebox {
    border-radius: 14px !important;
  }
  html body .z-dod__head { padding: 16px !important; }
  html body .z-expert-callout { padding: 16px !important; gap: 12px !important; }
  html body .z-trust-strip { padding: 14px !important; }
  html body .z-co-panel { padding: 16px !important; margin-bottom: 12px !important; }
  html body .z-summary { padding: 16px !important; }
  html body .z-success-card { padding: 18px 16px !important; }
  html body .z-success-payment { padding: 18px 16px !important; }
  html body .z-cat-sidebar { padding: 0 !important; }
  html body .z-cat-guide__inner { padding: 16px !important; }

  /* HERO — proper proportions, single column */
  html body .z-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  html body .z-hero__main,
  html body .z-hero__main--slideshow {
    min-height: 340px !important;
    padding: 26px 20px !important;
    border-radius: 14px !important;
  }
  html body .z-hero__eyebrow {
    font-size: 11px !important;
    letter-spacing: 1.6px;
    margin-bottom: 8px;
  }
  html body .z-hero__title {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 10px !important;
  }
  html body .z-hero__desc {
    font-size: 13px !important;
    line-height: 1.45;
    margin-bottom: 16px !important;
  }
  html body .z-hero__cta {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
  }
  html body .z-hero__cta .z-btn {
    width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 10px;
  }
  html body .z-hero__side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  html body .z-hero__tile {
    padding: 14px !important;
    border-radius: 14px !important;
    min-height: 110px;
  }
  html body .z-hero__tile-title { font-size: 13px !important; margin: 4px 0 2px !important; }
  html body .z-hero__tile-desc { font-size: 11px !important; line-height: 1.35; }

  /* CATEGORY TILES carousel */
  html body .z-cat-tiles.z-carousel {
    padding: 4px 0 12px !important;
    margin: 0 -14px !important;     /* bleed to edge */
    padding-left: 14px !important;
    padding-right: 28px !important;
  }
  html body .z-cat-tile {
    flex: 0 0 144px !important;
    min-width: 144px;
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  html body .z-cat-tile__img {
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 10px !important;
  }
  html body .z-cat-tile__name { font-size: 13px !important; line-height: 1.3 !important; }
  html body .z-cat-tile__count { font-size: 11px !important; margin-top: 4px !important; }

  /* PRODUCT CARDS (cat grid + recommendations) — comfortable padding */
  html body .z-product-grid,
  html body .z-cat-grid,
  html body .z-cat-products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  html body .z-card,
  html body .z-product-card {
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden;
  }
  html body .z-card__body,
  html body .z-product-card__body {
    padding: 10px 12px 12px !important;
  }
  html body .z-card__title,
  html body .z-product-card__title { font-size: 13px !important; line-height: 1.3 !important; }
  html body .z-card__price,
  html body .z-product-card__price { font-size: 14px !important; font-weight: 800 !important; }

  /* BUTTONS — global mobile touch contract */
  html body .z-btn,
  html body button.z-btn,
  html body a.z-btn,
  html body .z-co-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* FORM FIELDS */
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="number"],
  html body input[type="password"],
  html body select,
  html body textarea,
  html body .z-co-field input,
  html body .z-co-select {
    font-size: 16px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    box-sizing: border-box;
  }

  /* ─────────────────────────────────────────────────────────────────────
     AI-GENERATED HERO BANNER — applied when controller passes z_hero_banner
     (desktop AND mobile both honor this modifier) — see below for the
     desktop equivalents. The mobile rules continue inside this block.
     ───────────────────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────────────────
     UPPER PART — breadcrumb + category hero compacted for mobile
     ───────────────────────────────────────────────────────────────────── */

  /* Breadcrumb — compact horizontal scroll if too long */
  html body .z-breadcrumb {
    padding: 8px 0 !important;
    background: transparent !important;
    border-bottom: none !important;
  }
  html body .z-breadcrumb__inner {
    padding: 0 14px !important;
    font-size: 13px !important;
    color: #6B6759 !important;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html body .z-breadcrumb__inner::-webkit-scrollbar { display: none; }
  html body .z-breadcrumb__sep { margin: 0 4px; opacity: 0.4; }
  html body .z-breadcrumb__current {
    color: #14213D !important;
    font-weight: 700;
  }

  /* Category HERO — drop decoration, tighten copy */
  html body .z-cat-hero {
    min-height: auto !important;
    padding: 14px 14px 16px !important;
    background: #FAF7EE !important;
    border-radius: 0 !important;
    margin: 0 -14px 0 !important;     /* edge-to-edge bleed */
    overflow: hidden;
  }
  html body .z-cat-hero__bg,
  html body .z-cat-hero__stamps,
  html body .z-cat-hero__stamp {
    display: none !important;
  }
  /* AI banner — preserve the image background on mobile, tighten height */
  html body .z-cat-hero--has-banner {
    background: none;           /* let inline style win */
    background-color: #14213D !important;
    min-height: 160px !important;
    padding: 18px 14px !important;
  }
  html body .z-cat-hero--has-banner[style*="background-image"] {
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
  }
  html body .z-cat-hero--has-banner::before {
    background:
      linear-gradient(90deg,
        rgba(15, 18, 22, 0.94) 0%,
        rgba(20, 33, 61, 0.86) 45%,
        rgba(20, 33, 61, 0.55) 100%) !important;
  }
  html body .z-cat-hero--has-banner .z-cat-hero__title {
    color: #fff !important;
  }
  html body .z-cat-hero--has-banner .z-cat-hero__desc,
  html body .z-cat-hero--has-banner .z-cat-hero__stat-num {
    color: #fff !important;
  }
  html body .z-cat-hero--has-banner .z-cat-hero__stat-label {
    color: rgba(255,255,255,0.7) !important;
  }
  html body .z-cat-hero__inner {
    padding: 0 14px !important;
    text-align: left !important;
  }
  html body .z-cat-hero__title {
    font-size: 26px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
    color: var(--z-ink, #14213D) !important;
  }
  html body .z-cat-hero__desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #4A4439 !important;
    margin: 0 0 10px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html body .z-cat-hero__stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .z-cat-hero__stats::-webkit-scrollbar { display: none; }
  html body .z-cat-hero__stat {
    flex: 0 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: 0;
  }
  html body .z-cat-hero__stat-num {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--z-ink, #14213D) !important;
    margin: 0 0 2px !important;
  }
  html body .z-cat-hero__stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6B6759 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  html body .z-cat-hero__stat-sep { display: none !important; }

  /* ─────────────────────────────────────────────────────────────────────
     LEFT COLUMN MENU (sidebar) — moved BELOW products on mobile,
     collapsible accordion with click-to-open sections
     ───────────────────────────────────────────────────────────────────── */

  /* Category page layout — products FIRST, sidebar BELOW */
  html body section.z-cat-layout,
  html body .z-cat-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 20px !important;
  }
  html body .z-cat-main {
    order: 1 !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
  html body .z-cat-sidebar {
    order: 2 !important;
    width: 100% !important;
    margin: 24px 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Real, FUNCTIONAL "Filtry a kategorie" CTA button (injected by JS), shown
     sticky above products on mobile. (Was a non-interactive ::before pseudo-
     element — couldn't receive clicks, so it did nothing.) */
  html body .z-mob-cat-cta {
    position: sticky;
    top: 56px;                 /* sit just under the sticky header */
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid var(--z-primary, #2E4BDB);
    border-radius: 14px;
    color: var(--z-primary, #2E4BDB);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(46,75,219,0.12);
    -webkit-tap-highlight-color: rgba(46,75,219,0.08);
  }
  html body .z-mob-cat-cta__chev {
    font-size: 11px;
    transition: transform 0.25s ease;
  }
  html body .z-mob-cat-cta.is-open .z-mob-cat-cta__chev {
    transform: rotate(180deg);
  }
  /* Collapsible full category tree opened by the "Kategorie" CTA */
  html body .z-mob-cat-tree {
    max-height: 0;
    overflow: hidden;
    margin: -6px 0 0;
    background: #fff;
    border-radius: 14px;
    transition: max-height 0.3s ease, margin 0.3s ease, padding 0.25s ease;
  }
  html body .z-mob-cat-tree.is-open {
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--z-border, #E5E1D8);
    box-shadow: 0 6px 20px rgba(20,24,29,0.08);
  }
  /* Tree link styling (mirrors the sidebar rules — the tree is relocated here) */
  html body .z-mob-cat-tree .z-tree__list { padding: 0 !important; margin: 0 !important; list-style: none !important; }
  html body .z-mob-cat-tree .z-tree__link {
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #14213D !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 10px;
  }
  html body .z-mob-cat-tree .z-tree__link--lvl1 { font-weight: 700 !important; }
  html body .z-mob-cat-tree .z-tree__link--lvl2 { font-weight: 500 !important; padding-left: 28px !important; font-size: 13px !important; }
  html body .z-mob-cat-tree .z-tree__link--lvl3 { font-weight: 400 !important; padding-left: 42px !important; font-size: 13px !important; }
  html body .z-mob-cat-tree .z-tree__link.is-active {
    background: rgba(46,75,219,0.08) !important;
    color: var(--z-primary, #2E4BDB) !important;
    font-weight: 800 !important;
  }
  html body .z-mob-cat-tree .z-tree__link:active { background: rgba(20,33,61,0.04); }

  /* Each sidebar section becomes a collapsible card */
  html body .z-cat-sidebar > * {
    background: #fff !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(20,33,61,0.04);
    overflow: hidden;
  }

  /* Quick-link tiles row */
  html body .z-cat-sidebar__qlinks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .z-cat-sidebar__qlinks > * {
    box-shadow: 0 1px 3px rgba(20,33,61,0.06);
  }
  html body .z-qlink {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #fff;
    border: 1px solid #ECE7DA;
  }
  html body .z-qlink__icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }
  html body .z-qlink__label { font-size: 13px !important; font-weight: 700 !important; }
  html body .z-qlink__sub { font-size: 11px !important; }

  /* "PROCHÁZET KATALOG" heading + tree — render as one card */
  html body .z-cat-sidebar__catalog-head {
    display: block !important;
    margin: 0 !important;
    padding: 14px 16px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--z-ink, #14213D) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* The next sibling .z-tree needs to attach visually to the heading */
  html body .z-cat-sidebar__catalog-head + .z-tree {
    margin-top: -10px !important;
  }
  html body .z-cat-sidebar > .z-tree {
    padding: 0 4px 8px !important;
  }
  html body .z-cat-sidebar .z-tree__list { padding: 0 !important; margin: 0 !important; }
  html body .z-cat-sidebar .z-tree__link {
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #14213D !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 10px;
  }
  html body .z-cat-sidebar .z-tree__link--lvl1 { font-weight: 700 !important; }
  html body .z-cat-sidebar .z-tree__link--lvl2 { font-weight: 500 !important; padding-left: 28px !important; font-size: 13px !important; }
  html body .z-cat-sidebar .z-tree__link--lvl3 { font-weight: 400 !important; padding-left: 42px !important; font-size: 13px !important; }
  html body .z-cat-sidebar .z-tree__link.is-active {
    background: rgba(46,75,219,0.08) !important;
    color: var(--z-primary, #2E4BDB) !important;
    font-weight: 800 !important;
  }
  html body .z-cat-sidebar .z-tree__link:active {
    background: rgba(20,33,61,0.04);
  }

  /* ─────────────────────────────────────────────────────────────────────
     MOBILE ACCORDION CARDS — Podkategorie + Filtry at top of main
     (JS in category.twig wraps both blocks in <details> with .z-mob-acc)
     ───────────────────────────────────────────────────────────────────── */
  html body details.z-mob-acc {
    margin: 0 0 10px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid #ECE7DA !important;
    box-shadow: 0 1px 3px rgba(20,33,61,0.04) !important;
    overflow: hidden;
  }
  html body details.z-mob-acc[open] {
    box-shadow: 0 2px 8px rgba(20,33,61,0.06) !important;
  }
  html body details.z-mob-acc summary.z-mob-acc__head {
    list-style: none !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 13px 14px !important;
    font-size: 14px;
    font-weight: 800;
    color: var(--z-ink, #14213D);
    -webkit-tap-highlight-color: rgba(46,75,219,0.08);
    user-select: none;
  }
  html body details.z-mob-acc summary::-webkit-details-marker { display: none; }
  html body .z-mob-acc__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: rgba(46,75,219,0.10);
    color: var(--z-primary, #2E4BDB);
    border-radius: 10px;
    flex-shrink: 0;
  }
  html body .z-mob-acc__label {
    flex: 1;
    letter-spacing: -0.01em;
  }
  html body .z-mob-acc__badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    background: var(--z-primary, #2E4BDB);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px;
    line-height: 1;
  }
  html body .z-mob-acc__chev {
    color: #6B6759;
    font-size: 16px;
    transition: transform 220ms cubic-bezier(.2,.85,.3,1);
  }
  html body details.z-mob-acc[open] .z-mob-acc__chev {
    transform: rotate(180deg);
  }
  html body .z-mob-acc__body {
    border-top: 1px solid #F4EFE3;
    padding: 0 !important;
  }
  html body details.z-mob-acc--filters .z-mob-acc__body > .z-cat-sidebar__filters {
    padding: 8px 12px 14px !important;
  }
  /* Subcats INSIDE accordion — 2-column grid, icon left + label right (up to
     2 lines), compact height, inset from the card edges (per request). */
  html body details.z-mob-acc--subcats .z-subcats-section {
    padding: 0 !important;
  }
  html body details.z-mob-acc--subcats .z-subcats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  html body details.z-mob-acc--subcats .z-subcat {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #FAF7EE !important;
    border: 1px solid #ECE7DA !important;
    text-decoration: none !important;
    text-align: left !important;
    color: #14213D !important;
    min-height: 52px !important;
    transition: transform 0.12s, background 0.15s;
  }
  html body details.z-mob-acc--subcats .z-subcat.is-active {
    background: rgba(46,75,219,0.08) !important;
    border-color: var(--z-primary, #2E4BDB) !important;
    color: var(--z-primary, #2E4BDB) !important;
  }
  html body details.z-mob-acc--subcats .z-subcat:active {
    transform: scale(0.96);
  }
  html body details.z-mob-acc--subcats .z-subcat__img,
  html body details.z-mob-acc--subcats .z-subcat__img--all {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  html body details.z-mob-acc--subcats .z-subcat__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body details.z-mob-acc--subcats .z-subcat__label {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html body details.z-mob-acc--subcats .z-subcat__count {
    display: none !important;
  }
  /* When accordion is closed, hide the extra tiles (still show 5) */
  html body details.z-mob-acc--subcats:not([open]) .z-mob-extra {
    display: none !important;
  }

  /* ─── SWIPE TRANSITION HINT on product grid ─── */
  html body .z-product-grid {
    transition: transform 160ms cubic-bezier(.4,0,.2,1), opacity 160ms;
  }
  html body .z-product-grid.z-swipe-left {
    transform: translateX(-30px);
    opacity: 0.4;
  }
  html body .z-product-grid.z-swipe-right {
    transform: translateX(30px);
    opacity: 0.4;
  }

  /* Filters block (OC checkboxes for Stav/Druh/Pofis/Michel) */
  html body .z-cat-sidebar__filters {
    padding: 0 !important;
  }
  html body .z-cat-sidebar__filters > * {
    padding: 12px 16px !important;
  }
  html body .z-cat-sidebar__filters h3,
  html body .z-cat-sidebar__filters .panel-heading,
  html body .z-cat-sidebar__filters .filter-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--z-ink, #14213D) !important;
    margin: 0 !important;
    padding: 12px 16px 8px !important;
    border-bottom: 1px solid #F4EFE3;
  }
  html body .z-cat-sidebar__filters label,
  html body .z-cat-sidebar__filters .checkbox label {
    font-size: 13px !important;
    padding: 8px 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  html body .z-cat-sidebar__filters input[type="checkbox"],
  html body .z-cat-sidebar__filters input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  html body .z-cat-sidebar__filters .btn-primary,
  html body .z-cat-sidebar__filters .btn-default {
    width: 100% !important;
    height: 44px !important;
    margin-top: 8px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
}

/* ─── 4. MOBILE SEARCH — slide BELOW the header, not over it ─────────────── */
/* 767px (not 720) so it aligns with the desktop hide at min-width:768px — the
   721–767px gap previously fell back to the base rule (top:0; z-index:1001),
   which sits ABOVE the sticky header. */
@media (max-width: 767px) {
  /* High-specificity selector (html body) to defeat any earlier .z-mobile-search
     rules in the cascade. The earlier definition at line ~867 has `top: 0` which
     made the overlay drop down covering the entire header. */
  html body .z-mobile-search,
  html body div#z-mobile-search {
    position: fixed !important;
    top: 56px !important;             /* z-header is 56px tall — sit flush beneath it */
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: translateY(-120%) !important;
    background: var(--z-header-bg, #14213D) !important;
    padding: 10px 12px 14px !important;
    box-shadow: 0 6px 18px rgba(15,20,30,0.22) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    z-index: 95 !important;           /* z-header is z:100 (sticky); search slides UNDER it but visible */
    opacity: 0 !important;            /* never paints when closed — kills the scroll "peek" */
    pointer-events: none !important;
    transition: transform 220ms cubic-bezier(.2,.85,.3,1), opacity 220ms ease !important;
    will-change: transform;
  }
  html body .z-mobile-search.is-open,
  html body div#z-mobile-search.is-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  html body .z-mobile-search__form {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html body .z-mobile-search__form input[type="text"] {
    flex: 1 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important;       /* prevent iOS auto-zoom */
    padding: 6px 0 !important;
    color: #14213D !important;
  }
  html body .z-mobile-search__close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #F4EFE3 !important;
    color: #14213D !important;
    border: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Hide legacy `.mobile-search-bar` definitively — it positions at top:0 with
     its own DOM tree and steals visual space if `display:none` doesn't win. */
  html body div.mobile-search-bar,
  html body div.mobile-search-bar.visible-xs {
    display: none !important;
    position: static !important;
    visibility: hidden !important;
    height: 0 !important;
  }
}

/* ─── 5. STICKY BOTTOM CTA + BOTTOM NAV — flush stack, no 1px gap ────────── */
@media (max-width: 720px) {
  /* Body bottom padding = bottom-nav height + (sticky CTA height if present).
     Default 64px (just bottom-nav). On product pages with CTA, 64 + 60 = 124. */
  body {
    padding-bottom: 64px !important;
  }
  body.product-product {
    padding-bottom: 124px !important;
  }
  /* Product page sticky CTA — flush against the bottom-nav, no gap */
  .z-product-mobile-bar {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 60px !important;     /* exactly = bottom-nav height (60px) */
    z-index: 9985;
    background: #fff;
    box-shadow: 0 -4px 14px rgba(15,20,30,0.10);
    border-top: 1px solid #ECE7DA;
    padding: 10px 12px;
    margin: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .z-product-mobile-bar__cart {
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
  }
}

/* ─── 6. BOTTOM NAV — sticky icons row, always visible on mobile ─────────── */
@media (max-width: 720px) {
  /* Force the bottom nav visible — earlier display: flex is at 767px which
     should still cover us, but be explicit so cascade can't kill it. */
  .z-bottom-nav,
  nav.z-bottom-nav,
  #mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    z-index: 9990 !important;
    background: #fff !important;
    border-top: 1px solid #ECE7DA !important;
    box-shadow: 0 -2px 12px rgba(15,20,30,0.08) !important;
    padding: 6px 4px 8px !important;
    margin: 0 !important;
    justify-content: space-around;
    align-items: stretch;
  }
  .z-bottom-nav__item {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    color: #6B7280 !important;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    position: relative;
    -webkit-tap-highlight-color: rgba(46,75,219,0.08);
    transition: color 0.15s;
  }
  .z-bottom-nav__item span:not(.z-bottom-nav__badge) {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.1px;
    margin-top: 2px;
  }
  .z-bottom-nav__item svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
  }
  .z-bottom-nav__item:active,
  .z-bottom-nav__item.is-active {
    color: #15181D !important;
  }
  .z-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30%; right: 30%;
    height: 2px;
    background: var(--z-primary, #2E4BDB);
    border-radius: 0 0 2px 2px;
  }
  /* Cart badge — count bubble */
  .z-bottom-nav__badge {
    position: absolute;
    top: 0;
    right: calc(50% - 18px);
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    background: var(--z-danger, #DC2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(220,38,38,0.4);
  }
  .z-bottom-nav__badge:empty,
  .z-bottom-nav__badge:not([data-count]):empty {
    display: none !important;
  }
}

/* ─── 7. iOS safe-area on bottom nav + CTA (notched phones) ──────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 720px) {
    .z-bottom-nav {
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
      height: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    .z-product-mobile-bar {
      bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
    body.product-product { padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important; }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUCTION LIST PAGE — countdown + login overlay redesign (2026-06-10)
   Targets the legacy auction_category_view.twig markup with class-level
   overrides so the existing template doesn't need editing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gap between the breadcrumb bar and the auction page content (was flush) */
#product-special,
#product-auction { margin-top: 18px; }

/* ── Auction card: pull tile into Znamky2026 design language ── */
#product-special .card {
  border: 1px solid #ECE7DA !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.05) !important;
  overflow: hidden !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
  background: #fff !important;
}
#product-special .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.10) !important;
}
#product-special .card img.card-img-top {
  border-bottom: 1px solid #F4EFE3 !important;
}
#product-special .card .card-body { padding: 14px !important; }
#product-special .card .card-title { margin: 0 0 10px !important; }
#product-special .card .card-title a {
  color: #14213D !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}
#product-special .card .card-title a:hover { color: #2E4BDB !important; }

/* ── Auction info box: clean light card instead of grey ── */
#product-special .auction-info-compact {
  background: linear-gradient(180deg, #FAF7EE 0%, #F4EFE3 100%) !important;
  border: 1px solid #ECE7DA !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}
#product-special .auction-info-compact > div:first-child > span:first-child {
  color: #6B6759 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
#product-special .auction-info-compact [id^="current-bid-"] {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #14213D !important;
  letter-spacing: -0.02em !important;
}
#product-special .auction-info-compact [id^="product-bid-count-"] {
  background: rgba(46, 75, 219, 0.08) !important;
  color: #2E4BDB !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  margin-left: 4px;
}

/* ── COUNTDOWN: red urgency chip with mono numerals + clock icon ── */
/* Unified countdown — clean light-yellow box matching auction.twig's .countdown-box */
#product-special .countdown {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 6px 10px !important;
  background: #fff8e1 !important;
  border: 1px solid #ffca28 !important;
  border-radius: 6px !important;
  position: relative !important;
  flex-wrap: wrap !important;
}
#product-special .countdown::before { content: none !important; }
#product-special .countdown .count-down {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e65100 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
#product-special .countdown .count-down.text-danger { color: #c62828 !important; }
#product-special .countdown .count-endtime {
  font-size: 11px !important;
  color: #f57c00 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-left: auto;
}
#product-special .countdown::after { content: none !important; }
@keyframes z-auction-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50%     { opacity: 0.65; box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ── Auction category page — MOBILE: 2 cards/row, no overflow ── */
@media (max-width: 767px) {
  #product-special .z-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* grid items default to min-width:auto → content forced the 2nd card to
     overflow sideways. Allow cells/cards to shrink. */
  #product-special .z-auc-cell,
  #product-special .card,
  #product-special .card .card-body { min-width: 0 !important; }
  #product-special .card .card-body { padding: 10px !important; }
  #product-special .card .card-title a { font-size: 13px !important; }
  /* Countdown: compact + wrap so the long label never pushes the card wider */
  #product-special .countdown { padding: 6px 8px !important; gap: 5px !important; }
  #product-special .countdown .count-down {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word;
    min-width: 0;
  }
  #product-special .countdown .count-endtime { margin-left: 0 !important; }
}

/* Auction sidebar categories — collapsible <details> on mobile, always-open on desktop */
.z-mob-cat-acc { margin: 0; }
.z-mob-cat-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.z-mob-cat-acc > summary::-webkit-details-marker { display: none; }
.z-mob-cat-acc__chev { margin-left: auto; transition: transform 0.2s; }
.z-mob-cat-acc[open] .z-mob-cat-acc__chev { transform: rotate(180deg); }
@media (min-width: 768px) {
  /* Desktop: keep the tree permanently visible; summary acts as a plain heading. */
  .z-mob-cat-acc > nav.z-tree { display: block !important; }
  .z-mob-cat-acc > summary { pointer-events: none; }
  .z-mob-cat-acc__chev { display: none; }
}

/* ============================================================
   INFORMATION PAGES (O nás, Doručení, Kontakt, …) — unified design
   ============================================================ */
.z-info-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--z-space-6);
  padding: var(--z-space-6) var(--z-container-pad);
  align-items: start;
}
.z-info-sidebar {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  padding: 8px;
  position: sticky;
  top: var(--z-space-3);
}
.z-info-sidebar__head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--z-ink-4, #8A8678);
  padding: 10px 12px 8px;
}
.z-info-nav { display: flex; flex-direction: column; gap: 2px; }
.z-info-nav__link {
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--z-ink, #14213D);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s, color 0.15s;
}
.z-info-nav__link:hover { background: var(--z-canvas-warm, #F4EFE3); color: var(--z-ink, #14213D); }
.z-info-nav__link.is-active {
  background: rgba(46, 75, 219, 0.08);
  color: var(--z-primary, #2E4BDB);
  font-weight: 700;
}

.z-info-content {
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  padding: 30px 34px;
}
.z-info-content__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--z-ink, #14213D);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.15;
}
.z-info-content__body { color: var(--z-ink-2, #3A4256); font-size: 14px; line-height: 1.72; }
.z-info-content__body > *:first-child { margin-top: 0; }
.z-info-content__body h2 { font-size: 20px; font-weight: 800; color: var(--z-ink, #14213D); margin: 30px 0 12px; letter-spacing: -0.01em; }
.z-info-content__body h3 { font-size: 20px; font-weight: 700; color: var(--z-ink, #14213D); margin: 24px 0 10px; }
.z-info-content__body h4 { font-size: 14px; font-weight: 700; color: var(--z-ink, #14213D); margin: 18px 0 8px; }
.z-info-content__body p { margin: 0 0 14px; }
.z-info-content__body a { color: var(--z-primary, #2E4BDB); font-weight: 600; text-decoration: none; }
.z-info-content__body a:hover { text-decoration: underline; }
.z-info-content__body strong, .z-info-content__body b { color: var(--z-ink, #14213D); font-weight: 700; }
/* Checkmark bullet lists */
.z-info-content__body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.z-info-content__body ul li { position: relative; padding-left: 27px; margin-bottom: 9px; }
.z-info-content__body ul li::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px;
  background: rgba(46,75,219,0.10);
  border-radius: 50%;
}
.z-info-content__body ul li::after {
  content: '✓';
  position: absolute; left: 4px; top: 1px;
  font-size: 11px; font-weight: 800;
  color: var(--z-primary, #2E4BDB);
}
.z-info-content__body ol { margin: 0 0 16px; padding-left: 22px; }
.z-info-content__body ol li { margin-bottom: 8px; }
/* Tables → clean styled */
.z-info-content__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 20px;
  font-size: 14px;
  border: 1px solid #ECE7DA;
  border-radius: 10px;
  overflow: hidden;
}
.z-info-content__body th,
.z-info-content__body td {
  padding: 11px 15px;
  border-bottom: 1px solid #ECE7DA;
  text-align: left;
  vertical-align: top;
}
.z-info-content__body th { background: var(--z-canvas-warm, #F4EFE3); font-weight: 700; color: var(--z-ink, #14213D); }
.z-info-content__body tr:last-child td { border-bottom: 0; }
.z-info-content__body img { max-width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 767px) {
  .z-info-layout { grid-template-columns: 1fr; gap: var(--z-space-4); padding: var(--z-space-4) 14px; }
  .z-info-sidebar { position: static; padding: 10px; }
  /* Sidebar becomes a horizontal scrollable strip of pills (no awkward wrapping) */
  .z-info-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .z-info-nav::-webkit-scrollbar { display: none; }
  .z-info-nav__link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
    padding: 8px 13px;
    border: 1px solid #ECE7DA;
  }
  .z-info-nav__link.is-active { border-color: var(--z-primary, #2E4BDB); }
  .z-info-content { padding: 20px 18px; }
  .z-info-content__title { font-size: 26px; }
}

/* ── Delivery & Payment (info id 6) rich layout ── */
.z-dp-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.z-dp-head--pay { margin-top: 36px; padding-top: 28px; border-top: 1px solid #ECE7DA; }
.z-dp-head__icon { flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }
.z-dp-head__icon--ship { background: rgba(46,75,219,0.10); color: #2E4BDB; }
.z-dp-head__icon--pay { background: rgba(20,73,47,0.12); color: #14492F; }
.z-dp-head__title { font-size: 20px; font-weight: 800; color: #14213D; margin: 0; letter-spacing: -0.01em; }
.z-dp-head__sub { font-size: 14px; color: #6B6759; margin: 3px 0 0; }
.z-dp-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
.z-dp-zone { background: #FAF7EE; border: 1px solid #ECE7DA; border-radius: 14px; padding: 16px; }
.z-dp-zone__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.z-dp-zone__flag { font-size: 26px; line-height: 1; }
.z-dp-zone__name { font-size: 14px; font-weight: 800; color: #14213D; }
.z-dp-free { display: flex; align-items: center; gap: 6px; background: rgba(20,73,47,0.10); color: #14492F; font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 10px; margin-bottom: 10px; }
.z-dp-free strong { color: #0C3322; font-weight: 800; }
.z-dp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.z-dp-table td { padding: 8px 0; border-bottom: 1px dashed #E0DBCE; color: #3A4256; }
.z-dp-table tr:last-child td { border-bottom: 0; }
.z-dp-price { text-align: right; font-weight: 800; color: #14213D; white-space: nowrap; }
.z-dp-note { font-size: 11px; color: #8A8678; margin-top: 8px; }
.z-dp-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.z-dp-pay-card { background: #fff; border: 1px solid #ECE7DA; border-radius: 14px; padding: 20px; }
.z-dp-pay-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(46,75,219,0.10); color: #2E4BDB; margin-bottom: 12px; }
.z-dp-pay-card__title { font-size: 20px; font-weight: 800; color: #14213D; margin: 0 0 8px; }
.z-dp-pay-card p { font-size: 14px; color: #3A4256; line-height: 1.6; margin: 0 0 12px; }
.z-dp-warn { display: flex; gap: 9px; align-items: flex-start; background: #FFF7E6; border: 1px solid #FFCA28; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #7A5800; line-height: 1.5; }
.z-dp-warn svg { flex-shrink: 0; color: #E0A800; margin-top: 1px; }
.z-dp-bank { background: #F4EFE3; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.z-dp-bank__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: #8A8678; margin-bottom: 3px; }
.z-dp-bank__value { font-family: var(--z-font-mono, ui-monospace, monospace); font-size: 16px; font-weight: 700; color: #14213D; letter-spacing: 0.02em; }
.z-dp-vs { font-size: 13px; color: #3A4256; margin: 4px 0 0; }
.z-dp-vs strong { color: #14213D; }
@media (max-width: 767px) {
  .z-dp-zones { grid-template-columns: 1fr; }
  .z-dp-pay { grid-template-columns: 1fr; }
}

/* ── O nás (info id 4) rich layout ── */
.z-ab-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #14213D 0%, #0E1830 100%); color: #fff; border-radius: 14px; padding: 30px 34px; margin-bottom: 18px; }
.z-ab-hero__eyebrow { font-size: 11px; letter-spacing: 0.12em; font-weight: 800; color: var(--z-yellow, #F5B301); margin-bottom: 10px; }
.z-ab-hero__title { font-size: 32px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.12; max-width: 620px; }
.z-ab-hero__sub { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; max-width: 620px; }
.z-ab-hero__deco { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.08); pointer-events: none; }
.z-ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.z-ab-stat { background: #FAF7EE; border: 1px solid #ECE7DA; border-radius: 14px; padding: 18px 14px; text-align: center; }
.z-ab-stat__num { font-size: 26px; font-weight: 800; color: #14213D; letter-spacing: -0.02em; }
.z-ab-stat__label { font-size: 13px; color: #6B6759; margin-top: 3px; }
.z-ab-story { background: #fff; border: 1px solid #ECE7DA; border-radius: 14px; padding: 24px 28px; margin-bottom: 18px; }
.z-ab-story__title { font-size: 20px; font-weight: 800; color: #14213D; margin: 0 0 12px; }
.z-ab-story p { font-size: 14px; line-height: 1.7; color: #3A4256; margin: 0 0 12px; }
.z-ab-story p:last-child { margin-bottom: 0; }
.z-ab-story a { color: var(--z-primary, #2E4BDB); font-weight: 600; }
.z-ab-values { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.z-ab-value { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #ECE7DA; border-radius: 14px; padding: 18px; }
.z-ab-value__icon { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(46,75,219,0.10); color: #2E4BDB; }
.z-ab-value__title { font-size: 16px; font-weight: 800; color: #14213D; margin: 0 0 4px; }
.z-ab-value p { font-size: 13px; line-height: 1.55; color: #6B6759; margin: 0; }
.z-ab-team-title { font-size: 20px; font-weight: 800; color: #14213D; margin: 0 0 14px; }
.z-ab-team { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.z-ab-member { display: flex; gap: 14px; align-items: center; background: #FAF7EE; border: 1px solid #ECE7DA; border-radius: 14px; padding: 16px 18px; }
.z-ab-member__avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #14213D; color: var(--z-yellow, #F5B301); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.z-ab-member__name { font-size: 16px; font-weight: 800; color: #14213D; }
.z-ab-member__role { font-size: 13px; color: #6B6759; margin-top: 1px; }
.z-ab-member__ico { font-size: 11px; color: #8A8678; font-family: var(--z-font-mono, monospace); margin-top: 3px; }
@media (max-width: 767px) {
  .z-ab-stats { grid-template-columns: 1fr 1fr; }
  .z-ab-values { grid-template-columns: 1fr; }
  .z-ab-team { grid-template-columns: 1fr; }
  .z-ab-hero { padding: 22px 18px; }
  .z-ab-hero__title { font-size: 26px; }
  .z-ab-hero__deco { display: none; }
}

/* ============================================================
   ACCOUNT PAGES — breadcrumb + left menu match the info-page design
   ============================================================ */
/* Breadcrumb → styled bar like .z-breadcrumb */
body[class*="account-"] ul.breadcrumb {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-space-2, 8px);
  background: var(--z-canvas-warm, #F4EFE3);
  border: 0; border-bottom: 1px solid var(--z-divider, #E8E4D9);
  border-radius: 0;
  font-size: var(--z-text-sm, 13px);
  color: var(--z-ink-3, #6B6759);
  /* Full-bleed bar identical to the site-wide .z-breadcrumb; content aligned to
     the page container, with breathing room below. */
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0 calc(50% - 50vw) 26px !important;
  padding: 14px max(var(--z-container-pad, 16px), calc(50vw - 50% + var(--z-container-pad, 16px))) !important;
}
body[class*="account-"] ul.breadcrumb > li { display: inline-flex; align-items: center; }
body[class*="account-"] ul.breadcrumb > li + li::before { content: none !important; }
body[class*="account-"] ul.breadcrumb > li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--z-ink-4, #A9A496); }
body[class*="account-"] ul.breadcrumb > li > a { color: var(--z-ink-3, #6B6759); text-decoration: none; }
body[class*="account-"] ul.breadcrumb > li > a:hover { color: var(--z-primary, #2E4BDB); }
body[class*="account-"] ul.breadcrumb > li:last-child > a { color: var(--z-ink, #14213D); font-weight: 600; }

/* Left account menu — reuses .z-info-sidebar / .z-info-nav; extras: icons + Znamky+ */
.z-acc-menu { margin-bottom: 18px; }
.z-acc-menu .z-info-nav__link i { width: 16px; margin-right: 4px; text-align: center; opacity: 0.85; }
.z-acc-menu__plus { display: flex !important; align-items: center; justify-content: space-between; }
.z-acc-menu__plus i { color: #e5b80b; }
.z-acc-menu__badge { background: #e5b80b; color: #1a1a2e; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
@media (max-width: 767px) {
  .z-acc-menu .z-info-nav { flex-direction: column; }
  .z-acc-menu .z-info-nav__link { border: 0; }
}
/* Hide the duplicated "Informace" module on account pages (account menu already covers it) */
body[class*="account-"] .z-info-module { display: none !important; }
/* Spacing above the account content + left menu (gap below the full-width breadcrumb) */
body[class*="account-"] .container[id^="account-"] { margin-top: 22px; }

/* ── Account page CONTENT — modern forms / cards / buttons (incl. login) ── */
body[class*="account-"] #content > h1,
body[class*="account-"] #content > h2:first-child,
body[class*="account-"] #content .page-title {
  font-size: 26px; font-weight: 800; color: var(--z-ink, #14213D); letter-spacing: -0.02em; margin: 0 0 18px;
}
body[class*="account-"] #content h2 { font-size: 20px; font-weight: 800; color: var(--z-ink, #14213D); }
/* .well / .panel → clean card */
body[class*="account-"] #content .well,
body[class*="account-"] #content .panel {
  background: #fff; border: 1px solid #E8E4D9; border-radius: 14px; padding: 24px 26px;
  box-shadow: 0 1px 3px rgba(20,33,61,0.04); margin-bottom: 18px;
}
body[class*="account-"] #content .panel-heading { background: transparent; border: 0; padding: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--z-ink, #14213D); }
body[class*="account-"] #content .panel-body { padding: 0; }
/* Inputs */
body[class*="account-"] #content .form-control {
  height: auto; min-height: 44px; padding: 11px 14px;
  border: 1px solid #D8D3C6; border-radius: 10px; font-size: 14px; background: #fff; box-shadow: none; color: var(--z-ink, #14213D);
}
body[class*="account-"] #content .form-control:focus { border-color: var(--z-primary, #2E4BDB); box-shadow: 0 0 0 3px rgba(46,75,219,0.12); outline: none; }
body[class*="account-"] #content .control-label,
body[class*="account-"] #content label { font-weight: 600; color: var(--z-ink-2, #3A4256); font-size: 13px; }
/* Buttons */
body[class*="account-"] #content .btn { border-radius: 10px; padding: 11px 22px; font-weight: 700; font-size: 14px; border: 0; }
body[class*="account-"] #content .btn-primary { background: var(--z-primary, #2E4BDB); color: #fff; }
body[class*="account-"] #content .btn-primary:hover { background: var(--z-primary-hover, #2138B8); }
body[class*="account-"] #content .btn-default { background: #fff; border: 1px solid #D8D3C6; color: var(--z-ink, #14213D); }
body[class*="account-"] #content .btn-default:hover { background: var(--z-canvas-warm, #F4EFE3); }
/* Tables (order history, addresses) */
body[class*="account-"] #content .table {
  border: 1px solid #ECE7DA; border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: #fff;
}
body[class*="account-"] #content .table > thead > tr > td,
body[class*="account-"] #content .table > thead > tr > th { background: var(--z-canvas-warm, #F4EFE3); font-weight: 700; color: var(--z-ink, #14213D); border: 0 !important; border-bottom: 1px solid #ECE7DA !important; }
body[class*="account-"] #content .table > tbody > tr > td { border-top: 0 !important; border-bottom: 1px solid #F0EBDF !important; vertical-align: middle; }
/* Ended state — gray, no pulse */
#product-special .countdown.ended,
#product-special .countdown[data-auction-ended="1"] {
  background: #F4EFE3 !important;
  border-left-color: #6B6759 !important;
}
#product-special .countdown.ended::before,
#product-special .countdown[data-auction-ended="1"]::before {
  content: '✕';
  color: #6B6759;
}
#product-special .countdown.ended::after,
#product-special .countdown[data-auction-ended="1"]::after {
  display: none;
}
#product-special .countdown.ended .count-down,
#product-special .countdown[data-auction-ended="1"] .count-down {
  color: #6B6759 !important;
}

/* ── Bid buttons (logged + non-logged) ── */
#product-special .bid-button,
#product-special button.btn.btn-success.btn-sm.btn-block,
#product-special button[onclick*="showACVAuthModal"] {
  background: linear-gradient(180deg, #2E4BDB 0%, #2640C2 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(46, 75, 219, 0.25) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
#product-special .bid-button:hover,
#product-special button.btn.btn-success.btn-sm.btn-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 75, 219, 0.35) !important;
}
#product-special .bid-button strong {
  font-weight: 800 !important;
  color: #FFC93A !important;
  margin-left: 4px;
}

/* Bid status badges */
#product-special .bid-status-message {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
#product-special .bid-status-message.text-success,
#product-special .text-success.bid-status-message {
  background: rgba(30, 127, 58, 0.10) !important;
  color: #1E7F3A !important;
}
#product-special .bid-status-message.text-danger,
#product-special .text-danger.bid-status-message {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #C53824 !important;
}
#product-special .bid-status-message.text-muted,
#product-special .text-muted.bid-status-message {
  background: #F4EFE3 !important;
  color: #6B6759 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUCTION LOGIN / REGISTER OVERLAY — restyle to Znamky2026 navy + yellow
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-reg-modal {
  background: rgba(15, 18, 22, 0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
}
.auth-reg-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) !important;
  max-width: 440px !important;
  animation: z-modal-rise 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes z-modal-rise {
  0% { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: navy gradient with yellow accent */
.auth-reg-header {
  background: linear-gradient(135deg, #14213D 0%, #1A2B4F 50%, #2640C2 100%) !important;
  color: #fff !important;
  padding: 26px 26px 22px !important;
  text-align: center !important;
  position: relative !important;
}
.auth-reg-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--z-yellow, #FFC93A), transparent);
}
.auth-reg-header-icon {
  width: 64px !important;
  height: 64px !important;
  background: rgba(255, 201, 58, 0.18) !important;
  border: 2px solid var(--z-yellow, #FFC93A) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  color: var(--z-yellow, #FFC93A) !important;
  font-size: 26px !important;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.22);
}
.auth-reg-header h3 {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  color: #fff !important;
  letter-spacing: -0.02em;
}
.auth-reg-header p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
.auth-reg-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s;
}
.auth-reg-close:hover { background: rgba(255, 255, 255, 0.22) !important; }

/* Body */
.auth-reg-body { padding: 22px 26px !important; background: #FAF7EE !important; }
.auth-reg-google { margin-bottom: 14px !important; }
.auth-reg-divider {
  position: relative; text-align: center;
  margin: 16px 0 18px !important;
  font-size: 11px !important; color: #6B6759 !important;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.auth-reg-divider::before, .auth-reg-divider::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 50px); height: 1px;
  background: #ECE7DA;
}
.auth-reg-divider::before { left: 0; }
.auth-reg-divider::after { right: 0; }

/* Form fields: warm cream inputs with navy focus */
.auth-reg-field { margin-bottom: 12px !important; }
.auth-reg-field input {
  background: #fff !important;
  border: 1.5px solid #ECE7DA !important;
  border-radius: 10px !important;
  padding: 12px 14px 12px 42px !important;
  font-size: 14px !important;
  color: #14213D !important;
  font-family: inherit !important;
}
.auth-reg-field input:focus {
  border-color: #2E4BDB !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.10) !important;
}
.auth-reg-field-icon { color: #8A8478 !important; font-size: 14px !important; }

/* Consent checks */
.auth-reg-check { font-size: 13px !important; color: #4A4439 !important; }
.auth-reg-check input[type=checkbox]:checked + .auth-reg-checkmark {
  background: #2E4BDB !important;
  border-color: #2E4BDB !important;
}
.auth-reg-check a { color: #2E4BDB !important; font-weight: 600 !important; }
.auth-reg-check em { color: #DC2626 !important; }

/* Primary submit — gold gradient */
.auth-reg-submit {
  background: linear-gradient(180deg, #FFC93A 0%, #F5B71F 100%) !important;
  color: #15181D !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.45), inset 0 -2px 0 rgba(0,0,0,0.08) !important;
  text-transform: none !important;
}
.auth-reg-submit:hover {
  box-shadow: 0 6px 20px rgba(255, 201, 58, 0.55), inset 0 -2px 0 rgba(0,0,0,0.08) !important;
}

/* Login link */
.auth-reg-login-link { color: #6B6759 !important; }
.auth-reg-login-link a {
  color: #2E4BDB !important;
  font-weight: 700 !important;
}

/* Footer */
.auth-reg-footer {
  background: #F4EFE3 !important;
  border-top: 1px solid #ECE7DA !important;
  color: #6B6759 !important;
}
.auth-reg-footer i { color: #1E7F3A !important; }

/* Mobile auth modal */
@media (max-width: 720px) {
  .auth-reg-box {
    max-width: 94vw !important;
    margin: 0 12px;
  }
  .auth-reg-header { padding: 22px 18px 18px !important; }
  .auth-reg-header h3 { font-size: 20px !important; }
  .auth-reg-body { padding: 18px !important; }
}

/* Mobile auction tiles → single column with bigger tap zones */
@media (max-width: 720px) {
  #product-special .col-md-4.col-sm-6 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px !important;
  }
  #product-special .card .card-body { padding: 14px !important; }
  #product-special .auction-info-compact { padding: 12px 14px !important; }
  #product-special .auction-info-compact [id^="current-bid-"] { font-size: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUCTION PRODUCT PAGE — Znamky2026 design (2026-06-10)
   Mirrors .z-product-* layout from product.twig and adds auction-only zones
   for current bid, countdown, bid form, login prompt, ended state, and the
   bottom accordion (description / bid history / rules).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buy panel auction variant — same shell as .z-product-buy, slight tonal shift */
.z-product-buy--auction {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7EE 100%);
  border: 1px solid #ECE7DA;
}

/* Auction badge variants on the gallery */
.z-product-gallery__badge--live {
  background: linear-gradient(135deg, #DC2626 0%, #E54E2E 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.30);
}
.z-product-gallery__badge--live .z-product-gallery__badge-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: z-auction-pulse 1.4s ease-in-out infinite;
}
.z-product-gallery__badge--gray {
  background: rgba(20, 33, 61, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.z-product-gallery__badge--win {
  background: linear-gradient(135deg, #1E7F3A 0%, #2A9F4D 100%);
  color: #fff;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
}

/* Auction eyebrow */
.z-product-buy--auction .z-product-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #FEE7E2 0%, #FFEEDD 100%);
  color: #8E2A1A;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

/* ─── Current-bid pricebox ─── */
.z-auc-pricebox {
  background: #fff;
  border: 1.5px solid #14213D;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
}
.z-auc-pricebox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 70%, rgba(255, 201, 58, 0.06) 100%);
  pointer-events: none;
}
.z-auc-pricebox__label {
  font-size: 11px;
  font-weight: 800;
  color: #6B6759;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.z-auc-pricebox__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.z-auc-pricebox__current {
  font-size: 32px;
  font-weight: 900;
  color: #14213D;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.z-auc-pricebox__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46, 75, 219, 0.10);
  color: #2E4BDB;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.z-auc-pricebox__count .fa { font-size: 11px; }
.z-auc-pricebox__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 12px;
  border-top: 1px dashed #ECE7DA;
  font-size: 13px;
  color: #4A4439;
}
.z-auc-pricebox__meta-label {
  color: #6B6759;
  font-weight: 600;
  margin-right: 4px;
}
.z-auc-pricebox__meta-bidder {
  margin-left: auto;
  color: #1E7F3A;
  font-weight: 700;
}
.z-auc-pricebox.is-ended {
  border-color: #6B6759;
  background: #F4EFE3;
}
.z-auc-pricebox.is-ended .z-auc-pricebox__current {
  color: #6B6759;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ─── Countdown chip ─── */
.z-auc-countdown {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FEE7E2 0%, #FFEEDD 100%);
  border-left: 4px solid #DC2626;
  border-radius: 10px;
  margin: 14px 0;
  position: relative;
}
.z-auc-countdown__icon {
  font-size: 26px;
  line-height: 1;
  color: #DC2626;
  flex-shrink: 0;
}
.z-auc-countdown__body { flex: 1; min-width: 0; }
.z-auc-countdown__label {
  font-size: 11px;
  font-weight: 800;
  color: #8E2A1A;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.z-auc-countdown__timer {
  display: block;
  font-family: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  font-size: 26px;
  font-weight: 800;
  color: #8E2A1A;
  letter-spacing: 0.5px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.z-auc-countdown__end-date {
  font-size: 11px;
  color: #8E2A1A;
  opacity: 0.75;
  font-weight: 600;
  margin-top: 2px;
}
.z-auc-countdown__pulse {
  width: 10px; height: 10px;
  background: #DC2626;
  border-radius: 50%;
  flex-shrink: 0;
  animation: z-auction-pulse 1.4s ease-in-out infinite;
}
.z-auc-countdown.is-ended {
  background: #F4EFE3;
  border-left-color: #6B6759;
}
.z-auc-countdown.is-ended .z-auc-countdown__icon,
.z-auc-countdown.is-ended .z-auc-countdown__label,
.z-auc-countdown.is-ended .z-auc-countdown__timer,
.z-auc-countdown.is-ended .z-auc-countdown__end-date {
  color: #6B6759;
}
.z-auc-countdown.is-ended .z-auc-countdown__pulse { display: none; }
.z-auc-countdown.final-minute {
  animation: z-auction-final 0.9s ease-in-out infinite;
}
@keyframes z-auction-final {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.10); }
}

/* ─── User status indicators ─── */
.z-auc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  margin: 12px 0;
  letter-spacing: -0.01em;
}
.z-auc-status--win {
  background: linear-gradient(135deg, #DFF5E2 0%, #E8F6EC 100%);
  color: #1E5C2C;
  border-left: 4px solid #1E7F3A;
}
.z-auc-status--out {
  background: #FEE7E2;
  color: #8E2A1A;
  border-left: 4px solid #DC2626;
}
.z-auc-status .fa { font-size: 16px; }

/* ─── Bid form (logged) ─── */
.z-auc-bid {
  background: #FAF7EE;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 14px 0;
}
.z-auc-quickbids {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #ECE7DA;
}
.z-auc-quickbids__label {
  font-size: 11px;
  font-weight: 800;
  color: #6B6759;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.z-auc-quickbids__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.z-auc-quickbids__btn,
button.quick-bid-btn {
  height: 42px;
  border: 1.5px solid #ECE7DA;
  background: #fff;
  color: #14213D;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.z-auc-quickbids__btn:hover,
button.quick-bid-btn:hover {
  border-color: #2E4BDB;
  background: rgba(46, 75, 219, 0.05);
  color: #2E4BDB;
  transform: translateY(-1px);
}
.z-auc-quickbids__btn:active,
button.quick-bid-btn:active {
  transform: translateY(0);
}
.z-auc-bid__custom-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #6B6759;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.z-auc-bid__input-group {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #ECE7DA;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.z-auc-bid__input-group:focus-within {
  border-color: #2E4BDB;
  box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.10);
}
.z-auc-bid__currency {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: #F4EFE3;
  color: #14213D;
  font-weight: 800;
  font-size: 14px;
  border-right: 1px solid #ECE7DA;
}
.z-auc-bid__input {
  flex: 1;
  border: 0;
  outline: none;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #14213D;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.z-auc-bid__hint {
  font-size: 11px;
  color: #6B6759;
  margin-top: 8px;
}
.z-auc-bid__hint strong { color: #14213D; }
.z-auc-bid__submit,
button.z-auc-bid__submit,
button#place-bid-btn {
  width: 100%;
  margin-top: 14px;
  height: 50px;
  background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.25), inset 0 -2px 0 rgba(0,0,0,0.10);
  transition: transform 0.15s, box-shadow 0.15s;
}
.z-auc-bid__submit:hover,
button.z-auc-bid__submit:hover,
button#place-bid-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 22px rgba(20, 33, 61, 0.30), inset 0 -2px 0 rgba(0,0,0,0.10);
}
.z-auc-bid__submit .fa { font-size: 16px; }
.z-auc-bid__message {
  margin-top: 12px;
  padding: 10px 14px;
  background: #FEE7E2;
  color: #8E2A1A;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border-left: 3px solid #DC2626;
}

/* ─── Login prompt (not logged) ─── */
.z-auc-login {
  background: linear-gradient(135deg, #14213D 0%, #1A2B4F 100%);
  color: #fff;
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin: 14px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.z-auc-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 240px 180px at 80% 40%, rgba(255, 201, 58, 0.15), transparent 65%);
  pointer-events: none;
}
.z-auc-login__icon {
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  background: rgba(255, 201, 58, 0.18);
  border: 2px solid #FFC93A;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFC93A;
  font-size: 26px;
  position: relative;
  z-index: 1;
}
.z-auc-login__title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.z-auc-login__sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.z-auc-login__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.z-auc-login__primary {
  background: linear-gradient(180deg, #FFC93A 0%, #F5B71F 100%);
  color: #15181D;
  border: none;
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.40), inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.z-auc-login__primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 201, 58, 0.50), inset 0 -2px 0 rgba(0,0,0,0.08);
}
.z-auc-login__secondary {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px;
  letter-spacing: -0.01em;
}
.z-auc-login__secondary:hover {
  color: #FFC93A;
  text-decoration: underline;
}

/* ─── Ended state ─── */
.z-auc-ended {
  background: #F4EFE3;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 14px 0;
}
.z-auc-ended__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}
.z-auc-ended__label {
  color: #6B6759;
  font-weight: 700;
}
.z-auc-ended__value {
  color: #14213D;
  font-weight: 800;
}
.z-auc-ended__value--strong {
  font-size: 26px;
  letter-spacing: -0.02em;
}
.z-auc-ended__win-banner {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFC93A 0%, #F5B71F 100%);
  color: #15181D;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
}
.z-auc-ended__cta {
  margin-left: auto;
  color: #15181D;
  font-weight: 800;
  text-decoration: underline;
}

/* ─── Follow button ─── */
.z-auc-follow {
  width: 100%;
  margin-top: 12px;
  height: 42px;
  background: #fff;
  border: 1.5px solid #ECE7DA;
  color: #14213D;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.z-auc-follow:hover {
  border-color: #2E4BDB;
  color: #2E4BDB;
}
.z-auc-follow .z-auc-follow--on {
  color: #FFC93A;
}

/* ─── Accordion (description / bid history / rules) ─── */
.z-auc-acc {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
details.z-auc-acc__item {
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.18s;
}
details.z-auc-acc__item[open] {
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.06);
}
details.z-auc-acc__item summary.z-auc-acc__head {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.01em;
  user-select: none;
}
details.z-auc-acc__item summary::-webkit-details-marker { display: none; }
.z-auc-acc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(46, 75, 219, 0.10);
  color: #2E4BDB;
  border-radius: 10px;
  font-size: 14px;
  flex-shrink: 0;
}
.z-auc-acc__label { flex: 1; }
.z-auc-acc__count {
  background: rgba(20, 33, 61, 0.08);
  color: #14213D;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.z-auc-acc__chev {
  color: #6B6759;
  font-size: 16px;
  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.3, 1);
}
details.z-auc-acc__item[open] .z-auc-acc__chev {
  transform: rotate(180deg);
}
.z-auc-acc__body {
  padding: 0 20px 20px;
  border-top: 1px solid #F4EFE3;
  padding-top: 16px;
}
.z-auc-acc__body--description {
  line-height: 1.65;
  font-size: 14px;
  color: #4A4439;
}
.z-auc-acc__body--description img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }

/* Bid history rows */
.z-auc-bids {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.z-auc-bids__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #FAF7EE;
  border-radius: 10px;
  font-size: 13px;
}
.z-auc-bids__row--top {
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border: 1px solid #F0D580;
}
.z-auc-bids__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.z-auc-bids__bidder {
  color: #14213D;
  font-weight: 700;
}
.z-auc-bids__bidder .fa {
  color: #6B5818;
  margin-right: 4px;
}
.z-auc-bids__time {
  font-size: 11px;
  color: #8A8478;
  font-weight: 500;
}
.z-auc-bids__amount {
  font-weight: 800;
  color: #14213D;
  font-size: 14px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.z-auc-bids__empty {
  text-align: center;
  padding: 24px 16px;
  color: #6B6759;
  font-size: 13px;
  background: #FAF7EE;
  border-radius: 10px;
}
.z-auc-bids__empty .fa { color: #8A8478; margin-right: 6px; }

/* Auction rules list */
.z-auc-rules {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #4A4439;
}
.z-auc-rules li { margin-bottom: 6px; }

/* ─── Related auctions strip ─── */
.z-auc-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #ECE7DA;
}
.z-auc-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.z-auc-related__card {
  display: block;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.z-auc-related__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.10);
}
.z-auc-related__media {
  aspect-ratio: 1 / 1;
  background: #F4EFE3;
}
.z-auc-related__media img { width: 100%; height: 100%; object-fit: cover; }
.z-auc-related__body { padding: 10px 12px 12px; }
.z-auc-related__name {
  font-size: 13px;
  font-weight: 700;
  color: #14213D;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.z-auc-related__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.z-auc-related__price {
  font-size: 14px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.01em;
}
.z-auc-related__bids {
  font-size: 11px;
  color: #6B6759;
  font-weight: 600;
}

/* ═══ AUCTION PAGE — MOBILE (≤720px) ═══ */
@media (max-width: 720px) {
  html body .z-product-buy--auction { padding: 16px !important; }
  html body .z-auc-pricebox { padding: 14px 16px !important; margin: 12px 0 !important; }
  html body .z-auc-pricebox__current { font-size: 26px !important; }
  html body .z-auc-pricebox__row { gap: 10px !important; }
  html body .z-auc-pricebox__meta { font-size: 11px !important; gap: 4px 14px !important; }
  html body .z-auc-pricebox__meta-bidder { margin-left: 0 !important; width: 100%; margin-top: 4px; }

  html body .z-auc-countdown {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html body .z-auc-countdown__timer { font-size: 20px !important; }
  html body .z-auc-countdown__icon { font-size: 20px !important; }

  html body .z-auc-bid { padding: 14px !important; }
  html body .z-auc-quickbids__row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html body .z-auc-quickbids__btn,
  html body button.quick-bid-btn {
    height: 44px !important;
    font-size: 14px !important;
  }
  html body .z-auc-bid__submit,
  html body button#place-bid-btn {
    height: 52px !important;
    font-size: 14px !important;
  }

  html body .z-auc-login { padding: 18px 16px 16px !important; }
  html body .z-auc-login__icon { width: 46px !important; height: 46px !important; font-size: 20px !important; }
  html body .z-auc-login__title { font-size: 16px !important; }
  html body .z-auc-login__primary { padding: 12px 18px !important; font-size: 14px !important; }

  /* Bid form sticky on mobile — anchor at bottom */
  html body .z-product-buy--auction .bid-form-container,
  html body .z-product-buy--auction .z-auc-bid {
    position: relative;
  }

  /* Related strip → 2 col mobile */
  html body .z-auc-related__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Accordion summary tighter */
  html body details.z-auc-acc__item summary.z-auc-acc__head {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  html body .z-auc-acc__icon { width: 28px !important; height: 28px !important; font-size: 13px !important; }
  html body .z-auc-acc__body { padding: 14px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO PAGES (information/information) + CONTACT — Znamky2026
   Restyles OC's default info template with Znamky design language.
   No template edits required.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body class set by OC: information-information / information-contact */
body[class*="information-"],
body.information-contact {
  background: #FAF7EE;
}

body[class*="information-"] #content,
body.information-contact #content {
  max-width: 880px;
  margin: 32px auto 56px;
  padding: 32px 36px;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(20, 33, 61, 0.05);
}

body[class*="information-"] #content h1,
body.information-contact #content h1 {
  font-size: 26px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid #FFC93A;
  display: inline-block;
}
body[class*="information-"] #content h2,
body.information-contact #content h2 {
  font-size: 20px;
  font-weight: 800;
  color: #14213D;
  margin: 28px 0 10px;
  letter-spacing: -0.01em;
}
body[class*="information-"] #content h3,
body.information-contact #content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #14213D;
  margin: 20px 0 8px;
}
body[class*="information-"] #content p,
body.information-contact #content p {
  font-size: 14px;
  line-height: 1.7;
  color: #4A4439;
  margin: 0 0 14px;
}
body[class*="information-"] #content a,
body.information-contact #content a {
  color: #2E4BDB;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
body[class*="information-"] #content a:hover,
body.information-contact #content a:hover {
  border-bottom-color: #2E4BDB;
}
body[class*="information-"] #content ul,
body[class*="information-"] #content ol,
body.information-contact #content ul,
body.information-contact #content ol {
  padding-left: 22px;
  margin: 0 0 18px;
}
body[class*="information-"] #content li,
body.information-contact #content li {
  font-size: 14px;
  line-height: 1.7;
  color: #4A4439;
  margin-bottom: 6px;
}
body[class*="information-"] #content table,
body.information-contact #content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ECE7DA;
  margin: 14px 0 22px;
  font-size: 13px;
}
body[class*="information-"] #content th,
body.information-contact #content th {
  background: #FAF7EE;
  color: #14213D;
  font-weight: 800;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #ECE7DA;
}
body[class*="information-"] #content td,
body.information-contact #content td {
  padding: 10px 14px;
  border-bottom: 1px solid #F4EFE3;
  color: #4A4439;
}
body[class*="information-"] #content tr:last-child td,
body.information-contact #content tr:last-child td {
  border-bottom: none;
}
body[class*="information-"] #content blockquote,
body.information-contact #content blockquote {
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border-left: 4px solid #FFC93A;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: #6B5818;
  margin: 14px 0;
}
body[class*="information-"] #content img,
body.information-contact #content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 10px 0;
}

/* Contact page form */
body.information-contact #content form {
  margin-top: 24px;
  padding: 22px 24px;
  background: #FAF7EE;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
}
body.information-contact #content form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
body.information-contact #content form legend {
  font-size: 13px;
  font-weight: 800;
  color: #14213D;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
body.information-contact #content form .form-group { margin-bottom: 14px; }
body.information-contact #content form label.control-label {
  font-size: 13px;
  font-weight: 700;
  color: #4A4439;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
body.information-contact #content form input.form-control,
body.information-contact #content form textarea.form-control,
body.information-contact #content form select.form-control {
  background: #fff;
  border: 1.5px solid #ECE7DA;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: #14213D;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.information-contact #content form input.form-control:focus,
body.information-contact #content form textarea.form-control:focus,
body.information-contact #content form select.form-control:focus {
  outline: none;
  border-color: #2E4BDB;
  box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.10);
}
body.information-contact #content form textarea.form-control { min-height: 140px; resize: vertical; }
body.information-contact #content .buttons {
  margin-top: 20px;
  text-align: right;
}
body.information-contact #content .buttons .btn-primary,
body.information-contact #content button[type="submit"] {
  background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%);
  border: none;
  color: #fff;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.22);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
body.information-contact #content .buttons .btn-primary:hover,
body.information-contact #content button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.28);
}

/* Contact info aside (address / phone / email block) */
body.information-contact #content address,
body.information-contact #content .panel-default {
  background: #FAF7EE;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 22px;
  font-style: normal;
  margin-bottom: 16px;
}
body.information-contact #content address strong,
body.information-contact #content .panel-default strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #6B6759;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

/* Mobile */
@media (max-width: 720px) {
  body[class*="information-"] #content,
  body.information-contact #content {
    margin: 14px 12px 32px !important;
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
  body[class*="information-"] #content h1,
  body.information-contact #content h1 {
    font-size: 26px !important;
  }
  body[class*="information-"] #content h2,
  body.information-contact #content h2 {
    font-size: 20px !important;
    margin: 22px 0 8px !important;
  }
  body.information-contact #content form {
    padding: 16px !important;
  }
  body.information-contact #content form input.form-control,
  body.information-contact #content form textarea.form-control {
    font-size: 16px !important;       /* iOS no-zoom */
  }
  body.information-contact #content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT SECTION — Znamky2026 design (2026-06-10)
   Covers login, register, account dashboard, edit, password, address, order
   list/detail, wishlist, download, newsletter, return, forgotten, success,
   transaction, reward — via body class selectors. No template rewrites.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Common shell for all account pages ─── */
/* NOTE: the templates wrap #content in Bootstrap's .container > .row > .col-sm-*
   structure, so we DO NOT restyle #content as a card — that fights the grid.
   Instead we paint a soft cream page bg, give breadcrumbs + headings a
   consistent treatment, and style the actual content panels (.well / .panel /
   .table / fieldset / form-group) so they read as Znamky2026 cards. */
body[class*="account-"] {
  background: #FAF7EE;
}

body[class*="account-"] #content {
  padding-top: 18px;
  padding-bottom: 32px;
}

/* Tighten the legacy .container around account pages so cards have room to breathe */
body[class*="account-"] #account-login,
body[class*="account-"] #account-register,
body[class*="account-"] #account-account,
body[class*="account-"] #account-edit,
body[class*="account-"] #account-password,
body[class*="account-"] #account-address,
body[class*="account-"] #account-order,
body[class*="account-"] #account-wishlist,
body[class*="account-"] #account-download,
body[class*="account-"] #account-newsletter,
body[class*="account-"] #account-forgotten,
body[class*="account-"] #account-success,
body[class*="account-"] #information-success {
  max-width: 1100px;
  margin: 20px auto 56px;
  padding: 0 14px;
}

/* Legacy breadcrumb (when account page renders OC's default <ul.breadcrumb>) */
body[class*="account-"] ul.breadcrumb {
  background: transparent;
  border: 0;
  padding: 8px 0 4px;
  margin: 0 0 12px;
  font-size: 13px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
body[class*="account-"] ul.breadcrumb > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  color: #6B6759;
}
body[class*="account-"] ul.breadcrumb > li + li::before {
  content: '/';
  color: #C9C2B0;
  font-weight: 600;
  margin-right: 2px;
}
body[class*="account-"] ul.breadcrumb > li > a {
  color: #6B6759;
  font-weight: 600;
}
body[class*="account-"] ul.breadcrumb > li > a:hover {
  color: #2E4BDB;
}
body[class*="account-"] ul.breadcrumb > li:last-child {
  color: #14213D;
  font-weight: 700;
}

/* Visible content panels — Bootstrap .well becomes a Znamky2026 card */
body[class*="account-"] #content .well {
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.05);
  margin-bottom: 22px;
  min-height: 100%;
}

body[class*="account-"] #content h1 {
  font-size: 26px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 3px solid #FFC93A;
  display: inline-block;
}
body[class*="account-"] #content h2 {
  font-size: 20px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body[class*="account-"] #content h2 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: rgba(46, 75, 219, 0.10);
  color: #2E4BDB;
  border-radius: 10px;
  font-size: 14px;
}
body[class*="account-"] #content h3 {
  font-size: 14px;
  font-weight: 800;
  color: #14213D;
  margin: 18px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
body[class*="account-"] #content p {
  font-size: 14px;
  line-height: 1.65;
  color: #4A4439;
  margin: 0 0 14px;
}
body[class*="account-"] #content a {
  color: #2E4BDB;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
body[class*="account-"] #content a:hover { color: #14213D; }
body[class*="account-"] #content hr {
  border: 0;
  border-top: 1px solid #ECE7DA;
  margin: 22px 0;
}

/* Account left sidebar — contains Login/Register/Forgotten/Account/Address/
   Wishlist/Order/Return/Newsletter list-group nav. Style as a clean
   Znamky2026 vertical nav card; let Bootstrap's col-sm-3 width keep the
   float layout intact. */
body[class*="account-"] #column-left {
  padding-top: 18px;
}
body[class*="account-"] #column-left .list-group {
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.05);
  overflow: hidden;
  padding: 6px;
  margin-bottom: 18px;
}
body[class*="account-"] #column-left .list-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0 !important;
  background: transparent !important;
  border-radius: 10px;
  color: #14213D !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin: 1px 0;
  transition: background 0.12s, color 0.12s;
}
body[class*="account-"] #column-left .list-group-item:hover {
  background: rgba(46, 75, 219, 0.08) !important;
  color: #2E4BDB !important;
}
body[class*="account-"] #column-left .list-group-item.active {
  background: linear-gradient(135deg, #14213D 0%, #1A2B4F 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body[class*="account-"] #column-right .list-group {
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 6px;
}
body[class*="account-"] #column-right .list-group-item {
  border: 0 !important;
  padding: 11px 14px;
  border-radius: 10px;
  color: #14213D !important;
  font-weight: 600;
  font-size: 13px;
}

/* ─── Forms (login, register, edit, password, address_form) ─── */
body[class*="account-"] #content fieldset {
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  padding: 22px 24px 18px;
  margin: 0 0 22px;
  background: #FAF7EE;
}
body[class*="account-"] #content legend {
  width: auto;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: #14213D;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 0;
  margin-bottom: 8px;
}
body[class*="account-"] #content .form-group {
  margin-bottom: 14px;
}
body[class*="account-"] #content label.control-label {
  font-size: 13px;
  font-weight: 700;
  color: #4A4439;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  display: block;
}
body[class*="account-"] #content input.form-control,
body[class*="account-"] #content select.form-control,
body[class*="account-"] #content textarea.form-control {
  background: #fff !important;
  border: 1.5px solid #ECE7DA !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: #14213D !important;
  width: 100% !important;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  height: auto;
}
body[class*="account-"] #content input.form-control:focus,
body[class*="account-"] #content select.form-control:focus,
body[class*="account-"] #content textarea.form-control:focus {
  outline: none;
  border-color: #2E4BDB !important;
  box-shadow: 0 0 0 3px rgba(46, 75, 219, 0.10) !important;
}
body[class*="account-"] #content textarea.form-control {
  min-height: 120px;
  resize: vertical;
}
body[class*="account-"] #content .text-danger {
  color: #C53824;
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
}
body[class*="account-"] #content .has-error input.form-control,
body[class*="account-"] #content .has-error select.form-control,
body[class*="account-"] #content .has-error textarea.form-control {
  border-color: #DC2626 !important;
  background: #FEE7E2 !important;
}

/* Required asterisk */
body[class*="account-"] #content .required .control-label::after,
body[class*="account-"] #content label.control-label:has(+ .required-mark)::after {
  content: ' *';
  color: #DC2626;
  font-weight: 800;
}

/* Buttons */
body[class*="account-"] #content .buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #ECE7DA;
  flex-wrap: wrap;
}
body[class*="account-"] #content .buttons .pull-right,
body[class*="account-"] #content .buttons .pull-left {
  float: none;
}
body[class*="account-"] #content .buttons .btn,
body[class*="account-"] #content .buttons a.btn,
body[class*="account-"] #content .buttons button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 46px;
  padding: 0 22px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  text-decoration: none !important;
}
body[class*="account-"] #content .btn-primary,
body[class*="account-"] #content button[type="submit"] {
  background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.22) !important;
}
body[class*="account-"] #content .btn-primary:hover,
body[class*="account-"] #content button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.30) !important;
}
body[class*="account-"] #content .btn-default,
body[class*="account-"] #content .btn-info {
  background: #fff !important;
  color: #14213D !important;
  border: 1.5px solid #ECE7DA !important;
}
body[class*="account-"] #content .btn-default:hover,
body[class*="account-"] #content .btn-info:hover {
  border-color: #2E4BDB !important;
  color: #2E4BDB !important;
}
body[class*="account-"] #content .btn-danger {
  background: linear-gradient(180deg, #DC2626 0%, #B91C1C 100%) !important;
  color: #fff !important;
}
body[class*="account-"] #content .btn-success {
  background: linear-gradient(180deg, #FFC93A 0%, #F5B71F 100%) !important;
  color: #15181D !important;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.40) !important;
}
body[class*="account-"] #content .btn-link {
  background: transparent !important;
  color: #2E4BDB !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}

/* ─── Alerts ─── */
body[class*="account-"] #content .alert,
body[class*="account-"] #content > .alert {
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  border-left: 3px solid;
}
body[class*="account-"] #content .alert-success {
  background: linear-gradient(135deg, #DFF5E2 0%, #E8F6EC 100%);
  border-left-color: #1E7F3A;
  color: #1E5C2C;
}
body[class*="account-"] #content .alert-danger {
  background: #FEE7E2;
  border-left-color: #DC2626;
  color: #8E2A1A;
}
body[class*="account-"] #content .alert-warning,
body[class*="account-"] #content .alert-info {
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border-left-color: #FFC93A;
  color: #6B5818;
}

/* ─── LOGIN page (account-login) ─── */
/* Login / Register: let Bootstrap's float-based .row > 2x .col-sm-6 handle
   the two-column layout. We only style the visible wells + their internals. */
body.account-login #content .well,
body.account-register #content .well {
  margin-bottom: 22px;
  min-height: 0;
}
body.account-login #content .well h2,
body.account-register #content .well h2 {
  margin-top: 0;
  font-size: 20px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ECE7DA;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.account-login #content .well p,
body.account-register #content .well p {
  font-size: 13px;
  margin-bottom: 12px;
}
/* Login form field + button block — clean rhythm */
body.account-login #content .well .form-group {
  margin-bottom: 12px;
}
body.account-login #content .well form input.form-control {
  font-size: 14px;
  height: 46px;
}
/* Inline forgot link sits under the password field */
body.account-login #content .well form a[href*="forgotten"] {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #2E4BDB;
}
/* The main Login button sits below the form on its own line */
body.account-login #content .well form input[type="submit"].btn-primary {
  margin-top: 6px;
  height: 46px;
  padding: 0 28px;
  background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.22);
}
/* New-customer "Zaregistrovat se" button — gold accent */
body.account-login #content .well .btn-default,
body.account-register #content .well .btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  background: linear-gradient(180deg, #FFC93A 0%, #F5B71F 100%);
  color: #15181D;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.40);
}
/* The "— nebo —" divider that renders even when Google login is off looks
   stranded; tighten its visual weight. (Real fix would be conditional in twig
   but this hides it when there's no Google button preceding it.) */
body.account-login #content .well .google-login-wrapper:not(:has(.g_id_signin)) > div:last-child {
  display: none;
}

/* ─── ACCOUNT DASHBOARD (body.account-account) ─── */
body.account-account #content .list-unstyled,
body.account-account #content ul[class*="list-"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}
body.account-account #content .list-unstyled li,
body.account-account #content ul[class*="list-"] li {
  margin: 0;
  list-style: none;
}
body.account-account #content .list-unstyled li a,
body.account-account #content ul[class*="list-"] li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  color: #14213D;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  padding-right: 36px;
}
body.account-account #content .list-unstyled li a::before {
  content: '';
  width: 36px;
  height: 36px;
  background: rgba(46, 75, 219, 0.10);
  color: #2E4BDB;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.account-account #content .list-unstyled li a::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #2E4BDB;
  font-weight: 800;
  font-size: 16px;
  transition: transform 0.18s;
}
body.account-account #content .list-unstyled li a:hover {
  transform: translateY(-2px);
  border-color: #2E4BDB;
  box-shadow: 0 6px 18px rgba(46, 75, 219, 0.12);
  color: #2E4BDB;
}
body.account-account #content .list-unstyled li a:hover::after {
  transform: translateY(-50%) translateX(3px);
}
body.account-account #content .list-unstyled li a small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #6B6759;
  margin-top: 2px;
}

/* ─── TABLES (order list, order detail, wishlist, transaction, reward, download) ─── */
body[class*="account-"] #content .table-responsive {
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}
body[class*="account-"] #content .table,
body[class*="account-"] #content table.table-bordered,
body[class*="account-"] #content table.table-striped,
body[class*="account-"] #content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
  margin: 0;
}
body[class*="account-"] #content .table th,
body[class*="account-"] #content table th {
  background: #FAF7EE !important;
  color: #14213D !important;
  font-weight: 800 !important;
  text-align: left;
  padding: 12px 14px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid #ECE7DA !important;
  border-top: 0 !important;
  vertical-align: middle;
}
body[class*="account-"] #content .table td,
body[class*="account-"] #content table td {
  padding: 14px !important;
  border-top: 1px solid #F4EFE3 !important;
  border-bottom: 0 !important;
  color: #4A4439;
  vertical-align: middle;
}
body[class*="account-"] #content .table tbody tr:first-child td,
body[class*="account-"] #content table tbody tr:first-child td {
  border-top: 0 !important;
}
body[class*="account-"] #content .table tbody tr:hover td,
body[class*="account-"] #content table tbody tr:hover td {
  background: #FAF7EE !important;
}
body[class*="account-"] #content .table-striped > tbody > tr:nth-of-type(odd) {
  background: transparent !important;
}

/* Order list specific — status badges */
body.account-order #content .table .text-success,
body.account-order #content .text-success { color: #1E7F3A !important; font-weight: 700; }
body.account-order #content .table .text-warning { color: #B45309 !important; font-weight: 700; }
body.account-order #content .table .text-danger,
body.account-order #content .text-danger { color: #DC2626 !important; font-weight: 700; }
body.account-order #content .table .text-info { color: #2E4BDB !important; font-weight: 700; }

/* Order list / wishlist row action buttons */
body[class*="account-"] #content .table .btn,
body[class*="account-"] #content table .btn {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  margin-right: 4px;
}

/* ─── ORDER DETAIL (account-order with order_id) ─── */
body.account-order #content > .panel,
body.account-order #content > div > .panel {
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  background: #fff;
  margin-bottom: 18px;
  box-shadow: none;
}
body.account-order #content .panel-heading {
  background: #FAF7EE !important;
  border-bottom: 1px solid #ECE7DA !important;
  padding: 14px 18px !important;
  font-size: 13px;
  font-weight: 800;
  color: #14213D;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 12px 12px 0 0;
}
body.account-order #content .panel-body {
  padding: 18px !important;
}

/* ─── WISHLIST product thumb + remove button ─── */
body.account-wishlist #content .table td img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ECE7DA;
}

/* ─── ADDRESS list ─── */
body.account-address #content .table-bordered,
body.account-address #content > div {
  /* Address rows */
}

/* ─── Pagination (order list, download list, etc.) ─── */
body[class*="account-"] #content .pagination {
  display: inline-flex;
  gap: 6px;
  margin: 18px 0 0;
}
body[class*="account-"] #content .pagination > li {
  list-style: none;
}
body[class*="account-"] #content .pagination > li > a,
body[class*="account-"] #content .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  color: #14213D;
  border: 1.5px solid #ECE7DA;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
  float: none;
  transition: all 0.15s;
}
body[class*="account-"] #content .pagination > li > a:hover {
  border-color: #2E4BDB;
  color: #2E4BDB;
}
body[class*="account-"] #content .pagination > li.active > span,
body[class*="account-"] #content .pagination > li.active > a {
  background: #14213D;
  color: #fff;
  border-color: #14213D;
}

/* ─── Newsletter checkboxes / radio groups ─── */
body[class*="account-"] #content .checkbox,
body[class*="account-"] #content .radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 10px;
  margin: 0 0 8px;
  cursor: pointer;
}
body[class*="account-"] #content .checkbox label,
body[class*="account-"] #content .radio label {
  font-size: 13px;
  font-weight: 600;
  color: #14213D;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
body[class*="account-"] #content input[type="checkbox"],
body[class*="account-"] #content input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2E4BDB;
  margin: 0;
  flex-shrink: 0;
}

/* ═══ ACCOUNT — MOBILE (≤720px) ═══ */
@media (max-width: 720px) {
  body[class*="account-"] #content {
    margin: 14px 12px 32px !important;
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  body[class*="account-"] #content h1 {
    font-size: 26px !important;
  }
  body[class*="account-"] #content fieldset {
    padding: 18px !important;
  }
  body[class*="account-"] #content input.form-control,
  body[class*="account-"] #content select.form-control,
  body[class*="account-"] #content textarea.form-control {
    font-size: 16px !important;       /* iOS no-zoom */
    padding: 12px 14px !important;
  }
  body[class*="account-"] #content .buttons {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body[class*="account-"] #content .buttons .btn {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }

  /* Login / Register: Bootstrap floats already stack at xs.
     Just tighten the well padding on mobile. */
  body.account-login #content .well,
  body.account-register #content .well {
    padding: 20px !important;
    margin-bottom: 12px !important;
  }
  /* On mobile, the left-column account nav stacks above the login card */
  body[class*="account-"] #column-left {
    margin-bottom: 0 !important;
    padding-top: 6px !important;
  }
  body[class*="account-"] #column-left .list-group {
    margin-bottom: 14px !important;
  }

  /* Account dashboard cards: single column on phones, 2-col on small phones+ */
  body.account-account #content .list-unstyled,
  body.account-account #content ul[class*="list-"] {
    grid-template-columns: 1fr !important;
  }
  body.account-account #content .list-unstyled li a {
    padding: 14px 16px !important;
    padding-right: 36px !important;
    font-size: 14px !important;
  }

  /* Tables → card-style stack on phones */
  body[class*="account-"] #content .table-responsive {
    border: none;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }
  body[class*="account-"] #content .table th,
  body[class*="account-"] #content table th {
    font-size: 11px !important;
    padding: 10px 12px !important;
  }
  body[class*="account-"] #content .table td,
  body[class*="account-"] #content table td {
    padding: 12px !important;
    font-size: 13px !important;
  }
  body[class*="account-"] #content .table .btn {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  /* Pagination wraps */
  body[class*="account-"] #content .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
  body[class*="account-"] #content .pagination > li > a {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

/* z-success-grid--solo: single column when there's no order (logout, password change, etc.) */
.z-success-grid--solo {
  grid-template-columns: 1fr !important;
}
.z-success-grid--solo .z-success-card--message {
  max-width: 760px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD — Znamky2026 design (2026-06-10)
   New template at catalog/view/theme/Znamky2026/template/account/account.twig
   replaces OC default's flat link list with grouped icon-card sections.
   ═══════════════════════════════════════════════════════════════════════════ */

body.account-account #content {
  padding: 0 !important;
}

/* Override the global account container so the dashboard goes full-width
   (the cards provide the layout, no need for a centered 1100px column). */
body.account-account #account-account.z-acc-page {
  max-width: 1180px;
  margin: 20px auto 56px;
  padding: 0 14px;
}

/* Success banner (after edit/password change/etc.) */
.z-acc-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #DFF5E2 0%, #E8F6EC 100%);
  color: #1E5C2C;
  border-left: 3px solid #1E7F3A;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 18px;
  animation: z-fade-in 0.3s ease;
}
.z-acc-success svg {
  flex-shrink: 0;
  color: #1E7F3A;
}

/* ─── HERO ─── */
.z-acc-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #14213D 0%, #1A2B4F 50%, #2640C2 100%);
  border-radius: 14px;
  color: #fff;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(20, 33, 61, 0.20);
}
.z-acc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 360px 240px at 92% 30%, rgba(255, 201, 58, 0.20), transparent 70%);
  pointer-events: none;
}
.z-acc-hero__icon {
  width: 64px; height: 64px;
  background: rgba(255, 201, 58, 0.18);
  border: 2px solid #FFC93A;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFC93A;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(255, 201, 58, 0.25);
}
.z-acc-hero__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.z-acc-hero__eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #FFC93A;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.z-acc-hero__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  line-height: 1.15;
}
.z-acc-hero__title span {
  color: #FFC93A;
  font-weight: 800;
}
.z-acc-hero__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  letter-spacing: -0.01em;
}
.z-acc-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #FFC93A 0%, #F5B71F 100%);
  color: #15181D;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(255, 201, 58, 0.40), inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  z-index: 1;
}
.z-acc-hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 201, 58, 0.50), inset 0 -2px 0 rgba(0,0,0,0.08);
  color: #15181D;
}

/* ─── SECTIONS ─── */
.z-acc-section {
  margin-bottom: 28px;
}
.z-acc-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.z-acc-section__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.z-acc-section__icon--blue   { background: rgba(46, 75, 219, 0.10);   color: #2E4BDB; }
.z-acc-section__icon--yellow { background: rgba(255, 201, 58, 0.18);  color: #6B5818; }
.z-acc-section__icon--green  { background: rgba(30, 127, 58, 0.12);   color: #1E7F3A; }
.z-acc-section__icon--gold   { background: linear-gradient(135deg, #FFC93A, #F5B71F); color: #15181D; }
.z-acc-section__title {
  font-size: 20px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}

/* ─── CARD GRID ─── */
.z-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.z-acc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ECE7DA;
  border-radius: 14px;
  text-decoration: none !important;
  position: relative;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.z-acc-card:hover {
  transform: translateY(-2px);
  border-color: #2E4BDB;
  box-shadow: 0 8px 22px rgba(46, 75, 219, 0.12);
  color: inherit;
}
.z-acc-card:hover .z-acc-card__title { color: #2E4BDB; }
.z-acc-card:hover .z-acc-card__arrow { transform: translateX(3px); color: #2E4BDB; }

.z-acc-card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.z-acc-card:hover .z-acc-card__icon { transform: scale(1.06); }

.z-acc-card__icon--blue   { background: rgba(46, 75, 219, 0.10);   color: #2E4BDB; }
.z-acc-card__icon--green  { background: rgba(30, 127, 58, 0.12);   color: #1E7F3A; }
.z-acc-card__icon--purple { background: rgba(120, 72, 219, 0.12);  color: #7848DB; }
.z-acc-card__icon--gold   { background: rgba(255, 201, 58, 0.20);  color: #B45309; }
.z-acc-card__icon--pink   { background: rgba(232, 85, 109, 0.12);  color: #E8556D; }
.z-acc-card__icon--red    { background: rgba(220, 38, 38, 0.10);   color: #DC2626; }
.z-acc-card__icon--gray   { background: rgba(107, 103, 89, 0.12);  color: #6B6759; }

.z-acc-card__body {
  flex: 1;
  min-width: 0;
}
.z-acc-card__title {
  font-size: 14px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
  line-height: 1.2;
  transition: color 0.15s;
}
.z-acc-card__desc {
  font-size: 13px;
  color: #6B6759;
  font-weight: 500;
  line-height: 1.35;
}
.z-acc-card__arrow {
  color: #6B6759;
  flex-shrink: 0;
  transition: transform 0.18s, color 0.15s;
}

/* ─── Affiliate CTA (when user has no affiliate account yet) ─── */
.z-acc-affiliate-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border: 1px solid #F0D580;
  border-radius: 14px;
  margin-bottom: 28px;
}
.z-acc-affiliate-cta__icon {
  width: 44px; height: 44px;
  background: #FFC93A;
  color: #15181D;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.z-acc-affiliate-cta__body { flex: 1; min-width: 0; }
.z-acc-affiliate-cta__title {
  font-size: 16px;
  font-weight: 800;
  color: #14213D;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.z-acc-affiliate-cta__desc {
  font-size: 13px;
  color: #6B5818;
}
.z-acc-affiliate-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #14213D 0%, #1A2B4F 100%);
  color: #fff !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.z-acc-affiliate-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.30);
}

/* ─── MOBILE ─── */
@media (max-width: 720px) {
  body.account-account #account-account.z-acc-page {
    margin: 12px 12px 32px !important;
    padding: 0 !important;
  }

  /* Hero stacks vertically */
  .z-acc-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
    margin-bottom: 18px;
    border-radius: 14px;
  }
  .z-acc-hero__icon { width: 52px; height: 52px; }
  .z-acc-hero__title { font-size: 26px; }
  .z-acc-hero__sub { font-size: 13px; }
  .z-acc-hero__cta {
    align-self: stretch;
    justify-content: center;
    padding: 12px 18px;
  }

  /* Single-column card grid */
  .z-acc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .z-acc-card {
    padding: 14px 16px;
    border-radius: 14px;
  }
  .z-acc-card__icon { width: 38px; height: 38px; }
  .z-acc-card__title { font-size: 14px; }
  .z-acc-card__desc { font-size: 11px; }

  /* Section heads */
  .z-acc-section { margin-bottom: 22px; }
  .z-acc-section__title { font-size: 16px; }

  /* Affiliate CTA stacks */
  .z-acc-affiliate-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }
  .z-acc-affiliate-cta__btn {
    text-align: center;
    justify-content: center;
  }
}

/* Tablet: 2-column card grid */
@media (max-width: 980px) and (min-width: 721px) {
  .z-acc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGES — information/blogger + information/blogger/blogs (2026-06-11)
   Inherits the broader body[class*="information-"] base styling above.
   Adds post-card grid + single-post article styling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Blog list page — post grid */
body.information-blogger-blogs #content {
  padding-top: 14px;
  padding-bottom: 40px;
}
body.information-blogger-blogs #content > h1 {
  margin-bottom: 24px;
}

/* Blog post grid container — OC's webdigify_blogger uses a series of
   article cards inside a row/col grid. Convert to clean grid layout. */
body.information-blogger-blogs #content .blogger-list,
body.information-blogger-blogs #content .blog-list,
body.information-blogger-blogs #content .row + .row:has(.blogger-item),
body.information-blogger-blogs #content > .blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}

/* Post card */
body.information-blogger-blogs #content .blog-list-item,
body.information-blogger-blogs #content .blogger-item,
body.information-blogger-blogs #content article {
  background: #fff;
  border: 1px solid var(--z-border, #E5E1D8);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
}
body.information-blogger-blogs #content .blog-list-item:hover,
body.information-blogger-blogs #content .blogger-item:hover,
body.information-blogger-blogs #content article:hover {
  transform: translateY(-3px);
  border-color: var(--z-primary, #2E4BDB);
  box-shadow: 0 12px 24px rgba(46, 75, 219, 0.12);
}

body.information-blogger-blogs #content .blog-list-item img,
body.information-blogger-blogs #content .blogger-item img,
body.information-blogger-blogs #content article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

body.information-blogger-blogs #content .blog-list-item .blog-body,
body.information-blogger-blogs #content .blogger-item .blog-body,
body.information-blogger-blogs #content article > div:not(:has(img)) {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.information-blogger-blogs #content .blog-list-item h2,
body.information-blogger-blogs #content .blog-list-item h3,
body.information-blogger-blogs #content .blogger-item h2,
body.information-blogger-blogs #content .blogger-item h3,
body.information-blogger-blogs #content article h2,
body.information-blogger-blogs #content article h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--z-ink, #15181D);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 0;
  padding: 0;
}
body.information-blogger-blogs #content .blog-list-item h2 a,
body.information-blogger-blogs #content .blog-list-item h3 a,
body.information-blogger-blogs #content .blogger-item h2 a,
body.information-blogger-blogs #content article h2 a,
body.information-blogger-blogs #content article h3 a {
  color: var(--z-ink, #15181D);
}
body.information-blogger-blogs #content article h2 a:hover {
  color: var(--z-primary, #2E4BDB);
}

/* Blog meta — date, author, comments */
body.information-blogger-blogs #content .blog-meta,
body.information-blogger-blogs #content .blogger-meta,
body.information-blogger-blogs #content .date,
body.information-blogger-blogs #content article > div > small {
  font-size: 11px;
  font-weight: 600;
  color: var(--z-ink-3, #6B7280);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Blog excerpt */
body.information-blogger-blogs #content article p,
body.information-blogger-blogs #content .blog-list-item p,
body.information-blogger-blogs #content .blogger-item p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--z-ink-2, #3C414B);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* "Read more" link */
body.information-blogger-blogs #content article a.btn,
body.information-blogger-blogs #content article a.read-more,
body.information-blogger-blogs #content .blog-list-item .btn-info,
body.information-blogger-blogs #content .blogger-item .btn-info {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--z-primary, #2E4BDB);
  font-size: 13px;
  font-weight: 700;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  border-radius: 0;
  height: auto;
}
body.information-blogger-blogs #content article a.read-more::after,
body.information-blogger-blogs #content article a.btn::after {
  content: '→';
  transition: transform 0.15s;
}
body.information-blogger-blogs #content article a.read-more:hover::after {
  transform: translateX(3px);
}

/* ─── Single blog post (information-blogger) ─── */
body.information-blogger #content {
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 16px 60px;
}
body.information-blogger #content > h1,
body.information-blogger #content article h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--z-ink, #15181D);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  padding-bottom: 0;
  border-bottom: 0;
}
body.information-blogger #content > .blog-meta,
body.information-blogger #content article > .meta,
body.information-blogger #content article > div > small:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--z-ink-3, #6B7280);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--z-border, #E5E1D8);
}

/* Featured image */
body.information-blogger #content img:first-of-type {
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 0 0 26px;
}

/* Body content */
body.information-blogger #content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--z-ink-2, #3C414B);
  margin: 0 0 18px;
}
body.information-blogger #content h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--z-ink, #15181D);
  letter-spacing: -0.015em;
  margin: 30px 0 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
body.information-blogger #content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--z-ink, #15181D);
  margin: 24px 0 10px;
}
body.information-blogger #content blockquote {
  background: var(--z-canvas-warm, #FAF8F3);
  border-left: 3px solid var(--z-yellow, #FFC93A);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--z-ink-2, #3C414B);
  margin: 22px 0;
}
body.information-blogger #content img:not(:first-of-type) {
  border-radius: 14px;
  margin: 18px 0;
}

/* Comments section — clean white card */
body.information-blogger #content .comment,
body.information-blogger #content .comments-section,
body.information-blogger #content #comment {
  background: #fff;
  border: 1px solid var(--z-border, #E5E1D8);
  border-radius: 14px;
  padding: 24px;
  margin-top: 30px;
}

/* ═══ BLOG — MOBILE (≤720px) ═══ */
@media (max-width: 720px) {
  body.information-blogger-blogs #content .blogger-list,
  body.information-blogger-blogs #content .blog-list,
  body.information-blogger-blogs #content > .blog-posts,
  body.information-blogger-blogs #content article {
    grid-template-columns: 1fr !important;
  }
  body.information-blogger-blogs #content .blogger-item img,
  body.information-blogger-blogs #content article img {
    height: 180px !important;
  }
  body.information-blogger #content {
    padding: 18px 14px 40px !important;
  }
  body.information-blogger #content > h1,
  body.information-blogger #content article h1 {
    font-size: 26px !important;
  }
  body.information-blogger #content p { font-size: 14px !important; }
  body.information-blogger #content h2 { font-size: 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BREADCRUMB UNIVERSAL — matches shared.jsx Breadcrumb design (2026-06-11)
   Targets BOTH .z-breadcrumb (new) and ul.breadcrumb (legacy OC templates).
   Tokens from design: bg #FAF8F3, border #EEEAE0, padding 14px 32px,
   font 12.5px/400, color #6B7280, current #15181D/600, sep '/' @ 0.4.
   Appended at end so it wins cascade over the earlier nav.z-breadcrumb override.
   ───────────────────────────────────────────────────────────────────────── */
nav.z-breadcrumb,
body[class] ul.breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  background: #FAF8F3 !important;
  border-bottom: 1px solid #EEEAE0 !important;
  border-top: 0 !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
  font-family: var(--z-font-sans) !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 0 !important;
  width: auto !important;
}

/* Inner container for new Znamky2026 pattern */
nav.z-breadcrumb .z-breadcrumb__inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1320px;
  width: 100%;
}

/* Decorative home icon removed — it sat on the non-clickable container.
   The real <i class="fa fa-home"> inside the <a> is shown instead (clickable). */
nav.z-breadcrumb .z-breadcrumb__inner::before,
body[class] ul.breadcrumb::before {
  content: none !important;
}
/* Show the template-rendered home icon INSIDE the link so the link has size + is clickable */
nav.z-breadcrumb a > i.fa-home,
body[class] ul.breadcrumb a > i.fa-home {
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit;
}

/* keep the breadcrumb bar above any following section (hero) so links stay clickable */
nav.z-breadcrumb { position: relative; z-index: 5; }
/* Links */
nav.z-breadcrumb a,
body[class] ul.breadcrumb a,
body[class] ul.breadcrumb li > a {
  color: #6B7280 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  display: inline-flex;
  align-items: center;
  border: 0 !important;
  background: transparent !important;
  padding: 3px 5px !important;
  margin: -3px -1px !important;
  border-radius: 6px;
  transition: color 0.15s, background 0.12s;
  letter-spacing: -0.005em;
}
nav.z-breadcrumb a:hover { background: rgba(46,75,219,0.06); }
nav.z-breadcrumb a:hover,
body[class] ul.breadcrumb a:hover,
body[class] ul.breadcrumb li > a:hover {
  color: var(--z-primary, #2E4BDB) !important;
}

/* Separator — design uses '/' at 0.4 opacity */
nav.z-breadcrumb .z-breadcrumb__sep {
  color: #6B7280 !important;
  opacity: 0.4 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Legacy ul.breadcrumb — separator inserted via :before pseudo on each li (except first) */
body[class] ul.breadcrumb > li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  color: #6B7280 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
body[class] ul.breadcrumb > li + li::before {
  content: '/';
  color: #6B7280;
  opacity: 0.4;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

/* Current (last) item — dark ink, 600 weight */
nav.z-breadcrumb .z-breadcrumb__current,
body[class] ul.breadcrumb > li:last-child,
body[class] ul.breadcrumb > li.active {
  color: #15181D !important;
  font-weight: 600 !important;
}
body[class] ul.breadcrumb > li:last-child > a,
body[class] ul.breadcrumb > li.active > a {
  color: #15181D !important;
  font-weight: 600 !important;
  pointer-events: none;
  cursor: default;
}

/* ─── Mobile (≤720px): tighter padding, horizontal scroll for long trails ─── */
@media (max-width: 720px) {
  nav.z-breadcrumb,
  body[class] ul.breadcrumb {
    padding: 10px 14px !important;
    font-size: 11px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  nav.z-breadcrumb::-webkit-scrollbar,
  body[class] ul.breadcrumb::-webkit-scrollbar { display: none; }
  nav.z-breadcrumb .z-breadcrumb__inner {
    padding: 0 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  /* Last (current) item — let it shrink with ellipsis on tiny screens */
  body[class] ul.breadcrumb > li:last-child,
  nav.z-breadcrumb .z-breadcrumb__current {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION PAGE — Znamky2026 design alignment (2026-06-11)
   The existing collection.twig (3506 lines) ships with its own --c-* token
   system. Rather than rewriting 3500 lines, we remap those tokens to
   Znamky2026 values via a body-scoped :root override. Inter font is global.
   ═══════════════════════════════════════════════════════════════════════════ */
body.account-collection,
body[class*="collection"] {
  /* Remap the template's --c-* tokens to Znamky2026 design palette */
  --c-bg:               #F5F3EF !important;     /* was #f5f6f8 */
  --c-surface:          #FFFFFF !important;
  --c-border:           #E5E1D8 !important;     /* warmer cream border */
  --c-border-light:     #EEEAE0 !important;
  --c-text:             #15181D !important;     /* design ink */
  --c-text-secondary:   #3C414B !important;
  --c-text-muted:       #6B7280 !important;
  --c-accent:           #0F7A3C !important;     /* design success green */
  --c-accent-hover:     #0C5E2D !important;
  --c-accent-bg:        #E6F4EC !important;     /* design success-bg */
  --c-accent-border:    #C8E6D4 !important;
  --c-warning-bg:       #FEF3C7 !important;     /* design warn-bg */
  --c-warning-border:   #FDE68A !important;     /* design warn-border */
  --c-warning-text:     #B45309 !important;     /* design warn */
  --c-danger:           #B91C1C !important;     /* design danger */
  --c-radius:           10px !important;        /* slightly more pronounced */
  --c-radius-sm:        7px !important;
  background: #F5F3EF;
}

/* Page title — match Znamky2026 typography */
body.account-collection .page-title,
body[class*="collection"] .page-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #15181D !important;
  letter-spacing: -0.6px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
}
body.account-collection .page-title i,
body[class*="collection"] .page-title i {
  width: 36px; height: 36px;
  background: rgba(15, 122, 60, 0.12);
  color: #0F7A3C;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  margin-right: 0 !important;
}

/* Stats / usage chips at top */
body.account-collection .collection-stats,
body[class*="collection"] .collection-stats {
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border: 1px solid #F0D580;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}
body.account-collection .stat-card,
body[class*="collection"] .stat-card {
  background: #fff !important;
  border: 1px solid #E5E1D8 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.04) !important;
}
body.account-collection .stat-card .stat-value,
body[class*="collection"] .stat-card .stat-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #15181D !important;
  font-variant-numeric: tabular-nums;
}
body.account-collection .stat-card .stat-label,
body[class*="collection"] .stat-card .stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Activate Znamky+ CTA */
body.account-collection a.btn.btn-success[href*="znamky"],
body.account-collection button.btn-success[href*="znamky"],
body[class*="collection"] [class*="btn-success"][href*="znamky"] {
  background: linear-gradient(180deg, #0F7A3C 0%, #0C5E2D 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 14px rgba(15, 122, 60, 0.30) !important;
}

/* Tabs row — clean underline-on-active */
body.account-collection .collection-tabs .nav-tabs,
body[class*="collection"] .collection-tabs .nav-tabs {
  border-bottom: 1px solid #E5E1D8 !important;
  display: flex;
  gap: 4px;
  padding: 0;
}
body.account-collection .collection-tabs .nav-tabs > li > a,
body[class*="collection"] .collection-tabs .nav-tabs > li > a {
  color: #6B7280 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border-bottom: 2px solid transparent !important;
  letter-spacing: -0.01em;
}
body.account-collection .collection-tabs .nav-tabs > li > a:hover,
body[class*="collection"] .collection-tabs .nav-tabs > li > a:hover {
  color: #15181D !important;
  border-bottom-color: #C8CFD8 !important;
}
body.account-collection .collection-tabs .nav-tabs > li.active > a,
body[class*="collection"] .collection-tabs .nav-tabs > li.active > a {
  color: #2E4BDB !important;
  border-bottom-color: #2E4BDB !important;
  font-weight: 800 !important;
}

/* Top stat cards (Odhadovaná hodnota / Pořizovací cena / Zhodnocení) */
body.account-collection .collection-summary,
body[class*="collection"] .collection-summary,
body[class*="collection"] .collection-financials {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
body[class*="collection"] .collection-financials > div,
body[class*="collection"] .financial-card {
  background: #fff !important;
  border: 1px solid #E5E1D8 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.04);
}

/* Section lists (folders & groups) */
body.account-collection .section-list .list-group,
body[class*="collection"] .section-list .list-group {
  border: 1px solid #E5E1D8 !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.04);
}
body.account-collection .section-list .list-group-item,
body[class*="collection"] .section-list .list-group-item {
  font-size: 13px !important;
  padding: 12px 16px !important;
  color: #15181D !important;
  border-bottom: 1px solid #EEEAE0 !important;
  background: transparent !important;
}
body.account-collection .section-list .list-group-item:hover,
body[class*="collection"] .section-list .list-group-item:hover {
  background: #F5F3EF !important;
  color: #2E4BDB !important;
}
body.account-collection .section-list .list-group-item.active,
body[class*="collection"] .section-list .list-group-item.active {
  background: linear-gradient(135deg, #14213D 0%, #1A2B4F 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700;
}

/* Action buttons row */
body[class*="collection"] .collection-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
body[class*="collection"] .btn-add-item,
body[class*="collection"] button[class*="add-item"],
body[class*="collection"] .btn-primary {
  background: linear-gradient(180deg, #0F7A3C 0%, #0C5E2D 100%) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 14px rgba(15, 122, 60, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body[class*="collection"] .btn-add-ai {
  background: #fff !important;
  border: 1.5px solid #0F7A3C !important;
  color: #0F7A3C !important;
}

/* Items table */
body[class*="collection"] .collection-items table,
body[class*="collection"] .table-items {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #E5E1D8;
  border-radius: 14px;
  overflow: hidden;
}
body[class*="collection"] .collection-items thead th,
body[class*="collection"] .table-items thead th {
  background: #FAF8F3 !important;
  color: #6B7280 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #E5E1D8 !important;
}
body[class*="collection"] .collection-items tbody td,
body[class*="collection"] .table-items tbody td {
  padding: 14px !important;
  border-top: 1px solid #EEEAE0 !important;
  color: #3C414B !important;
  vertical-align: middle;
  font-size: 13px;
}
body[class*="collection"] .collection-items tbody tr:hover td,
body[class*="collection"] .table-items tbody tr:hover td {
  background: #FAF8F3 !important;
}

/* Status chips in table */
body[class*="collection"] .status-chip,
body[class*="collection"] [class*="status-"] {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Sidebar nav (re-use account-nav styling) — when collection has the left column */
body.account-collection #column-left .list-group {
  background: #fff;
  border: 1px solid #E5E1D8;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.05);
  overflow: hidden;
  padding: 6px;
}

/* Mobile sweep */
@media (max-width: 720px) {
  body[class*="collection"] .collection-stats {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }
  body[class*="collection"] .stat-card {
    padding: 10px 12px !important;
  }
  body[class*="collection"] .stat-card .stat-value { font-size: 16px !important; }
  body[class*="collection"] .collection-financials {
    grid-template-columns: 1fr !important;
  }
  body[class*="collection"] .collection-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  body[class*="collection"] .collection-tabs .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  body[class*="collection"] .collection-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  body[class*="collection"] .collection-tabs .nav-tabs > li > a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  body[class*="collection"] .collection-items {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHYBENKA / UPLOAD CHYBENKA + Other uncategorized account pages
   ═══════════════════════════════════════════════════════════════════════════ */
body[class*="uploadchybenka"],
body[class*="upload"] {
  background: #F5F3EF;
}
body[class*="uploadchybenka"] #content h1,
body[class*="upload"] #content h1 {
  font-size: 26px;
  font-weight: 800;
  color: #15181D;
  letter-spacing: -0.6px;
}
body[class*="uploadchybenka"] #content .well,
body[class*="upload"] #content .well {
  background: #fff;
  border: 1px solid #E5E1D8;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 4px 18px rgba(20, 33, 61, 0.05);
}
body[class*="uploadchybenka"] #content .alert-success {
  background: linear-gradient(135deg, #E6F4EC 0%, #DFF5E2 100%);
  border-left: 3px solid #0F7A3C;
  color: #0C5E2D;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
}
body[class*="uploadchybenka"] #content .alert-info {
  background: linear-gradient(135deg, #FFF8E6 0%, #FFEFC2 100%);
  border-left: 3px solid #FFC93A;
  color: #B45309;
  padding: 14px 18px;
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL DESKTOP + MOBILE QA PASS — 2026-06-11 (co29)
   Repair: kill the legacy <header> + companion mobile-only elements on
   ALL viewports (was only hidden on ≤720px). Plus a few polish fixes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide legacy header markup at every viewport — the new .z-header is the
   only header anywhere on the site. */
body > header:not(.z-header) {
  display: none !important;
}
header > nav.header_nav,
nav.header_nav,
.header_nav,
.mobile-header-controls,
.mobile-lang-dropdown,
.mobile-login,
.mobile-left,
.mobile-right,
.mobile-lang-curr,
.mobile-search-bar,
.mobile-cart-panel,
.mobile-hamburger,
.mobile-search-toggle,
.mobile-cart-btn,
.menu-overlay,
.cart-overlay,
.menu-close,
.cart-close {
  display: none !important;
}

/* Defensive: empty .content-top-breadcum (Bootstrap shell from default theme) */
.content-top-breadcum,
.content-top-breadcum > .container,
.content-top-breadcum:empty {
  display: none !important;
}

/* Defensive: an empty .container immediately after .z-header */
header.z-header + div.container:empty,
header.z-header + section:empty,
.z-header ~ div.container:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure no body double-padding from legacy bootstrap padding-top */
body.common-home,
body.common-home main,
body.common-home > .container:first-of-type { padding-top: 0 !important; }

/* Tighten desktop spacing between header and first content section so the
   transition feels intentional (matches design's compact rhythm). */
@media (min-width: 721px) {
  body > .z-header + section:not([class*="hero"]):first-of-type,
  body > .z-header + nav.z-breadcrumb { margin-top: 0 !important; }
}

/* ─── Form input baseline: ensure no native browser styling leaks in ─── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family: var(--z-font-sans, 'Inter', sans-serif);
}

/* ─── Buttons: ensure Inter applies everywhere ─── */
button,
.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--z-font-sans, 'Inter', sans-serif);
}

/* ─── Tabular numerals on all prices / counts (consistent currency rendering) ─── */
.z-product-pricebox__current,
.z-auc-pricebox__current,
.z-summary__total-val,
.z-cart-line__total,
.z-product-card__price,
.z-pc__price,
.z-acc-card__title + .z-acc-card__desc,
[id^="current-bid-"],
[id^="next-bid-"] {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON COLOR ALIGNMENT — match design spec (2026-06-11 co30)
   Design primary buttons use FLAT bright blue #2E4BDB with subtle inset
   shadow — NOT a navy gradient. Restyle every place where my earlier rules
   set linear-gradient(180deg, #14213D 0%, #1A2B4F 100%) for primary buttons.
   Design tokens:
     primary: #2E4BDB
     primaryHover: #2540C2
     primaryDark: #1E33A8 (used in box-shadow inset bottom)
     ink: #15181D (used for secondary "dark" buttons like "Vytvořit účet")
     yellow: #FFC93A (used for cart pill + yellow CTAs)
     success: #0F7A3C (used for green action buttons)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Account pages — all primary buttons use bright blue, NOT navy ─── */
body[class*="account-"] #content .btn-primary,
body[class*="account-"] #content button[type="submit"],
body[class*="account-"] #content input[type="submit"].btn-primary,
body[class*="account-"] #content .well form input[type="submit"].btn-primary,
body.account-login #content .well form input[type="submit"].btn-primary,
body.account-register #content .well form input[type="submit"].btn-primary {
  background: #2E4BDB !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-family: var(--z-font-sans, 'Inter', sans-serif) !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25) !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
  cursor: pointer !important;
  height: auto !important;
}
body[class*="account-"] #content .btn-primary:hover,
body[class*="account-"] #content button[type="submit"]:hover,
body[class*="account-"] #content input[type="submit"].btn-primary:hover {
  background: #2540C2 !important;
  box-shadow: 0 1px 0 #1E33A8, 0 6px 16px rgba(46, 75, 219, 0.35) !important;
  transform: translateY(-1px);
}

/* ─── New-customer "Vytvořit účet zdarma" / "Zaregistrovat se" dark-ink button ─── */
body.account-login #content .well .btn-default,
body.account-register #content .well .btn-default {
  background: #15181D !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-family: var(--z-font-sans, 'Inter', sans-serif) !important;
  box-shadow: 0 4px 14px rgba(21, 24, 29, 0.20) !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
  margin-top: 12px !important;
}
body.account-login #content .well .btn-default:hover,
body.account-register #content .well .btn-default:hover {
  background: #3C414B !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(21, 24, 29, 0.28) !important;
}

/* ─── Affiliate CTA + dashboard-edit-profile button — should use bright blue ─── */
.z-acc-affiliate-cta__btn {
  background: #2E4BDB !important;
  background-image: none !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25) !important;
}
.z-acc-affiliate-cta__btn:hover {
  background: #2540C2 !important;
  box-shadow: 0 1px 0 #1E33A8, 0 6px 16px rgba(46, 75, 219, 0.35) !important;
}

/* ─── Checkout "Pokračovat na dopravu" / step-nav confirm buttons ─── */
.z-co-btn--confirm,
button.z-co-btn--confirm,
.z-co-step-nav .z-co-btn--confirm {
  background: #2E4BDB !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25) !important;
  font-family: var(--z-font-sans, 'Inter', sans-serif) !important;
}
.z-co-btn--confirm:hover {
  background: #2540C2 !important;
  box-shadow: 0 1px 0 #1E33A8, 0 6px 16px rgba(46, 75, 219, 0.35) !important;
}

/* ─── Auction page bid submit button — uses bright blue ─── */
.z-auc-bid__submit,
button.z-auc-bid__submit,
button#place-bid-btn {
  background: #2E4BDB !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 14px rgba(46, 75, 219, 0.30), inset 0 -2px 0 rgba(0,0,0,0.10) !important;
}
.z-auc-bid__submit:hover,
button#place-bid-btn:hover {
  background: #2540C2 !important;
}

/* ─── Success page "Zaplatit kartou" + similar primary buttons ─── */
.z-success-payment__cta,
.z-success-payment button.btn-primary {
  background: #2E4BDB !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.30) !important;
}

/* ─── "Pokračovat v nákupu" success CTA — design uses white/outlined ─── */
.z-success-cta__primary {
  background: #fff !important;
  background-image: none !important;
  color: #15181D !important;
  border: 1.5px solid #D1CCC0 !important;
  border-radius: 10px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.z-success-cta__primary:hover {
  border-color: #2E4BDB !important;
  color: #2E4BDB !important;
  background: #fff !important;
  transform: translateY(-1px);
}

/* ─── Cart-empty CTA (matches secondary outline) ─── */
.z-cart-empty__cta {
  background: #2E4BDB !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25) !important;
}

/* ─── Promo "Uplatnit" coupon button (cart page) — design = white with ink border ─── */
.z-cart-promo__btn {
  background: #fff !important;
  color: #15181D !important;
  border: 1.5px solid #15181D !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.z-cart-promo__btn:hover {
  background: #15181D !important;
  color: #fff !important;
}

/* ─── Generic .btn-primary fallback (covers any pages I haven't touched yet) ─── */
.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary:not(.z-co-btn--confirm):not(.z-acc-affiliate-cta__btn) {
  background: #2E4BDB;
  background-image: none;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25);
  font-family: var(--z-font-sans, 'Inter', sans-serif);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: #2540C2;
  box-shadow: 0 1px 0 #1E33A8, 0 6px 16px rgba(46, 75, 219, 0.35);
}

/* ─── z-btn--primary (theme base) — confirm using flat color ─── */
.z-btn--primary,
a.z-btn--primary,
button.z-btn--primary {
  background: #2E4BDB;
  background-image: none;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 #1E33A8, 0 4px 12px rgba(46, 75, 219, 0.25);
}
.z-btn--primary:hover {
  background: #2540C2;
  box-shadow: 0 1px 0 #1E33A8, 0 6px 16px rgba(46, 75, 219, 0.35);
}

/* ─── Force inputs and any forms to use Inter (not default Roboto/Arial) ─── */
.z-co-btn,
.z-btn,
button.btn,
a.btn,
.btn-default {
  font-family: var(--z-font-sans, 'Inter', sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN ALIGNMENT POLISH — 2026-06-11 (co31)
   1. Bigger desktop logo per design (was 38px → 52px)
   2. Hide extras that aren't in the design (bottom-nav on desktop)
   3. Tighten header padding to match design spec (14px 32px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Desktop logo: bigger per design (ZnamkyLogo size=1.4) ─── */
@media (min-width: 721px) {
  html body .z-header {
    padding: 14px 32px !important;
    gap: 24px;
    min-height: 80px !important;
    background: #0F1216 !important;     /* design header bg */
  }
  html body .z-header__logo {
    height: 52px !important;
    flex-shrink: 0;
    max-width: none !important;
  }
  html body .z-header__logo img {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain;
    filter: none !important;             /* design logo IS the wordmark on dark — no invert */
    display: block;
  }
  /* Make the header nav text properly weighted per design (fontSize: 15, fontWeight: 600) */
  html body .z-header__nav,
  html body .z-header__nav > * {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
  }
  html body .z-header__nav .z-nav-link {
    color: #fff !important;
  }
  /* Header search bar — 320px wide white pill with subtle border (design spec) */
  html body .z-header__search {
    background: #fff !important;
    border-radius: 6px !important;
    padding: 8px 12px 8px 14px !important;
    width: 320px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) !important;
  }
  html body .z-header__search input[type="text"] {
    font-size: 13px !important;
    font-family: var(--z-font-sans, 'Inter', sans-serif) !important;
    color: var(--z-ink, #15181D) !important;
  }
  html body .z-header__search kbd {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #6B7280 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    padding: 1px 5px !important;
  }
  /* Cart pill — design uses yellow with 10px radius */
  html body a.z-btn--cart {
    background: #FFC93A !important;
    color: #15181D !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html body a.z-btn--cart .z-cart-total {
    color: #15181D !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }
}

/* ─── Bottom nav: MOBILE ONLY (was leaking onto desktop in some browsers) ─── */
@media (min-width: 721px) {
  .z-bottom-nav,
  nav.z-bottom-nav,
  #mobile-bottom-nav {
    display: none !important;
  }
  body { padding-bottom: 0 !important; }
  body.product-product { padding-bottom: 0 !important; }
}

/* ─── Topstrip: keep on desktop (design has it), but tighten to design spec ─── */
@media (min-width: 721px) {
  html body .z-topstrip {
    display: flex !important;
    background: #0F1216 !important;
    color: #9AA0A8 !important;
    font-size: 11px !important;
    padding: 7px 32px !important;
    gap: 18px !important;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-family: var(--z-font-sans, 'Inter', sans-serif) !important;
  }
  html body .z-topstrip .z-topstrip__bank {
    font-family: 'JetBrains Mono', monospace !important;
    color: #fff !important;
  }
  html body .z-topstrip__divider {
    opacity: 0.3;
  }
  html body .z-topstrip__free-ship strong {
    color: #fff !important;
  }
}

/* ─── Mobile logo SMALLER than desktop (was 44px → 36px) ─── */
@media (max-width: 720px) {
  html body .z-header__logo {
    height: 36px !important;
  }
  html body .z-header__logo img {
    height: 36px !important;
    max-height: 36px !important;
    max-width: 140px !important;
  }
  html body .z-header {
    min-height: 56px !important;
    padding: 8px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL QA FIXES from Chrome screenshots — 2026-06-11 (co32)
   1. Hide the legacy "Informace" column-left module on account + checkout
      pages — not in the design ("no additional blocks").
   2. Full-bleed breadcrumb bar on legacy .container pages (was constrained
      to the centered container; design shows an edge-to-edge bar).
   3. Restyle the OC default empty-cart continue button (covered by template
      fix; this is a fallback).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — kill the Informace box (and any .box module) in the left column on
   account + checkout pages. Keep ONLY the account nav .list-group that is a
   DIRECT child wrapper (account links), which has no .box wrapper. */
body[class*="account-"] #column-left .box,
body[class*="checkout-"] #column-left .box,
body[class*="checkout-"] #column-left,
body[class*="information-"] #column-left .box {
  display: none !important;
}

/* 2 — full-bleed breadcrumb: break out of the centered .container */
body[class] ul.breadcrumb {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 720px) {
  body[class] ul.breadcrumb {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 3 — fallback: OC default empty-cart "Pokračovat" pull-right button row */
body[class*="checkout-"] #content .buttons .pull-right .btn-primary,
body[class*="checkout-"] #content .buttons .btn-primary {
  float: none;
}

/* co32b — kill the lavender wrapper background behind the account left nav */
body[class*="account-"] #column-left,
body[class*="account-"] aside#column-left,
body[class*="information-"] #column-left {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CATEGORY HERO — FINAL (co34). Resolves the specificity war between
   the navy max-specificity block (~L5080: html body section.z-cat-hero) and
   the cream compact pass (~L9183: html body .z-cat-hero). Design reference
   (category-page.jsx) uses the DARK navy hero — keep it, but compact, with
   the title/desc/stats clearly visible on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html body section.z-cat-hero,
  html body .z-cat-hero {
    background: linear-gradient(135deg, #0F1216 0%, #1A2540 60%, #1E3370 100%) !important;
    color: #fff !important;
    padding: 18px 0 16px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html body section.z-cat-hero .z-cat-hero__inner,
  html body .z-cat-hero .z-cat-hero__inner {
    padding: 0 16px !important;
    max-width: none !important;
  }
  html body section.z-cat-hero .z-cat-hero__eyebrow,
  html body .z-cat-hero .z-cat-hero__eyebrow {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #FFC93A !important;
    margin-bottom: 4px !important;
  }
  html body section.z-cat-hero .z-cat-hero__title,
  html body .z-cat-hero .z-cat-hero__title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 0 6px !important;
  }
  html body section.z-cat-hero .z-cat-hero__desc,
  html body .z-cat-hero .z-cat-hero__desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 0 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  html body section.z-cat-hero .z-cat-hero__stats,
  html body .z-cat-hero .z-cat-hero__stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .z-cat-hero .z-cat-hero__stats::-webkit-scrollbar { display: none; }
  html body section.z-cat-hero .z-cat-hero__stat,
  html body .z-cat-hero .z-cat-hero__stat {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  html body section.z-cat-hero .z-cat-hero__stat-num,
  html body .z-cat-hero .z-cat-hero__stat-num {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
  }
  html body section.z-cat-hero .z-cat-hero__stat-label,
  html body .z-cat-hero .z-cat-hero__stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  html body .z-cat-hero .z-cat-hero__stat-sep { display: none !important; }
  html body .z-cat-hero .z-cat-hero__bg,
  html body .z-cat-hero .z-cat-hero__stamps { display: none !important; }
}

/* co35b — mobile category hero was collapsing to used-width 0 (pushed to the
   right edge). Force explicit full-width geometry. */
@media (max-width: 767px) {
  html body section.z-cat-hero,
  html body .z-cat-hero {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  html body .z-cat-hero .z-cat-hero__inner {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══ HP "Oblíbené produkty" cards — blue Do košíku button per design (co36) ═══ */
.z-feat { display: flex; flex-direction: column; }
.z-feat__body { display: flex; flex-direction: column; flex: 1; }
.z-feat__cart {
  margin-top: 10px;
  width: 100%;
  height: 38px;
  background: #2E4BDB;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--z-font-sans, 'Inter', sans-serif);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 1px 0 #1E33A8, 0 3px 8px rgba(46, 75, 219, 0.22);
  transition: background 0.15s, transform 0.12s;
}
.z-feat__cart:hover { background: #2540C2; transform: translateY(-1px); }
.z-feat__cart:active { transform: translateY(0); }

/* ═══ Kill the blueish/lavender #column-left wrapper on info + checkout + login (co36) ═══ */
body[class*="information-"] #column-left,
body[class*="checkout-"] #column-left,
body[class*="product-"] #column-left aside,
body[class*="account-"] #column-left {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* The .box module inside (Informace nav) — hidden on these page types */
body[class*="information-"] #column-left .box,
body[class*="checkout-"] #column-left .box,
body[class*="account-"] #column-left .box {
  display: none !important;
}
/* If nothing remains visible inside, collapse the column so content takes full width */
body[class*="checkout-"] #column-left,
body[class*="information-"] #column-left {
  display: none !important;
}
body[class*="checkout-"] #content.col-sm-9,
body[class*="information-"] #content.col-sm-9 {
  width: 100% !important;
}

/* ═══════════════════════ BLOG (Znamky2026) ═══════════════════════ */
.z-blogx, .z-blogx-article { max-width: 1120px; margin: 0 auto; padding: 8px 16px 56px; font-family: var(--z-font-sans); color: #15181D; }
.z-blogx-article { max-width: 1120px; }

/* hero header */
.z-blogx-hero { text-align: center; padding: 18px 0 26px; background: transparent !important; }
.z-blogx-hero .z-blogx-title { color: #14213D !important; }
.z-blogx-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #2E4BDB; margin-bottom: 12px; }
.z-blogx-title { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 14px; color: #14213D; }
.z-blogx-intro { max-width: 620px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: #3C414B; }

/* filter pills */
.z-blogx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.z-blogx-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #E5E1D8; font-size: 13px; font-weight: 600; color: #15181D !important; text-decoration: none; transition: all .15s; }
.z-blogx-pill:hover { border-color: #C4BFB1; }
.z-blogx-pill__n { font-size: 11px; font-weight: 700; color: #9AA0AE; }
.z-blogx-pill.is-active { background: #14213D; border-color: #14213D; color: #fff !important; }
.z-blogx-pill.is-active .z-blogx-pill__n { color: rgba(255,255,255,.6); }

/* category tags */
.z-blogx-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.z-blogx-tag--novinky  { background: #E0E7FF; color: #1E40AF; }
.z-blogx-tag--pruvodce { background: #E6F4EC; color: #0F7A3C; }
.z-blogx-tag--historie { background: #FDECC8; color: #92600A; }
.z-blogx-tag--pece     { background: #EAE7DE; color: #3C414B; }

.z-blogx-metarow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.z-blogx-metarow--center { justify-content: center; }
.z-blogx-post__byline { width: 100%; box-sizing: border-box; }
.z-blogx-date { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: #9AA0AE; letter-spacing: .01em; }

/* author + avatar */
.z-blogx-author { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3C414B; }
.z-blogx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #14213D; color: #FFC93A; font-size: 11px; font-weight: 800; letter-spacing: .02em; flex: 0 0 auto; }
.z-blogx-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.z-blogx-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #2E4BDB; }
/* Author hidden per request */
.z-blogx-author { display: none !important; }

/* featured */
.z-blogx-feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: #fff; border: 1px solid #E5E1D8; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; margin-bottom: 34px; transition: box-shadow .2s, transform .2s; }
.z-blogx-feat:hover { box-shadow: 0 16px 40px rgba(15,18,22,.10); transform: translateY(-2px); }
.z-blogx-feat__media { position: relative; background: #171512; min-height: 300px; }
.z-blogx-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.z-blogx-feat__flag { position: absolute; top: 16px; left: 16px; z-index: 2; background: #FFC93A; color: #15181D; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; }
.z-blogx-feat__body { padding: 30px 32px; display: flex; flex-direction: column; }
.z-blogx-feat__title { font-size: 26px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; margin: 14px 0 12px; color: #14213D; }
.z-blogx-feat__excerpt { font-size: 14px; line-height: 1.6; color: #3C414B; margin: 0 0 22px; }
.z-blogx-feat__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid #EEEAE0; }

/* card grid */
.z-blogx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.z-blogx-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E1D8; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s, border-color .2s; }
.z-blogx-card:hover { box-shadow: 0 12px 30px rgba(15,18,22,.09); transform: translateY(-3px); border-color: #D1CCC0; }
.z-blogx-card__media { position: relative; aspect-ratio: 3 / 2; background: #171512; }
.z-blogx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-blogx-card__media .z-blogx-tag { position: absolute; top: 12px; left: 12px; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.z-blogx-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.z-blogx-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 8px 0 8px; color: #14213D; }
.z-blogx-card__excerpt { font-size: 13px; line-height: 1.55; color: #6B7280; margin: 0 0 16px; }
.z-blogx-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid #EEEAE0; }

.z-blogx-empty { text-align: center; padding: 60px 20px; background: #FAF8F3; border: 1px dashed #E0DBCE; border-radius: 14px; color: #6B7280; }

/* pagination */
.z-blogx-pager { margin-top: 34px; display: flex; justify-content: center; }
.z-blogx-pager .pagination { display: inline-flex; gap: 6px; padding: 0; margin: 0; list-style: none; }
.z-blogx-pager .pagination li a, .z-blogx-pager .pagination li span { display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; border: 1px solid #E5E1D8; background: #fff; color: #15181D !important; font-weight: 600; text-decoration: none; }
.z-blogx-pager .pagination li.active span { background: #14213D; border-color: #14213D; color: #fff !important; }

/* ── ARTICLE ── */
.z-blogx-post { max-width: 760px; margin: 0 auto; padding-top: 14px; }
.z-blogx-post__title { font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #14213D; margin: 16px 0 22px; text-align: center; }
.z-blogx-post__byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; }
.z-blogx-author--lg .z-blogx-avatar { width: 40px; height: 40px; font-size: 13px; }
.z-blogx-author__meta { display: flex; flex-direction: column; line-height: 1.25; }
.z-blogx-author__meta strong { font-size: 14px; color: #15181D; font-weight: 700; }
.z-blogx-author__meta small { font-size: 13px; color: #9AA0AE; }
.z-blogx-share { display: flex; gap: 8px; }
.z-blogx-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E5E1D8; background: #fff; color: #3C414B !important; transition: all .15s; }
.z-blogx-share__btn:hover { border-color: #14213D; color: #14213D !important; }

.z-blogx-post__hero { margin: 0 0 30px; border-radius: 14px; overflow: hidden; background: #171512; }
.z-blogx-post__hero img { width: 100%; display: block; }

/* body typography */
.z-blogx-post__body { font-size: 20px; line-height: 1.75; color: #2A2E37; }
.z-blogx-post__body p { margin: 0 0 20px; }
.z-blogx-post__body h2 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #14213D; margin: 36px 0 14px; }
.z-blogx-post__body h3 { font-size: 20px; font-weight: 700; color: #14213D; margin: 28px 0 12px; }
.z-blogx-post__body a { color: #2E4BDB; text-decoration: underline; }
.z-blogx-post__body img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.z-blogx-post__body ul, .z-blogx-post__body ol { margin: 0 0 20px; padding-left: 22px; }
.z-blogx-post__body li { margin-bottom: 8px; }
.z-blogx-post__body blockquote { margin: 28px 0; padding: 6px 0 6px 22px; border-left: 4px solid #FFC93A; font-size: 20px; font-weight: 600; font-style: normal; line-height: 1.5; color: #14213D; }

/* Auto-styled tables inside blog body */
.z-blogx-tablewrap { margin: 26px 0; border: 1px solid #E5E1D8; border-radius: 14px; overflow: auto; box-shadow: 0 2px 8px rgba(15,18,22,.05); -webkit-overflow-scrolling: touch; }
.z-blogx-post__body table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; line-height: 1.5; background: #fff; }
/* fallback rounding when a table isn't wrapped (no JS) */
.z-blogx-post__body > table { border: 1px solid #E5E1D8; border-radius: 14px; overflow: hidden; margin: 26px 0; }
/* neutralize Bootstrap .table / .table-striped / .table-bordered inside blog body */
.z-blogx-post__body table th,
.z-blogx-post__body table td { border-left: 0 !important; border-right: 0 !important; }
.z-blogx-post__body table th,
.z-blogx-post__body table thead td {
  background: #14213D !important; color: #fff !important; font-weight: 700; text-align: left;
  padding: 12px 15px !important; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
  border: 0 !important;
}
.z-blogx-post__body table td { padding: 11px 15px !important; border-top: 1px solid #EEEAE0 !important; border-bottom: 0 !important; color: #2A2E37; vertical-align: top; background: #fff; }
.z-blogx-post__body table tbody tr:first-child td { border-top: 0 !important; }
.z-blogx-post__body table tbody tr:nth-child(odd) td { background: #fff !important; }
.z-blogx-post__body table tbody tr:nth-child(even) td { background: #FAF8F3 !important; }
.z-blogx-post__body table tbody tr:hover td { background: #F4EFE3 !important; }
.z-blogx-post__body table td:first-child, .z-blogx-post__body table th:first-child { padding-left: 18px !important; }
.z-blogx-post__body table td:last-child, .z-blogx-post__body table th:last-child { padding-right: 18px !important; }
.z-blogx-post__body table td strong { color: #14213D; }
.z-blogx-post__body table td a { color: #2E4BDB; }
/* right-align numeric-looking cells authors mark with class, else keep left */
.z-blogx-post__body table caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: #9AA0AE; padding: 0 0 8px; }

/* product callout */
.z-blogx-callout { margin: 32px 0; padding: 20px 22px; background: #FAF8F3; border: 1px solid #ECE7DA; border-radius: 14px; }
.z-blogx-callout__tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B8860B; margin-bottom: 14px; }
.z-blogx-callout__row { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.z-blogx-callout__row + .z-blogx-callout__row { border-top: 1px solid #ECE7DA; }
.z-blogx-callout__thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #ECE7DA; }
.z-blogx-callout__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-blogx-callout__info { flex: 1; min-width: 0; }
.z-blogx-callout__name { font-size: 14px; font-weight: 700; color: #14213D !important; text-decoration: none; }
.z-blogx-callout__name:hover { color: #2E4BDB !important; }
.z-blogx-callout__buy { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.z-blogx-callout__price { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 20px; font-weight: 800; color: #14213D; }
.z-blogx-callout__btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 10px; border: 0; background: #2E4BDB; color: #fff !important; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; }
.z-blogx-callout__btn:hover { background: #2540C2; transform: translateY(-1px); }
.z-blogx-callout__all { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #2E4BDB !important; text-decoration: none; }

/* tags */
.z-blogx-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px; }
.z-blogx-tags__label { font-size: 13px; font-weight: 600; color: #9AA0AE; }
.z-blogx-chip { font-size: 13px; font-weight: 600; color: #3C414B; background: #F1EEE7; border: 1px solid #E5E1D8; padding: 5px 11px; border-radius: 999px; }

/* related */
.z-blogx-related { margin-top: 44px; padding-top: 34px; border-top: 1px solid #EEEAE0; }
.z-blogx-related__title { font-size: 26px; font-weight: 800; color: #14213D; margin: 0 0 20px; }

/* comments */
.z-blogx-comments { max-width: 760px; margin: 40px auto 0; }
.z-blogx-comments__title { font-size: 20px; font-weight: 800; color: #14213D; margin: 24px 0 14px; }
.z-blogx-comment { padding: 14px 0; border-bottom: 1px solid #EEEAE0; }
.z-blogx-comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.z-blogx-comment__head small { display: block; font-size: 11px; color: #9AA0AE; }
.z-blogx-comment__body { font-size: 14px; line-height: 1.6; color: #2A2E37; }
.z-blogx-form { margin-top: 20px; }
.z-blogx-form__row { margin-bottom: 12px; }
.z-blogx-form__row input, .z-blogx-form__row textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #C4BFB1; border-radius: 10px; font-size: 14px; font-family: inherit; color: #15181D; outline: 0; }
.z-blogx-form__row input:focus, .z-blogx-form__row textarea:focus { border-color: #2E4BDB; box-shadow: 0 0 0 3px rgba(46,75,219,.12); }
.z-blogx-form__err { color: #B91C1C; font-size: 13px; margin-top: 4px; }
.z-blogx-form__foot { text-align: right; margin-top: 8px; }

@media (max-width: 900px) {
  .z-blogx-grid { grid-template-columns: repeat(2, 1fr); }
  .z-blogx-feat { grid-template-columns: 1fr; }
  .z-blogx-feat__media { min-height: 220px; aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .z-blogx-grid { grid-template-columns: 1fr; }
  .z-blogx-title { font-size: 26px; }
  .z-blogx-post__title { font-size: 26px; }
  .z-blogx-callout__row { flex-wrap: wrap; }
  .z-blogx-callout__buy { width: 100%; justify-content: space-between; }
}


/* ═══════════════════════════════════════════════════════════════
   Home hero + promo-tile stamp decorations (2026-07)
   Adds faded philatelic stamp graphics to the fallback hero and to
   the Aukce / Promo tiles. SVG data-URIs, no external assets.
   ═══════════════════════════════════════════════════════════════ */
.z-hero__main { background: radial-gradient(120% 130% at 100% 0%, rgba(46,75,219,.5) 0%, rgba(46,75,219,0) 55%), linear-gradient(135deg,#14213D 0%,#0F1216 100%); }
.z-hero__copy { position: relative; z-index: 2; }
.z-hero__main:not(:has(.z-hero__slide))::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20140%20175%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%27134%27%20height%3D%27169%27%20rx%3D%277%27%20fill%3D%27%23F4EFE3%27/%3E%3Crect%20x%3D%2713%27%20y%3D%2715%27%20width%3D%27114%27%20height%3D%27145%27%20rx%3D%272%27%20fill%3D%27%238FB39B%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%2733%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%279.5%27%20fill%3D%27%232b230f%27%20letter-spacing%3D%271.4%27%3E%C4%8CESKOSLOVENSKO%3C/text%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%2730%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Crect%20x%3D%2755%27%20y%3D%2777%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2070%2092%29%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%277%27%20fill%3D%27%232b230f%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%27151%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%232b230f%27%3E10%20h%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20140%20175%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%27134%27%20height%3D%27169%27%20rx%3D%277%27%20fill%3D%27%23F4EFE3%27/%3E%3Crect%20x%3D%2713%27%20y%3D%2715%27%20width%3D%27114%27%20height%3D%27145%27%20rx%3D%272%27%20fill%3D%27%23C9A24B%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%2733%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%279.5%27%20fill%3D%27%232b230f%27%20letter-spacing%3D%271.4%27%3E%C4%8CESKOSLOVENSKO%3C/text%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%2730%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Crect%20x%3D%2755%27%20y%3D%2777%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2070%2092%29%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%277%27%20fill%3D%27%232b230f%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%27151%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%232b230f%27%3E5%20h%3C/text%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20140%20175%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%27134%27%20height%3D%27169%27%20rx%3D%277%27%20fill%3D%27%23F4EFE3%27/%3E%3Crect%20x%3D%2713%27%20y%3D%2715%27%20width%3D%27114%27%20height%3D%27145%27%20rx%3D%272%27%20fill%3D%27%23C58C86%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%2733%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%279.5%27%20fill%3D%27%232b230f%27%20letter-spacing%3D%271.4%27%3E%C4%8CESKOSLOVENSKO%3C/text%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%2730%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Crect%20x%3D%2755%27%20y%3D%2777%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2070%2092%29%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%277%27%20fill%3D%27%232b230f%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%27151%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%232b230f%27%3E15%20h%3C/text%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right -18px top 30px, right 120px top 90px, right 66px bottom -22px;
  background-size:150px,120px,104px;
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 80%);
  mask-image:linear-gradient(90deg,transparent 40%,#000 80%);
}
.z-hero__tile > * { position:relative; z-index:2; }
.z-hero__tile::after {
  content:''; position:absolute; top:50%; right:-26px; width:120px; height:150px;
  transform:translateY(-50%) rotate(9deg);
  background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.5; pointer-events:none; z-index:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));
}
.z-hero__tile--green::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20140%20175%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%27134%27%20height%3D%27169%27%20rx%3D%277%27%20fill%3D%27%23F4EFE3%27/%3E%3Crect%20x%3D%2713%27%20y%3D%2715%27%20width%3D%27114%27%20height%3D%27145%27%20rx%3D%272%27%20fill%3D%27%238FB39B%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%2733%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%279.5%27%20fill%3D%27%232b230f%27%20letter-spacing%3D%271.4%27%3E%C4%8CESKOSLOVENSKO%3C/text%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%2730%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Crect%20x%3D%2755%27%20y%3D%2777%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2070%2092%29%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%277%27%20fill%3D%27%232b230f%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%27151%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%232b230f%27%3E10%20h%3C/text%3E%3C/svg%3E"); }
.z-hero__tile--orange::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20140%20175%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%27134%27%20height%3D%27169%27%20rx%3D%277%27%20fill%3D%27%23F4EFE3%27/%3E%3Crect%20x%3D%2713%27%20y%3D%2715%27%20width%3D%27114%27%20height%3D%27145%27%20rx%3D%272%27%20fill%3D%27%23C58C86%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%2733%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%279.5%27%20fill%3D%27%232b230f%27%20letter-spacing%3D%271.4%27%3E%C4%8CESKOSLOVENSKO%3C/text%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%2730%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Crect%20x%3D%2755%27%20y%3D%2777%27%20width%3D%2730%27%20height%3D%2730%27%20transform%3D%27rotate%2845%2070%2092%29%27%20fill%3D%27none%27%20stroke%3D%27%232b230f%27%20stroke-width%3D%272.4%27/%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2792%27%20r%3D%277%27%20fill%3D%27%232b230f%27/%3E%3Ctext%20x%3D%2770%27%20y%3D%27151%27%20text-anchor%3D%27middle%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%2713%27%20fill%3D%27%232b230f%27%3E15%20h%3C/text%3E%3C/svg%3E"); }
@media (max-width:900px) {
  .z-hero__main:not(:has(.z-hero__slide))::after { background-size:112px,92px,80px; background-position:right -14px top 24px, right 96px top 74px, right 52px bottom -18px; opacity:.78; }
  .z-hero__tile::after { width:94px; height:118px; right:-30px; opacity:.42; }
}

/* Promo tiles with AI-generated photo background */
.z-hero__tile--photo { background-size: cover; background-position: center 62%; }
.z-hero__tile--photo::after { display: none !important; } /* hide stamp fallback when a photo is set */
.z-hero__tile--photo > * { position: relative; z-index: 2; }
.z-hero__tile--photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.z-hero__tile--green.z-hero__tile--photo::before {
  background: linear-gradient(90deg, #E8F4EB 0%, rgba(232,244,235,.94) 32%, rgba(232,244,235,.5) 66%, rgba(232,244,235,.08) 100%);
}
.z-hero__tile--orange.z-hero__tile--photo::before {
  background: linear-gradient(90deg, #FCEDE6 0%, rgba(252,237,230,.94) 32%, rgba(252,237,230,.5) 66%, rgba(252,237,230,.08) 100%);
}
/* Hero-tile "Novinka" / "Promo" tags: plain coloured text + dot, no pill box */
.z-hero__tile .z-badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

/* About Us hero (/o-nas): headline was dark on the dark navy box (invisible) — force white to match eyebrow/subtitle */
.z-ab-hero__title, body[class*="information-"] #content .z-ab-hero__title { color: #fff !important; }

/* Desktop cart hover preview (mirrors the mobile {{ cart }} dropdown) */
.z-cart-wrap { position: relative; display: flex; align-items: center; }
.z-cart-wrap .z-cart-preview.cart-preview-dropdown { top: calc(100% + 12px); right: 0; }
.z-cart-wrap:hover .z-cart-preview.cart-preview-dropdown,
.z-cart-wrap .z-cart-preview.cart-preview-dropdown:hover { display: block; }
@media (max-width: 767px) { .z-cart-wrap .z-cart-preview { display: none !important; } }

/* ── Foldable category tree (arrows on categories with subcategories) ── */
.z-tree__row { display: flex; align-items: center; gap: 2px; }
.z-tree__row > .z-tree__link { flex: 1 1 auto; min-width: 0; }
.z-tree__item .z-tree__list { display: none; padding-left: 12px !important; }
.z-tree__item.is-open > .z-tree__list { display: block; }
.z-tree__toggle.is-loading { opacity: .5; animation: zTreeSpin 0.7s linear infinite; }
@keyframes zTreeSpin { to { transform: rotate(360deg); } }
.z-tree__item.is-open > .z-tree__row > .z-tree__link::after,
.z-tree__item.is-open > .z-tree__link::after { display: none !important; } /* old caret off — toggle arrow replaces it */
.z-tree__toggle {
  flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: #9AA0AE; cursor: pointer; padding: 0;
  transition: transform 0.15s ease, color 0.15s ease, background 0.12s ease;
}
.z-tree__toggle:hover { background: #F0EBDC; color: #15181D; }
.z-tree__item.is-open > .z-tree__row > .z-tree__toggle { transform: rotate(90deg); color: #2E4BDB; }

/* ── Remove the blue focus outline on mouse/touch click (kept for keyboard a11y) ── */
:focus:not(:focus-visible) { outline: none !important; }
img:focus, a:focus img, .z-pc:focus, .z-pc__media:focus { outline: none !important; }

/* Footer newsletter — align the subscribe button to the input (equal height, no vertical displacement) */
.newsletter .input-news { display: flex; gap: 10px; align-items: stretch; }
.newsletter .input-news input,
.newsletter .input-news .btn,
.newsletter .input-news button {
  height: 44px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
  margin: 0 !important;
}
.newsletter .input-news .btn,
.newsletter .input-news button { display: inline-flex; align-items: center; }

/* ═══ Full-width Daily-deal (.z-dod) + Special (.z-promo) bands ═══
   Colored background spans the whole viewport; the carousels sit on the same
   1280 grid as every other homepage row (cards match + edges align), while the
   headings keep the 32px inset like the other section heads. */
.z-dod, .z-promo {
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}
/* Daily deal: band inset aligns the carousel to the 1280 grid; head gets +32px */
.z-dod {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  padding-left: max(0px, calc(50vw - 640px)) !important;
  padding-right: max(0px, calc(50vw - 640px)) !important;
}
.z-dod__head { padding-left: 32px !important; padding-right: 32px !important; }
.z-dod .z-deal-grid { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Special: head content on the 1216 grid; body carousel on the 1280 grid (matches other rows) */
.z-promo { padding: 0 !important; overflow: visible !important; }
.z-promo__head {
  padding-left: max(32px, calc(50vw - 608px)) !important;
  padding-right: max(32px, calc(50vw - 608px)) !important;
}
.z-promo__body {
  padding-left: max(0px, calc(50vw - 640px)) !important;
  padding-right: max(0px, calc(50vw - 640px)) !important;
}
.z-promo__body .z-deal-grid { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE — authoritative overrides (last in source order so they win
   over the many earlier layered mobile rules in this file).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Daily-deal + Special bands: true full-bleed to both screen edges.
     translateX centering is immune to the parent's 14px container padding. */
  html body .z-dod,
  html body .z-promo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  /* Inner content keeps a comfortable 16px gutter; carousels scroll edge-to-edge */
  html body .z-dod { padding: 18px 0 !important; }
  html body .z-dod__head { padding: 0 16px 12px !important; }
  html body .z-dod .z-deal-grid { margin: 0 !important; padding: 0 16px !important; }
  html body .z-promo { padding: 0 !important; }
  html body .z-promo__head { padding: 16px !important; }
  html body .z-promo__body { padding: 16px 0 !important; }
  html body .z-promo__body .z-deal-grid { margin: 0 !important; padding: 0 16px !important; }

  /* scroll-snap eats the strip's own left padding: the snapport defaults to the
     padding box, so the browser scrolls the first card's start edge to x=0 and
     the gutter disappears (measured scrollLeft == padding-left). scroll-padding
     insets the snapport so the gutter survives. .z-cat-tiles already did this --
     these four were missed. padding-bottom gives the card shadows room, since
     these strips clip overflow-y. */
  html body .z-dod .z-deal-grid,
  html body .z-promo__body .z-deal-grid {
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    padding-bottom: 6px !important;
  }
  html body .z-feat-grid,
  html body .z-auc-grid {
    scroll-padding-left: 12px !important;
    scroll-padding-right: 12px !important;
    padding-bottom: 6px !important;
  }

  /* Hero: the two side tiles stack full-width below the main banner, spaced */
  html body .z-hero .z-hero__side {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }
  html body .z-hero .z-hero__tile {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 116px !important;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body .z-hero .z-hero__tile-title { font-size: 20px !important; }
}

/* ═══ 2026-07-24 account page fixes ═══ */
/* Blue buttons must always have white text (auction pages regression) */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
a.btn-primary, a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover { color: #fff !important; }

/* account/password: aligned, sanely sized form */
body[class*="account-password"] #content .form-horizontal .control-label { text-align: left; }
body[class*="account-password"] #content .col-sm-10 { max-width: 460px; }
body[class*="account-password"] #content fieldset { margin-top: 8px; }

/* account/order: hide the "Zpět na účet" back link */
.z-ord__back { display: none !important; }

/* Account forms: legends must not float next to the first label (broken first-input offset) */
body[class*="account-"] .form-horizontal legend {
  display: block; float: none; clear: both; width: 100%;
  margin: 0 0 16px; border-bottom: 1px solid #e8eaed; padding-bottom: 8px;
}
body[class*="account-"] .form-horizontal .form-group { clear: both; }

/* Auction action buttons: theme link-color made text blue-on-blue (invisible) */
.btn-complete, a.btn-complete, .btn-complete:hover, .btn-complete:focus,
a.btn-complete:link, a.btn-complete:visited, a.btn-complete:hover,
.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited,
.btn-success, a.btn-success:link, a.btn-success:visited,
.btn-info, a.btn-info:link, a.btn-info:visited,
.btn-danger, a.btn-danger:link, a.btn-danger:visited { color: #fff !important; }

/* top billing-bar button (auction) */
.btn-close-invoice, a.btn-close-invoice, a.btn-close-invoice:link, a.btn-close-invoice:visited, a.btn-close-invoice:hover { color: #fff !important; }

/* Footer newsletter: keep the button inside the input pill */
.input-news { position: relative; }
.input-news .btn, .input-news button {
  position: absolute; top: 3px; right: 3px; bottom: 3px;
  height: auto; padding: 0 18px; font-size: 14px; line-height: 1;
  border-radius: 10px; display: inline-flex; align-items: center;
}
.input-news input.form-control { padding-right: 128px; }

/* ── Checkout: logged-in note + bank-transfer info box (2026-07-25) ── */
.z-co-logged-note { display:flex; align-items:center; gap:10px; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:14px; }
.z-co-logged-note svg { flex:0 0 auto; color:#16a34a; }
.z-co-bank-info { display:flex; gap:14px; align-items:flex-start; background:#eff6ff; border:1px solid #bfdbfe; border-radius:14px; padding:16px 18px; }
.z-co-bank-info__icon { flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:#dbeafe; color:#1d4ed8; display:flex; align-items:center; justify-content:center; }
.z-co-bank-info__title { font-weight:800; font-size:14px; color:#1e3a8a; margin-bottom:4px; }
.z-co-bank-info__text { font-size:13px; color:#334155; line-height:1.55; }

/* ── 2026-07-25: kill legacy QuickStore 60% content cap on account pages ──
   stylesheet.css has '#account-order #content, #account-account #content, … { width:60%; margin-left:30px }'
   which squeezed order detail, collection and other account pages. Checkout is intentionally left alone. */
body[class*="account-"] #content.col-sm-9 { width: 75% !important; margin-left: 0 !important; }
body[class*="account-"] #content.col-sm-12 { width: 100% !important; margin-left: 0 !important; }
body[class*="account-"] #content.col-sm-6 { width: 50% !important; margin-left: 0 !important; }
@media (max-width: 767px) {
  body[class*="account-"] #content { width: 100% !important; margin-left: 0 !important; }
}

/* z-cat-tiles scroll-snap gutter, 721-767px band: the <=720px rule that supplies
   scroll-padding does not reach here, so the mandatory x snap pulls the first
   tile over the strip's 12px padding. Match the snapport to that padding. */
@media (min-width: 721px) and (max-width: 767px) {
  html body .z-cat-tiles.z-carousel {
    scroll-padding-left: 12px !important;
    scroll-padding-right: 12px !important;
  }
}

/* ── 2026-07-25: mobile account navigation (collapsible) ── */
.z-accnav-m { display:none; }
body[class*="account-"] .z-accnav-m { display:block; margin: 4px 0 14px; }
.z-accnav-m__btn { display:flex; width:100%; align-items:center; gap:10px; padding:12px 16px; background:#fff; border:1px solid var(--z-divider,#e5e7eb); border-radius:14px; font-weight:700; font-size:14px; color:var(--z-ink,#14213D); }
.z-accnav-m__btn .fa-angle-down { margin-left:auto; transition: transform .2s; }
.z-accnav-m__btn.is-open .fa-angle-down { transform: rotate(180deg); }
.z-accnav-m__menu { margin-top:8px; }
@media (min-width: 768px) { .z-accnav-m { display:none !important; } }

/* ── 2026-07-25: /special mobile ────────────────────────────────────────────
   1) Pagination wrapped instead of widening the page: 7 page links measure
      419px inside a 350px column at 390px viewport, which pushed
      body.scrollWidth to 439 and clipped every card on the right.
   2) On /special the sidebar is a filter panel, not primary content, but DOM
      order put it above the grid — products began 936px down the page. Flip
      the order on mobile. Needs !important + the body.product-special scope to
      outrank the `.z-cat-layout { display:block !important }` rule at ~7830. */
.z-pagination-inner .pagination { flex-wrap: wrap; justify-content: center; }

@media (max-width: 900px) {
  /* must outrank the html body section[class*="z-container"]:not(.z-hero)
     sledgehammer at <=767px, which is (0,2,3) — this is (0,3,3). */
  html body.product-special section.z-container.z-cat-layout {
    display: flex !important;
    flex-direction: column !important;
  }
  body.product-special section.z-cat-layout > .z-cat-main { order: 1 !important; }
  body.product-special section.z-cat-layout > .z-cat-sidebar {
    order: 2 !important;
    width: 100% !important;
    margin-top: 18px;
  }
  body.product-special .z-spside { position: static !important; }
  body.product-special .z-spside__list { max-height: 340px; }
}

/* ── 2026-07-25: login/register inputs — disable fake floating placeholder ──
   stylesheet2.css transforms ::placeholder on focus (translateY(-18px), 10px),
   so the hint jumped to the input's top edge and typed text appeared shifted.
   Keep a calm placeholder that simply dims on focus and hides while typing. */
.col-sm-6 .form-group .input-lgg:focus::placeholder,
.col-sm-6 .form-group .input-lgg:not(:placeholder-shown)::placeholder,
.col-sm-6 .input-lgg:focus::placeholder,
.col-sm-6 .input-lgg:not(:placeholder-shown)::placeholder {
  transform: none !important;
  font-size: 14px !important;
  color: #c3c9d4 !important;
}
.col-sm-6 .form-group .input-lgg,
.col-sm-6 .input-lgg { line-height: 1.4; }

/* ── 2026-07-25: AJAX listing loading state ─────────────────────────────────
   footer.twig's loader already added `.z-listing-loading` to `.z-cat-main` and
   appended a `.z-loupe` div (with an inline `top` so it lands in the visible
   part of the grid) — but NEITHER had a single CSS rule anywhere, so every
   AJAX filter/sort/paginate looked completely inert for ~1s. `.z-cat-main` also
   had no `position`, so the absolutely-positioned loupe would not even have
   anchored to it. */
.z-cat-main { position: relative; }

.z-listing-loading .z-toolbar,
.z-listing-loading .z-product-grid,
.z-listing-loading .z-pagination-wrap {
  opacity: .38;
  filter: saturate(.55);
  pointer-events: none;
  transition: opacity .18s ease, filter .18s ease;
}

.z-loupe {
  position: absolute;
  left: 50%;
  margin-left: -27px;   /* not translateX(-50%) — would fight the scale-in keyframes */
  z-index: 6;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 33, 61, .18), 0 0 0 1px var(--z-border, #E7E1D4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: z-loupe-in .18s ease both;
}
.z-loupe::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--z-border-strong, #DDD6C7);
  border-top-color: var(--z-primary, #2E4BDB);
  animation: z-loupe-spin .7s linear infinite;
}
@keyframes z-loupe-spin { to { transform: rotate(360deg); } }
@keyframes z-loupe-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* the control you actually clicked also acknowledges the click */
.z-spside__row.is-loading { background: rgba(46, 75, 219, .08); }
.z-spside__row.is-loading .z-spside__link { color: var(--z-primary); }
.z-spside__row.is-loading .z-spside__count {
  color: transparent;
  position: relative;
}
.z-spside__row.is-loading .z-spside__count::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 11px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid rgba(46, 75, 219, .25);
  border-top-color: var(--z-primary, #2E4BDB);
  animation: z-loupe-spin .7s linear infinite;
}

.z-spprice__btn.is-loading { opacity: .75; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .z-loupe { animation: none; }
  .z-loupe::before,
  .z-spside__row.is-loading .z-spside__count::after { animation-duration: 1.8s; }
}

/* ── 2026-07-25: homepage price rows — compact, never split amounts ───────
   Daily-deal cards are only ~173px wide on desktop (and 186px on mobile).
   Keep current, crossed-out and Znamky+ prices on one readable line without
   changing product cards on category/search/detail pages. */
html body .z-dod .z-deal__price-row,
html body .z-promo .z-deal__price-row,
html body .z-feat-grid .z-feat__price-row {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}

html body .z-dod .z-deal__new,
html body .z-promo .z-deal__new,
html body .z-feat-grid .z-feat__price {
  flex: 0 0 auto;
  font-size: 14px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body .z-dod .z-deal__new,
html body .z-promo .z-deal__new {
  font-size: 13px !important;
}

html body .z-dod .z-deal__old,
html body .z-promo .z-deal__old,
html body .z-feat-grid .z-feat__old {
  flex: 0 0 auto;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body .z-dod .z-deal__old,
html body .z-promo .z-deal__old {
  font-size: 11px !important;
}

html body .z-dod .z-pc__zplus,
html body .z-promo .z-pc__zplus,
html body .z-feat-grid .z-pc__zplus {
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px 4px !important;
  gap: 0 !important;
  border-radius: 6px;
  white-space: nowrap;
}

html body .z-dod .z-pc__zplus-tag,
html body .z-promo .z-pc__zplus-tag,
html body .z-feat-grid .z-pc__zplus-tag {
  gap: 2px;
  font-size: 11px !important;
  line-height: 1.05 !important;
  letter-spacing: .2px;
  white-space: nowrap;
}

html body .z-dod .z-pc__zplus-body,
html body .z-promo .z-pc__zplus-body,
html body .z-feat-grid .z-pc__zplus-body {
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

html body .z-dod .z-pc__zplus-label,
html body .z-promo .z-pc__zplus-label,
html body .z-feat-grid .z-pc__zplus-label {
  display: none;
}

html body .z-dod .z-pc__zplus-price,
html body .z-promo .z-pc__zplus-price,
html body .z-feat-grid .z-pc__zplus-price {
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  html body .z-dod .z-deal__price-row,
  html body .z-promo .z-deal__price-row {
    gap: 1px !important;
  }

  html body .z-dod .z-deal__new,
  html body .z-promo .z-deal__new {
    font-size: 11px !important;
  }

  html body .z-dod .z-deal__old,
  html body .z-promo .z-deal__old {
    font-size: 11px !important;
  }

  html body .z-dod .z-pc__zplus,
  html body .z-promo .z-pc__zplus {
    padding: 2px 3px !important;
  }

  html body .z-dod .z-pc__zplus-price,
  html body .z-promo .z-pc__zplus-price {
    font-size: 11px !important;
  }
}

/* ── 2026-07-25: dense mobile cart rows for large baskets ────────────────
   Keep the product, two-line name, quantity, total and remove action visible.
   Secondary catalogue metadata and dispatch copy are available on the product
   page and made a single cart line unnecessarily tall on narrow screens. */
@media (max-width: 720px) {
  html body.checkout-cart .z-cart-list,
  html body.checkout-simple_cart .z-cart-list {
    gap: 0 !important;
  }

  html body.checkout-cart .z-cart-line,
  html body.checkout-simple_cart .z-cart-line {
    position: relative;
    grid-template-columns: 52px minmax(0, 1fr) 64px !important;
    grid-template-areas:
      "media body price"
      "media qty  remove" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    min-height: 80px;
    padding: 8px 0 !important;
    border-radius: 0;
    align-items: center;
  }

  html body.checkout-cart .z-cart-line__media,
  html body.checkout-simple_cart .z-cart-line__media {
    grid-area: media;
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px;
    align-self: center;
  }

  html body.checkout-cart .z-cart-line__body,
  html body.checkout-simple_cart .z-cart-line__body {
    grid-area: body;
    align-self: center;
  }

  html body.checkout-cart .z-cart-line__meta,
  html body.checkout-cart .z-cart-line__sub,
  html body.checkout-cart .z-cart-line__opts,
  html body.checkout-simple_cart .z-cart-line__meta,
  html body.checkout-simple_cart .z-cart-line__sub,
  html body.checkout-simple_cart .z-cart-line__opts {
    display: none !important;
  }

  html body.checkout-cart .z-cart-line__name,
  html body.checkout-simple_cart .z-cart-line__name {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body.checkout-cart .z-cart-line__qty,
  html body.checkout-simple_cart .z-cart-line__qty {
    grid-area: qty;
    grid-column: 2 / 4;
    justify-self: start;
    gap: 0 !important;
    height: 42px;
  }

  html body.checkout-cart .z-cart-line__qty-btn,
  html body.checkout-simple_cart .z-cart-line__qty-btn {
    width: 42px !important;
    height: 42px !important;
  }

  html body.checkout-cart .z-cart-line__qty-input,
  html body.checkout-simple_cart .z-cart-line__qty-input {
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
  }

  html body.checkout-cart .z-cart-line__price,
  html body.checkout-simple_cart .z-cart-line__price {
    grid-area: price;
    min-width: 0;
    width: 64px;
    justify-self: end;
    align-self: center;
    text-align: right;
  }

  html body.checkout-cart .z-cart-line__total,
  html body.checkout-simple_cart .z-cart-line__total {
    font-size: 13px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  html body.checkout-cart .z-cart-line__unit,
  html body.checkout-simple_cart .z-cart-line__unit {
    display: none !important;
  }

  html body.checkout-cart .z-cart-line__remove,
  html body.checkout-simple_cart .z-cart-line__remove {
    grid-area: remove;
    justify-self: end;
    align-self: center;
    width: 42px !important;
    height: 42px !important;
  }

  html body.checkout-cart .z-cart-line.is-zero,
  html body.checkout-simple_cart .z-cart-line.is-zero {
    border-radius: 10px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 360px) {
  html body.checkout-cart .z-cart-line__qty-input,
  html body.checkout-simple_cart .z-cart-line__qty-input {
    width: 24px !important;
    min-width: 24px !important;
  }
}

/* ── Credit / cashback additions (2026-07-27) ─────────────────────────── */
.z-cart-credit__note { font-size:13px; color:#B45309; margin-top:4px; font-weight:600; }
.z-cart-cashback { display:flex; gap:10px; align-items:flex-start; background:#F0FAF4; border:1px solid #C6E8D3; border-radius:14px; padding:12px 14px; margin-top:10px; font-size:13px; color:#155B36; line-height:1.5; }
.z-cart-cashback__icon { font-size:16px; line-height:1.3; }
.z-success-cashback { display:flex; gap:12px; align-items:flex-start; max-width:720px; margin:14px auto 0; background:#F0FAF4; border:1px solid #C6E8D3; border-radius:14px; padding:16px 18px; }
.z-success-cashback__icon { font-size:20px; }
.z-success-cashback__title { font-weight:800; font-size:14px; color:#0F7A3C; margin-bottom:3px; }
.z-success-cashback__text { font-size:13px; color:#3D6B51; line-height:1.5; }

/* ── Footer newsletter: stack input above button on mobile — the 100%-width button was covering the input (2026-07-27) ── */
@media (max-width: 767px) {
  html body footer #footer-top .input-news { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  html body footer #footer-top .input-news input { width: 100% !important; flex: 0 0 auto !important; }
  html body footer #footer-top .input-news button,
  html body footer #footer-top .input-news .btn { width: 100% !important; flex: 0 0 auto !important; justify-content: center !important; }
}

/* v2: the button is position:absolute (stylesheet2.css:3654) — must be reset or it overlays the input regardless of flex */
@media (max-width: 767px) {
  html body footer #footer-top .input-news button,
  html body footer #footer-top .input-news .btn,
  html body .newsletter .btn.btn-lg { position: static !important; top: auto !important; right: auto !important; width: 100% !important; height: auto !important; }
  html body .newsletter .input-news { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  html body .newsletter #txtemail { padding-inline-end: 22px !important; }
}

/* ── "Poslední kus" card chip emphasis (2026-07-27) ── */
.z-pc__chip--last { background: #FDEBE5 !important; color: #C2410C !important; font-weight: 700 !important; }

/* ── HP Znamky+ tile: white text on dark scrim + yellow CTA (2026-07-27) ── */
html body .z-hero__tile--zp .z-hero__tile-title { color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); font-weight: 800; }
html body .z-hero__tile--zp .z-hero__tile-desc { color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
html body .z-hero__tile--zp .z-hero__tile-cta { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: 12px; background: #FFC93A; color: #15181D !important; font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
html body .z-hero__tile--zp:hover .z-hero__tile-cta { filter: brightness(1.06); }

/* ── Hero: soften baked-in image edges on main slides + side tiles (2026-07-27) ── */
html body .z-hero__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 56px 24px rgba(233,237,241,.35); border-radius: inherit; }
html body .z-hero__tile--photo { background-size: cover !important; background-position: center !important; }
html body .z-hero__tile--photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px 16px rgba(15,18,22,.16); border-radius: inherit; }

/* sell_offer (vykup): customSelect makes the real <select> position:absolute+opacity:0;
   without a positioned ancestor its width:100% resolves against #content, so the native
   popup opened ~1260px wide. Anchor it to its own grid cell / addon instead. */
.account-sell_offer .so-grid > div { position: relative; }
.account-sell_offer .so-card .input-group-addon { position: relative; }

/* product catalogfacts: merged auto-fit grid — row count follows the number
   of available values (2 values = 1 row); beats the mobile 1fr override */
.z-product-facts.z-product-facts--merged { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.z-product-fact__label--cat { color: #B8860B; }

/* ============================================================================
   Z-UNIFY — authoritative token layer (2026-07-29)
   Last in source order on purpose: this file has ~2.4k !important rules, so the
   only reliable way to land a value is high specificity + late position.
   Rules of the system:
     · blue  #2E4BDB = every in-page primary action
     · yellow #FFC93A = brand surfaces only (cart pill, Znamky+) + chips/badges
     · red   #B91C1C = discount + error only.  green #0F7A3C = success only
     · type 11 / 13 / 14 / 16 / 20 / 26 / 32 / 40 — nothing between
     · radius 6 chip / 10 button / 14 card / pill
   ========================================================================== */

/* ---- 1. BUTTONS — one primary colour ------------------------------------ */
html body .z-hero .z-hero__cta .z-btn,
html body .auth-reg-submit,
html body .z-auc-login__primary,
html body .z-acc-hero__cta,
html body body[class*="account-"] #content .btn-success,
html body .account-register #content .btn-success {
  background: var(--z-primary) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: var(--z-primary) !important;
  border-radius: var(--z-radius-md) !important;
  font-size: var(--z-text-base) !important;
  font-weight: 600 !important;
  box-shadow: var(--z-shadow-sm) !important;
  text-shadow: none !important;
}
html body .z-hero .z-hero__cta .z-btn:hover,
html body .auth-reg-submit:hover,
html body .z-auc-login__primary:hover,
html body .z-acc-hero__cta:hover {
  background: var(--z-primary-hover) !important;
  border-color: var(--z-primary-hover) !important;
}

/* every filled action shares one geometry */
html body .z-btn,
html body .z-btn--primary,
html body .z-pc__cart,
html body .z-deal__cart,
html body .z-feat__cart,
html body .z-auc__bid,
html body .z-modal__btn,
html body .z-product-buy__cart,
html body .z-cart-line__qty,
html body .z-success-cta__primary {
  border-radius: var(--z-radius-md) !important;
  font-family: var(--z-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color var(--z-fast) var(--z-ease),
              border-color var(--z-fast) var(--z-ease),
              box-shadow var(--z-fast) var(--z-ease) !important;
}
/* buy / bid buttons: same size everywhere (were 12.5px/h35 and 13px/h38) */
html body .z-pc__cart,
html body .z-deal__cart,
html body .z-feat__cart,
html body .z-auc__bid {
  font-size: var(--z-text-base) !important;
  padding: 10px 16px !important;
}
/* the two brand-owned yellow surfaces keep their colour, gain the shared geometry */
html body a.z-btn--cart,
html body #z-cart-link,
html body .z-hero__tile--zp .z-hero__tile-cta {
  border-radius: var(--z-radius-md) !important;
  font-size: var(--z-text-base) !important;
  font-weight: 600 !important;
}

/* ---- 2. MONOSPACE — numerals and codes only ----------------------------- */
/* these are word-labels and a button; mono here read as noise */
html body .z-product-card__meta,
html body .z-pc__promo-btn,
html body .z-cat-tile__count,
html body .z-subcat__count,
html body .z-subcats-head__count,
html body .z-ab-member__ico,
html body .z-product-ship__chip strong,
html body .z-product-coupon__text strong {
  font-family: var(--z-font-sans) !important;
}

/* ---- 3. MERCHANDISING BANDS — hues kept, recipe unified ----------------- */
/* Daily deal stays green, Special stays wine. What is unified is everything
   around the hue: same angle, same title size, same eyebrow, no stripe texture. */
html body .z-dod,
html body .z-promo {
  border-radius: 0 !important;
}
html body .z-dod::before,
html body .z-promo::before { background-image: none !important; }   /* drop diagonal stripes */
html body .z-dod__title,
html body .z-promo__title {
  font-size: var(--z-text-xl) !important;      /* 26px — same as every section title */
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #FFFFFF !important;
}
html body .z-dod__desc,
html body .z-promo__sub {
  font-size: var(--z-text-sm) !important;
  color: rgba(255,255,255,.78) !important;
}

/* ---- 4. CONTRAST — Znamky+ hero tile ------------------------------------ */
html body .z-hero__tile--zp::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(100deg, rgba(15,18,22,.90) 0%, rgba(15,18,22,.72) 52%, rgba(15,18,22,.34) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}
/* NB: never `> *` here — the Znamky+ badge is an inline position:absolute span
   in home.twig, and a blanket `position:relative !important` drops it into flow
   and stretches it to full tile width. Target the flow children by name. */
html body .z-hero__tile--zp .z-hero__tile-title,
html body .z-hero__tile--zp .z-hero__tile-desc,
html body .z-hero__tile--zp .z-hero__tile-cta { position: relative !important; z-index: 2 !important; }
html body .z-hero__tile--zp .z-hero__tile-sub { color: rgba(255,255,255,.88) !important; }

/* ---- 5. EFFECTS — 3 shadows, 2 durations, no `transition: all` ---------- */
html body .z-card,
html body .z-pc,
html body .z-cat-tile,
html body .z-deal__card,
html body .z-feat__card,
html body .z-auc__card,
html body .z-blog__card {
  box-shadow: none !important;
  border: 1px solid var(--z-border) !important;
  border-radius: var(--z-radius-lg) !important;
  transition: box-shadow var(--z-base) var(--z-ease),
              transform var(--z-base) var(--z-ease),
              border-color var(--z-base) var(--z-ease) !important;
}
html body .z-card:hover,
html body .z-pc:hover,
html body .z-cat-tile:hover,
html body .z-deal__card:hover,
html body .z-feat__card:hover,
html body .z-auc__card:hover,
html body .z-blog__card:hover {
  box-shadow: var(--z-shadow-md) !important;
  transform: translateY(-2px) !important;
  border-color: var(--z-border-strong) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 6. PRICES — ink, not red; red belongs to the discount badge -------- */
html body .z-pc__price,
html body .z-deal__price,
html body .z-feat__price,
html body .z-product-price__now {
  color: var(--z-ink) !important;
  font-size: var(--z-text-md) !important;
  font-weight: 600 !important;
}
html body .z-pc__old,
html body .z-deal__old,
html body .z-feat__old { color: var(--z-ink-4) !important; font-size: var(--z-text-sm) !important; }

/* ---- 7. FOCUS — one visible ring everywhere ---------------------------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid var(--z-primary) !important;
  outline-offset: 2px !important;
}
/* ---- end Z-UNIFY ------------------------------------------------------- */

/* ---- Z-UNIFY corrections (post-deploy verification) --------------------- */
/* deal cards use .z-deal__new / .z-pc__new for the current price, not __price */
html body .z-deal__new,
html body .z-pc__new,
html body .z-feat__new,
html body .z-auc__new {
  color: var(--z-ink) !important;
  font-weight: 700 !important;
}
/* the discount stays legible as a badge; the price no longer competes with it */
html body .z-deal__old,
html body .z-pc__old,
html body .z-feat__old { color: var(--z-ink-4) !important; font-weight: 400 !important; }

/* countdown labels were 7.5–9px and wrapped once lifted to the 11px floor */
html body .z-auc__cd,
html body .z-auc__cd-label,
html body .z-auc__cd-num,
html body .z-pc__countdown,
html body .z-dod__timer-num {
  white-space: nowrap !important;
}
html body .z-auc__cd-label {
  font-size: var(--z-text-xs) !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
}
html body .z-auc__cd { gap: 6px !important; align-items: center !important; }
/* ---- end corrections --------------------------------------------------- */

/* ============================================================================
   Z-LEGAL — long-form legal documents (Terms, Privacy, Returns …)
   Scoped to .z-legal inside .z-info-content__body. Uses the unified tokens:
   type 11/13/14/16/20/26, radius 6/10/14, ink scale, single primary.
   Clause numbers use the mono face — they are citable references (§ 4.2.1),
   which is exactly what the mono face is reserved for.
   ========================================================================== */
html body .z-legal { max-width: 74ch; color: var(--z-ink-2); font-size: var(--z-text-base); line-height: 1.65; }

/* — table of contents — */
html body .z-legal__toc {
  background: var(--z-canvas-warm);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-5) var(--z-space-6);
  margin: 0 0 var(--z-space-10);
}
html body .z-legal__toc-title {
  font-size: var(--z-text-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--z-ink-3);
  margin: 0 0 var(--z-space-3);
}
html body .z-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html body .z-legal__toc a {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--z-space-2);
  align-items: baseline;
  padding: 7px var(--z-space-2); border-radius: var(--z-radius);
  color: var(--z-ink); font-size: var(--z-text-sm); text-decoration: none;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
html body .z-legal__toc a:hover { background: var(--z-paper); color: var(--z-primary); }
html body .z-legal__toc-num {
  font-family: var(--z-font-mono); font-size: var(--z-text-xs);
  color: var(--z-ink-4); font-variant-numeric: tabular-nums;
}
html body .z-legal__toc a:hover .z-legal__toc-num { color: var(--z-primary); }

/* — sections — */
html body .z-legal__section { margin: 0 0 var(--z-space-12); scroll-margin-top: calc(var(--z-header-height) + 24px); }
html body .z-legal__section:last-child { margin-bottom: 0; }

html body .z-legal__h2 {
  display: flex; align-items: baseline; gap: var(--z-space-3);
  font-size: var(--z-text-xl); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.25; color: var(--z-ink); text-wrap: balance;
  margin: 0 0 var(--z-space-5);
  padding-bottom: var(--z-space-3);
  border-bottom: 2px solid var(--z-ink);
}
html body .z-legal__h2-num {
  flex: none;
  font-family: var(--z-font-mono); font-size: var(--z-text-md);
  font-weight: 500; color: var(--z-primary); font-variant-numeric: tabular-nums;
}
html body .z-legal__h3 {
  font-size: var(--z-text-md); font-weight: 700; line-height: 1.4;
  color: var(--z-ink); margin: var(--z-space-8) 0 var(--z-space-3); text-wrap: balance;
}
html body .z-legal__h3:first-of-type { margin-top: var(--z-space-5); }

/* — clause lists: hanging numbers, text aligned in one column — */
html body .z-legal__clauses,
html body .z-legal__alpha { list-style: none; margin: 0 0 var(--z-space-5); padding: 0; display: grid; gap: var(--z-space-3); }
html body .z-legal__clauses > li,
html body .z-legal__alpha > li {
  display: grid; grid-template-columns: 54px 1fr; gap: var(--z-space-3);
  align-items: baseline; font-size: var(--z-text-sm); line-height: 1.65;
}
html body .z-legal__alpha > li { grid-template-columns: 26px 1fr; }
html body .z-legal__num {
  font-family: var(--z-font-mono); font-size: var(--z-text-xs);
  color: var(--z-ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html body .z-legal__txt { color: var(--z-ink-2); }
html body .z-legal__alpha { margin-left: var(--z-space-6); padding-left: var(--z-space-4); border-left: 2px solid var(--z-divider); }

html body .z-legal__para { margin: 0 0 var(--z-space-4); font-size: var(--z-text-sm); line-height: 1.7; }
html body .z-legal__para .z-legal__num { margin-right: var(--z-space-2); }

/* — narrow screens: numbers stack above their text — */
@media (max-width: 600px) {
  html body .z-legal__clauses > li,
  html body .z-legal__alpha > li { grid-template-columns: 1fr; gap: 2px; }
  html body .z-legal__alpha { margin-left: 0; padding-left: var(--z-space-3); }
  html body .z-legal__toc { padding: var(--z-space-4); }
  html body .z-legal__h2 { flex-direction: column; gap: 2px; }
}

/* — print: the TOC is navigation, useless on paper — */
@media print {
  html body .z-legal__toc { display: none; }
  html body .z-legal { max-width: none; color: #000; }
  html body .z-legal__section { break-inside: auto; }
  html body .z-legal__h2, html body .z-legal__h3 { break-after: avoid; }
}
/* ---- end Z-LEGAL ------------------------------------------------------- */

/* ---- Z-UNIFY corrections #2: Znamky+ chip clipping ---------------------- */
/* The 11px legibility floor widened the Znamky+ chip past the card: the price
   row needed 196px inside 173px and the chip (flex-shrink:0, nowrap) was cut
   to "ZNAMKY". Let the row wrap instead of clipping — the chip drops to its
   own line only on the narrowest cards. */
html body .z-deal__price-row,
html body .z-feat__price-row,
html body .z-pc__price-row,
html body .z-auc__price-row {
  flex-wrap: wrap !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
  min-width: 0 !important;
  overflow: visible !important;
}
html body .z-pc__zplus,
html body .z-product-zplus {
  font-size: var(--z-text-xs) !important;
  line-height: 1.25 !important;
  padding: 3px 7px !important;
  border-radius: var(--z-radius) !important;
  max-width: 100% !important;
}
html body .z-deal__new, html body .z-feat__new, html body .z-pc__new { flex: none !important; }
html body .z-deal__old, html body .z-feat__old, html body .z-pc__old { flex: none !important; }
/* ---- end corrections #2 ------------------------------------------------- */

/* An earlier block pins these rows to flex-wrap:nowrap at specificity (0,2,3)
   via a `.z-dod`/`.z-promo`/`.z-feat-grid` ancestor — a plain
   `html body .z-deal__price-row` (0,1,3) loses to it no matter how late it
   sits. Match the ancestor to actually win. */
html body .z-dod .z-deal__price-row,
html body .z-promo .z-deal__price-row,
html body .z-feat-grid .z-feat__price-row,
html body .z-dod .z-pc__price-row,
html body .z-promo .z-pc__price-row {
  flex-wrap: wrap !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
  align-items: center !important;
}

/* ============================================================================
   Z-HERO-UNIFY — the three hero units read as one family (2026-07-29)
   Main slide, Znamky+ tile and Promo tile previously had 3 eyebrow styles,
   3 CTA styles (one wasn't even a button) and a hand-styled inline badge.
   Now: one badge component, one title scale, one CTA geometry.
   Colour still carries meaning — yellow badge = Znamky+ brand, amber = promo —
   but every ACTION is the blue primary, so "what do I click" is learnable.
   ========================================================================== */

/* — eyebrow / badge: one spec — */
html body .z-hero .z-hero__eyebrow {
  font-size: var(--z-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html body .z-hero__tile-badge {
  position: absolute !important;
  top: var(--z-space-4) !important;
  left: var(--z-space-4) !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: calc(100% - var(--z-space-8)) !important;
  padding: 4px 10px !important;
  border-radius: var(--z-radius-pill) !important;
  font-size: var(--z-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
}
html body .z-hero__tile-badge--zp    { background: var(--z-yellow) !important; color: var(--z-ink) !important; }
html body .z-hero__tile-badge--promo { background: rgba(255,255,255,.94) !important; color: var(--z-warn) !important; }

/* — tiles: room for the badge, identical inner rhythm — */
html body .z-hero__side .z-hero__tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: var(--z-space-6) !important;
  border-radius: var(--z-radius-lg) !important;
  overflow: hidden !important;
}
html body .z-hero__side .z-hero__tile-title {
  font-size: var(--z-text-xl) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 22ch !important;
  text-wrap: balance !important;
}
html body .z-hero__side .z-hero__tile-desc {
  font-size: var(--z-text-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin: var(--z-space-2) 0 0 !important;
}

/* — one CTA geometry across all three units — */
html body .z-hero .z-hero__cta .z-btn,
html body .z-hero__side .z-hero__tile-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  margin-top: var(--z-space-5) !important;
  padding: 12px 20px !important;
  border-radius: var(--z-radius-md) !important;
  font-family: var(--z-font-sans) !important;
  font-size: var(--z-text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  background: var(--z-primary) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(15,18,22,.28) !important;
  transition: background-color var(--z-fast) var(--z-ease) !important;
}
html body .z-hero .z-hero__cta .z-btn:hover,
html body .z-hero__side .z-hero__tile:hover .z-hero__tile-cta {
  background: var(--z-primary-hover) !important;
}

/* the promo tile sits on a LIGHT photo — its copy stays ink, not white */
html body .z-hero__tile--orange .z-hero__tile-title { color: var(--z-ink) !important; text-shadow: none !important; }
html body .z-hero__tile--orange .z-hero__tile-desc  { color: var(--z-ink-2) !important; text-shadow: none !important; }

@media (max-width: 767px) {
  html body .z-hero__side .z-hero__tile { padding: var(--z-space-5) !important; }
  html body .z-hero__side .z-hero__tile-title { font-size: var(--z-text-lg) !important; max-width: none !important; }
}
/* ---- end Z-HERO-UNIFY --------------------------------------------------- */

/* ---- Z-HERO-UNIFY corrections ------------------------------------------ */
/* 1. The green tile carries a ::before pale-green wash (#E8F4EB) from its
      flat-colour days. On a PHOTO tile with white copy it cancels the dark
      scrim and drops the title to ~1.4:1 contrast. Kill it on the Znamky+
      tile ONLY — the promo tile has DARK copy and needs its peach wash, and
      flat green tiles elsewhere still use it. */
html body .z-hero__tile--zp::before {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  content: none !important;
}
/* 2. Badge in normal flow with margin-bottom:auto — it pins to the top and
      PUSHES the copy down, so it can never overlap the title (it was sitting
      32px into it). No absolute positioning, no reserved-space guesswork. */
html body .z-hero__side .z-hero__tile-badge {
  position: static !important;
  align-self: flex-start !important;
  margin: 0 0 auto !important;
  top: auto !important;
  left: auto !important;
}
html body .z-hero__side .z-hero__tile {
  justify-content: flex-start !important;
  gap: 0 !important;
}
html body .z-hero__side .z-hero__tile-title { margin-top: var(--z-space-3) !important; }
/* keep the copy above the scrim */
html body .z-hero__side .z-hero__tile-badge,
html body .z-hero__side .z-hero__tile-title,
html body .z-hero__side .z-hero__tile-desc,
html body .z-hero__side .z-hero__tile-cta { position: relative; z-index: 2 !important; }
/* ---- end corrections ---------------------------------------------------- */

/* ============================================================================
   Z-MEGAMENU — grouped columns, no thumbnails (2026-07-29)
   Was: a flat 24-item grid of 24px images, alphabetical, no hierarchy.
   Now: logical groups as columns with a heading each. Groups come from the
   controller keyed by category_id, so cs/en/de share one map.
   ========================================================================== */
html body .z-megamenu {
  min-width: 560px !important;
  max-width: 760px !important;
  padding: var(--z-space-6) !important;
  border-radius: var(--z-radius-lg) !important;
  box-shadow: var(--z-shadow-lg) !important;
  border: 1px solid var(--z-border) !important;
  background: var(--z-paper) !important;
}
/* Two columns. Multi-column (not grid) so a group is never split across the
   gutter and the two sides balance by content height, not by item count. */
html body .z-megamenu__cols {
  display: block !important;
  column-count: 2 !important;
  column-gap: var(--z-space-10) !important;
  column-fill: balance !important;
}
html body .z-megamenu__col {
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  margin: 0 0 var(--z-space-6) !important;
}
html body .z-megamenu__col:last-child { margin-bottom: 0 !important; }

/* three visual levels: group label -> main category -> its children */
/* No margin on the entry itself — childless mains then sit at a tight rhythm
   set only by the link padding. Separation after a group of children comes
   from the sublist's own bottom margin. (Avoids :has(), which is below this
   file's stated browser floor.) */
html body .z-megamenu__entry { margin-bottom: 0; }
html body .z-megamenu__link--main {
  font-size: var(--z-text-base) !important;
  font-weight: 700 !important;
  color: var(--z-ink) !important;
  letter-spacing: -.005em;
}
/* breathing room ABOVE each category so a preceding child list clearly ends */
html body .z-megamenu__entry + .z-megamenu__entry { margin-top: var(--z-space-3); }
html body .z-megamenu__entry:first-child { margin-top: 0; }
html body .z-megamenu__sublist {
  list-style: none;
  margin: var(--z-space-1) 0 0 var(--z-space-2);
  padding-left: var(--z-space-4);
  border-left: 2px solid var(--z-border);
  display: grid;
  gap: 0;
}
html body .z-megamenu__sublink,
html body .z-megamenu__more {
  display: block;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: var(--z-radius);
  font-size: var(--z-text-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--z-ink-3);
  text-decoration: none;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
html body .z-megamenu__sublink:hover,
html body .z-megamenu__more:hover,
html body .z-megamenu__sublink:focus-visible {
  background: var(--z-canvas-warm);
  color: var(--z-primary);
}
html body .z-megamenu__more { font-variant-numeric: tabular-nums; color: var(--z-ink-4); }
html body .z-megamenu__coltitle {
  font-size: var(--z-text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--z-ink-3);
  padding-bottom: var(--z-space-2);
  margin-bottom: var(--z-space-2);
  border-bottom: 1px solid var(--z-border);
  white-space: nowrap;
}
html body .z-megamenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
html body .z-megamenu__link {
  display: block;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: var(--z-radius);
  font-size: var(--z-text-sm);
  line-height: 1.4;
  color: var(--z-ink);
  text-decoration: none;
  transition: background-color var(--z-fast) var(--z-ease), color var(--z-fast) var(--z-ease);
}
html body .z-megamenu__link:hover,
html body .z-megamenu__link:focus-visible {
  background: var(--z-canvas-warm);
  color: var(--z-primary);
}
/* the old image grid is retired — hide any stragglers from cached markup */
html body .z-megamenu__img { display: none !important; }
@media (max-width: 1024px) {
  html body .z-megamenu__cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}
/* ---- end Z-MEGAMENU ----------------------------------------------------- */

/* Fallback branch (controller not yet grouped) renders ONE .z-megamenu__col.
   break-inside:avoid would make it an unsplittable block and leave column two
   empty — let a lone column flow across both. */
html body .z-megamenu__col:only-child { break-inside: auto !important; -webkit-column-break-inside: auto !important; }

/* ============================================================================
   Z-AUCTION-MATCH — align the auction detail page with the product page
   (2026-07-31). Same skeleton was already shared (.z-product-page /
   -grid-2col / -gallery / -buy); only the right column had drifted:
     · eyebrow was a radius:999px pill STRETCHED to the full 638px column
     · pricebox border was #14213D navy vs the theme's #E8E4D9
     · card radii alternated 14 / 10 / 14 / 10
     · three tinted gradient surfaces stacked where the product page uses
       white cards plus one pale accent band
   ========================================================================== */

/* — eyebrow: a chip, not a full-width band — */
html body .z-product-page .z-product-eyebrow {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: var(--z-radius-pill) !important;
  font-size: var(--z-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* — every right-column block shares the product pricebox recipe — */
html body .z-auc-pricebox,
html body .z-auc-countdown,
html body .z-product-buy--auction .login-prompt,
html body .z-auc-follow {
  border-radius: var(--z-radius-lg) !important;   /* 14 — was 14/10/14/10 */
  box-sizing: border-box !important;
}
html body .z-auc-pricebox {
  background: var(--z-paper) !important;
  border: 1px solid var(--z-border) !important;   /* was navy #14213D */
  padding: 18px !important;                        /* matches .z-product-pricebox */
  box-shadow: none !important;
}
/* countdown keeps a pale accent — the product page already uses a pale band
   for the shipping notice — but adopts the same border + radius so it reads
   as part of the same set rather than a separate object. */
html body .z-auc-countdown {
  background: var(--z-warn-bg) !important;
  background-image: none !important;
  border: 1px solid var(--z-warn-border) !important;
  padding: 14px 18px !important;
}
html body .z-auc-countdown .z-auc-countdown__timer,
html body .z-auc-countdown [class*="timer"] { color: var(--z-warn) !important; }

/* the login CTA stays the one emphasis surface (it is the conversion step),
   but on the shared geometry */
html body .z-product-buy--auction .login-prompt {
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
html body .z-auc-follow {
  background: var(--z-paper) !important;
  border: 1px solid var(--z-border) !important;
  font-size: var(--z-text-base) !important;
  font-weight: 600 !important;
  min-height: 44px !important;
}

/* — consistent vertical rhythm between blocks (was 12/16/14/14/0) — */
html body .z-product-buy--auction > * + * { margin-top: var(--z-space-4) !important; }
html body .z-product-buy--auction .z-product-title { margin-top: var(--z-space-3) !important; }
html body .z-product-buy--auction .z-product-eyebrow__sub { margin-top: var(--z-space-1) !important; }
/* ---- end Z-AUCTION-MATCH ------------------------------------------------ */

/* ---- auction cards on CATEGORY pages: match the auction-controller page ----
   /aukce-filatelie-znamky renders through product/category with the legacy
   jquery.countdown markup; /aukce-znamek-filatelie-bankovek uses the auction
   controller's .countdown-box. Same component classes now, so one rule styles
   both and the two listings look identical. */
html body .z-auc-cell .countdown-box,
html body .z-product-grid .countdown-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #FFF8E1 !important;
  border: 1px solid #FFCA28 !important;
  border-radius: var(--z-radius) !important;
  padding: 6px 10px !important;
  margin-top: var(--z-space-2) !important;
}
html body .z-auc-cell .countdown-box .countdown-value,
html body .z-product-grid .countdown-box .countdown-value {
  font-size: var(--z-text-sm) !important;
  font-weight: 700 !important;
  color: #E65100 !important;
  font-variant-numeric: tabular-nums !important;
}
html body .z-auc-cell .countdown-box .countdown-endtime,
html body .z-product-grid .countdown-box .countdown-endtime {
  font-size: var(--z-text-xs) !important;
  font-weight: 600 !important;
  color: #F57C00 !important;
}
html body .z-auc-cell .countdown-box .text-danger,
html body .z-product-grid .countdown-box .text-danger { color: var(--z-danger) !important; }
/* ---- end auction-card countdown ----------------------------------------- */

/* ---- checkout responsive reliability, 2026-07-31 ------------------------ */
/* Keep the Google-rendered button inside the checkout column. */
html body .z-co-google .g_id_signin,
html body .z-co-google .g_id_signin > div,
html body .z-co-google .g_id_signin [role="button"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* The quantity badge deliberately overlaps the thumbnail, so the media
   wrapper must not crop it. The image retains the rounded card corners. */
html body .z-summary__item-media {
  overflow: visible !important;
}
html body .z-summary__item-media img {
  border-radius: inherit !important;
}
html body .z-summary__item-qty {
  z-index: 2 !important;
}

/* Context-sensitive action directly beneath the total (shipping / order). */
html body .z-summary__checkout-action {
  margin: 14px 0 !important;
}
html body .z-summary__checkout-action[hidden] {
  display: none !important;
}
html body .z-summary__checkout-action:disabled {
  opacity: .55 !important;
  cursor: wait !important;
  transform: none !important;
}

/* Stripe's injected legacy stylesheet centres a content-sized fieldset.
   Stretch every layer so the secure card element uses the complete column. */
html body .z-co-pay-form .payment-form-wrapper {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
html body .z-co-pay-form .payment-form-wrapper form,
html body .z-co-pay-form .payment-form-wrapper fieldset,
html body .z-co-pay-form .payment-form-wrapper .container-stripe,
html body .z-co-pay-form .payment-form-wrapper #card-element {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body .z-co-pay-form .payment-form-wrapper fieldset {
  margin: 0 !important;
}
html body .z-co-pay-form .payment-form-wrapper .container-stripe {
  padding: 0 !important;
}
html body .z-co-pay-form .payment-form-wrapper #card-element {
  padding: 12px !important;
}
html body .z-co-pay-form .payment-form-wrapper iframe {
  width: 100% !important;
  min-width: 0 !important;
}

/* Add a compact directional cue between every checkout step. */
html body .z-step__bar {
  position: relative !important;
}
html body .z-step__bar::after {
  content: '\203A' !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  transform: translateY(-54%) !important;
  padding-left: 4px !important;
  background: var(--z-paper, #fff) !important;
  color: #9AA0AE !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

@media (max-width: 720px) {
  html body .z-step__bar {
    display: block !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 0 !important;
    margin: 0 1px !important;
    background: transparent !important;
  }
  html body .z-step__bar::after {
    right: 1px !important;
    padding-left: 0 !important;
    background: transparent !important;
    font-size: 17px !important;
  }
  html body .z-co-pay-form .payment-form-wrapper {
    padding: 0 !important;
    box-shadow: none !important;
  }
}
/* ---- end checkout responsive reliability ------------------------------- */


/* ============================================================
   MOBILE: HERO VARIANTS + BREADCRUMB
   Appended last on purpose — both fixes have to beat earlier
   !important declarations of equal specificity.
   ============================================================ */

/* The breadcrumb was collapsing to width:0 and sitting off the right edge:
   width:auto!important on the nav + width:100% on its inner child gives an
   intrinsic size of zero. */
@media (max-width: 720px) {
  nav.z-breadcrumb,
  body[class] ul.breadcrumb {
    width: 100% !important;
  }
}

/* Hero colour variants — the ≤767px block repaints .z-cat-hero navy with
   !important and swallowed --red / --green / --gold along with it. Same
   selector shape as that block, so the modifier wins. */
@media (max-width: 767px) {
  html body section.z-cat-hero--red,
  html body .z-cat-hero--red,
  body .z-cat-hero--red {
    background: linear-gradient(135deg, #5C0F12 0%, #8B1A20 55%, #C92834 100%) !important;
    background-image: linear-gradient(135deg, #5C0F12 0%, #8B1A20 55%, #C92834 100%) !important;
    background-color: #8B1A20 !important;
  }
  html body section.z-cat-hero--green,
  html body .z-cat-hero--green,
  body .z-cat-hero--green {
    background: linear-gradient(135deg, #064E3B 0%, #047857 55%, #10B981 100%) !important;
    background-image: linear-gradient(135deg, #064E3B 0%, #047857 55%, #10B981 100%) !important;
    background-color: #047857 !important;
  }
  html body section.z-cat-hero--gold,
  html body .z-cat-hero--gold,
  body .z-cat-hero--gold {
    background: linear-gradient(135deg, #5C3B0A 0%, #B86A20 55%, #FFB000 100%) !important;
    background-image: linear-gradient(135deg, #5C3B0A 0%, #B86A20 55%, #FFB000 100%) !important;
    background-color: #B86A20 !important;
  }
}


/* ============================================================
   BESTSELLER: hide the information module
   The module renders twice in the left column — once desktop
   (aside.col-sm-3.hidden-xs), once mobile (.visible-xs.z-accnav-m).
   Both are .z-info-sidebar, so this covers each of them.
   ============================================================ */
body.product-bestseller .z-info-sidebar,
body.product-bestseller .z-info-module {
  display: none !important;
}
/* the wrappers are then empty — don't leave their spacing behind */
body.product-bestseller .z-cat-sidebar__filters {
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   MOBILE CATEGORY POLISH
   ============================================================ */
@media (max-width: 767px) {
  /* The stats row was set to nowrap + overflow-x:auto, but .z-cat-hero has
     overflow:hidden, so a fourth stat is cut off instead of scrolled. Let it
     wrap. Selector matches the nowrap rule it has to beat. */
  html body section.z-cat-hero .z-cat-hero__stats,
  html body .z-cat-hero .z-cat-hero__stats {
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    overflow: visible !important;
  }

  /* Container had padding:0, so the "CENA" heading sat on the rounded border. */
  html body .z-price-filter {
    padding: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Store credit in the top-strip account dropdown (2026-08-01)
   Badge beside the first name + a balance/expiry row at the top of the menu.
   ───────────────────────────────────────────────────────────────────────── */
html body .z-topstrip__credit {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  color: #0F7A3C;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: #E6F4EC;
  border-radius: 999px;
  vertical-align: 1px;
}
html body .z-dd__credit {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}
html body .z-dd__credit-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
html body .z-dd__credit-lbl {
  color: #8A8578;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
html body .z-dd__credit-val {
  color: #7EE2A8;
  font-size: 15px;
  font-weight: 800;
}
html body .z-dd__credit-exp {
  color: #B45309;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 720px) {
  html body .z-topstrip__credit { display: none; }
}

/* r13: mobile account pages — breadcrumb left inset aligned with page content */
@media (max-width: 767px) {
  html body[class*="account-"] .z-breadcrumb__inner { padding-left: 30px !important; }
}

/* r14: account pages mobile — content full width (desktop 75% col override leaked into mobile) */
@media (max-width: 767px) {
  html body[class*="account-"] #content { width: 100% !important; margin-left: 0 !important; }
  html body #account-znamkyplus .zp-status-card,
  html body #account-znamkyplus .zp-benefits-card,
  html body #account-znamkyplus .zp-history-card { padding: 16px; }
  html body #account-znamkyplus .zp-status-header { flex-wrap: wrap; gap: 8px; }
  html body #account-znamkyplus .zp-status-header h2 { font-size: 18px; }
  html body #account-znamkyplus h1 { font-size: 26px; }
  html body #account-znamkyplus .zp-benefits-card h3,
  html body #account-znamkyplus .zp-history-card h3 { font-size: 16px; }
  html body #account-znamkyplus .table > thead > tr > th,
  html body #account-znamkyplus .table > tbody > tr > td { font-size: 13px; padding: 6px 8px; }
  /* drawer credit chip — z-topstrip__credit is hidden on mobile, re-enable inside the drawer */
  html body .z-mobile-menu__credit { display: inline-block !important; margin-left: 8px; }
}

/* r16: mobile polish — breadcrumb inset + smaller font (site-wide), footer link
   columns inset, duplicate small sort/limit toolbar hidden on /special + /novinky */
@media (max-width: 767px) {
  html body nav.z-breadcrumb .z-breadcrumb__inner,
  html body[class*="account-"] .z-breadcrumb__inner {
    padding-left: 20px !important;
    padding-right: 16px !important;
    font-size: 12px !important;
  }
  html body .footer-blocks .column,
  html body footer .contact-block,
  html body footer .social-block {
    padding-left: 20px !important;
    padding-right: 16px !important;
  }
  html body.product-special .z-toolbar,
  html body.product-latest .z-toolbar { display: none !important; }
}

/* r17: mobile checkout — single Objednat button (summary action under the total);
   the in-card confirm on step 3 duplicated it */
@media (max-width: 767px) {
  html body .z-co-step[data-step-section="3"] .z-co-btn--confirm { display: none !important; }
}

/* r26: visually-hidden page h1 (HP) + button reset for converted toggler anchors */
.z-vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
button.mobile_togglemenu { background:none; border:0; padding:0; cursor:pointer; }

/* r30: footer contact/social blocks sit INSIDE an already-padded column — the r16
   rule double-indented them (Napiste nam + social icons off-grid). Reset to 0. */
@media (max-width: 767px) {
  html body footer .contact-block,
  html body footer .social-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* r31: "Pripravujeme" sticker on catalog pages */
.z-cat-beta { position: fixed; top: 96px; right: 18px; z-index: 900; transform: rotate(5deg); background: #FFC93A; color: #1A1406; border: 2px dashed rgba(26,20,6,.45); border-radius: 14px; padding: 14px 22px; box-shadow: 0 12px 30px rgba(0,0,0,.28); text-align: center; pointer-events: none; }
.z-cat-beta strong { display: block; font-size: 20px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; line-height: 1.15; }
.z-cat-beta span { font-size: 13px; font-weight: 600; }
@media (max-width: 767px) {
  .z-cat-beta { top: auto; bottom: 78px; right: 10px; transform: rotate(3deg); padding: 10px 14px; border-radius: 11px; }
  .z-cat-beta strong { font-size: 15px; }
  .z-cat-beta span { font-size: 11px; }
}

/* r34 (#13): catalog series blocks render lazily — content stays in HTML for
   crawlers/AI, but offscreen series skip layout+paint (3.1 MB page, 53 series) */
#stamp-series-container > div {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

/* r34b: sticker sits next to the H1 (scrolls with the page) instead of fixed corner */
.z-cat-beta {
  position: absolute !important;
  top: 150px !important;
  /* Držet se pravého okraje obsahového sloupce (max-width 1280 + 32px padding),
     ne okraje okna — na širokých monitorech přetékal ven ze stránky.
     Na užších oknech, kde už žádný okraj nezbývá, se vrátí k 34px. */
  right: max(34px, calc((100vw - 1280px) / 2 + 32px)) !important;
  bottom: auto !important;
  z-index: 400 !important;
}
@media (max-width: 767px) {
  .z-cat-beta {
    position: static !important;
    display: inline-block;
    margin: 12px 16px 0;
    transform: rotate(-2deg);
  }
}

/* r35 (#17): a11y — category tile count contrast (was --z-ink-4, ~3.2:1) and
   44px touch targets for the icon-only social links */
.z-cat-tile__count { color: #675F50 !important; }
footer .social-block a, #footer .social-block a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* r40: product page fixes
   1. mobile in-flow "Do kosiku" (#button-cart-m) leaked into desktop - the
      z-product-cart-btn--m class never had visibility rules
   2. active thumbnail had a blue border - neutral grey instead */
@media (min-width: 768px) {
  html body .z-product-cart-btn--m { display: none !important; }
}
@media (max-width: 767px) {
  html body .z-product-cart-btn--m { display: flex !important; }
}
html body .z-product-thumb.is-active { border-color: var(--z-border-strong, #C4BFB1) !important; }

/* r42: product gallery — scrollable thumb rail for many-image products,
   main image never deformed (contain) */
.z-product-gallery__thumbs { max-height: 640px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
#z-product-main-img { object-fit: contain !important; width: 100%; height: auto; max-height: 640px; background: #0f1115; }
@media (max-width: 767px) {
  .z-product-gallery__thumbs { display: flex; flex-direction: row; gap: 8px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
  #z-product-main-img { max-height: 70vw; }
}

/* r42b: same no-deform rule for the auction detail main image (#z-main-image) */
#z-main-image { object-fit: contain !important; width: 100%; height: auto; max-height: 640px; background: #0f1115; }
@media (max-width: 767px) { #z-main-image { max-height: 70vw; } }

/* r45: theme tag chips */
.z-tagchips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.z-tagchip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #E2DCD2; border-radius:999px; background:#fff; color:#4A4238; font-size:13px; line-height:1; text-decoration:none; transition:border-color .15s, background .15s, color .15s; }
.z-tagchip:hover { border-color:#2E4BDB; color:#2E4BDB; text-decoration:none; }
.z-tagchip.is-active { background:#2E4BDB; border-color:#2E4BDB; color:#fff; }
.z-tagchip__n { font-size:11px; color:#8A8071; }
.z-tagchip.is-active .z-tagchip__n { color:#DCE2FF; }
.z-tagchip--clear { background:#FBEAEA; border-color:#E5B8B8; color:#A33; }
@media (max-width:767px) {
  .z-tagchips { gap:6px; margin:10px 0 14px; }
  .z-tagchip { padding:5px 10px; font-size:12px; }
}

/* ── r40 mobile overflow fixes (2026-08-02) ─────────────────────────────
   Footer newsletter: the unconditioned `.z-newsletter__form { min-width:320px }`
   (line ~2114) beats the earlier mobile override in the cascade, so the form
   overflowed its card by ~33px on 375px viewports and clipped the promo text. */
@media (max-width: 700px) {
  html body .z-newsletter__form {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: column;
  }
  html body .z-newsletter__form input,
  html body .z-newsletter__form button { width: 100%; }
}

/* ── r42: footer social icons (2026-08-03) ──────────────────────────────
   An old mobile rule `footer .social-block { margin-top:-25px }` pulled the
   FB/IG icons up into the collapsed "Napište nám" accordion row, and r30's
   padding reset left them flush against the screen edge. Align them with the
   20px heading indent and give the row its own space. */
@media (max-width: 767px) {
  html body footer .social-block {
    margin-top: 0 !important;
    margin-bottom: 12px;
    padding-left: 20px !important;
  }
  html body footer .social-block ul { margin-top: 4px; }
  html body footer .social-block li { margin: 0 !important; }
}

/* ── r46: "Ilustrační foto" chip (category cards + product gallery) ─────
   Shown when the product has attribute 17 (illustrative photo) or at least
   one unit was already sold — the photo may not show the exact piece. */
.z-pc__chip--illu {
  background: #F4F1EA;
  color: #6B6455;
  border: 1px solid #E5E1D8;
}
.z-product-gallery__photo-chip.is-illu {
  background: rgba(244, 241, 234, .92);
  color: #6B6455;
}

/* ── r47: "Ilustrační foto" moved onto the photo (category cards) ───────
   Bottom-left overlay on the card image; top corners stay for the sale/new
   badges and the wishlist heart. */
.z-pc__photochip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #6B6455;
  border: 1px solid #E5E1D8;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}

/* ── r48: wishlist heart was an ellipse on mobile ───────────────────────
   The global tap-target rule (max-width:720px → button { min-height:40px })
   stretched the 28×28 heart button to 28×40; with border-radius:50% that
   renders as a slanted-looking oval. Make it a real 40×40 circle instead. */
@media (max-width: 720px) {
  html body .z-pc__wish {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   r65 · PRIORITNÍ NOVINKY ZNAMKY+ — „zlatá pečeť"
   .z-feat__badge--prio ani .z-feat__cart--prio dosud neměly JEDINÉ pravidlo:
   pečeť se sázela v toku nad fotkou (posouvala obrázky, rozhodila výšky karet)
   a zamčené CTA vypadalo jako běžné modré „Do košíku".
   Barevný klíč přebírá gate modal (.z-gprio): inkoust #12161c + zlatá #ffc93a.
   Záměrná inverze proti cenovému chipu Znamky+ (zlaté pole / tmavý text), aby
   se „členská cena" a „zatím jen pro členy" nedaly splést.
   ═══════════════════════════════════════════════════════════════════════ */

.z-feat__media { position: relative; }

/* ── karta v prioritním okně ─────────────────────────────────────────── */
.z-feat--prio {
  border-color: #EBD9A4;
  background: linear-gradient(180deg, #FFFDF6 0%, #FFFFFF 62%);
}
.z-feat--prio .z-feat__media {
  background: #FFFCF3;
  border-bottom-color: #F0E4BE;
}
/* teplý svit v levém horním rohu — pečeť „prosvítá" do karty */
.z-feat--prio::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 190px; height: 190px;
  background: radial-gradient(circle at 0 0, rgba(255,201,58,.30), rgba(255,201,58,0) 70%);
  pointer-events: none;
  z-index: 1;
}
.z-feat--prio:hover {
  border-color: #E0C264;
  box-shadow: 0 10px 26px rgba(160,120,10,.16);
}

/* ── pečeť ───────────────────────────────────────────────────────────── */
.z-feat__badge--prio {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  max-width: calc(100% - 18px);
  padding: 5px 9px 5px 8px;
  border-radius: 10px;
  background: #12161c;
  color: #ffc93a;
  font-weight: 850;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12,16,22,.34), 0 0 0 1px rgba(255,201,58,.55) inset;
  animation: zPrioSealIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.z-feat__badge--prio i {
  grid-row: 1 / 3;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,201,58,.75);
}
.z-feat__badge--prio b { grid-column: 2; grid-row: 1; font-size: 9px; font-weight: 850; }

/* odpočet — tabulkové číslice, ať sekundy neposkakují */
.z-prio-clock {
  grid-column: 2;
  grid-row: 2;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: #ffdf8a;
}
.z-prio-clock[hidden] { display: none; }

/* poslední hodina */
.z-feat__badge--prio.is-urgent {
  background: #2A1206;
  box-shadow: 0 2px 10px rgba(120,40,0,.4), 0 0 0 1px rgba(255,150,60,.7) inset;
  animation: zPrioSealIn .5s cubic-bezier(.2,.7,.3,1) both, zPrioPulse 2.2s ease-in-out 1s infinite;
}
.z-feat__badge--prio.is-urgent,
.z-feat__badge--prio.is-urgent .z-prio-clock { color: #FFB25E; }
.z-feat__badge--prio.is-urgent b { color: #FFD9A8; }

/* jednorázový přejezd lesku při hoveru karty */
.z-feat__badge--prio::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.z-feat--prio:hover .z-feat__badge--prio::after { animation: zPrioShine .85s ease-out; }

/* nástup pečetí s prodlevou podle pořadí karty */
.z-feat-grid > .z-feat--prio:nth-child(1) .z-feat__badge--prio { animation-delay: .04s; }
.z-feat-grid > .z-feat--prio:nth-child(2) .z-feat__badge--prio { animation-delay: .10s; }
.z-feat-grid > .z-feat--prio:nth-child(3) .z-feat__badge--prio { animation-delay: .16s; }
.z-feat-grid > .z-feat--prio:nth-child(4) .z-feat__badge--prio { animation-delay: .22s; }
.z-feat-grid > .z-feat--prio:nth-child(5) .z-feat__badge--prio { animation-delay: .28s; }
.z-feat-grid > .z-feat--prio:nth-child(n+6) .z-feat__badge--prio { animation-delay: .34s; }

@keyframes zPrioSealIn {
  from { opacity: 0; transform: translateY(-7px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes zPrioShine {
  from { transform: translateX(-140%) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}
@keyframes zPrioPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(120,40,0,.4), 0 0 0 1px rgba(255,150,60,.7) inset; }
  50%      { box-shadow: 0 2px 16px rgba(190,80,0,.55), 0 0 0 1px rgba(255,190,120,.95) inset; }
}

/* ── zamčené CTA ─────────────────────────────────────────────────────── */
.z-feat__cart--prio {
  background: #12161c;
  color: #ffc93a;
  box-shadow: 0 1px 0 #05070a, 0 3px 10px rgba(12,16,22,.24);
  font-size: 12px;
  letter-spacing: .1px;
  white-space: nowrap;      /* dřív se „Jen pro Znamky+" lámalo na dva řádky */
  overflow: hidden;
}
.z-feat__cart--prio:hover {
  background: linear-gradient(135deg, #FFC93A 0%, #FFB000 100%);
  color: #15181D;
  box-shadow: 0 1px 0 #C98F00, 0 6px 16px rgba(255,176,0,.34);
}
.z-feat__cart--prio .z-feat__cart-ico { flex: 0 0 auto; transition: transform .18s var(--z-ease, ease); }
.z-feat__cart--prio:hover .z-feat__cart-ico { transform: translateY(-1px) rotate(-8deg); }

/* výměna popisku: „Jen pro Znamky+" → „Odemknout →" */
.z-feat__cart-swap {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 1.25em;
  overflow: hidden;
}
.z-feat__cart-swap > span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  transition: transform .22s cubic-bezier(.3,.7,.3,1);
}
.z-feat__cart--prio:hover .z-feat__cart-swap > span { transform: translateY(-1.25em); }

/* ── vysvětlivka nad mřížkou ─────────────────────────────────────────── */
.z-prio-legend {
  /* pozor: flex by z <strong> udělal samostatnou položku a věta by se rozpadla
     do sloupců — text musí zůstat v běžném inline toku, hvězda jde absolutně */
  display: block;
  position: relative;
  margin: 0 0 12px;
  padding: 9px 13px 9px 34px;
  border: 1px solid #F0E4BE;
  border-left: 3px solid #FFC93A;
  border-radius: 10px;
  background: #FFFCF3;
  color: #6B6455;
  font-size: 12.5px;
  line-height: 1.5;
}
.z-prio-legend[hidden] { display: none; }
.z-prio-legend i { position: absolute; left: 14px; top: 9px; font-style: normal; color: #E0A800; font-size: 13px; line-height: 1.5; }
.z-prio-legend strong { color: #4A4436; font-weight: 800; }

/* ── mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .z-feat__badge--prio { top: 7px; left: 7px; padding: 4px 8px 4px 7px; column-gap: 5px; }
  .z-feat__badge--prio i { font-size: 13px; }
  .z-feat__badge--prio b { font-size: 8.5px; }
  .z-prio-clock { font-size: 10.5px; }
  .z-feat--prio::before { width: 130px; height: 130px; }
  .z-feat__cart--prio { font-size: 11.5px; }
  .z-prio-legend { font-size: 12px; padding: 8px 11px 8px 31px; }
  .z-prio-legend i { left: 12px; top: 8px; }
}

/* ── klid pro ty, kdo si vypnuli animace ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .z-feat__badge--prio,
  .z-feat__badge--prio.is-urgent { animation: none; }
  .z-feat--prio:hover .z-feat__badge--prio::after { animation: none; }
  .z-feat__cart-swap > span,
  .z-feat__cart--prio .z-feat__cart-ico { transition: none; }
}


/* ── r70: členská varianta pečeti (obnoveno — přepsala ji paralelní session)
   + tentýž tier na kartách kategorie (.z-pc__seal). ─────────────────── */
.z-feat__badge--prio.is-mine,
.z-pc__seal.is-mine {
  box-shadow: 0 2px 10px rgba(12,16,22,.34), 0 0 0 1px rgba(120,220,150,.55) inset;
}
.z-feat__badge--prio.is-mine .z-prio-clock,
.z-pc__seal.is-mine .z-prio-clock { color: #9BE8B4; }

/* pečeť na kartě kategorie — leží v už absolutně umístěném stacku .z-pc__badges,
   takže se nepozicuje sama; vizuál je shodný s HP */
.z-pc__seal {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  align-self: flex-start;
  position: relative;
  padding: 5px 9px 5px 8px;
  border-radius: 10px;
  background: #12161c;
  color: #ffc93a;
  font-weight: 850;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12,16,22,.34), 0 0 0 1px rgba(255,201,58,.55) inset;
}
.z-pc__seal i { grid-row: 1 / 3; font-style: normal; font-size: 15px; line-height: 1; text-shadow: 0 0 8px rgba(255,201,58,.75); }
.z-pc__seal b { grid-column: 2; grid-row: 1; font-size: 9px; font-weight: 850; }
.z-pc__seal .z-prio-clock { grid-column: 2; grid-row: 2; }
.z-pc__seal.is-urgent {
  background: #2A1206;
  box-shadow: 0 2px 10px rgba(120,40,0,.4), 0 0 0 1px rgba(255,150,60,.7) inset;
}
.z-pc__seal.is-urgent, .z-pc__seal.is-urgent .z-prio-clock { color: #FFB25E; }
.z-pc__seal.is-urgent b { color: #FFD9A8; }

/* karta v prioritním okně */
.z-pc--prio { border-color: #EBD9A4 !important; background: linear-gradient(180deg,#FFFDF6 0%,#FFFFFF 62%); }
.z-pc--prio:hover { border-color: #E0C264 !important; box-shadow: 0 10px 26px rgba(160,120,10,.16) !important; }

/* zamčené CTA na kartě kategorie */
.z-pc__cart--prio {
  background: #12161c !important;
  color: #ffc93a !important;
  box-shadow: 0 1px 0 #05070a, 0 3px 10px rgba(12,16,22,.24) !important;
  white-space: nowrap;
  overflow: hidden;
}
.z-pc__cart--prio:hover {
  background: linear-gradient(135deg,#FFC93A 0%,#FFB000 100%) !important;
  color: #15181D !important;
}

@media (max-width: 767px) {
  .z-pc__seal { padding: 4px 8px 4px 7px; column-gap: 5px; }
  .z-pc__seal i { font-size: 13px; }
  .z-pc__seal b { font-size: 8.5px; }
  .z-pc__seal .z-prio-clock { font-size: 10.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   r72 · dotažení prioritního tieru na sdílené karty výpisů
   .z-pc__badge--prio nemělo ani jedno pravidlo, takže na /novinky, /special,
   bestseller i dailydeal visela pečeť jako neostylovaný text. Vizuál i chování
   se přebírá z .z-pc__seal (kategorie) — obojí drží jeden vzhled.
   ═══════════════════════════════════════════════════════════════════════ */

.z-pc__badge--prio {
  display: grid !important;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  align-self: flex-start;
  position: relative;
  padding: 5px 9px 5px 8px !important;
  border-radius: 10px !important;
  background: #12161c !important;
  color: #ffc93a !important;
  font-weight: 850;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(12,16,22,.34), 0 0 0 1px rgba(255,201,58,.55) inset;
}
.z-pc__badge--prio i { grid-row: 1 / 3; font-style: normal; font-size: 15px; line-height: 1; text-shadow: 0 0 8px rgba(255,201,58,.75); }
.z-pc__badge--prio b { grid-column: 2; grid-row: 1; font-size: 9px; font-weight: 850; }
.z-pc__badge--prio .z-prio-clock { grid-column: 2; grid-row: 2; }

.z-pc__badge--prio.is-urgent {
  background: #2A1206 !important;
  box-shadow: 0 2px 10px rgba(120,40,0,.4), 0 0 0 1px rgba(255,150,60,.7) inset;
}
.z-pc__badge--prio.is-urgent, .z-pc__badge--prio.is-urgent .z-prio-clock { color: #FFB25E !important; }
.z-pc__badge--prio.is-urgent b { color: #FFD9A8; }

/* člen: zelený proužek = mám přístup, ne zamčeno */
.z-pc__badge--prio.is-mine { box-shadow: 0 2px 10px rgba(12,16,22,.34), 0 0 0 1px rgba(120,220,150,.55) inset; }
.z-pc__badge--prio.is-mine .z-prio-clock { color: #9BE8B4 !important; }

/* karta v prioritním okně (sdílený partial i kategorie) */
.z-pc--prio { border-color: #EBD9A4 !important; background: linear-gradient(180deg,#FFFDF6 0%,#FFFFFF 62%); }
.z-pc--prio:hover { border-color: #E0C264 !important; box-shadow: 0 10px 26px rgba(160,120,10,.16) !important; }

@media (max-width: 767px) {
  .z-pc__badge--prio { padding: 4px 8px 4px 7px !important; column-gap: 5px; }
  .z-pc__badge--prio i { font-size: 13px; }
  .z-pc__badge--prio b { font-size: 8.5px; }
  .z-pc__badge--prio .z-prio-clock { font-size: 10.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   r79 · košík ve staveném (mobilním) rozvržení
   Breakpoint 980px = přesně tam, kde se .z-cart-layout láme do jednoho
   sloupce; jiná hranice by dala stav, kdy souhrn je dole, ale pás pořád
   nad ním.
   • „Garance pravosti u každé známky" se skrývá — obsahově totéž říká
     pás „Proč nakupovat u nás" hned pod ním, na mobilu to byla dvojitá
     zpráva zabírající celou obrazovku.
   • Pás se přesouvá pod souhrn s celkovou částkou. Pás je uvnitř
     .z-cart-main, souhrn v .z-cart-sidebar, takže samotné `order` přes
     hranici rodiče nedosáhne — `display:contents` na hlavním sloupci
     z jeho dětí udělá přímé položky mřížky a `order` pak funguje.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .z-cart-main > .z-expert-callout { display: none; }

  .z-cart-main { display: contents; }
  .z-cart-main > .z-trust-strip { order: 1; }
  /* display:contents ruší min-width:0 z .z-cart-main — bez tohohle by
     dlouhé názvy položek roztáhly mřížku do strany */
  .z-cart-layout > * { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   r84 · košík na telefonu — pás vlastností až pod souhrn
   Pravidlo výše (max-width:720px) dělá z .z-cart-layout blok, a v bloku
   `order` neplatí — proto r79 fungovalo jen na tabletu. Vracíme flex
   sloupec a pořadí určujeme u všech tří prvků výslovně: kdyby se spolehlo
   na výchozí hodnoty, ožilo by staré `order:-1` na souhrnu a celková
   částka by skočila na začátek stránky.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .z-cart-layout {
    display: flex !important;
    flex-direction: column;
  }

  /* .z-cart-main je od r79 display:contents, takže sem tečou jeho děti
     s výchozím order 0 — položky košíku tedy zůstávají první. */
  .z-cart-sidebar { order: 1 !important; }
  .z-cart-main > .z-trust-strip { order: 2; }
}


/* r85 · poznámka pod součty v rozbaleném košíku */
.cart-preview-total-note {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #6B7280;
}


/* ═══════════════════════════════════════════════════════════════════════
   r86 · mobilní košík — mezery nahoře a kupónový řádek
   ═══════════════════════════════════════════════════════════════════════ */

/* Ikona kupónu je nově SVG (emoji nešlo obarvit) — dědí barvu z rodiče. */
.z-cart-promo__icon {
  display: inline-flex;
  align-items: center;
  color: #DC2626;
}

@media (max-width: 700px) {
  /* Nad prvním boxem bylo 62 px: 16 (page) + 24 (layout, chyběl mobilní
     override) + 22 (margin kroků). Boční odsazení drží jen .z-cart-page,
     jinak se s .z-cart-layout sčítalo na 36 px. */
  .z-cart-page {
    padding: 14px 16px 32px !important;
  }
  .z-cart-layout {
    padding: 0 !important;
    gap: 12px;
  }
  .z-steps {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 720px) {
  /* Pravidlo výše dělá z bloku sloupec, takže ikona i věta stály každá na
     svém řádku. Zalamovaný řádek: ikona + věta vedle sebe, pole a tlačítko
     pod nimi přes celou šířku. */
  .z-cart-promo {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
  }
  .z-cart-promo__icon {
    flex: 0 0 auto !important;
  }
  .z-cart-promo__text {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: left !important;
  }
  .z-cart-promo__input,
  .z-cart-promo__btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   r87 · košík na telefonu — shodná šířka boxů a místo pro dvojciferné
   množství
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* r84 přepnul layout na sloupcový flex kvůli `order`. Ve sloupcovém flexu
     ale align-items řídí VODOROVNOU osu, takže zděděné `start` z .z-cart-layout
     nechalo každý box smrsknout na šířku obsahu — žlutý pruh o dopravě byl
     proto užší než panel s produkty. Svislé zarovnání to neovlivní, to ve
     sloupci řídí justify-content. */
  .z-cart-layout {
    align-items: stretch !important;
  }

  /* Pole množství mělo 38 px včetně 2×14 px odsazení → na text 10 px, takže
     „11" se ořízlo. 56 px se 6px odsazením dá textu 44 px = tři číslice.
     Písmo zůstává 16 px: pod tuhle hodnotu Safari na iPhonu po kliknutí do
     pole stránku přiblíží. */
  .z-cart-line__qty-input,
  .qty-input {
    width: 56px !important;
    min-width: 56px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   r83 · účtové stránky, které spadly na theme/default
   Používají bootstrapový .container (1400) místo kontejneru tématu (1320)
   a #content si bere pevných 75 % šířky bez ohledu na to, jestli vedle něj
   nějaké menu vůbec je. Sjednocuje se šířka a sloupce se řeší flexem, aby
   obsah vyplnil zbytek — s postranním menu i bez něj.
   ═══════════════════════════════════════════════════════════════════════ */

#account-znamkyplus-success.container,
#account-preference-onboarding.container {
  max-width: 1320px;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 821px) {
  #account-znamkyplus-success > .row,
  #account-preference-onboarding > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
  /* Postranní menu má vlastní pevnou šířku; bootstrapová 25 % neseděla. */
  #account-znamkyplus-success #column-left,
  #account-preference-onboarding #column-left {
    flex: 0 0 250px;
    width: 250px;
    max-width: 250px;
    padding-left: 0;
    padding-right: 0;
  }
  /* flex:1 místo col-sm-9 — bez menu zabere celou šířku, s menu zbytek. */
  #account-znamkyplus-success #content,
  #account-preference-onboarding #content {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding-right: 0;
  }
}

/* Na úzkých displejích ať obsah nelepí na okraj obrazovky. */
@media (max-width: 820px) {
  #account-znamkyplus-success.container,
  #account-preference-onboarding.container {
    padding-left: var(--z-container-pad, 16px);
    padding-right: var(--z-container-pad, 16px);
  }
}

/* Onboarding: nadpis a podtitulek byly na střed, zatímco uvítací panel nad
   nimi i krok s dlaždicemi pod nimi jsou vlevo. Bootstrapová .text-center
   nese !important, takže se přebíjí specificitou ID (1,1,0) i !important. */
#account-preference-onboarding .onboarding-title,
#account-preference-onboarding .onboarding-subtitle {
  text-align: left !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   r93 · SEO heading vrstva — POUZE sémantika, nula vizuální změny.
   .z-pc__hwrap obaluje jméno karty (dřív holé <a>); h2.z-kb-entry__t
   nahrazuje div se stejnou třídou. Vše dědí písmo a nuluje okraje, takže
   vykreslení je identické s původním stavem na desktopu i mobilu.
   ═══════════════════════════════════════════════════════════════════════ */
.z-pc__hwrap { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; display: block; min-width: 0; }
h2.z-kb-entry__t { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; }


/* r100 · filahub promo — pás na HP odkazující na rozcestník filatelie */
.z-filahub { background: linear-gradient(135deg, #0F1216 0%, #1A1F26 100%); color: #fff; }
.z-filahub__in { max-width: 1280px; margin: 0 auto; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.z-filahub__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFC93A; margin-bottom: 6px; }
.z-filahub h2 { margin: 0 0 5px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.z-filahub p { margin: 0; color: #C8CDD8; font-size: 13.5px; }
.z-filahub__btn { display: inline-flex; align-items: center; padding: 12px 22px; background: #FFC93A; color: #15181D; font-weight: 700; font-size: 14px; border-radius: 4px; white-space: nowrap; }
.z-filahub__btn:hover { background: #F5BC1F; color: #15181D; }
@media (max-width: 720px) { .z-filahub__in { padding: 22px 14px; } }


/* ===== r127: horní navigace ===== */
/* A) 900–1320 px se menu zalamovalo do dvou řádků — místo zalomení plynule
      zmenšíme písmo i mezery a necháme vše na jednom řádku. */
@media (min-width: 901px) and (max-width: 1320px) {
  .z-header__nav {
    flex-wrap: nowrap;
    gap: clamp(9px, 1.35vw, 28px);
    margin-left: clamp(8px, 1.3vw, 24px);
    font-size: clamp(11.5px, 1.15vw, 14px);
    min-width: 0;
  }
  .z-header__nav > .z-nav-item { flex: 0 0 auto; }
  .z-header__nav .z-nav-link { white-space: nowrap; }
  .z-header__search { min-width: 0; max-width: clamp(150px, 19vw, 243px); }
}
/* B) Mega menu: jen hlavní kategorie, subkategorie skryté. */
.z-megamenu__sublist { display: none !important; }


/* ===== r130 ===== */
/* A) Menu na desktopu nikdy nezalamovat; v 1321–1470 px plynule zmenšit. */
@media (min-width: 901px) {
  .z-header__nav { flex-wrap: nowrap; }
  .z-header__nav .z-nav-link { white-space: nowrap; }
  .z-header__nav > .z-nav-item { flex: 0 0 auto; }
}
@media (min-width: 1321px) and (max-width: 1470px) {
  .z-header__nav { gap: clamp(13px, 1.5vw, 28px); font-size: clamp(12.5px, 1.02vw, 14px); }
  .z-header__search { min-width: 0; max-width: clamp(190px, 19vw, 243px); }
}
/* B) Text tlačítek na landingu appky dědí barvu tlačítka (bílá na zeleném hero). */
.za-btn strong, .za-btn small { color: inherit !important; }


/* ===== r134: mobilní kategorie ===== */
@media (max-width: 767px) {
  /* jen jedna sada filtrů — duplicitní tlačítko „Filtry" pryč */
  .z-accnav-m { display: none !important; }
  /* Bestsellery na mobilu skryté; Akce + Novinky vedle sebe v jednom řádku */
  .z-cat-sidebar__qlinks .z-qlink--yellow { display: none !important; }
  .z-cat-sidebar__qlinks { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .z-cat-sidebar__qlinks .z-qlink { margin: 0 !important; width: auto !important; min-width: 0; }
}


/* r136: druhé (starší) tlačítko Filtry na mobilu — .visible-xs má také
   !important, takže potřebujeme vyšší specificitu než v r134. */
@media (max-width: 767px) {
  .z-accnav-m.visible-xs,
  div.z-accnav-m { display: none !important; }
}


/* r137: na mobilu bez cenového filtru (a bez nadpisu, který by osiřel). */
@media (max-width: 767px) {
  .z-cat-sidebar .z-price-filter,
  .z-cat-sidebar .z-cat-sidebar__catalog-head { display: none !important; }
}


/* r138: C) karta filtrů uvnitř akordeonu tvořila box v boxu („2 modré boxy") */
@media (max-width: 767px) {
  .z-mob-acc__body .z-cat-sidebar__filters {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
  }
}
/* r138: D) na mobilu ukázat u tlačítka i text „Do košíku" (dřív jen ikona) */
@media (max-width: 767px) {
  .z-pc__cart span { display: inline !important; }
  .z-pc__cart { font-size: 11.5px; padding: 8px 10px; gap: 6px; }
}


/* ===== r140: mobilní kategorie ===== */
@media (max-width: 767px) {
  /* A) modré tlačítko „Kategorie" + modře podbarvená aktivní položka = 2 modré
        boxy nad sebou; v panelu necháme jen tučný text. */
  .z-mob-cat-tree .z-tree__link.is-active { background: transparent !important; }

  /* B) toolbar na jeden řádek: ikonky + počet + jeden select řazení */
  .z-toolbar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; }
  .z-toolbar__left { flex: 0 0 auto; gap: 8px; }
  .z-toolbar__right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .z-toolbar__sort-label,
  .z-toolbar__sortgroup,
  .z-toolbar__limit { display: none !important; }
  .z-toolbar__sortsel {
    display: block; width: 100%; max-width: 200px; min-width: 0;
    font-size: 12.5px; font-weight: 600; padding: 7px 8px; color: #15181D;
    border: 1px solid #E5E1D8; border-radius: 8px; background: #fff;
  }
  .z-toolbar__count { font-size: 12px; white-space: nowrap; }

  /* C) countdown se smí zalomit do dvou řádků (dřív nowrap !important) */
  html body .z-pc__countdown {
    white-space: normal !important; flex-wrap: wrap; justify-content: center;
    text-align: center; line-height: 1.25; row-gap: 1px;
  }
}


/* ===== r142 ===== */
@media (max-width: 767px) {
  /* A) toolbar opravdu na jeden řádek (měl flex-direction: column) */
  .z-toolbar { flex-direction: row !important; row-gap: 0 !important; }
  .z-toolbar__left { flex-wrap: nowrap; }
  .z-toolbar__right { flex-wrap: nowrap; }

  /* B) prázdná karta kolem promo dlaždic (po skrytí cenového filtru) */
  .z-cat-sidebar { border: 0 !important; background: transparent !important;
                   box-shadow: none !important; padding: 0 !important; }

  /* C) vodorovný pás odkazů na info stránkách nesmí vytékat z karty */
  .z-info-sidebar { overflow: hidden; }
}


/* ===== r145: jen jeden modrý box na mobilu ===== */
@media (max-width: 767px) {
  .z-subcats .z-subcat.is-active,
  .z-subcats .z-subcat--all.is-active {
    background: #fff !important;
    border-color: #E8E4DA !important;
    box-shadow: none !important;
  }
  .z-subcats .z-subcat.is-active .z-subcat__name,
  .z-subcats .z-subcat--all.is-active .z-subcat__name {
    font-weight: 800; color: var(--z-ink, #15181D) !important;
  }
  .z-subcats .z-subcat.is-active .z-subcat__ico,
  .z-subcats .z-subcat--all.is-active .z-subcat__ico { color: var(--z-ink-2, #3C414B) !important; }
}


/* ===== r148: Aukce — typografie filtrů a zarovnání ikon ===== */
.z-ico-gavel { vertical-align: -3px; flex: 0 0 auto; }
.auction-badge .z-ico-gavel { width: 14px; height: 14px; vertical-align: -2px; }
.auction-filters label {
  font-family: inherit !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 13px; font-weight: 600;
  color: var(--z-ink-2, #3C414B); margin-bottom: 4px; display: block;
}
.auction-filters .form-control,
.auction-filters select {
  font-family: inherit !important; font-size: 13.5px; font-weight: 600;
  color: var(--z-ink, #15181D); border: 1px solid #E5E1D8; border-radius: 8px;
  padding: 8px 10px; background: #fff; box-shadow: none;
}
@media (max-width: 767px) {
  .auction-filters { display: flex; gap: 10px; flex-wrap: wrap; }
  .auction-filters > div { flex: 1 1 45%; min-width: 0; }
  .auction-filters .form-control, .auction-filters select { width: 100%; }
}


/* ===== r149: promo dlazdice bez ramecku + zadny legacy strom ve Filtrech ===== */
@media (max-width: 767px) {
  .z-cat-sidebar__qlinks,
  html body .z-cat-sidebar__qlinks {
    border-bottom: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    background: transparent !important;
  }

  /* stary modul kategorii uvnitr akordeonu Filtry (duplikat Podkategorii) */
  .z-mob-acc--filters .box:has(.mobile_togglemenu) { display: none !important; }
  .z-mob-acc--filters .box-heading.toggle,
  .z-mob-acc--filters ul.box-category { display: none !important; }
  .z-mob-acc--filters .box-content:empty,
  .z-mob-acc--filters .box:empty { display: none !important; }
}


/* ===== r150: select razeni na mobilu ===== */
@media (max-width: 767px) {
  .z-toolbar__sortsel {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    max-width: none !important; width: 100% !important;
    min-height: 38px; line-height: 1.2;
    padding: 8px 30px 8px 10px !important;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2315181D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
  }
  .z-toolbar__right { max-width: 62%; }
}


/* ===== r153: oprava filtru, ramecku a aukcniho tlacitka ===== */
@media (max-width: 767px) {
  /* A) hlavicka filtru se vraci (r149 ji omylem skryl spolu s kategoriemi) */
  .z-mob-acc--filters .box-heading.toggle { display: revert !important; }
  /* skryj VYHRADNE box se stromem kategorii */
  .z-mob-acc--filters .box:has(ul.box-category) { display: none !important; }
  .z-mob-acc--filters ul.box-category { display: none !important; }

  /* B) ramecek karty kolem promo dlazdic — vyssi specificita nez aside.z-cat-sidebar */
  html body aside.z-cat-sidebar {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important;
  }
}

/* C) aukcni karta: tlacitko prihozu se vejde do karty */
.z-auc-card .z-auc-bid__submit,
.auction-card .btn-bid,
.z-auc-bid__submit {
  max-width: 100%; white-space: normal; line-height: 1.25;
  word-break: break-word; text-align: center;
}
@media (max-width: 767px) {
  .z-auc-bid__submit { font-size: 13px; padding: 10px 12px; }
}


/* ===== r155: zadne probliknuti legacy stromu na mobilu ===== */
@media (max-width: 767px) {
  .z-cat-sidebar .box:has(ul.box-category) { display: none !important; }
  .z-cat-sidebar ul.box-category { display: none !important; }
}


/* ===== r156: mobilni filtry viditelne a rozbalene ===== */
@media (max-width: 767px) {
  /* filtracni modul je videt vcetne obsahu */
  .z-mob-acc--filters .box { display: block !important; }
  .z-mob-acc--filters .box-content { display: block !important; height: auto !important; }
  /* legacy hlavicka uvnitr je zbytecna — akordeon uz "Filtry" nadpis ma */
  .z-mob-acc--filters .box-heading.toggle { display: none !important; }
  /* skryt VYHRADNE strom kategorii (duplikat sekce Podkategorie) */
  .z-mob-acc--filters .box:has(ul.box-category) { display: none !important; }
  .z-mob-acc--filters ul.box-category { display: none !important; }
  /* filtry citelne v ramci akordeonu */
  .z-mob-acc--filters .box-content ul { list-style: none; margin: 0; padding: 0; }
  .z-mob-acc--filters .box-content label { font-size: 13.5px; }
}


/* ===== r157: filtry uvnitr akordeonu opravdu viditelne ===== */
@media (max-width: 767px) {
  /* legacy bootstrapovy sidebar "hidden-xs" presunuty do akordeonu musi byt videt */
  .z-mob-acc--filters aside.hidden-xs,
  .z-mob-acc__body aside.hidden-xs {
    display: block !important; height: auto !important; max-height: none !important;
    overflow: visible !important; visibility: visible !important; width: 100% !important;
  }
  .z-mob-acc--filters .box,
  .z-mob-acc--filters .list-group,
  .z-mob-acc--filters .list-group-item,
  .z-mob-acc--filters .z-filter-body { display: block !important; height: auto !important; }
  .z-mob-acc--filters .checkbox { display: block !important; }
  .z-mob-acc--filters .checkbox label { display: flex !important; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; }
  /* strom kategorii uvnitr filtru zustava skryty (duplikat Podkategorii) */
  .z-mob-acc--filters .box:has(ul.box-category) { display: none !important; }

  /* select razeni: levy blok se smi zmensit, aby prava cast mela sirku */
  .z-toolbar__left { flex: 0 1 auto !important; min-width: 0 !important; }
  .z-toolbar__count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .z-toolbar__right { flex: 1 1 150px !important; min-width: 138px !important; max-width: none !important; }
  .z-toolbar__sortsel { width: 100% !important; min-width: 130px !important; }
}


/* ===== r158: filtry na mobilu zpet (r149 je shazoval pres :has) ===== */
@media (max-width: 767px) {
  .z-mob-acc--filters .box:has(.mobile_togglemenu) { display: block !important; }
  .z-mob-acc--filters .box:has(ul.box-category) { display: none !important; }
  .z-mob-acc--filters .box:has(.mobile_togglemenu) .box-heading.toggle { display: none !important; }
}

/* ZCFMOBILE-START — kompaktni cookie lista na mobilu (2026-08-14)
   Cookiefirst banner zabiral 359 px = 44 % vysky mobilni obrazovky a prekryval
   obsah hned po nacteni. Zmensen na ~274 px (34 %).
   POZOR: je to souhlas podle GDPR — vsechna tlacitka (Prijmout vse / Odmitnout /
   Ne, uprav / zavrit) musi zustat viditelna a citelna a popisny text pristupny.
   Text se proto NEskryva, jen dostal omezenou vysku s posuvem.
   Zachytavame se o stabilni hooky (.cookiefirst-root, [data-testid=...]),
   NE o generovane tridy typu .cf2CeT — ty se meni s kazdym vydanim Cookiefirstu.
   Trvalejsi reseni je prepnout rozvrzeni banneru primo v administraci Cookiefirst. */
@media (max-width: 767px) {
  html body dialog.cookiefirst-root [data-testid="banner"] {
    padding-top: 6px !important;
  }
  html body dialog.cookiefirst-root [data-testid="cookieWidgetContent"] {
    padding: 8px 12px !important;
  }
  /* posledni potomek = samotny popisny odstavec (branding a nadpis jsou sourozenci) */
  html body dialog.cookiefirst-root [data-testid="cookieWidgetContent"] > div:nth-child(2) > div:first-child > div:last-child {
    max-height: 32.4px !important;   /* presne 2 radky pri line-height 16.2px */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body dialog.cookiefirst-root [data-testid="cookieWidgetContent"] button {
    padding: 9px 12px !important;
    font-size: 13px !important;
    min-height: 0 !important;
  }
}
/* ZCFMOBILE-END */