/*
Theme Name: KOSMOS Child
Template: kadence
Description: Dark TCG-store child theme for kosmos.cards, built on Kadence + WooCommerce.
Version: 1.2.1
*/

:root {
  --black: #0a0a0f;
  --dark: #111118;
  --card-bg: #16161f;
  --border: #2a2a3a;
  --accent: #6c63ff;
  --accent2: #a78bfa;
  --white: #f0f0f8;
  --muted: #6b6b8a;
  --star: #e8c87a;
  --success: #34d399;
  --font-display: 'Quantico', 'Segoe UI', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--black) !important;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; }

/* ─── PROMO BANNER ─── */
.promo-banner {
  background: linear-gradient(90deg, rgba(108,99,255,0.15), rgba(167,139,250,0.1));
  border-top: 1px solid rgba(108,99,255,0.3);
  border-bottom: 1px solid rgba(108,99,255,0.3);
  padding: 12px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--accent2);
}
.promo-banner strong { color: var(--white); }

/* ─── NAVBAR ─── */
nav.kosmos-nav {
  background: rgba(10,10,15,0.95);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--white);
  border: 1.5px solid var(--white);
  text-decoration: none;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  line-height: 1;
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  flex: 1;
  margin: 0;
  padding: 0;
}
.nav-links li { list-style: none; }

.nav-links > li { position: relative; }
.kosmos-mega-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 12px;
  z-index: 150;
}
.nav-links > li:hover .kosmos-mega-dropdown,
.nav-links > li:focus-within .kosmos-mega-dropdown {
  display: block;
}
.kosmos-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  padding: 28px;
  min-width: 500px;
}
.kosmos-mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  font-size: 13px;
  text-align: center;
  padding: 16px 10px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.kosmos-mega-item:hover { background: rgba(108,99,255,0.12); color: var(--accent2); }
.kosmos-mega-item-image {
  display: block;
  background-repeat: no-repeat;
}
.kosmos-mega-item-placeholder {
  display: block;
  background: rgba(108,99,255,0.15);
  border-radius: 6px;
}
/* Hover dropdown — compact */
.kosmos-mega-dropdown .kosmos-mega-item-image,
.kosmos-mega-dropdown .kosmos-mega-item-placeholder {
  width: 120px;
  height: 60px;
  flex-shrink: 0;
}
.kosmos-mega-grid.kosmos-mega-size-100x50 .kosmos-mega-item-image,
.kosmos-mega-grid.kosmos-mega-size-100x50 .kosmos-mega-item-placeholder {
  width: 100px;
  height: 50px;
}
.kosmos-mega-grid.kosmos-mega-size-90x45 .kosmos-mega-item-image,
.kosmos-mega-grid.kosmos-mega-size-90x45 .kosmos-mega-item-placeholder {
  width: 90px;
  height: 45px;
}
.kosmos-mega-grid.kosmos-mega-size-72x72 .kosmos-mega-item-image,
.kosmos-mega-grid.kosmos-mega-size-72x72 .kosmos-mega-item-placeholder {
  width: 72px;
  height: 72px;
}
/* Standalone "Karetní hry" page — bigger */
.kosmos-hra-page-grid .kosmos-mega-item-image,
.kosmos-hra-page-grid .kosmos-mega-item-placeholder {
  width: 200px;
  height: 100px;
  flex-shrink: 0;
}
.kosmos-hra-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kosmos-hra-page-grid .kosmos-mega-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 12px;
}
/* Individual game page hero logo (/hra/{game}/) — locked size, never scales */
.kosmos-hra-page-logo {
  display: block;
  width: 300px !important;
  height: 150px !important;
  min-width: 300px !important;
  max-width: none !important;
  flex-shrink: 0;
  background-repeat: no-repeat;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links li.current-menu-item a, .nav-links a.active { color: var(--white); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.search-box {
  background: #d9d9e0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  color: #1a1a24;
  font-size: 13px;
  width: 220px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search-box::placeholder { color: #6b6b7a; }
.search-box:focus { border-color: var(--accent); }
.cart-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.cart-count {
  background: white;
  color: var(--accent);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 380px at 70% 50%, rgba(108,99,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 480px 280px at 20% 30%, rgba(167,139,250,0.08) 0%, transparent 60%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 10%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 55%, rgba(200,200,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 88%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 42%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 5% 45%, rgba(255,255,255,0.5) 0%, transparent 100%);
}
.hero-content {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
.hero-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-title span { color: var(--accent2); }
.hero-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 420px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-block;
}
.btn-primary:hover { opacity: 0.88; color: white; }
.btn-outline {
  background: transparent;
  color: var(--white);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--accent2); color: var(--white); }
.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
}
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.hero-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 320px;
}
.hero-cards.has-image {
  display: block;
  align-self: stretch;
  height: auto;
  min-height: 400px;
}
.card-stack {
  position: relative;
  width: 200px;
  height: 280px;
}
.card-mock {
  position: absolute;
  width: 180px;
  height: 250px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.card-mock:nth-child(1) {
  background: linear-gradient(135deg, #1a1035, #2d1b6e);
  transform: rotate(-8deg) translate(-40px, 10px);
  z-index: 1;
}
.card-mock:nth-child(2) {
  background: linear-gradient(135deg, #0d2818, #1a4f30);
  transform: rotate(-3deg) translate(-10px, 5px);
  z-index: 2;
}
.card-mock:nth-child(3) {
  background: linear-gradient(135deg, #1a0e0e, #4a1515);
  transform: rotate(2deg);
  z-index: 3;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.card-mock-inner {
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-img-placeholder {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}
.card-name-bar {
  height: 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
.card-cost-bar {
  height: 8px;
  width: 60%;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.hero-image-custom {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background-repeat: no-repeat;
}
.card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 10;
}

/* ─── SECTION HEADINGS ─── */
.kosmos-section { max-width: 1280px; margin: 0 auto; padding: 64px 24px; }
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 32px;
  letter-spacing: 1px;
  color: var(--white);
}

/* ─── GAME TABS ─── */
.game-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tab {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
}
.tab:hover { border-color: var(--accent2); color: var(--white); }
.tab.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ─── PRODUCT GRID (shared: custom markup + WooCommerce) ─── */
.product-grid,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-grid.kosmos-tab-hidden {
  display: none !important;
}
/* Homepage featured products only — smaller, square cards (shop catalog
   keeps its own 3/4 portrait sizing, untouched). */
.product-grid {
  grid-template-columns: repeat(5, 1fr) !important;
}
.product-grid .product-img {
  aspect-ratio: 1/1 !important;
}
.product-card,
.woocommerce ul.products li.product {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  list-style: none;
}
.product-card:hover,
.woocommerce ul.products li.product:hover { border-color: var(--accent); transform: translateY(-2px); }

.product-img,
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #1a1a2e, #16213e);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  object-fit: cover;
  border-radius: 0 !important;
}
.product-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
.woocommerce ul.products li.product a {
  display: block;
  text-decoration: none;
  position: relative;
}
.product-img-placeholder {
  width: 70%;
  height: 70%;
  background: rgba(108,99,255,0.1);
  border-radius: 8px;
  border: 1px solid rgba(108,99,255,0.2);
}
.product-condition {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  letter-spacing: 0.5px;
  z-index: 2;
}
.nm { color: var(--success); }
.lp { color: var(--star); }
.product-info,
.woocommerce ul.products li.product .kosmos-card-info { padding: 12px; }
.product-name,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--white) !important;
  margin: 0 0 4px !important;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-set {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-price,
.woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700;
  color: var(--white) !important;
  padding: 0 12px 12px;
  display: block !important;
}
.woocommerce ul.products li.product .price ins { color: var(--white); text-decoration: none; }
.woocommerce ul.products li.product .price del { color: var(--muted); opacity: 0.7; }
.add-btn,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
  background: var(--accent) !important;
  color: white !important;
  border: none !important;
  width: 30px;
  height: 30px;
  border-radius: 6px !important;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  font-weight: 300;
  margin: 0 12px 12px auto !important;
  text-align: center;
}
.add-btn:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover { opacity: 0.8; }

/* ─── SHOP LAYOUT / SIDEBAR FILTERS ─── */
.woocommerce-page .content-area,
.shop-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px;
}
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }

.filter-panel,
.widget-area .widget {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  height: fit-content;
  margin-bottom: 20px;
}
.widget-area { position: sticky; top: 80px; }
.filter-title,
.widget-title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.filter-group { margin-bottom: 20px; }
.filter-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.filter-option,
.woocommerce ul.wc-layered-nav-list li,
.woocommerce .widget_layered_nav_filters ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--white);
  opacity: 0.8;
  transition: opacity 0.15s;
  list-style: none;
}
.woocommerce ul.wc-layered-nav-list li a { color: var(--white); text-decoration: none; }
.filter-option:hover,
.woocommerce ul.wc-layered-nav-list li:hover { opacity: 1; }
.filter-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  flex-shrink: 0;
}
.filter-checkbox.checked { background: var(--accent); border-color: var(--accent); }
.filter-count,
.woocommerce ul.wc-layered-nav-list li .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.price-range { display: flex; gap: 8px; align-items: center; }
.price-input,
.woocommerce .price_slider_amount input {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  color: var(--white);
  font-size: 12px;
  width: 80px;
  outline: none;
}
.price-input:focus { border-color: var(--accent); }
.price-sep { color: var(--muted); font-size: 12px; }
.woocommerce .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--accent); }
.woocommerce .price_slider_wrapper .ui-slider .ui-slider-handle { background: var(--accent2); border-color: var(--accent2); }

/* ─── SORT BAR ─── */
.sort-bar,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: 13px;
  color: var(--muted);
}
.woocommerce .woocommerce-notices-wrapper ~ .woocommerce-result-count,
.woocommerce nav.woocommerce-pagination { color: var(--muted); }
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.results-count span { color: var(--white); font-weight: 600; }
.sort-select,
.woocommerce select.orderby {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--white);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* ─── EVENTS SECTION ─── */
.events-section {
  background: var(--dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.event-card {
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 16px;
  transition: border-color 0.2s, height 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
}
.events-grid .event-card {
  height: 200px;
  overflow: hidden;
}
.events-grid .event-card.has-description { cursor: pointer; }
.events-grid .event-card:not(.has-description) { cursor: default; }
.events-grid .event-card.expanded {
  height: 380px;
  overflow: hidden;
}
.event-card-body { transition: font-size 0.1s ease; }
.event-card-single {
  max-width: 640px;
}
.event-card:hover { border-color: var(--accent2); }
.event-card-body { min-width: 0; }
.event-date-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.event-date-block {
  background: var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  flex-shrink: 0;
  min-width: 52px;
  height: fit-content;
}
.event-day { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; color: white; }
.event-month { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-top: 2px; }
.event-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.event-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.event-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(108,99,255,0.15);
  color: var(--accent2);
  border: 1px solid rgba(108,99,255,0.3);
}
.event-tag-logo-img {
  display: block;
  width: 64px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.06);
}
.event-description {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.event-description p { margin: 0 0 10px; }
.event-description p:last-child { margin-bottom: 0; }
.events-grid .event-card.expanded .event-description { display: block; }
.event-card-toggle-hint {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent2);
}

/* ─── FOOTER ─── */
footer.kosmos-footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--white);
  border: 1.5px solid var(--white);
  width: 50px;
  height: 50px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  line-height: 1;
  margin-bottom: 12px;
}
.footer-desc { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 280px; }
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-icon {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ─── WOOCOMMERCE: SINGLE PRODUCT / CART / CHECKOUT ─── */
.woocommerce div.product,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { color: var(--white); }
.woocommerce div.product .product_title { margin-bottom: 60px !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--white); font-family: var(--font-display); margin-bottom: 16px !important; }
.woocommerce div.product .summary { color: var(--white); }
.woocommerce div.product form.cart { margin-bottom: 60px !important; }
.single-product div.product .woocommerce-product-gallery__wrapper img {
  max-width: 82%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.woocommerce div.product .kosmos-product-description {
  margin-top: 8px !important;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
}
.woocommerce div.product .kosmos-product-description p:last-child { margin-bottom: 0; }

/* Quantity stepper: [-] [number "ks"] [+] — used everywhere (single product,
   cart), one look for every current and future product. */
.kosmos-quantity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kosmos-qty-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.kosmos-qty-btn:hover { background: rgba(255,255,255,0.12); }
.kosmos-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  line-height: 1;
}
.kosmos-qty-input {
  width: 26px !important;
  height: 100%;
  display: flex;
  align-items: center;
  border: none !important;
  background: transparent !important;
  color: var(--white) !important;
  font-weight: 700;
  line-height: 1;
  text-align: center !important;
  padding: 0 !important;
  -moz-appearance: textfield;
}
.kosmos-qty-input::-webkit-outer-spin-button,
.kosmos-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kosmos-qty-unit {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  margin: 0;
}

/* ─── WOOCOMMERCE BLOCKS (Cart/Checkout/product grids) ───
   Cart & Checkout are built from WooCommerce Blocks with an "alignwide"
   class, which lets them stretch wider than the rest of the site's content.
   Cap them (and any future page using these or other WC blocks, e.g. New
   Products / Best Sellers / On Sale) to the same width as everywhere else,
   and theme the legacy product-grid block so it doesn't render unstyled. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wc-block-grid.alignwide,
.wc-block-grid.alignfull {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wc-block-grid__product {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  color: var(--white);
}
.wc-block-grid__product .product-details {
  padding: 12px;
  background: transparent;
}
.wc-block-grid__product-title {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.wc-block-grid__product-price,
.wc-block-grid__product-price .woocommerce-Price-amount {
  color: var(--white);
}
.wc-block-grid__product-add-to-cart .add_to_cart_button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Checkout/Cart block form fields have white input boxes by design — but
   the site's dark theme sets light text globally, which makes the floating
   labels (First name, Email, etc.) unreadable white-on-white. Force those
   labels dark to match the (dark, already-readable) text typed into them. */
.wc-block-checkout label,
.wc-block-cart label,
.wc-block-components-text-input label,
.wc-block-components-address-form label {
  color: #2b2d2f !important;
}

/* Cart page: show only the product subtotal, no shipping line — shipping
   is chosen at checkout instead. */
.wc-block-cart .wc-block-components-totals-shipping {
  display: none !important;
}

/* Cart/Checkout step tracker */
.kosmos-checkout-tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1280px;
  margin: 24px auto 40px;
  padding: 0 24px;
}
.kosmos-tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kosmos-tracker-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.kosmos-tracker-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.kosmos-tracker-line {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: var(--border);
  margin-bottom: 20px;
}
.kosmos-tracker-step.kosmos-tracker-active .kosmos-tracker-circle {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  /* A solid/filled circle reads as visually bigger than an outlined one
     of the identical width/height (a standard optical effect, not a
     real size difference -- confirmed both states share the same
     dimensions above). Shave a couple pixels off the filled one only,
     to compensate and make the three read as the same size. */
  width: 29px;
  height: 29px;
}
.kosmos-tracker-step.kosmos-tracker-active .kosmos-tracker-label { color: var(--white); }
.kosmos-tracker-step.kosmos-tracker-done .kosmos-tracker-circle {
  border-color: var(--accent);
  color: var(--accent);
}
.kosmos-tracker-step.kosmos-tracker-done .kosmos-tracker-label { color: var(--white); }

/* On narrow screens the 3 fixed-width steps + connecting lines (nowrap
   labels like "Doprava a platba") add up to more than the viewport, and
   with body{overflow-x:hidden} (set for mobile elsewhere) that overflow
   just gets silently clipped — steps 2/3 end up invisible instead of
   wrapping, which reads as "the tracker doesn't work". Shrink everything
   and let labels wrap onto two lines instead of forcing nowrap width. */
@media (max-width: 480px) {
  .kosmos-checkout-tracker {
    gap: 6px;
    padding: 0 16px;
  }
  .kosmos-tracker-circle {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .kosmos-tracker-step.kosmos-tracker-active .kosmos-tracker-circle {
    width: 29px;
    height: 29px;
  }
  .kosmos-tracker-label {
    font-size: 10px;
    white-space: normal;
    max-width: 76px;
  }
  /* Each step column was sizing itself to fit its own label
     ("Kosik" vs "Doprava a platba" vs "Shrnuti objednavky" wrap
     differently), so the circles ended up unevenly spaced relative to
     the connecting lines even with a constant flex gap. A fixed, equal
     width for every column guarantees symmetric spacing regardless of
     label length. */
  .kosmos-tracker-step {
    width: 80px;
  }
  .kosmos-tracker-line {
    max-width: 28px;
    margin-bottom: 20px;
  }
}

/* Address/shipping/payment recap, prepended into WooCommerce's own "Order
   summary" sidebar box (one box, not a separate duplicate panel) — its
   existing item list with images, subtotal and total stay untouched below. */
/* The whole "Order summary" box (.wp-block-woocommerce-checkout-order-
   summary-block) has a visible border but zero padding by default, so
   everything inside — WooCommerce's own heading/items too, not just ours —
   sits flush against that border. Pad the box itself once, consistently,
   instead of patching padding onto individual pieces. */
.wp-block-woocommerce-checkout-order-summary-block {
  padding: 20px !important;
  box-sizing: border-box !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
  flex-wrap: wrap !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  overflow-wrap: break-word !important;
}
/* The cart-item row (image + name/description + price) is a flex row
   with no min-width on the text column, so a long product name refuses
   to shrink below its own content width and pushes the price past the
   box's right edge instead of wrapping. min-width:0 is what lets a flex
   child actually shrink/wrap inside its row. */
.wc-block-components-order-summary-item {
  min-width: 0 !important;
}
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata,
.wc-block-components-product-name {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
/* WooCommerce's own order-summary title uses a CSS *container* query
   (not a viewport media query) to switch between a plain static title
   (container >= 700px) and a collapsible mobile "accordion" version with
   a duplicate price + chevron + its own "fill-wrapper" content block
   (container < 700px). Forcing the sidebar to max-width:640px above
   means that container is always < 700px, so the accordion variant was
   rendering on every screen size — a second "Rekapitulace objednávky" +
   price at the top, duplicating the real box below. Force the >=700px
   (plain, non-accordion) styling unconditionally instead, since we
   already have our own tracker/back-forward flow and don't want or need
   WooCommerce's collapsible summary. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-icon,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-price {
  display: none !important;
}
/* On narrow layouts WooCommerce renders a genuinely SEPARATE second
   ".wp-block-woocommerce-checkout-order-summary-block" nested inside the
   actions block (for items/totals next to the submit button) — not the
   same element with an extra class, two distinct instances. The JS above
   moves that duplicate's content (".checkout-order-summary-block-fill")
   back into the real sidebar box, which leaves this one behind holding
   only its own redundant "Rekapitulace objednávky" heading — hide the
   whole leftover shell. Scoped to inside .wc-block-checkout__actions so
   it can never match the real sidebar box, which is never nested there. */
.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
  display: none !important;
}

/* The relocated fill content brings its own 1px border (meant for when
   WooCommerce places it loose in the actions area) but no horizontal
   padding of its own -- once nested inside our already-padded/bordered
   sidebar box, that leaves item names/prices sitting flush against our
   box's inner edge with zero breathing room, and doubles up the border. */
.wc-block-checkout__sidebar .checkout-order-summary-block-fill {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  border-top: none !important;
  border-bottom: none !important;
  cursor: default !important;
  padding: 0 !important;
}
.kosmos-order-recap {
  margin-top: 12px;
  margin-bottom: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--white);
}
.kosmos-summary-row {
  margin-bottom: 14px;
  /* WooCommerce's own labels (Order summary, Subtotal, Total) sit 16px
     further right than a plain element here, due to padding nested inside
     their own components that isn't visible on the outer wrapper — match
     it exactly so text starts at the same x position throughout the box. */
  padding-left: 16px !important;
}
.kosmos-summary-row:last-child { margin-bottom: 0; }
.kosmos-summary-row h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--muted) !important;
  margin: 0 0 4px !important;
}
.kosmos-summary-row p {
  font-family: 'Inter', system-ui, sans-serif !important;
  margin: 0 !important;
  color: var(--white) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.kosmos-continue-to-summary,
.kosmos-back-to-shipping {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--accent) !important;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.kosmos-continue-to-summary:hover,
.kosmos-back-to-shipping:hover { background: var(--accent2) !important; }
.kosmos-back-to-shipping {
  background: transparent !important;
  border: 1px solid var(--border);
  color: var(--muted) !important;
  margin-top: 20px;
  margin-bottom: 0;
}

/* "Proceed to Checkout" (Cart) and "Place order" (Checkout) — WooCommerce's
   own default blue buttons, restyled to match the accent buttons above. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--accent2) !important;
}
/* Place order is full-width by default — make it an inline-sized button
   like the rest, and sit it next to "Zpět" instead of stacked. */
.wc-block-components-checkout-place-order-button {
  width: auto !important;
  padding: 12px 24px !important;
}
.wc-block-checkout__actions_row {
  gap: 12px;
}
.wp-block-woocommerce-checkout-actions-block .kosmos-back-to-shipping {
  margin: 0 !important;
}
.kosmos-back-to-shipping:hover { background: rgba(255,255,255,0.06) !important; color: var(--white) !important; }

/* Checkout stage 2 (Doprava a platba) vs stage 3 (Shrnutí objednávky) —
   driven by a single class on <body>, !important so nothing else (Kadence,
   WooCommerce Blocks' own inline styles, etc.) can override it. */
body:not(.kosmos-checkout-stage-3) .kosmos-order-recap,
body:not(.kosmos-checkout-stage-3) .wp-block-woocommerce-checkout-terms-block,
body:not(.kosmos-checkout-stage-3) .wp-block-woocommerce-checkout-actions-block,
body:not(.kosmos-checkout-stage-3) .wc-block-checkout__sidebar {
  display: none !important;
}

/* The two-column layout (form on the left, order summary sidebar on the
   right) looks lopsided once one side is mostly hidden per-stage — stack
   them as one centered column instead. */
.wc-block-components-sidebar-layout.wc-block-checkout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  width: 100% !important;
  max-width: 640px !important;
  flex-basis: auto !important;
  /* margin:auto centers this regardless of whether the parent's own width
     ends up exactly matching the viewport — more robust than relying on
     align-items:center alone across different screen widths. */
  margin-left: auto !important;
  margin-right: auto !important;
  /* The sidebar is normally position:sticky so it stays put while a long
     form scrolls past it — but it's no longer a true side-by-side sidebar
     in this stacked single-column layout, and sticky here caused it to
     overlap other content while scrolling. */
  position: static !important;
  top: auto !important;
}
/* !important here because WooCommerce's own CSS sets order:0 on the
   sidebar specifically inside its narrow-container query — on a real
   phone that can win the cascade against a plain (non-!important) rule
   depending on stylesheet load order, leaving sidebar and main content
   interleaved instead of stacked as two clean blocks. */
.wc-block-checkout__sidebar { order: 1 !important; }
.wc-block-checkout__main { order: 2 !important; }
body.kosmos-checkout-stage-3 .kosmos-continue-to-summary,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-express-payment-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-contact-information-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-shipping-method-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-pickup-options-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-shipping-address-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-billing-address-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-shipping-methods-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-payment-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-additional-information-block,
body.kosmos-checkout-stage-3 .wp-block-woocommerce-checkout-order-note-block {
  /* display:none alone should collapse these to zero size, but on mobile
     something was leaving a large gap where the hidden payment/shipping
     fields used to be — zero out box model explicitly as a safety net in
     case a WooCommerce mobile-specific rule re-introduces height/margin
     on one of these with higher specificity than plain display:none. */
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* The terms checkbox + "Zpět/Objednat" row looked centered with large
   gaps above/below on a real phone despite looking correctly left-
   aligned and tight on desktop — force the same static, left-aligned,
   non-centered layout regardless of container width. */
.wp-block-woocommerce-checkout-terms-block,
.wc-block-checkout__terms,
.wp-block-woocommerce-checkout-actions-block {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Its own gap above the buttons, on top of the checkbox's margin-bottom
   above -- these don't reliably add up via margin collapsing, so give
   this one an explicit value instead of relying on the neighbour's. */
.wp-block-woocommerce-checkout-actions-block {
  margin-top: 32px !important;
}
.wc-block-components-checkbox {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
/* Desktop default: the box and the checkbox row sat flush against each
   other with no breathing room. The mobile media query further down
   overrides this with its own value for narrow screens. */
.wc-block-checkout__terms {
  margin-top: 32px !important;
}

/* Mobile: same breathing room as the desktop rule above, plus a clear
   gap before "Objednat" (the checkbox text and button sat touching). */
@media (max-width: 480px) {
  .wc-block-checkout__terms {
    margin-top: 22px !important;
    margin-bottom: 24px !important;
  }
  /* The "Cena celkem" row (the bold final total, distinct from the
     regular Mezisoucet/Free shipping rows above it) sits label-and-price
     close together on a narrow screen instead of spread edge-to-edge
     like on desktop -- give that specific row more internal spacing.
     nowrap is required here: this row inherits flex-wrap:wrap from
     WooCommerce's own base rule, and adding a bigger gap without it
     pushed the price onto its own line instead of widening the gap. */
  .wc-block-checkout__sidebar .wc-block-components-totals-item.wc-block-components-totals-footer-item {
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  /* WooCommerce's own default size for this row's text (22px) doesn't
     leave enough room on a narrow screen once nowrap is forced above --
     the label itself was wrapping into 3 lines. Scale it back down. */
  .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
  .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 17px !important;
    white-space: nowrap !important;
  }
  /* The whole recap box read as a little cramped/small on a phone --
     a bit more breathing room and slightly larger type throughout. */
  .wp-block-woocommerce-checkout-order-summary-block {
    padding: 24px 20px !important;
  }
  .kosmos-summary-row h3 {
    font-size: 13px !important;
  }
  .kosmos-summary-row p {
    font-size: 15px !important;
  }
  .wc-block-components-product-name {
    font-size: 15px !important;
  }
  /* At quantity 1 the per-item price (shown under the product name) and
     the line total (shown top-right, same number) read as a plain
     duplicate -- keep only the one under the name, drop the right-side
     one. */
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price {
    display: none !important;
  }
}

/* New elements are appended (not inserted at a specific spot) since
   WooCommerce moves its own blocks around depending on checkout state —
   so visual position is controlled here with flex "order" instead of
   relying on DOM insertion order. */
.wp-block-woocommerce-checkout-fields-block {
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-woocommerce-checkout-terms-block { order: 20; }
.wp-block-woocommerce-checkout-actions-block { order: 21; }
.kosmos-continue-to-summary { order: 22; }
/* Its own top border duplicated the summary box's bottom border once the
   sidebar/main columns got stacked into one — redundant double line. */
.wp-block-woocommerce-checkout-terms-block {
  border-top: none !important;
  padding-top: 24px !important;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce-checkout #payment #place_order, .woocommerce a.checkout-button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { opacity: 0.88; background: var(--accent) !important; color: #fff !important; }
.woocommerce table.shop_table, .woocommerce-checkout table.shop_table {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--white);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout select, .select2-container .select2-selection--single {
  background: var(--dark) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
}
.woocommerce-checkout .select2-container .select2-selection__rendered { color: var(--white) !important; }
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  background: var(--card-bg) !important;
  border-top-color: var(--accent) !important;
  color: var(--white) !important;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { color: var(--accent2) !important; }
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border-color: var(--border) !important; background: var(--card-bg); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--white) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; color: #fff !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--white); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--accent2); }

/* ─── GENERIC PAGE/HEADER FALLBACKS FROM KADENCE ─── */
#wrapper, .site, #content, .content-area { background: var(--black); }
.entry-title, h1, h2, h3 { color: var(--white); }
.wp-block-button__link {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.wp-block-button__link:hover { opacity: 0.88; }
.wp-block-table table {
  color: var(--white);
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table table th,
.wp-block-table table td {
  border: 1px solid var(--border);
  padding: 10px 14px;
}
.wp-block-table table th {
  background: var(--card-bg);
  color: var(--accent2);
  text-align: left;
}

/* Normal WordPress Pages (e.g. O nás) use Kadence's own page.php, not our
   custom templates — force the dark theme here too so any page/editor
   content looks right without fighting Kadence's default light styling. */
.entry-hero.page-hero-section,
.entry-hero-container-inner {
  background: var(--dark) !important;
  background-color: var(--dark) !important;
  background-image: none !important;
}
.entry-hero .hero-container {
  background: transparent !important;
}
.entry-hero.page-hero-section {
  border-bottom: 1px solid var(--border);
  min-height: 0 !important;
}
.entry-hero-container-inner,
.entry-hero .hero-container {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.entry-hero .entry-header.page-title {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.entry-hero .entry-title {
  margin: 0 !important;
  line-height: 1.2 !important;
}
/* Shop / category / product pages don't have a title banner in the
   wireframe design — go straight into the sort bar + grid instead. */
body.woocommerce .entry-hero {
  display: none;
}
/* This sits on top of the banner image (when a Featured Image is set) —
   the darkening tint is already baked into that image's gradient overlay
   (see kosmos_page_hero_background()), so this must stay transparent or
   it'll double-darken/hide the image entirely. */
.entry-hero .hero-section-overlay {
  background: transparent !important;
  background-image: none !important;
}
.entry-hero .entry-title { color: var(--white) !important; font-family: var(--font-display); }
article.content-bg,
.entry-content-wrap,
.site-main,
.content-area {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.entry-content, .entry-content p, .entry-content li, .entry-content span {
  color: var(--white);
}
.entry-content a { color: var(--accent2); }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  color: var(--white);
  font-family: var(--font-display);
}
/* Neutralize any accidental Gutenberg "background color" block style
   (e.g. has-theme-palette-4-background-color) so editor content never
   shows a stray light box on the dark theme. */
.entry-content .has-background,
.entry-content [class*="has-theme-palette"][class*="background-color"] {
  background: transparent !important;
}
.entry-content [class*="has-theme-palette"][class*="-color"]:not([class*="background"]) {
  color: var(--white) !important;
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.search-toggle-btn { display: none; }

/* ─── MOBILE SLIDE-OUT DRAWER MENU ─── */
.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 190;
}
.mobile-drawer-overlay.open { display: block; }
.mobile-drawer {
  position: fixed;
  top: 0;
  left: -85%;
  width: 85%;
  max-width: 320px;
  height: 100%;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  z-index: 200;
  transition: left 0.25s ease;
  overflow-y: auto;
}
.mobile-drawer.open { left: 0; }
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--white);
  font-size: 16px;
}
.mobile-drawer-close {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.mobile-drawer-links {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.mobile-drawer-links li { list-style: none; border-bottom: 1px solid var(--border); }
.mobile-drawer-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  color: var(--white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.mobile-drawer-links li a:hover { color: var(--accent2); }
.mobile-drawer-links li a::after {
  content: '\203A';
  color: var(--muted);
  font-size: 18px;
}

.kosmos-mobile-mega-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.kosmos-mobile-mega-arrow {
  color: var(--muted);
  font-size: 18px;
  transition: transform 0.2s;
}
.mobile-drawer-links li.open .kosmos-mobile-mega-arrow { transform: rotate(90deg); }
.kosmos-mobile-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  background: rgba(255,255,255,0.03);
}
.mobile-drawer-links li.open .kosmos-mobile-submenu { display: block; }
.kosmos-mobile-submenu li { border-bottom: none !important; }
.kosmos-mobile-submenu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 20px 12px 36px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.kosmos-mobile-submenu li a::after { content: none; }
.kosmos-mobile-submenu li a:hover { color: var(--white); }
.kosmos-mobile-submenu-icon {
  display: block;
  width: 28px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.06);
}

@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; position: relative; }
  .hero-content > div:first-child { position: relative; z-index: 1; }
  .hero-cards { display: none; }
  .hero-cards.has-image {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.25;
    min-height: 0;
  }
  .hero-cards.has-image .hero-image-custom {
    height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .shop-layout { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  body.home .events-grid > a:nth-child(n+4) { display: none; }

  body { overflow-x: hidden; }

  .nav-inner {
    flex-wrap: nowrap;
    height: auto;
    padding: 12px 16px;
    gap: 10px;
  }
  .mobile-menu-toggle {
    display: block;
    order: 1;
    flex-shrink: 0;
  }
  .logo {
    order: 2;
    flex-shrink: 0;
  }
  .nav-links { display: none; }
  .kosmos-search-form { display: none; }
  .nav-right {
    order: 3;
    flex: 1;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }
  .search-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--white);
    width: 38px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  .cart-btn {
    padding: 9px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .cart-label { display: none; }
}

.mobile-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--black);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  z-index: 210;
}
.mobile-search-overlay.open { display: block; }
.mobile-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-search-form .search-box {
  flex: 1;
  width: auto;
  padding: 9px 12px;
  font-size: 14px;
  box-sizing: border-box;
}
.mobile-search-close {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  .product-grid .product-card {
    flex: 0 0 158px;
    scroll-snap-align: start;
  }
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-name,
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px !important;
  }
  .product-price,
  .woocommerce ul.products li.product .price {
    font-size: 14px !important;
  }
}