/* ==========================================================================
   Fantasium.cz — Main Theme Stylesheet
   Child theme of "classic" for PrestaShop 8
   ========================================================================== */

/* Google Fonts loaded via <link> in head.tpl for better performance.
   Cinzel (headings) + Inter (body) */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --f-bg: #0a0a0a;
  --f-bg-surface: #111111;
  --f-bg-card: #151515;
  --f-bg-input: rgba(255, 255, 255, 0.05);
  --f-gold: #d4af37;
  --f-gold-hover: #c9a032;
  --f-gold-glow: rgba(212, 175, 55, 0.3);
  --f-gold-subtle: rgba(212, 175, 55, 0.15);
  --f-text: #e6e3e0;
  --f-text-muted: #9a9590;
  --f-text-dim: #666;
  --f-border: rgba(212, 175, 55, 0.15);
  --f-border-strong: rgba(212, 175, 55, 0.3);
  --f-green: #22c55e;
  --f-red: #ef4444;
  --f-amber: #f59e0b;
  --f-gold-bright: #eebd2b;          /* brighter gold for stars / review UI */
  --f-font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --f-radius: 12px;
  --f-radius-sm: 8px;
  --f-transition: 0.3s ease;
}

/* --------------------------------------------------------------------------
   Base / Reset
   -------------------------------------------------------------------------- */
body {
  background-color: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font-body);
  line-height: 1.6;
}

a { color: var(--f-gold); transition: color var(--f-transition); }
a:hover, a:focus { color: var(--f-gold-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--f-font-heading);
  color: var(--f-text);
  letter-spacing: 1px;
}

/* ==========================================================================
   HEADER — Unified single-row layout matching Lovable prototype
   ========================================================================== */

/* ── Base header strip ── */
#header {
  background: rgba(10, 9, 12, 0.97) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.header-top,
#header .header-top {
  background: transparent !important;
  border-bottom: 1px solid rgba(238, 189, 43, 0.1);
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0 !important;
}

/* Sticky wrapper needs the dark bg for backdrop-filter to work */
#header.sticky,
#header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Mobile nav bar (nav.header-nav.hidden-md-up) ──────────────────────────
   One unified dark wrapper: top bar (logo + cart + hamburger) with the
   collapsible nav links (#mobile_top_menu_wrapper) below — all inside nav.
   hidden-md-up already hides this at ≥768px via theme.css.
   ─────────────────────────────────────────────────────────────────────────── */
nav.header-nav {
  background: #0a090c !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ── Top bar: logo LEFT | cart + hamburger RIGHT ── */
nav.header-nav .f-mobile-bar {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 16px;
}

/* Logo container — flex: 1 so it fills available space, min-width: 0
   prevents flex from letting it grow past its bounds (flex-item default
   is min-width: auto which causes overflow when content is wide). */
nav.header-nav .f-mobile-logo {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/* PS JS wraps the logo in an <h1> on the index page — reset all its
   browser default spacing so it doesn't stretch the 60px bar. */
nav.header-nav .f-mobile-logo h1,
nav.header-nav .f-mobile-logo h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

nav.header-nav .f-mobile-logo img,
nav.header-nav #_mobile_logo img {
  height: 38px !important;
  width: auto !important;
  max-width: 180px;
  display: block !important;
  flex-shrink: 0;
}

/* Right-side icon group — flex-shrink: 0 keeps it from being squeezed */
nav.header-nav .f-mobile-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Mobile user account icon — gold, matching cart ── */
nav.header-nav #_mobile_user_info,
nav.header-nav #_mobile_user_info .user-info {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
nav.header-nav #_mobile_user_info a {
  display: flex;
  align-items: center;
  padding: 6px;
  color: var(--f-gold) !important;
  text-decoration: none !important;
  line-height: 0;
}
nav.header-nav #_mobile_user_info a .material-icons {
  font-size: 24px;
  line-height: 1;
  color: var(--f-gold) !important;
}
/* Hide text label on mobile too */
nav.header-nav #_mobile_user_info .hidden-sm-down {
  display: none !important;
}

/* ── Cart widget ──
   Classic theme injects: .blockcart { height: 3rem; padding: .75rem;
   margin-left: .9375rem; background: #f6f6f6 }  — override every property. */
nav.header-nav #_mobile_cart {
  display: flex !important;
  align-items: center !important;
}
nav.header-nav #_mobile_cart #blockcart-wrapper {
  display: flex !important;
  align-items: center !important;
}
nav.header-nav #_mobile_cart .blockcart {
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
}
nav.header-nav #_mobile_cart .blockcart .header {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
nav.header-nav #_mobile_cart .blockcart .header a {
  display: flex !important;
  align-items: center !important;
  gap: 3px;
  color: var(--f-gold) !important;
  background: transparent !important;
  padding: 8px 10px !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  position: relative;
}
nav.header-nav #_mobile_cart .blockcart .header a i.material-icons {
  color: var(--f-gold) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
nav.header-nav #_mobile_cart .blockcart .header a .cart-products-count {
  /* PS JS forces color:white via inline style — work with it: dark bg makes
     white text clearly readable and gives a nice badge look. */
  background: var(--f-gold) !important;
  color: #0a090c !important;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  margin-left: 2px;
}
/* Suppress the hover dropdown — link goes straight to cart page */
nav.header-nav #_mobile_cart .cart-overview,
nav.header-nav #_mobile_cart .popover,
nav.header-nav #_mobile_cart .dropdown-menu {
  display: none !important;
}

/* ── Hamburger — gold, slightly larger, padded left of cart ── */
nav.header-nav #menu-icon {
  display: flex !important;
  align-items: center;
  cursor: pointer;
  padding: 8px 0 8px 4px;
  margin: 0 5px !important;
  flex-shrink: 0;
}
nav.header-nav #menu-icon i.material-icons {
  color: var(--f-gold) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

/* ── Collapsible nav links — below the logo bar, inside same nav wrapper ── */
#mobile_top_menu_wrapper {
  background: #0a090c !important;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding: 8px 0 16px !important;
}

/* Vertical list */
#mobile_top_menu_wrapper ul.top-menu,
#mobile_top_menu_wrapper .js-top-menu ul {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#mobile_top_menu_wrapper ul.top-menu > li {
  display: block !important;
  width: 100% !important;
}

#mobile_top_menu_wrapper .top-menu a.dropdown-item {
  color: var(--f-text) !important;
  font-family: var(--f-font-nav), 'Cinzel', sans-serif;
  font-size: 11px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 24px !important;
  display: block !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.08) !important;
  background: transparent !important;
}
#mobile_top_menu_wrapper .top-menu a.dropdown-item:hover,
#mobile_top_menu_wrapper .top-menu a.dropdown-item.active {
  color: var(--f-gold) !important;
  background: transparent !important;
}

/* ── Inner flex row ── */
.fantasium-header-inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 0;
}

/* ── Logo ── */
#_desktop_logo {
  flex: 0 0 auto;
  margin-right: auto;
  line-height: 0;
}
#_desktop_logo h1 {
  margin: 0;
  line-height: 0;
}
#_desktop_logo img,
#_mobile_logo img {
  height: 40px !important;
  width: auto !important;
  max-height: 40px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity var(--f-transition);
  display: block;
}
#_desktop_logo img:hover,
#_mobile_logo img:hover {
  opacity: 1;
}

/* ── Right side (nav + icons) ── */
.fantasium-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Larger gap between nav menu and the icon group (user + cart) */
#_desktop_user_info {
  margin-left: 28px;
}

/* ── User icon — match cart style, hide label text ── */
.user-info a {
  display: flex;
  align-items: center;
  color: rgba(230, 227, 224, 0.6) !important;
  text-decoration: none !important;
  transition: color var(--f-transition);
  padding: 6px;
  line-height: 0;
}
.user-info a:hover {
  color: var(--f-gold) !important;
}
.user-info a .material-icons {
  font-size: 26px;
  line-height: 1;
}
/* Hide the "Přihlásit se" text label, keep icon */
.user-info a .hidden-sm-down {
  display: none !important;
}

/* ── Hide search widget ── */
#search_widget,
.search-widget,
#search_block_top {
  display: none !important;
}

/* ── Navigation menu ── */
.js-top-menu,
#_desktop_top_menu {
  display: flex !important;
  align-items: center;
}

.top-menu {
  display: flex !important;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-menu > li {
  margin: 0;
  padding: 0;
}

.top-menu > li > a,
.top-menu > li > span > a,
.top-menu > li > .dropdown-item {
  font-family: var(--f-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(230, 227, 224, 0.6) !important;
  text-decoration: none !important;
  transition: color var(--f-transition), border-color var(--f-transition);
  white-space: nowrap;
  padding: 4px 0 !important;
  border-bottom: 1px solid transparent;
  display: inline-block;
  background: transparent !important;
}

.top-menu > li > a:hover,
.top-menu > li > a:focus,
.top-menu > li.current > a,
.top-menu > li.active > a {
  color: var(--f-gold) !important;
  border-bottom-color: var(--f-gold) !important;
  background: transparent !important;
}

/* ── Cart icon ── */
#_desktop_cart,
#blockcart-wrapper {
  display: flex;
  align-items: center;
}

.blockcart.cart-preview {
  display: flex;
  align-items: center;
}

.blockcart .header {
  line-height: 0;
}

.blockcart .header a {
  display: flex;
  align-items: center;
  position: relative;
  color: rgba(230, 227, 224, 0.6) !important;
  text-decoration: none !important;
  transition: color var(--f-transition);
  padding: 6px;
  line-height: 0;
}

.blockcart .header a:hover {
  color: var(--f-gold) !important;
}

.blockcart .header a .material-icons {
  font-size: 22px;
  line-height: 1;
}

/* Cart count badge — gold pill, clean number only */
.blockcart .header a .cart-products-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--f-gold);
  color: #0a090c;
  font-family: var(--f-font-body);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Empty cart — no badge shown (handled by template; .inactive as fallback) */
.blockcart.inactive .cart-products-count {
  display: none !important;
}

/* ── Header links general ── */
#header a,
.header-top a {
  color: var(--f-text);
}
#header a:hover {
  color: var(--f-gold);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#footer {
  background-color: var(--f-bg);
  color: var(--f-text-muted);
  border-top: none;
}

/* Suppress any default PrestaShop footer-container wrapper */
.footer-container {
  background-color: var(--f-bg);
  padding: 0;
}

/* ── Pre-footer hook area (CE newsletter block etc.) ── */
.fantasium-footer-before {
  /* No yellow glow — strip any inline CE background / box-shadow */
  background: transparent !important;
  box-shadow: none !important;
}
.fantasium-footer-before * {
  text-shadow: none !important;
}
/* Kill the gold radial glow that CE adds to the section */
.fantasium-footer-before .elementor-section,
.fantasium-footer-before .elementor-container,
.fantasium-footer-before [class*="elementor-"] {
  background-image: none !important;
  box-shadow: none !important;
}

/* ── Social row ── */
.fantasium-footer-social {
  background: var(--f-bg);
  border-top: 1px solid var(--f-border);
  padding: 48px 0;
  text-align: center;
}

.fantasium-footer-social-label {
  font-family: var(--f-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(230, 227, 224, 0.4);
  margin: 0 0 24px;
}

.fantasium-footer-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.fantasium-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(230, 227, 224, 0.2);
  border-radius: 6px;
  color: rgba(230, 227, 224, 0.5) !important;
  text-decoration: none !important;
  transition: border-color var(--f-transition), color var(--f-transition);
  background: transparent;
}

.fantasium-social-btn:hover {
  border-color: var(--f-gold);
  color: var(--f-gold) !important;
  text-decoration: none !important;
}

/* ── Main footer grid ── */
.fantasium-footer-main {
  background: var(--f-bg);
  border-top: 1px solid var(--f-border);
  padding: 56px 0 40px;
}

.fantasium-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 768px) {
  .fantasium-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Brand column */
.fantasium-footer-brand {}

.fantasium-footer-logo-wrap img {
  height: 36px !important;
  width: auto !important;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  margin-bottom: 16px;
  display: block;
}

.fantasium-footer-tagline {
  font-family: var(--f-font-body);
  font-size: 13px;
  color: rgba(230, 227, 224, 0.35);
  line-height: 1.6;
  margin: 0;
}

/* Link columns (hardcoded in footer.tpl) */
.fantasium-footer-col-title {
  font-family: var(--f-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(230, 227, 224, 0.9) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}

.fantasium-footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fantasium-footer-col ul li {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fantasium-footer-col ul li a {
  font-family: var(--f-font-body);
  font-size: 13px;
  color: rgba(230, 227, 224, 0.45) !important;
  text-decoration: none !important;
  transition: color var(--f-transition);
}

.fantasium-footer-col ul li a:hover {
  color: var(--f-gold) !important;
}

.fantasium-footer-book-meta {
  font-family: var(--f-font-body);
  font-size: 11px;
  color: rgba(230, 227, 224, 0.25);
  display: block;
}

/* ── Copyright bar ── */
.fantasium-footer-bottom {
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--f-border);
  padding: 20px 0;
}
.fantasium-footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fantasium-footer-copyright {
  font-family: var(--f-font-body);
  font-size: 12px;
  color: var(--f-text-muted);
  margin: 0;
  letter-spacing: 0.03em;
}

.fantasium-footer-payments {
  height: 32px;
  width: auto;
  background: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  margin-left: auto;
}

@media (max-width: 575px) {
  .fantasium-footer-bottom .container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

#footer a { color: rgba(230, 227, 224, 0.45); }
#footer a:hover { color: var(--f-gold); }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  background: transparent;
}
.breadcrumb li a,
.breadcrumb li span,
.breadcrumb li::after {
  color: var(--f-text-muted);
}

/* --------------------------------------------------------------------------
   Buttons — Global
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:active {
  background-color: var(--f-gold);
  border-color: var(--f-gold);
  color: #000;
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: var(--f-radius-sm);
  transition: all var(--f-transition);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--f-gold-hover);
  border-color: var(--f-gold-hover);
  color: #000;
  box-shadow: 0 0 20px var(--f-gold-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--f-gold);
  color: var(--f-gold);
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: var(--f-radius-sm);
  transition: all var(--f-transition);
}

.btn-secondary:hover {
  background-color: var(--f-gold-subtle);
  border-color: var(--f-gold);
  color: var(--f-gold);
  box-shadow: 0 0 15px var(--f-gold-glow);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  background: var(--f-bg-input);
  border: 1px solid var(--f-border);
  color: var(--f-text);
  border-radius: var(--f-radius-sm);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--f-gold);
  box-shadow: 0 0 8px var(--f-gold-glow);
  background: var(--f-bg-input);
  color: var(--f-text);
}

label { color: var(--f-text-muted); }

/* --------------------------------------------------------------------------
   Cards / Panels / Boxes
   -------------------------------------------------------------------------- */
.card,
.panel,
.well {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  color: var(--f-text);
}

/* --------------------------------------------------------------------------
   HERO SECTION (Homepage — used by CE)
   -------------------------------------------------------------------------- */
.fantasium-hero-section {
  position: relative;
  overflow: hidden;
}

.fantasium-hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.8) 0%,
    rgba(10, 10, 10, 0.5) 30%,
    rgba(10, 10, 10, 0.3) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.fantasium-hero-section > * {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE — Matches Lovable prototype
   -------------------------------------------------------------------------- */
#main .product-container {
  background: var(--f-bg);
}

/* ── Author line (from Brand) ── */
.fantasium-product-author {
  margin: 0 0 12px 0;
}
.fantasium-product-author,
.fantasium-product-author-link {
  color: var(--f-gold) !important;
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3.6px;
  text-decoration: none;
}
.fantasium-product-author-link:hover {
  color: var(--f-gold-hover) !important;
  text-decoration: underline;
}

/* ── Product title ── */
.fantasium-product-title,
.product-container h1.h1 {
  font-family: var(--f-font-heading);
  font-size: 48px;
  font-weight: 700;
  color: var(--f-text);
  letter-spacing: 1.2px;
  line-height: 1;
  margin-bottom: 12px;
  text-transform: none;
}

/* ── Star rating area ── */
.fantasium-product-rating {
  margin-bottom: 12px;
}
.fantasium-product-rating .product-comments-additional-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fantasium-product-rating .grade-stars {
  display: inline-flex;
}
.fantasium-product-rating .comments-note {
  margin: 0;
}
.fantasium-product-rating .btn-comment {
  background: transparent;
  border: 1px solid var(--f-border-strong);
  color: var(--f-gold);
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--f-transition);
}
.fantasium-product-rating .btn-comment:hover {
  background: var(--f-gold-subtle);
  border-color: var(--f-gold);
}

/* ── Availability badge ── */
.fantasium-product-availability {
  display: inline-block !important;
  margin: 4px 0 8px 0 !important;
}
.fantasium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.fantasium-badge-green {
  background: rgba(34, 197, 94, 0.1);
  color: var(--f-green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.fantasium-badge-amber {
  background: rgba(245, 158, 11, 0.1);
  color: var(--f-amber);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.fantasium-badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: var(--f-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── Tagline / short description ── */
.fantasium-product-tagline {
  margin: 0 0 16px 0;
  color: rgba(230, 227, 224, 0.6);
  font-size: 18px;
  font-style: italic;
  line-height: 1.6;
}

/* ── Full description in right column ── */
.fantasium-product-description {
  color: rgba(230, 227, 224, 0.65);
  font-family: var(--f-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 24px 0;
}
/* CE/Elementor adds 10px left padding to .elementor-element-populated by default;
   strip it here so the description text aligns flush with the tagline and badge above */
.fantasium-product-description .elementor-element-populated {
  padding: 0 !important;
}
.fantasium-product-description p {
  margin: 0 0 12px 0;
}
.fantasium-product-description p:last-child {
  margin-bottom: 0;
}
.fantasium-product-description a {
  color: var(--f-gold);
}

/* ── Product info line (binding, language, publisher) ── */
.fantasium-product-info-line {
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--f-border);
  text-align: center;
}
.fantasium-info-text {
  color: rgba(230, 227, 224, 0.4);
  font-family: var(--f-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

/* ── Genre tags (horizontal inline, centered) ── */
.fantasium-genre-tags {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 12px 0;
  justify-content: center;
  align-items: center;
}
.fantasium-genre-tag {
  display: inline-block !important;
  flex: 0 0 auto !important;
  padding: 6px 12px;
  border: 1px solid rgba(238, 189, 43, 0.2);
  color: rgba(238, 189, 43, 0.8);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  background: transparent;
  transition: all var(--f-transition);
}
.fantasium-genre-tag:hover {
  border-color: rgba(238, 189, 43, 0.5);
  background: rgba(238, 189, 43, 0.05);
}

/* Product detail — bold tags, no hover effect */
body#product .fantasium-genre-tag {
  font-weight: 700;
}
body#product .fantasium-genre-tag:hover {
  border-color: rgba(238, 189, 43, 0.2);
  background: transparent;
}

/* ── Product short description (within product-information) ── */
.product-information .product-description {
  color: var(--f-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ── Product price ── */
.product-prices .current-price .price,
.product-prices .current-price {
  color: var(--f-text);
  font-family: var(--f-font-heading);
  font-size: 2rem;
  font-weight: 700;
}

.product-prices .regular-price {
  color: var(--f-text-dim);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.product-prices .discount-percentage,
.product-prices .discount-amount {
  background: rgba(239, 68, 68, 0.15);
  color: var(--f-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Product flags ── */
.product-flag {
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
}

.product-flag.on-sale {
  background: var(--f-red);
}

.product-flag.new {
  background: linear-gradient(135deg, #e8c84a, #d4af37) !important;
  color: #0a090c !important;
  font-family: var(--f-font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 20px rgba(238, 189, 43, 0.35), 0 0 45px rgba(238, 189, 43, 0.1) !important;
}

/* ── Product availability (legacy selectors) ── */
#product-availability {
  font-weight: 600;
}

#product-availability .product-available {
  color: var(--f-green);
}

#product-availability .product-unavailable {
  color: var(--f-red);
}

/* Variant / combination cards */
.product-variants .product-variants-item {
  margin-bottom: 1rem;
}

.product-variants label {
  color: var(--f-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.product-variants select {
  background: var(--f-bg-card);
  color: var(--f-text);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
}

/* Fantasium edition cards (custom variant display) */
.fantasium-edition-card {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--f-transition);
  text-align: center;
}

.fantasium-edition-card:hover {
  border-color: var(--f-border-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.fantasium-edition-card.active,
.fantasium-edition-card.selected {
  border-color: var(--f-gold);
  box-shadow: 0 0 25px var(--f-gold-glow);
}

.fantasium-edition-card .edition-title {
  font-family: var(--f-font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--f-text);
  margin-bottom: 0.75rem;
}

.fantasium-edition-card .edition-badge {
  display: inline-block;
  background: var(--f-gold);
  color: #000;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}

.fantasium-edition-card .edition-price-original {
  text-decoration: line-through;
  color: var(--f-text-dim);
  font-size: 0.85rem;
}

.fantasium-edition-card .edition-price {
  font-family: var(--f-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--f-text);
}

.fantasium-edition-card .edition-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  text-align: left;
}

.fantasium-edition-card .edition-features li {
  color: var(--f-text-muted);
  font-size: 0.85rem;
  padding: 4px 0;
}

.fantasium-edition-card .edition-features li::before {
  content: "✓";
  color: var(--f-green);
  margin-right: 8px;
  font-weight: 700;
}

/* ── Add to cart button — gold gradient with glow ── */
.product-add-to-cart .add-to-cart {
  background: linear-gradient(135deg, #e8c84a, #d4af37);
  border: none;
  color: #0a090c;
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  border-radius: 4px;
  padding: 16px 40px;
  font-size: 14px;
  transition: all var(--f-transition);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 30px rgba(238, 189, 43, 0.25), 0 0 60px rgba(238, 189, 43, 0.08);
}

.product-add-to-cart .add-to-cart:hover {
  background: linear-gradient(135deg, #f0d45a, #e8c84a);
  box-shadow: 0 0 40px rgba(238, 189, 43, 0.4), 0 0 80px rgba(238, 189, 43, 0.15);
  transform: translateY(-2px);
}

.product-add-to-cart .add-to-cart:disabled {
  background: var(--f-text-dim);
  border-color: var(--f-text-dim);
  box-shadow: none;
  transform: none;
  color: #333;
}

/* Icon inside add-to-cart: body line-height (1.6) overrides theme.css line-height:1,
   causing the cart icon to sit visually off-center. Force it back. */
.product-add-to-cart .add-to-cart i.material-icons {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* "Počet" quantity label: theme.css sets rgb(35,35,35) — invisible on dark bg */
.product-add-to-cart .control-label,
.product-actions .control-label {
  color: #edbc2b !important;
}

/* Quantity spinner */
.product-quantity .qty .input-group {
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  overflow: hidden;
}

.product-quantity .qty .input-group input {
  background: var(--f-bg-card);
  color: var(--f-text);
  border: none;
  text-align: center;
}

.product-quantity .qty .input-group .btn {
  background: var(--f-bg-card);
  color: var(--f-text);
  border: none;
}

/* Tax label — dimmed, not hidden */
.product-prices .tax-shipping-delivery-label {
  font-size: 12px;
  color: rgba(230, 227, 224, 0.35);
}

/* --------------------------------------------------------------------------
   PRODUCT TABS (Detail, Recenze)
   -------------------------------------------------------------------------- */

/* ── Nuke any white/light background the classic theme applies to tabs ── */
.tabs,
.tabs .nav-tabs,
.tabs .tab-content,
.tab-content,
.tab-pane,
#tab-content,
.product-tabs,
.product-tabs .tab-content,
#product .tabs,
#product .tab-content,
.fantasium-tabs-col .tabs,
.fantasium-tabs-col .tab-content {
  background: transparent !important;
  background-color: transparent !important;
}

.tabs .nav-tabs {
  border-bottom: 1px solid var(--f-border);
  background: transparent !important;
}

.tabs .nav-tabs .nav-link {
  color: rgba(196, 190, 186, 0.7);
  font-family: var(--f-font-body);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 13px;
  font-weight: 500;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 20px;
  transition: color var(--f-transition), border-color var(--f-transition);
  background: transparent !important;
  border-radius: 0 !important;
}

.tabs .nav-tabs .nav-link:hover {
  color: var(--f-text);
  border-bottom-color: rgba(212, 175, 55, 0.3) !important;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active {
  color: var(--f-gold) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--f-gold) !important;
}

.tab-content {
  color: var(--f-text-muted);
  padding-top: 24px;
  background: transparent !important;
}

.tab-content .product-description {
  color: var(--f-text-muted);
  line-height: 1.8;
}

/* Tab panes — force transparent dark bg */
.tab-pane {
  background: transparent !important;
}

/* Classic theme card/panel around tabs — remove it */
.page-content,
#content.page-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Any Bootstrap card or well wrapping tabs */
.tabs > .card,
.tabs > .well,
#product .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Detail tab: description + features ── */
.fantasium-tab-description {
  margin-bottom: 32px;
}
.fantasium-tab-description p {
  margin-bottom: 12px;
  color: rgba(230, 227, 224, 0.7);
  font-size: 15px;
  line-height: 1.8;
}

.fantasium-tab-features {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--f-border);
}
.fantasium-features-heading {
  font-family: var(--f-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
}
.fantasium-features-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
}
.fantasium-feature-name {
  color: rgba(230, 227, 224, 0.5);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fantasium-feature-value {
  color: var(--f-text);
  font-size: 14px;
  margin: 0;
}

.fantasium-tab-product-details {
  margin-top: 16px;
}
.fantasium-detail-row {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.fantasium-detail-label {
  color: rgba(230, 227, 224, 0.5);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 120px;
}
.fantasium-detail-value {
  color: var(--f-text);
  font-size: 14px;
}

/* Product details tab (legacy) */
.product-features .data-sheet {
  background: transparent;
}

.product-features .data-sheet .name,
.product-features .data-sheet .value {
  color: var(--f-text-muted);
  border-bottom: 1px solid var(--f-border);
  padding: 8px 0;
}

.product-features .data-sheet .name {
  color: var(--f-text-dim);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   PRODUCT COMMENTS / REVIEWS
   -------------------------------------------------------------------------- */
.product-comment-list-item {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color var(--f-transition);
}

.product-comment-list-item:hover {
  border-color: var(--f-border-strong);
}

.product-comment-list-item .comment-infos .comment-author {
  color: var(--f-text);
  font-weight: 600;
}

.product-comment-list-item .comment-infos .comment-date {
  color: var(--f-text-dim);
  font-size: 0.8rem;
}

.product-comment-list-item .comment-content .comment-title {
  color: var(--f-text);
  font-family: var(--f-font-heading);
}

.product-comment-list-item .comment-content p {
  color: var(--f-text-muted);
}

/* Star ratings */
.grade-stars .star-on,
.star-content .star-on,
.star-full {
  color: var(--f-gold);
}

.grade-stars .star-off,
.star-content .star-off,
.star-empty {
  color: var(--f-text-dim);
}

/* Review buttons */
.post-product-comment,
.post-product-comment-right,
.btn-comment {
  background: transparent;
  border: 1px solid var(--f-border-strong);
  color: var(--f-gold);
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  border-radius: 4px;
  padding: 10px 20px;
  transition: all var(--f-transition);
  cursor: pointer;
}

.post-product-comment:hover,
.post-product-comment-right:hover,
.btn-comment:hover {
  background: var(--f-gold-subtle);
  border-color: var(--f-gold);
  color: var(--f-gold);
}

/* Review modal — dark theme */
#post-product-comment-modal .modal-content,
.product-comment-modal .modal-content {
  background: var(--f-bg-card) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
}

#post-product-comment-modal .modal-header,
.product-comment-modal .modal-header {
  border-bottom-color: var(--f-border) !important;
  background: var(--f-bg-card) !important;
}

#post-product-comment-modal .modal-header .h2,
.product-comment-modal .modal-header .h2 {
  color: var(--f-text) !important;
  font-family: var(--f-font-heading) !important;
}

#post-product-comment-modal .modal-body,
.product-comment-modal .modal-body {
  background: var(--f-bg-card) !important;
}

#post-product-comment-modal .modal-footer,
.product-comment-modal .modal-footer {
  border-top-color: var(--f-border) !important;
  background: var(--f-bg-card) !important;
}

#post-product-comment-modal label,
#post-product-comment-modal .form-label,
.product-comment-modal label {
  color: var(--f-text-muted) !important;
}

#post-product-comment-modal input[type="text"],
#post-product-comment-modal textarea,
.product-comment-modal input[type="text"],
.product-comment-modal textarea {
  background: var(--f-bg-input) !important;
  border: 1px solid var(--f-border-strong) !important;
  color: var(--f-text) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-family: var(--f-font-body) !important;
}

#post-product-comment-modal input[type="text"]:focus,
#post-product-comment-modal textarea:focus {
  border-color: var(--f-gold) !important;
  outline: none !important;
}

#post-product-comment-modal .btn-comment,
.product-comment-modal .btn-comment {
  background: linear-gradient(135deg, #e8c84a, #d4af37) !important;
  color: #0a090c !important;
  border: none !important;
  font-family: var(--f-font-heading) !important;
  font-weight: 700 !important;
}

#post-product-comment-modal .btn-comment-inverse {
  background: transparent !important;
  color: var(--f-text-muted) !important;
  border: 1px solid var(--f-border-strong) !important;
}

/* Grade stars in review modal */
#post-product-comment-modal .grade-stars .star-on,
#post-product-comment-modal .criterion-rating .star-on {
  color: var(--f-gold) !important;
}

/* Alert modals (review posted, error) */
.product-comment-modal .modal-content {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}

/* Comments additional info (star summary near title) */
.product-comments-additional-info .comments-note {
  color: var(--f-text-muted);
}

.product-comments-additional-info .comments-note a {
  color: var(--f-text-muted);
  text-decoration: none;
}

.product-comments-additional-info .comments-note a:hover {
  color: var(--f-gold);
}

.product-comments-additional-info .comments-note__grade {
  color: var(--f-text);
  font-weight: 600;
}

.product-comments-additional-info .comments-note__small-comments {
  color: var(--f-text-dim);
  font-size: 12px;
}

/* Review list header */
#product-comments-list-header {
  margin-bottom: 20px;
}

#product-comments-list-header h5,
.product-comments-list-header h5 {
  color: var(--f-text);
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Review list pagination */
#product-comments-list-pagination ul {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  justify-content: center;
}

#product-comments-list-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: var(--f-text-muted);
  border: 1px solid var(--f-border);
  cursor: pointer;
  transition: all var(--f-transition);
}

#product-comments-list-pagination li span:hover {
  border-color: var(--f-gold);
  color: var(--f-gold);
}

/* Empty product comment section */
#empty-product-comment {
  text-align: center;
  padding: 40px 20px;
  color: var(--f-text-muted);
}

/* Checked/verified review badge */
.checked-comment {
  color: var(--f-green) !important;
  font-size: 11px;
  font-weight: 500;
}

/* ── Accessories section ── */
.fantasium-accessories-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--f-border);
}

.fantasium-section-heading {
  font-family: var(--f-font-heading);
  color: var(--f-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   PRODUCT MINIATURES (Cards on category/homepage)
   -------------------------------------------------------------------------- */
.product-miniature {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  overflow: hidden;
  transition: all var(--f-transition);
}

.product-miniature:hover {
  border-color: var(--f-border-strong);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

.product-miniature .product-title a {
  color: var(--f-text);
  font-family: var(--f-font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.product-miniature .product-title a:hover {
  color: var(--f-gold);
}

.product-miniature .product-price-and-shipping .price {
  color: var(--f-text);
  font-family: var(--f-font-heading);
  font-weight: 700;
}

.product-miniature .product-price-and-shipping .regular-price {
  color: var(--f-text-dim);
}

/* Hide price text on out-of-stock cards while keeping the row height so all
   cards in the grid stay the same height. visibility:hidden (not display:none)
   is intentional — the space is preserved. Class set in product.tpl. */
.product-miniature .product-price-and-shipping.fantasium-price-unavailable {
  visibility: hidden;
}

.product-miniature .product-description {
  padding: 15px;
}

.product-miniature .thumbnail-container {
  background: var(--f-bg-card);
}

.product-miniature .highlighted-informations {
  background: rgba(10, 10, 10, 0.85);
}

.product-miniature .quick-view {
  color: var(--f-gold);
}

/* --------------------------------------------------------------------------
   CATEGORY / LISTING PAGES
   -------------------------------------------------------------------------- */
#products .products-sort-order .select-title,
.products-sort-order .select-title {
  color: var(--f-text);
  background: var(--f-bg-card);
  border-color: var(--f-border);
}

.faceted-overlay {
  background: rgba(10, 10, 10, 0.7);
}

/* Left column / Facets */
#left-column .block-categories,
#left-column .facet {
  color: var(--f-text-muted);
}

#left-column a {
  color: var(--f-text-muted);
}

#left-column a:hover {
  color: var(--f-gold);
}

/* --------------------------------------------------------------------------
   PAGES (CMS, Contact, etc.)
   -------------------------------------------------------------------------- */
#wrapper {
  background: var(--f-bg);
}

.page-content,
.page-cms {
  color: var(--f-text-muted);
}

.page-header h1 {
  font-family: var(--f-font-heading);
  color: var(--f-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   CART & CHECKOUT (dark overrides)
   -------------------------------------------------------------------------- */
.cart-grid .cart-container {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
}

.cart-grid .card-block {
  background: var(--f-bg-card);
}

.cart-grid .cart-summary {
  background: var(--f-bg-card);
}

.cart-grid h1 {
  color: var(--f-text);
}

.cart-items .cart-item {
  border-bottom-color: var(--f-border);
}

.cart-items .product-line-info a {
  color: var(--f-text);
}

.cart-items .product-price {
  color: var(--f-text);
}

/* Quantity spinner on the standard cart page — same look as product detail */
.cart-items .input-group {
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  overflow: hidden;
  width: auto;
  display: inline-flex;
}

.cart-items .input-group .js-cart-line-product-quantity,
.cart-items .input-group input[type="number"] {
  background: #ffffff !important;
  color: #0a090c !important;
  border: none !important;
  text-align: center !important;
  width: 56px !important;
}

/* Hide the horizontal +/- buttons TouchSpin injects when it initialises
   on top of our static vertical buttons. We keep input-group-btn-vertical
   (our static ^/v) and hide input-group-btn (TouchSpin's horizontal pair). */
.bootstrap-touchspin .input-group-btn {
  display: none !important;
}

/* Cart page (non-checkout) touchspin buttons — scoped away from checkout */
#cart-page .cart-items .input-group .btn-touchspin,
#cart-page .cart-items .input-group .input-group-btn-vertical .btn {
  background: #f5f5f5 !important;
  color: #0a090c !important;
  border: none !important;
  border-left: 1px solid var(--f-border) !important;
}

#cart-page .cart-items .input-group .btn-touchspin:hover,
#cart-page .cart-items .input-group .input-group-btn-vertical .btn:hover {
  color: var(--f-gold) !important;
  background: #e8e8e8 !important;
}

/* --------------------------------------------------------------------------
   NOTIFICATIONS / ALERTS
   -------------------------------------------------------------------------- */
.alert-info {
  background: var(--f-bg-card);
  border-color: var(--f-border);
  color: var(--f-text);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--f-green);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--f-amber);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--f-red);
}

/* --------------------------------------------------------------------------
   BUTTON GLOW EFFECT (Lovable-style gold glow)
   -------------------------------------------------------------------------- */
.fantasium-btn-glow,
.elementor-widget-html a[style*="background-color: #d4af37"],
.elementor-widget-html a[style*="background-color:#d4af37"] {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.25), 0 0 60px rgba(212, 175, 55, 0.08);
  transition: box-shadow 0.4s ease, background-color 0.3s ease;
}
.fantasium-btn-glow:hover,
.elementor-widget-html a[style*="background-color: #d4af37"]:hover,
.elementor-widget-html a[style*="background-color:#d4af37"]:hover {
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4), 0 0 80px rgba(212, 175, 55, 0.15);
  background-color: #c9a032 !important;
}

/* Outline button hover */
.fantasium-btn-outline:hover,
.elementor-widget-html a[style*="border: 2px solid #d4af37"]:hover {
  background-color: rgba(212, 175, 55, 0.1) !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

/* --------------------------------------------------------------------------
   FADE-IN ANIMATIONS (scroll-triggered via CE or manual)
   -------------------------------------------------------------------------- */
@keyframes fantasium-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fantasium-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fantasium-pulseGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.fantasium-fade-in-up {
  animation: fantasium-fadeInUp 0.8s ease-out both;
}

.fantasium-fade-in {
  animation: fantasium-fadeIn 0.6s ease-out both;
}

/* Stagger delays for child elements */
.fantasium-stagger > *:nth-child(1) { animation-delay: 0s; }
.fantasium-stagger > *:nth-child(2) { animation-delay: 0.15s; }
.fantasium-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.fantasium-stagger > *:nth-child(4) { animation-delay: 0.45s; }
.fantasium-stagger > *:nth-child(5) { animation-delay: 0.6s; }

/* --------------------------------------------------------------------------
   SCROLL INDICATOR (Homepage)
   -------------------------------------------------------------------------- */
.fantasium-scroll-indicator {
  animation: fantasium-bounce 2s infinite;
}

@keyframes fantasium-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.fantasium-gold { color: var(--f-gold); }
.fantasium-heading {
  font-family: var(--f-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.fantasium-border-top { border-top: 1px solid var(--f-border-strong); }
.fantasium-bg-surface { background-color: var(--f-bg-surface); }

/* Badge utilities */
.fantasium-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fantasium-badge-green {
  background: rgba(34, 197, 94, 0.15);
  color: var(--f-green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.fantasium-badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: var(--f-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* --------------------------------------------------------------------------
   CE PRODUCT GRID — Homepage "Naše tituly" section
   Center items when fewer than max columns (1 = centered, 2 = side by side,
   3 = 2 + 1 centered below)
   -------------------------------------------------------------------------- */
.featured-products .products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}
/* When the grid has only one product, center it (desktop only).
   Below 840px CE switches to single-column natively, so no override needed. */
@media (min-width: 767px) {
  .elementor-grid-2 .ce-product-grid.elementor-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 50%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.ce-product-grid .product-miniature {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  overflow: hidden;
  transition: border-color var(--f-transition), box-shadow var(--f-transition);
}
.ce-product-grid .product-miniature:hover {
  border-color: var(--f-border-strong);
  box-shadow: 0 0 25px var(--f-gold-glow);
}
.ce-product-grid .product-title a {
  color: var(--f-text);
  font-family: var(--f-font-heading);
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 20px;
  font-weight: 700;
}
.ce-product-grid .product-title a:hover {
  color: var(--f-gold);
}
.ce-product-grid .product-title,
.product-miniature .product-title {
  text-align: left;
  font-size: 20px;
}
.ce-product-grid .product-price-and-shipping .price {
  color: var(--f-gold);
  font-family: var(--f-font-heading);
}
.ce-product-grid .fantasium-miniature-author {
  color: var(--f-gold);
  font-family: var(--f-font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

/* CE email subscription widget — force stacked layout (button below input) */
.elementor-widget-email-subscription .elementor-widget-container,
.elementor-widget-email-subscription form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-width: 540px;
  margin: 0 auto;
  width: 100% !important;
}
/* The inner wrapper CE generates — force column layout */
.elementor-widget-email-subscription .elementor-form-fields-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
}
/* Each field group inside the wrapper takes full width */
.elementor-widget-email-subscription .elementor-field-group {
  display: flex !important;
  flex-direction: column !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Input and button must be full-width blocks, not side-by-side */
.elementor-widget-email-subscription .elementor-field-group .elementor-field,
.elementor-widget-email-subscription .elementor-field-group .elementor-button {
  width: 100% !important;
  flex: none !important;
}
.elementor-widget-email-subscription input[type="email"] {
  background: var(--f-bg-input) !important;
  border: 1px solid var(--f-border-strong) !important;
  color: var(--f-text) !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  font-family: var(--f-font-body) !important;
  min-height: 52px;
  width: 100% !important;
}
.elementor-widget-email-subscription input[type="email"]::placeholder {
  color: var(--f-text-muted) !important;
}
.elementor-widget-email-subscription input[type="email"]:focus {
  border-color: var(--f-gold) !important;
  outline: none !important;
}
.elementor-widget-email-subscription button,
.elementor-widget-email-subscription input[type="submit"] {
  background: linear-gradient(135deg, var(--f-gold-bright), var(--f-gold)) !important;
  color: #000 !important;
  font-family: var(--f-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  border-radius: 4px !important;
  min-height: 52px;
  width: 100% !important;
  transition: box-shadow 0.4s ease, background 0.3s ease;
}
.elementor-widget-email-subscription button:hover,
.elementor-widget-email-subscription input[type="submit"]:hover {
  background: linear-gradient(135deg, #f0d45a, var(--f-gold-bright)) !important;
  box-shadow: 0 0 30px rgba(238, 189, 43, 0.25), 0 0 60px rgba(238, 189, 43, 0.08);
}

.fantasium-badge-gold {
  background: rgba(212, 175, 55, 0.12);
  color: var(--f-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.fantasium-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  background: var(--f-gold-subtle);
  color: var(--f-gold);
  border: 1px solid var(--f-border-strong);
  margin: 3px;
}

/* --------------------------------------------------------------------------
   CE SOCIAL ICONS — Dark background styling
   -------------------------------------------------------------------------- */
.elementor-widget-social-icons .elementor-social-icon {
  background: transparent !important;
  border: 1px solid var(--f-border-strong);
  transition: all var(--f-transition);
}
.elementor-widget-social-icons .elementor-social-icon:hover {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: var(--f-gold);
  box-shadow: 0 0 15px var(--f-gold-glow);
}
.elementor-widget-social-icons .elementor-social-icon i {
  color: var(--f-gold) !important;
}

/* --------------------------------------------------------------------------
   PRODUCT MINIATURE — Full card styling (Lovable design)
   -------------------------------------------------------------------------- */
.product-miniature {
  background: var(--f-bg-card) !important;
}
.product-miniature .thumbnail-container {
  background: var(--f-bg-card) !important;
}
.product-miniature .thumbnail-top {
  background: var(--f-bg-card) !important;
}
.product-miniature .product-thumbnail {
  background: var(--f-bg-card) !important;
}
.product-miniature .product-thumbnail img {
  background: transparent !important;
  mix-blend-mode: normal;
}
.product-miniature .highlighted-informations {
  background: rgba(10, 10, 10, 0.85) !important;
}
.product-miniature .highlighted-informations .quick-view {
  color: var(--f-gold) !important;
}
.product-miniature .highlighted-informations .quick-view i {
  color: var(--f-gold) !important;
}
.product-miniature .product-description {
  background: var(--f-bg-card) !important;
  padding: 20px;
  text-align: left;
}

.fantasium-miniature-author {
  color: var(--f-gold);
  font-family: var(--f-font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 500;
}

.fantasium-availability {
  margin: 10px 0;
}

.fantasium-miniature-tagline {
  color: var(--f-gold);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 12px 0;
  padding: 0;
}

.fantasium-miniature-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 12px 0;
}

/* "Více informací" as a gold CTA button (matches hero) */
.fantasium-miniature-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #e8c84a, #d4af37);
  color: #0a090c !important;
  font-family: var(--f-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  border-radius: 4px;
  padding: 14px 24px;
  margin-top: 16px;
  transition: all var(--f-transition);
  text-decoration: none;
  box-shadow: none;
}
.fantasium-miniature-btn:hover {
  color: #0a090c !important;
  background: linear-gradient(135deg, #f0d45a, #e8c84a);
  box-shadow: 0 0 30px rgba(238, 189, 43, 0.25), 0 0 60px rgba(238, 189, 43, 0.08);
  text-decoration: none;
}
/* Keep backwards compat if old link class still in use */
.fantasium-miniature-link {
  display: inline-block;
  color: var(--f-gold);
  font-family: var(--f-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--f-gold);
  padding-bottom: 4px;
  margin-top: 12px;
  transition: all var(--f-transition);
}
.fantasium-miniature-link:hover {
  color: var(--f-gold-hover);
  border-bottom-color: var(--f-gold-hover);
}

/* Product flags (badges) on thumbnail */
.product-miniature .product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.product-miniature .product-flag {
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--f-gold) !important;
  font-family: var(--f-font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  margin-bottom: 4px;
  display: inline-block;
  border-radius: 20px;
  border: 1px solid var(--f-border-strong);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   MODAL / POPUP Dark Overrides
   -------------------------------------------------------------------------- */
.modal-content {
  background: var(--f-bg-card) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
}

.modal-header {
  background: var(--f-bg-card) !important;
  border-bottom-color: var(--f-border) !important;
}

.modal-header .close,
.modal-header .btn-close {
  color: var(--f-text) !important;
  opacity: 0.7;
  filter: invert(1);
}

.modal-body {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}

.modal-footer {
  background: var(--f-bg-card) !important;
  border-top-color: var(--f-border) !important;
}

.modal-backdrop.show {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   QUICK VIEW Modal — Dark styling
   -------------------------------------------------------------------------- */
#quickview-modal .modal-content,
.quickview .modal-content {
  background: var(--f-bg-card) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
}
#quickview-modal .modal-body,
.quickview .modal-body {
  background: var(--f-bg-card) !important;
}
#quickview-modal h1,
#quickview-modal .h1,
.quickview h1,
.quickview .h1 {
  color: var(--f-text) !important;
  font-family: var(--f-font-heading) !important;
}
#quickview-modal .product-price,
#quickview-modal .current-price .price,
.quickview .product-price,
.quickview .current-price .price {
  color: var(--f-gold) !important;
  font-family: var(--f-font-heading) !important;
}
#quickview-modal .product-description,
.quickview .product-description {
  color: var(--f-text-muted) !important;
  background: transparent !important;
}
#quickview-modal .product-variants,
#quickview-modal .js-product-variants,
.quickview .product-variants,
.quickview .js-product-variants {
  display: none !important;
}
#quickview-modal .product-quantities label,
.quickview .product-quantities label {
  color: var(--f-text-muted) !important;
}
#quickview-modal .qty-input,
#quickview-modal input[name="qty"],
.quickview .qty-input,
.quickview input[name="qty"] {
  background: var(--f-bg-input) !important;
  border: 1px solid var(--f-border-strong) !important;
  color: var(--f-text) !important;
}
#quickview-modal .add-to-cart,
.quickview .add-to-cart {
  background: var(--f-gold) !important;
  color: #000 !important;
  font-family: var(--f-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.25), 0 0 60px rgba(212, 175, 55, 0.08);
}
#quickview-modal .add-to-cart:hover,
.quickview .add-to-cart:hover {
  background: var(--f-gold-hover) !important;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4), 0 0 80px rgba(212, 175, 55, 0.15);
}
/* Thumbnail white background */
.quickview .js-thumb,
#quickview-modal .js-thumb {
  background: transparent !important;
}
/* Close button — gold, fully visible */
.quickview .close,
#quickview-modal .close {
  color: var(--f-gold) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}
#quickview-modal .social-sharing,
.quickview .social-sharing {
  border-top-color: var(--f-border) !important;
}
/* product-cover img + modal thumbnails: theme.css sets white bg — override everywhere */
.product-cover img,
#product-modal .modal-content .modal-body .product-cover-modal,
#product-modal .modal-content .modal-body .product-images img,
#quickview-modal .product-cover img,
#quickview-modal .product-images img,
.quickview .product-cover img,
.quickview .product-images img {
  background: transparent !important;
}

/* Thumbnail gallery selected/hover border: theme.css sets teal rgb(36,185,215) — override to gold */
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border: 3px solid var(--f-gold) !important;
}
#quickview-modal .product-availability .product-available,
.quickview .product-availability .product-available {
  color: var(--f-green) !important;
}
#quickview-modal .product-availability .product-unavailable,
.quickview .product-availability .product-unavailable {
  color: var(--f-red) !important;
}
#quickview-modal .btn-touchspin,
.quickview .btn-touchspin {
  background: var(--f-bg-surface) !important;
  border-color: var(--f-border-strong) !important;
  color: var(--f-text) !important;
}
#quickview-modal .product-information,
.quickview .product-information {
  color: var(--f-text-muted) !important;
}

/* --------------------------------------------------------------------------
   CART CONFIRMATION MODAL — classic theme structure (#blockcart-modal)
   Actual selectors confirmed via DevTools inspection.
   -------------------------------------------------------------------------- */

/* Centering fix:
   Bootstrap 3 adds .fade + .in classes. Both .modal.fade .modal-dialog
   (translate -25%) and .modal.in .modal-dialog (translate 0) have equal
   specificity — whichever appears last in CSS wins. If fade wins the modal
   sits at the top. Fix: force flex centering + reset the transform when shown. */
#blockcart-modal.in,
#blockcart-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#blockcart-modal.in .modal-dialog,
#blockcart-modal.show .modal-dialog {
  transform: none !important;
  margin: auto !important;
}

/* Modal header title: theme.css sets rgb(53,57,67) dark gray — make it green */
#blockcart-modal .modal-title {
  color: var(--f-green) !important;
}
/* The icon next to it is already green in theme.css — keep it */
#blockcart-modal .modal-title i.material-icons {
  color: var(--f-green) !important;
}

/* Product title: h6.product-name — computed: rgb(36,185,215) teal from theme */
#blockcart-modal h6.product-name {
  font-family: var(--f-font-heading) !important;
  color: var(--f-text) !important;
  font-size: 1rem !important;
  margin-bottom: 8px !important;
}

/* Product image */
#blockcart-modal img.product-image {
  background: transparent !important;
  border: 1px solid var(--f-border) !important;
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}

/* Price and quantity */
#blockcart-modal .product-price {
  color: var(--f-gold) !important;
  font-family: var(--f-font-heading) !important;
  font-size: 0.95rem !important;
  margin: 4px 0 !important;
}
#blockcart-modal .product-quantity {
  color: var(--f-text-muted) !important;
  font-size: 13px !important;
}

/* Cart totals — right column */
#blockcart-modal .cart-content {
  padding-left: 16px;
}
#blockcart-modal .cart-products-count {
  font-size: 13px;
  color: var(--f-text) !important;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Subtotal / shipping rows: span.label is rgb(35,35,35) near-black on dark bg */
#blockcart-modal .cart-content p {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--f-text-muted) !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
#blockcart-modal .cart-content p .label {
  color: rgba(230, 227, 224, 0.4) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 !important;
  background: transparent !important;
}
#blockcart-modal .cart-content p .value,
#blockcart-modal .cart-content p .subtotal,
#blockcart-modal .cart-content p .shipping {
  color: var(--f-text-muted) !important;
}

/* Total row: p.product-total — computed bg: rgb(246,246,246) light gray */
#blockcart-modal .cart-content p.product-total {
  background: transparent !important;
  border-top: 1px solid var(--f-border) !important;
  border-radius: 0 !important;
  padding: 10px 0 0 !important;
  margin-top: 6px !important;
  font-weight: 600;
}
#blockcart-modal .cart-content p.product-total .label {
  color: var(--f-text-muted) !important;
  font-weight: 600 !important;
}
#blockcart-modal .cart-content p.product-total .value {
  color: var(--f-text) !important;
  font-size: 14px !important;
}

/* Divider between left/right columns */
#blockcart-modal .divide-right {
  border-right-color: var(--f-border) !important;
}

/* Buttons: btn.btn-secondary = "Continue", btn.btn-primary = "Checkout" */
#blockcart-modal .cart-content .cart-content-btn {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}
#blockcart-modal .cart-content .cart-content-btn .col-md-6 {
  padding: 0 6px !important;
}

/* Mobile ≤480px: stack buttons full-width, hide the <br> in checkout btn */
@media (max-width: 480px) {
  #blockcart-modal .cart-content .cart-content-btn {
    flex-direction: column;
	display: flex;
    gap: 8px;
  }
  #blockcart-modal .cart-content .cart-content-btn .btn {
    width: 100% !important;
    text-align: center;
  }
  /* Let the <br> stay visible — button is full-width so two lines is fine */
}

/* "Pokračovat v nákupu" — gold outline */
#blockcart-modal .btn.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(238, 189, 43, 0.45) !important;
  color: var(--f-gold) !important;
  font-family: var(--f-font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  transition: all var(--f-transition) !important;
}
#blockcart-modal .btn.btn-secondary:hover {
  background: rgba(238, 189, 43, 0.06) !important;
  border-color: var(--f-gold) !important;
}

/* "Pokračovat do pokladny" — gold gradient + glow */
#blockcart-modal .btn.btn-primary {
  background: linear-gradient(135deg, #e8c84a, #d4af37) !important;
  border: none !important;
  color: #0a090c !important;
  font-family: var(--f-font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  width: 100% !important;
  box-shadow: 0 0 28px rgba(238, 189, 43, 0.3), 0 0 55px rgba(238, 189, 43, 0.1) !important;
  border-radius: 4px !important;
  transition: all var(--f-transition) !important;
  /* Keep icon + text vertically centred on the same row */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
/* Icon inside button — suppress theme line-height that pushes it off-axis */
#blockcart-modal .btn.btn-primary i.material-icons {
  font-size: 15px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
#blockcart-modal .btn.btn-primary:hover {
  box-shadow: 0 0 40px rgba(238, 189, 43, 0.45), 0 0 80px rgba(238, 189, 43, 0.15) !important;
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination .page-item .page-link {
  background: var(--f-bg-card);
  border-color: var(--f-border);
  color: var(--f-text-muted);
}

.pagination .page-item.active .page-link {
  background: var(--f-gold);
  border-color: var(--f-gold);
  color: #000;
}

.pagination .page-item .page-link:hover {
  background: var(--f-gold-subtle);
  border-color: var(--f-border-strong);
  color: var(--f-gold);
}

/* --------------------------------------------------------------------------
   ABOUT SECTION — Warm background + logo white filter
   -------------------------------------------------------------------------- */
/* Warm dark-brown background on about & newsletter CE sections.
   Targets any section with the email-subscription widget (newsletter)
   or the 2-column about layout. Also provides a general class hook. */
.elementor-section:has(.elementor-widget-email-subscription),
.elementor-section:has(.elementor-widget-social-icons),
.elementor-section.fantasium-about-section {
  background-color: #1c1710 !important;
  background-image: linear-gradient(to bottom, transparent, rgba(238,189,43,0.04), transparent) !important;
}
/* Logo white filter + size constraint (matches header-logo scale) */
.elementor-section .elementor-widget-image img[src*="fantasium-logo"],
.elementor-section .elementor-widget-image img[src*="Fantasium/fantasium-logo"] {
  filter: brightness(0) invert(1);
  opacity: 0.85;
  width: auto !important;
  max-height: 44px !important;
  max-width: 180px !important;
}

/* ── CE product-footer image grid — fix distortion + hover zoom ── */
/* All images in the displayFooterProduct CE block should display naturally */
.elementor-widget-image .elementor-widget-container {
  overflow: hidden;
}
.elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.elementor-widget-image img:hover {
  transform: scale(1.03);
}
/* Exception: the logo should not zoom */
.elementor-widget-image img[src*="fantasium-logo"]:hover {
  transform: none;
}

/* --------------------------------------------------------------------------
   CE SECTION — Star ratings in product miniature
   -------------------------------------------------------------------------- */
.product-miniature .star-content .star,
.product-miniature .comments-nb {
  color: var(--f-gold) !important;
}
.product-miniature .star-content .star::before {
  color: var(--f-gold) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .product-container h1.h1 {
    font-size: 1.6rem;
  }

  .product-prices .current-price .price {
    font-size: 1.5rem;
  }

  .fantasium-edition-card .edition-price {
    font-size: 1.3rem;
  }

  .tabs .nav-tabs .nav-link {
    font-size: 0.7rem;
    padding: 10px 12px;
    letter-spacing: 1px;
  }

  .fantasium-hero-scroll {
    display: none;
  }
}

/* ==========================================================================
   FANTASIUM AJAX REVIEW SYSTEM — Stars, Review List, Modal
   ========================================================================== */

/* ── Inline stars (header rating) ── */
.fantasium-stars-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 8px 0 12px;
}
.fantasium-star {
  font-size: 18px;
  line-height: 1;
}
.fantasium-star.filled { color: var(--f-gold-bright); }
.fantasium-star.half   { color: var(--f-gold-bright); opacity: 0.6; }
.fantasium-star.empty  { color: rgba(230,227,224,0.2); }
.fantasium-rating-value {
  font-family: var(--f-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--f-text);
  margin-left: 6px;
}
.fantasium-rating-count {
  font-family: var(--f-font-body);
  font-size: 13px;
  color: rgba(230,227,224,0.5);
  margin-left: 2px;
}
.fantasium-no-reviews a {
  color: var(--f-gold-bright);
  text-decoration: none;
  font-size: 13px;
}
.fantasium-no-reviews a:hover { text-decoration: underline; }

/* ── Reviews container ── */
#fantasium-reviews-container {
  padding: 20px 0;
}
.fantasium-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.fantasium-reviews-title {
  font-family: var(--f-font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
}
.fantasium-btn-write-review {
  font-family: var(--f-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f-gold-bright);
  background: transparent;
  border: 1px solid rgba(238,189,43,0.4);
  border-radius: 4px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.fantasium-btn-write-review:hover {
  background: rgba(238,189,43,0.1);
  border-color: var(--f-gold-bright);
}
.fantasium-reviews-summary {
  margin-bottom: 16px;
}
.fantasium-total-reviews {
  font-family: var(--f-font-body);
  font-size: 14px;
  color: rgba(230,227,224,0.6);
}
.fantasium-reviews-empty {
  font-family: var(--f-font-body);
  font-size: 15px;
  color: rgba(230,227,224,0.4);
  font-style: italic;
  padding: 30px 0;
  text-align: center;
}

/* ── Review items ── */
.fantasium-review-item {
  border-bottom: 1px solid rgba(238,189,43,0.1);
  padding: 20px 0;
}
.fantasium-review-item:last-child { border-bottom: none; }
.fantasium-review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.fantasium-review-stars .fantasium-star { font-size: 15px; }
.fantasium-review-date {
  font-family: var(--f-font-body);
  font-size: 12px;
  color: rgba(230,227,224,0.4);
}
.fantasium-review-author-name {
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(230,227,224,0.5);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fantasium-review-item-title {
  font-family: var(--f-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0 0 8px;
}
.fantasium-review-text {
  font-family: var(--f-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(230,227,224,0.7);
  margin: 0;
}

/* ── Pagination ── */
.fantasium-reviews-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.fantasium-page-btn {
  font-family: var(--f-font-body);
  font-size: 13px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(238,189,43,0.2);
  background: transparent;
  color: rgba(230,227,224,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.fantasium-page-btn:hover {
  border-color: var(--f-gold-bright);
  color: var(--f-gold-bright);
}
.fantasium-page-btn.active {
  background: rgba(238,189,43,0.15);
  border-color: var(--f-gold-bright);
  color: var(--f-gold-bright);
  font-weight: 600;
}

/* ── Review modal ── */
.fantasium-review-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fantasium-review-modal {
  background: #171412;
  border: 1px solid rgba(238,189,43,0.2);
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.fantasium-review-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.fantasium-review-modal-header h4 {
  font-family: var(--f-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
}
.fantasium-modal-close {
  background: none;
  border: none;
  color: rgba(230,227,224,0.5);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.fantasium-modal-close:hover { color: var(--f-text); }

/* ── Form fields ── */
.fantasium-form-group {
  margin-bottom: 20px;
}
.fantasium-form-group label {
  display: block;
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(230,227,224,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.fantasium-form-group input[type="text"],
.fantasium-form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(238,189,43,0.15);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--f-font-body);
  font-size: 14px;
  color: var(--f-text);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.fantasium-form-group input[type="text"]:focus,
.fantasium-form-group textarea:focus {
  border-color: rgba(238,189,43,0.5);
}
.fantasium-form-group textarea { resize: vertical; }

/* ── Star input ── */
.fantasium-star-input {
  display: flex;
  gap: 4px;
}
.fantasium-star-btn {
  font-size: 28px;
  color: rgba(230,227,224,0.2);
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
}
.fantasium-star-btn.hover,
.fantasium-star-btn.selected {
  color: var(--f-gold-bright);
}

/* ── Form feedback ── */
.fantasium-form-errors {
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.3);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--f-font-body);
  font-size: 13px;
  color: #f1aeb5;
  margin-bottom: 16px;
}
.fantasium-form-success {
  background: rgba(25,135,84,0.15);
  border: 1px solid rgba(25,135,84,0.3);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--f-font-body);
  font-size: 13px;
  color: #a3cfbb;
  margin-bottom: 16px;
}
.fantasium-btn-submit-review {
  font-family: var(--f-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--f-gold-bright) 0%, var(--f-gold-hover) 100%);
  border: none;
  border-radius: 4px;
  padding: 14px 32px;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(238,189,43,0.3);
}
.fantasium-btn-submit-review:hover {
  box-shadow: 0 0 25px rgba(238,189,43,0.5);
  transform: translateY(-1px);
}

/* ── Mobile responsive ── */
@media (max-width: 767px) {
  .fantasium-reviews-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .fantasium-btn-write-review { width: 100%; text-align: center; }
  .fantasium-review-modal {
    padding: 24px 20px;
    width: 95%;
  }
}

/* --------------------------------------------------------------------------
   TABS + SIDEBAR LAYOUT — 2-column below hero
   -------------------------------------------------------------------------- */
.fantasium-tabs-section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--f-border);
}

.fantasium-tabs-row {
  align-items: flex-start;
}

/* Tabs column (left 8/12) */
.fantasium-tabs-col {
  /* no extra styles needed — Bootstrap col handles width */
}

/* Sidebar column (right 4/12) */
.fantasium-sidebar-col {
  /* slight top padding to align with tab content */
  padding-top: 52px; /* approx height of nav-tabs */
}

@media (max-width: 991px) {
  .fantasium-sidebar-col {
    padding-top: 0;
    margin-top: 2rem;
  }
}

/* ── Extra content tab panes (Ukázky, etc.) ── */
.fantasium-extra-tab-pane {
  padding: 8px 0;
  color: var(--f-text-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   REVIEWS TAB PANE — styled like production
   -------------------------------------------------------------------------- */
.fantasium-reviews-tab {
  padding: 4px 0 24px;
}

.fantasium-reviews-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--f-border);
}

.fantasium-reviews-tab-title {
  font-family: var(--f-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Rename aliases (new template uses .fantasium-review-author and .fantasium-review-title) */
.fantasium-review-author {
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(230, 227, 224, 0.5);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fantasium-review-title {
  font-family: var(--f-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0 0 8px;
}

/* Pagination wrapper */
.fantasium-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Form label + required marker */
.fantasium-form-label {
  display: block;
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(230, 227, 224, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.fantasium-required {
  color: var(--f-red);
  margin-left: 2px;
}

.fantasium-form-input,
.fantasium-form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(238, 189, 43, 0.15);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--f-font-body);
  font-size: 14px;
  color: var(--f-text);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.fantasium-form-input:focus,
.fantasium-form-textarea:focus {
  border-color: rgba(238, 189, 43, 0.5);
  box-shadow: 0 0 6px rgba(238, 189, 43, 0.15);
}

.fantasium-form-textarea {
  resize: vertical;
}

.fantasium-review-modal-title {
  font-family: var(--f-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
}

/* --------------------------------------------------------------------------
   POSLEDNÍ RECENZE SIDEBAR
   -------------------------------------------------------------------------- */
.fantasium-reviews-sidebar {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 24px;
  position: sticky;
  top: 80px; /* stay visible while scrolling */
}

.fantasium-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--f-border);
}

.fantasium-sidebar-title {
  font-family: var(--f-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fantasium-btn-add-review {
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f-gold);
  background: transparent;
  border: 1px solid var(--f-border-strong);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--f-transition);
  align-self: flex-start;
}

.fantasium-btn-add-review:hover {
  background: var(--f-gold-subtle);
  border-color: var(--f-gold);
}

/* Individual sidebar review */
.fantasium-sidebar-review {
  padding: 16px 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
}

.fantasium-sidebar-review:last-child {
  border-bottom: none;
}

.fantasium-sidebar-review-stars {
  margin-bottom: 6px;
}

.fantasium-sidebar-review-stars .fantasium-star {
  font-size: 13px;
}

.fantasium-sidebar-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.fantasium-sidebar-author {
  font-family: var(--f-font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(230, 227, 224, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fantasium-sidebar-date {
  font-family: var(--f-font-body);
  font-size: 11px;
  color: var(--f-text-dim);
  flex-shrink: 0;
}

.fantasium-sidebar-review-title {
  font-family: var(--f-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--f-text);
  margin: 0 0 5px;
}

.fantasium-sidebar-review-text {
  font-family: var(--f-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(230, 227, 224, 0.6);
  margin: 0;
}

.fantasium-sidebar-empty {
  font-family: var(--f-font-body);
  font-size: 14px;
  color: var(--f-text-dim);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

#fantasium-sidebar-more {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--f-border);
  text-align: center;
}

.fantasium-sidebar-more-link {
  font-family: var(--f-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--f-gold);
  text-decoration: none;
  transition: color var(--f-transition);
}

.fantasium-sidebar-more-link:hover {
  color: var(--f-gold-hover);
  text-decoration: none;
}

/* ── Mobile: sidebar stacks below tabs ── */
@media (max-width: 991px) {
  .fantasium-reviews-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .fantasium-sidebar-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .fantasium-reviews-tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .fantasium-btn-write-review {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Homepage CE — About section logo size
   The CE image widget renders with width:100% which makes the logo fill the
   full column (~556px). Constrain it to header-logo scale.
   Widget data-id: 63e98282
   -------------------------------------------------------------------------- */
.elementor-element-63e98282 img {
  width: auto !important;
  max-height: 44px !important;
  max-width: 180px !important;
}

/* --------------------------------------------------------------------------
   Homepage CE — Newsletter section
   -------------------------------------------------------------------------- */

/* Gap between email input and Odebírat button */
.elementor-field-group.elementor-field-type-subscribe {
  gap: 10px !important;
}

/* Subtitle "Přihlaš se k odběru..." — muted secondary colour */
/* Widget data-id: 50d4eea5 */
.elementor-element-50d4eea5 p {
  color: rgba(230, 227, 224, 0.55) !important;
}

/* ==========================================================================
   b4n_three_step_order — Fantasium Dark-Theme Checkout Styles
   Scope: #module-b4n_three_step_order-checkout (body ID added by PS module)
   ========================================================================== */

/* ---------- 1. Override TSO CSS custom properties ------------------------- */
/* The module uses --tso-color-* vars; we remap them to Fantasium palette.   */
#module-b4n_three_step_order-checkout {
  --tso-color-black:       var(--f-text);                   /* text */
  --tso-color-white:       #0a090c;                         /* text ON gold */
  --tso-color-gray-light:  rgba(212, 175, 55, 0.14);        /* borders */
  --tso-color-gray-darker: rgba(230, 227, 224, 0.45);       /* muted text */
  --tso-color-main:        var(--f-gold);                   /* active step */
  --tso-color-main-second: var(--f-gold);                   /* CTA buttons */
}

/* ---------- 2. Step-progress bar ----------------------------------------- */
.tso-order-step__progress {
  background: rgba(212, 175, 55, 0.18) !important;
}

/* Default (inactive) step */
#tso-order-step .step span {
  color: var(--f-text-muted) !important;
}

#tso-order-step .step span em {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--f-text-muted) !important;
  border: 2px solid rgba(212, 175, 55, 0.2) !important;
}

/* Active step */
#tso-order-step .step.active span {
  color: var(--f-text) !important;
}

#tso-order-step .step.active span em {
  background: linear-gradient(135deg, #e8c84a, #d4af37) !important;
  color: #0a090c !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(238, 189, 43, 0.45), 0 0 40px rgba(238, 189, 43, 0.15) !important;
}

/* Completed step — gold outline */
#tso-order-step .step.completed span {
  color: var(--f-gold) !important;
}

#tso-order-step .step.completed span em {
  background: transparent !important;
  color: var(--f-gold) !important;
  border-color: var(--f-gold) !important;
}

/* Clickable completed step link */
#tso-order-step a span,
#tso-order-step a span em {
  text-decoration: none !important;
}

/* ---------- 3. Section headings (tso-title) -------------------------------- */
h3.tso-title,
h4.tso-title {
  background: transparent !important;
  color: var(--f-text) !important;
  font-family: var(--f-font-heading) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--f-border) !important;
  margin-bottom: 1.25rem !important;
}

/* ---------- 4. Left / right column border --------------------------------- */
/* Step 1 only — full-width stacked columns, no gutter padding */
#tso-order-step.current-step-1 ~ .container #checkout-left,
#tso-order-step.current-step-1 ~ .container #checkout-right {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#tso-order-step.current-step-1 ~ .container #checkout-left {
  border-right: none !important;
}

#checkout-left {
  border-right-color: var(--f-border) !important;
}

/* ---------- 5. Cart product lines (step 0 — left column) ------------------ */
#checkout-left .cart-overview .product-line-grid {
  border-bottom-color: var(--f-border) !important;
}

#checkout-left .product-line-grid-body .product-line-info a.label,
#checkout-left .product-line-grid-body .product-line-info a {
  color: var(--f-text) !important;
}

/* Combination attribute lines in cart step 1 (e.g. "Edice: Standardní vydání")
   Bootstrap's .label class adds badge background → strip it.
   Label = gold, value = muted so it doesn't compete with the price. */
#checkout-left .product-line-grid-body .product-line-info span.label,
.cart-items .product-line-info span.label {
  color: var(--f-gold) !important;
  background: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
}
#checkout-left .product-line-grid-body .product-line-info span.value,
.cart-items .product-line-info span.value {
  color: var(--f-text-muted) !important;
  background: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
}

/* Right sidebar "Shrnutí objednávky" — label gold, value on its own line
   with padding-right so it doesn't run into the price column */
#checkout-right .cart-summary-products .product-line-info span.label {
  color: var(--f-gold) !important;
  background: none !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  display: inline !important;
}
#checkout-right .cart-summary-products .product-line-info span.value {
  color: var(--f-text-muted) !important;
  background: none !important;
  padding: 0 !important;
  padding-right: 55px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
}

#checkout-left .product-price,
#checkout-left .product-line-grid-right .product-price {
  color: var(--f-gold) !important;
  font-weight: 700 !important;
}

#checkout-left .js-tso-cart-detailed-totals-bottom {
  border-top: 1px solid var(--f-border) !important;
  margin-top: 0.5rem !important;
  padding-top: 0.75rem !important;
}

#checkout-left .js-tso-cart-detailed-totals-bottom .label {
  color: var(--f-text-muted) !important;
}

#checkout-left .js-tso-cart-detailed-totals-bottom .value {
  color: var(--f-text) !important;
}

/* Qty controls — checkout cart quantity spinner.
   Styled to match the quickview spinner exactly: same overflow:hidden wrapper
   technique, same dark surface buttons, same icon colour. */

/* Wrapper: inline-flex, border + rounded corners, overflow:hidden clips buttons cleanly */
#checkout-left .bootstrap-touchspin {
  display: inline-flex !important;
  width: auto !important;
  align-items: stretch !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  overflow: hidden !important;
}

/* Hide the empty prefix/postfix spans touchspin injects */
#checkout-left .bootstrap-touchspin-prefix,
#checkout-left .bootstrap-touchspin-postfix {
  display: none !important;
}

/* The quantity input — selector includes .form-control to reach (1,2,0) specificity,
   beating #module-b4n_three_step_order-checkout .form-control (1,1,0) at line ~3769
   which otherwise re-applies border-radius after us. */
#checkout-left .js-tso-cart-line-product-quantity,
#checkout-left .js-tso-cart-line-product-quantity.form-control {
  background: var(--f-bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--f-text) !important;
  text-align: center !important;
  width: 52px !important;
  max-width: 52px !important;
  padding: 0.3rem 0.25rem !important;
  -moz-appearance: textfield !important;
}
#checkout-left .js-tso-cart-line-product-quantity::-webkit-outer-spin-button,
#checkout-left .js-tso-cart-line-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Button column — stacked vertically, bordered on left to separate from input */
#checkout-left .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
  width: 28px !important;
  min-width: 28px !important;
  align-self: stretch !important;
  border-left: 1px solid var(--f-border) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Individual up/down buttons — dark surface bg, light icons (matches quickview).
   height: 50% + min-height: 0 ensures they fill the column evenly even if
   Bootstrap's btn min-height would otherwise push them apart. */
#checkout-left .bootstrap-touchspin .input-group-btn-vertical .btn-touchspin,
#checkout-left .bootstrap-touchspin .input-group-btn-vertical .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  height: 50% !important;
  min-height: 0 !important;
  background: var(--f-bg-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--f-text) !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
/* Hairline separator between up and down buttons */
#checkout-left .bootstrap-touchspin .bootstrap-touchspin-up {
  border-bottom: 1px solid var(--f-border) !important;
}

/* Icon size — matches quickview chevron size */
#checkout-left .bootstrap-touchspin .input-group-btn-vertical .material-icons {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Hover — subtle surface highlight */
#checkout-left .bootstrap-touchspin .input-group-btn-vertical .btn-touchspin:hover,
#checkout-left .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
  background: var(--f-bg-card) !important;
  color: var(--f-gold) !important;
}

/* Delete icon */
#checkout-left .remove-from-cart .material-icons,
#checkout-left .cart-line-product-actions a {
  color: var(--f-text-muted) !important;
}

#checkout-left .remove-from-cart:hover .material-icons,
#checkout-left .cart-line-product-actions a:hover {
  color: var(--f-red) !important;
}

/* ---------- 6. Right sidebar — order summary card ------------------------- */
#checkout-right .js-tso-checkout-summary {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 1rem !important;
  margin-bottom: 1.25rem !important;
}

#checkout-right .cart-summary-products .media {
  border-bottom-color: var(--f-border) !important;
}

#checkout-right .cart-summary-products .media .media-body .product-name,
#checkout-right .cart-summary-products .media .media-body .product-name a {
  color: var(--f-text) !important;
}

#checkout-right .cart-summary-products .media .media-body .product-price {
  color: var(--f-gold) !important;
  font-weight: 700 !important;
}

/* Delivery / payment info rows */
#cart-right-delivery-payment,
#checkout-right .tso-cart-summary-subtotals-container {
  border-bottom-color: var(--f-border) !important;
}

/* Subtotals container — b4n sets display:flex but no direction, so the two
   "Produkty celkem" and "Doručení" lines end up side by side. Force column. */
#checkout-right .tso-cart-summary-subtotals-container {
  display: flex !important;
  flex-direction: column !important;
}

#cart-right-delivery-payment .delivery_line,
#cart-right-delivery-payment .payment_line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0.3rem 0 !important;
}

#cart-right-delivery-payment .text-left {
  color: var(--f-text-muted) !important;
  font-size: 0.85rem !important;
}

#cart-right-delivery-payment .text-right {
  color: var(--f-text) !important;
  font-size: 0.85rem !important;
}

/* Total row — gold */
.tso-cart-summary-totals .cart-total .label,
.tso-cart-summary-totals .cart-total .value {
  color: var(--f-gold) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

/* ---------- 7. Navigation buttons (Back / Continue / Place order) ---------- */

/* Step 1 only — wrapper row flex, button(s) right-aligned, no padding */
#tso-order-step.current-step-1 ~ .container #checkout-right .cart_navigation {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Buttons: auto width (fit content), reset any module flex-basis fighting */
#tso-order-step.current-step-1 ~ .container #checkout-right .cart_navigation a,
#tso-order-step.current-step-1 ~ .container #checkout-right .cart_navigation.one-button a:first-child {
  width: auto !important;
  flex: 0 0 auto !important;
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: inline-block !important;
  padding: 14px 24px !important;
}

/* Step 1 — hide promo code block */
#tso-order-step.current-step-1 ~ .container #promo-code {
  display: none !important;
}

/* Step 3 — always: buttons stack full-width, one under the other */
#tso-order-step.current-step-3 ~ .container #checkout-right .cart_navigation {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 10px !important;
}
#tso-order-step.current-step-3 ~ .container #checkout-right .cart_navigation a {
  width: 100% !important;
  flex: 0 0 100% !important;
  text-align: center !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Step 2 — at ≤1199px: buttons stack full-width, one under the other */
@media (max-width: 1199px) {
  #tso-order-step.current-step-2 ~ .container #checkout-right .cart_navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 10px !important;
  }
  #tso-order-step.current-step-2 ~ .container #checkout-right .cart_navigation a {
    width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

#checkout-right .cart_navigation a {
  border-radius: var(--f-radius-sm) !important;
  font-family: var(--f-font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Primary CTA (Continue / Place order) */
#checkout-right .cart_navigation a.btn-next,
#checkout-right .cart_navigation.one-button a:first-child,
#order_confirmation_button {
  background: linear-gradient(135deg, #e8c84a, #d4af37) !important;
  color: #0a090c !important;
  box-shadow: 0 0 24px rgba(238, 189, 43, 0.3), 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}

#checkout-right .cart_navigation a.btn-next:hover,
#checkout-right .cart_navigation.one-button a:first-child:hover,
#order_confirmation_button:hover {
  box-shadow: 0 0 36px rgba(238, 189, 43, 0.5), 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #0a090c !important;
  text-decoration: none !important;
}

/* Back button */
#checkout-right .cart_navigation a.btn-back {
  background: transparent !important;
  color: var(--f-text-muted) !important;
  border: 1px solid var(--f-border) !important;
  box-shadow: none !important;
}

#checkout-right .cart_navigation a.btn-back:hover {
  color: var(--f-text) !important;
  border-color: var(--f-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* ---------- 8. Carrier list (step 1) -------------------------------------- */
#checkout-left #carriers-content #carriers-list .carrier-item {
  border-bottom-color: var(--f-border) !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item label {
  padding: 0.5rem 0 !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item label .item-name {
  color: var(--f-text) !important;
  font-weight: 600 !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item label .item-name .item-description {
  color: var(--f-text-muted) !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item label .item-price {
  color: var(--f-text) !important;
  font-weight: 600 !important;
}

/* Radio buttons gold accent */
#checkout-left #carriers-content #carriers-list .carrier-item input[type="radio"],
#checkout-left #payments-content #payments-list .payment-item input[type="radio"] {
  accent-color: var(--f-gold) !important;
}

/* ---------- 9. Payment list (step 1) -------------------------------------- */
#checkout-left #payments-content #payments-list .payment-item {
  border-bottom-color: var(--f-border) !important;
}

#checkout-left #payments-content #payments-list .payment-item label .item-name {
  color: var(--f-text) !important;
}

/* ---------- 10. Address / contact form inputs (step 2) --------------------
   Use .form-control in selectors so we beat the module's own
   `.form-control { background:#fff }` rule (ID+class > ID+element). Also
   cover inputs that don't have an explicit type attribute (PS sometimes omits
   it). Exclude qty spinners which intentionally stay white (scoped to
   #checkout-left .input-group above).
   -------------------------------------------------------------------------- */
#module-b4n_three_step_order-checkout .form-control,
#module-b4n_three_step_order-checkout input[type="text"],
#module-b4n_three_step_order-checkout input[type="email"],
#module-b4n_three_step_order-checkout input[type="tel"],
#module-b4n_three_step_order-checkout input[type="password"],
#module-b4n_three_step_order-checkout input[type="search"],
#module-b4n_three_step_order-checkout select {
  background-color: #0a090c !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  color: var(--f-text) !important;
  border-radius: var(--f-radius-sm) !important;
}


#module-b4n_three_step_order-checkout .form-control::placeholder,
#module-b4n_three_step_order-checkout input[type="text"]::placeholder,
#module-b4n_three_step_order-checkout input[type="email"]::placeholder,
#module-b4n_three_step_order-checkout input[type="tel"]::placeholder,
#module-b4n_three_step_order-checkout input[type="search"]::placeholder {
  color: rgba(230, 227, 224, 0.35) !important;
}

#module-b4n_three_step_order-checkout .form-control:focus,
#module-b4n_three_step_order-checkout input[type="text"]:focus,
#module-b4n_three_step_order-checkout input[type="email"]:focus,
#module-b4n_three_step_order-checkout input[type="tel"]:focus,
#module-b4n_three_step_order-checkout input[type="password"]:focus,
#module-b4n_three_step_order-checkout input[type="search"]:focus,
#module-b4n_three_step_order-checkout select:focus {
  border-color: var(--f-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
  background-color: rgba(212, 175, 55, 0.04) !important;
}

/* Bootstrap validation states add a background-image icon but not bg-color —
   still reset border so red/green don't fight gold */
#module-b4n_three_step_order-checkout .form-control.is-valid,
#module-b4n_three_step_order-checkout .form-control.is-invalid {
  background-color: #0a090c !important;
  border-color: rgba(212, 175, 55, 0.22) !important;
}

/* Browser autofill — Chrome forces a yellow/white background via internal
   UA styles that ignore normal CSS. The box-shadow trick is the only escape. */
#module-b4n_three_step_order-checkout input:-webkit-autofill,
#module-b4n_three_step_order-checkout input:-webkit-autofill:hover,
#module-b4n_three_step_order-checkout input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0a090c inset !important;
  -webkit-text-fill-color: var(--f-text) !important;
  caret-color: var(--f-text) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

#module-b4n_three_step_order-checkout select option {
  background: #1a1812 !important;
  color: var(--f-text) !important;
}

#module-b4n_three_step_order-checkout label {
  color: var(--f-text-muted) !important;
  font-size: 0.85rem !important;
}

#module-b4n_three_step_order-checkout .form-group .help-block,
#module-b4n_three_step_order-checkout .form-text {
  color: var(--f-text-dim) !important;
}

/* Checkboxes — ensure form-groups never collapse to 0 width inside flex parents.
   Production b4n CSS sets display:flex on some .form-group divs; without an
   explicit width/flex-basis they shrink to 0. */
#module-b4n_three_step_order-checkout .form-group {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Checkboxes */
#module-b4n_three_step_order-checkout input[type="checkbox"] {
  border-color: rgba(212, 175, 55, 0.4) !important;
  background-color: transparent !important;
}

#module-b4n_three_step_order-checkout input[type="checkbox"]:checked {
  background-color: var(--f-gold) !important;
  border-color: var(--f-gold) !important;
}

#module-b4n_three_step_order-checkout input[type="checkbox"]::before {
  background-color: #0a090c !important;
}

/* ---------- 11. TOS / conditions block (step 2) --------------------------- */
#cgv-form-group.conditions-form,
#checkout-right .conditions-form {
  background: rgba(212, 175, 55, 0.05) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 1rem !important;
  margin-top: 1rem !important;
  /* keep checkbox + label anchored to the left */
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  text-align: left !important;
}

/* Checkbox — don't stretch, align with the cap-height of the first text line */
#cgv-form-group.conditions-form input[type="checkbox"],
#checkout-right .conditions-form input[type="checkbox"] {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  margin-top: 0.18rem !important;
}

#checkout-right .conditions-form label,
#cgv-form-group label {
  color: var(--f-text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#checkout-right .conditions-form a,
#cgv-form-group a {
  color: var(--f-gold) !important;
}

/* Terms & conditions modal (opened from GDPR checkbox link) */
.js-tso-checkout-modal .modal-content {
  padding: 20px;
}

/* ---------- 12. Login button (step 2 — unauthenticated) ------------------- */
#user-login-form-wrapper {
  margin-bottom: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--f-border) !important;
}

#user-login-form-button {
  background: transparent !important;
  border: 1px solid var(--f-border-strong) !important;
  color: var(--f-gold) !important;
  border-radius: var(--f-radius-sm) !important;
  font-size: 0.8rem !important;
  font-family: var(--f-font-heading) !important;
  letter-spacing: 0.5px !important;
}

#user-login-form-button:hover {
  border-color: var(--f-gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  color: var(--f-gold) !important;
  text-decoration: none !important;
}

/* ---------- 13. Loader spinner -------------------------------------------- */
#checkout-left .loader.off,
#checkout-left .loader,
#checkout-right .loader {
  display: none !important;
}

/* ---------- 14. Alerts / error messages ----------------------------------- */
#module-b4n_three_step_order-checkout .alert-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  border-radius: var(--f-radius-sm) !important;
}

#module-b4n_three_step_order-checkout .alert-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
  border-radius: var(--f-radius-sm) !important;
}

/* ==========================================================================
   b4n_three_step_order — Refinements (round 2)
   ========================================================================== */

/* 1. Step indicator — moderate margin: enough breathing room, not too low --*/
#tso-order-step {
  margin-top: 32px !important;
  margin-bottom: 44px !important;
}

/* 2. Duplicate trash bin — hide the --mobile variant everywhere; only the  */
/* --desktop one inside .cart-line-product-actions should show.              */
#checkout-left .remove-from-cart--mobile {
  display: none !important;
}

/* 3. Voucher block — collapse empty space when no active voucher -----------*/
/* Keep the "Máte slevový kód?" link but tighten the padding so there's no  */
/* large blank gap above the CTA button in the cart step.                   */
#checkout-right .card.cart-summary {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

#checkout-right .block-promo.js-tso-cart-voucher {
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-sm) !important;
  padding: 0.6rem 0.9rem !important;
  margin-bottom: 1rem !important;
}

#checkout-right .block-promo .promo-code > p {
  margin: 0 !important;
  font-size: 0.8rem !important;
}

#checkout-right .block-promo .promo-code > p a {
  color: var(--f-text-muted) !important;
  font-style: italic !important;
}

#checkout-right .block-promo .promo-code > p a:hover {
  color: var(--f-gold) !important;
}

/* Hidden form (expands on click) — already dark-themed by input rules */
#checkout-right .block-promo .js_cart-voucher-form {
  margin-top: 0.75rem !important;
}

/* 4. Custom gold radio buttons (step 1 — carriers & payments) -------------*/
#checkout-left #carriers-content #carriers-list .carrier-item input[type="radio"],
#checkout-left #payments-content #payments-list .payment-item input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 0.2s ease !important;
  display: grid !important;
  place-content: center !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item input[type="radio"]::before,
#checkout-left #payments-content #payments-list .payment-item input[type="radio"]::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--f-gold) !important;
  transform: scale(0) !important;
  transition: transform 0.18s ease !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item input[type="radio"]:checked,
#checkout-left #payments-content #payments-list .payment-item input[type="radio"]:checked {
  border-color: var(--f-gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

#checkout-left #carriers-content #carriers-list .carrier-item input[type="radio"]:checked::before,
#checkout-left #payments-content #payments-list .payment-item input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

/* 4b. Carrier list layout — fix module's margin:auto on .delivery-option   */
@media (max-width: 991px) {
  #carriers-list .delivery-option {
    margin: 0 !important;
  }
}
/* Padding-right on the list only in the tablet range */
@media (min-width: 768px) and (max-width: 991px) {
  #carriers-list {
    padding-right: 12px;
  }
}

/* 5. Sidebar subtotals — label left, value right -------------------------*/
#checkout-right .cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 0.25rem 0 !important;
  gap: 1rem !important;
  text-align: left !important;
}

/* Bootstrap clearfix ::after becomes a 3rd flex item and pushes value to
   the middle — hide it so space-between only sees label + value          */
#checkout-right .cart-summary-line::after {
  content: none !important;
  display: none !important;
}

#checkout-right .cart-summary-line .label {
  color: var(--f-text-muted) !important;
  font-size: 0.82rem !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

#checkout-right .cart-summary-line .value {
  color: var(--f-text) !important;
  font-size: 0.82rem !important;
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 6. Address details wrapper — display:flow-root creates a block formatting
   context so floated children (country select) are fully contained and the
   parent's height includes them. Prevents overflow into checkout-right.     */
#address-details {
  display: flow-root;
}

/* Country select — half-width wrapper (mirrors text-input :has pattern) --*/
#address-details div.form-group:has(select#id_country),
#address-details div.form-group:has(select[name="id_country"]),
#address-details div.form-group:has(select[name="id_country_delivery"]) {
  width: calc(50% - 1rem) !important;
  float: left !important;
  margin-right: 1rem !important;
}

/* Gold chevron arrow on the select itself (appearance only, no size override) */
#module-b4n_three_step_order-checkout select#id_country,
#module-b4n_three_step_order-checkout select[name="id_country"],
#module-b4n_three_step_order-checkout select[name="id_country_delivery"] {
  width: 100% !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  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 fill='%23d4af37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

/* --------------------------------------------------------------------------
   EDITION CARDS — hide native PS variant selector + add-to-cart form
   whenever the CE edition cards widget is present on the page.
   Uses :has() exactly like PS itself uses body.has-discount / body.has-combinations.
   display:none on the parent still allows JS element.click() to fire normally.
   -------------------------------------------------------------------------- */
body:has(#fantasium-edition-cards) .js-product-variants,
body:has(#fantasium-edition-cards) .product-variants {
  display: none !important;
}

body:has(#fantasium-edition-cards) .product-add-to-cart {
  display: none !important;
}

/* --------------------------------------------------------------------------
   EDITION CARDS — Product combination visual selector (.fee-* prefix)
   CE HTML widget injects these; JS moves them before .product-prices
   -------------------------------------------------------------------------- */
.fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 8px;
}

@media (max-width: 575px) {
  .fee-grid { grid-template-columns: 1fr; gap: 48px; }
}

.fee-card {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 20px;
  cursor: pointer;
  transition: border-color var(--f-transition), box-shadow var(--f-transition);
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  row-gap: 0;
}

/* All children span full width by default; icon + title share the first row */
.fee-card > * { grid-column: 1 / -1; }

.fee-card:hover {
  border-color: var(--f-border-strong);
}

.fee-card.fee-selected {
  border-color: var(--f-gold);
  box-shadow: 0 0 0 1px var(--f-gold), 0 0 24px rgba(212, 175, 55, 0.18);
}

/* "LIMITOVANÁ EDICE" pill above VIP card */
.fee-badge-top {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--f-gold);
  color: #0a090c;
  font-family: var(--f-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Icon — first column, first row */
.fee-card-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--f-gold);
  margin-bottom: 0;
  opacity: 0.75;
  line-height: 0;
}
.fee-vip-icon { opacity: 1; }

/* Title — second column, first row (sits next to icon) */
.fee-card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--f-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--f-text);
  margin: 0;
}

/* Price row */
.fee-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.fee-price-original {
  font-size: 13px;
  color: var(--f-text-dim);
  text-decoration: line-through;
}
.fee-price-current {
  font-family: var(--f-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--f-text);
}

/* Discount badge — justify-self keeps it pill-sized in grid, not full card width */
.fee-card-discount {
  display: inline-block;
  align-self: start;
  justify-self: start;
  background: var(--f-red);
  color: #fff;
  font-family: var(--f-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 12px;
}

/* Feature list */
.fee-features {
  list-style: none;
  padding: 0;
  margin: 10px 0 40px;
  flex: 1;
}
.fee-features li {
  color: var(--f-text-muted);
  font-size: 13px;
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.fee-features li::before {
  content: "✓";
  color: var(--f-gold);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Shipping / preorder note between features and button */
.fee-shipping-note {
  position: absolute;
  bottom: 75px;
  left: 20px;
  right: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--f-text, #e6e3e0);
}

/* Buy button */
.fee-btn {
  width: 100%;
  background: linear-gradient(135deg, #e8c84a, var(--f-gold));
  border: none;
  color: #0a090c;
  font-family: var(--f-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--f-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  align-self: end;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.fee-btn:hover {
  background: linear-gradient(135deg, #f0d45a, #e8c84a);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}
.fee-btn:disabled,
.fee-btn.fee-loading {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* --------------------------------------------------------------------------
   GOODREADS BLOCK (.f-goodreads-*)
   Used in product footer CE widgets (wolf-king-footer.json, heir-of-illusion-footer.json).
   Only texts differ per product — all styling lives here.
   -------------------------------------------------------------------------- */
.f-goodreads-block {
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 24px 28px;
  background: rgba(212, 175, 55, 0.04);
}
.f-goodreads-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.f-goodreads-stars {
  color: #eebd2b;
  font-size: 20px;
  letter-spacing: 2px;
}
.f-goodreads-label {
  font-family: var(--f-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--f-text);
}
.f-goodreads-text {
  font-family: var(--f-font-body);
  font-size: 14px;
  color: rgba(230, 227, 224, 0.6);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}

/* ≤640px: stars go full-width → label wraps to its own line */
@media (max-width: 640px) {
  .f-goodreads-stars {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   MAILALERT / NOTIFY-ME BLOCK (ps_emailalerts)
   Shown on out-of-stock products in place of the add-to-cart flow.
   -------------------------------------------------------------------------- */

/* Hide the PS price (0 Kč) when mailalert block is present — product is unavailable */
body:has(.js-mailalert) .product-prices,
body:has(.js-mailalert) .tax-shipping-info {
  display: none !important;
}

.fantasium-mailalert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  text-align: left;
  width: 100%;
}

.fantasium-mailalert-label {
  font-family: var(--f-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f-text-muted);
  margin: 0;
}

.fantasium-mailalert input.form-control {
  width: 100%;
  background: var(--f-bg-input, #1a1a1a);
  border: 1px solid var(--f-border-strong);
  color: var(--f-text);
  border-radius: var(--f-radius);
  padding: 14px 16px;
  font-size: 15px;
  margin: 0;
}
.fantasium-mailalert input.form-control:focus {
  border-color: var(--f-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
.fantasium-mailalert input.form-control::placeholder {
  color: var(--f-text-dim);
}

.fantasium-mailalert .js-mailalert-add {
  width: 100% !important;
  background: var(--f-gold) !important;
  color: #000 !important;
  font-family: var(--f-font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  border-radius: var(--f-radius) !important;
  padding: 16px !important;
  margin: 0 !important;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.3), 0 0 60px rgba(212, 175, 55, 0.1);
  transition: background var(--f-transition), box-shadow var(--f-transition);
}
.fantasium-mailalert .js-mailalert-add:hover {
  background: var(--f-gold-hover) !important;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.2);
}

.fantasium-mailalert-gdpr {
  font-size: 11px;
  color: var(--f-text-dim);
  text-align: center;
  margin: 0;
}

.fantasium-mailalert .js-mailalert-alerts .alert {
  margin-top: 0;
  border-radius: var(--f-radius);
}

/* --------------------------------------------------------------------------
   CROSS-SELL BANNER — shown above tabs, hardcoded per product ID
   -------------------------------------------------------------------------- */
.fantasium-crosssell-heading {
  max-width: 860px;
  margin: 48px auto 16px;
  padding: 0 16px;
  font-family: var(--f-font-heading), 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--f-gold);
  font-weight: 400;
}

.fantasium-crosssell {
  max-width: 860px;
  margin: 0 auto 48px;
  padding: 0 16px;
}
.fantasium-crosssell-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 24px 32px;
  transition: border-color var(--f-transition);
}
.fantasium-crosssell-inner:hover {
  border-color: var(--f-border-strong);
}
.fantasium-crosssell-cover-link {
  flex-shrink: 0;
}
.fantasium-crosssell-img {
  width: 90px;
  height: auto;
  border-radius: 4px;
  display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.fantasium-crosssell-content {
  flex: 1;
  min-width: 0;
}
.fantasium-crosssell-author {
  font-family: var(--f-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--f-gold);
  margin: 0 0 4px;
}
.fantasium-crosssell-title {
  font-family: var(--f-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--f-text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.fantasium-crosssell-tagline {
  font-style: italic;
  color: var(--f-text-muted);
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.fantasium-crosssell-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.fantasium-crosssell-badge {
  display: inline-block;
  font-family: var(--f-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.fantasium-crosssell-badge--stock {
  background: rgba(34, 139, 34, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.fantasium-crosssell-badge--coming {
  background: rgba(212, 175, 55, 0.1);
  color: var(--f-gold);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.fantasium-crosssell-price-old {
  font-size: 13px;
  color: var(--f-text-dim);
  text-decoration: line-through;
}
.fantasium-crosssell-price {
  font-family: var(--f-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--f-text);
}
.fantasium-crosssell-discount {
  background: var(--f-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 3px;
}
.fantasium-crosssell-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fantasium-crosssell-btn {
  display: inline-block;
  font-family: var(--f-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: var(--f-radius);
  transition: all var(--f-transition);
}
.fantasium-crosssell-btn--primary {
  background: linear-gradient(135deg, #e8c84a, var(--f-gold));
  color: #000;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.fantasium-crosssell-btn--primary:hover {
  background: linear-gradient(135deg, #f0d45a, #e8c84a);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  color: #000;
  transform: translateY(-1px);
}
.fantasium-crosssell-btn--secondary {
  background: transparent;
  color: var(--f-text-muted);
  border: 1px solid var(--f-border);
}
.fantasium-crosssell-btn--secondary:hover {
  border-color: var(--f-gold);
  color: var(--f-gold);
}
@media (max-width: 576px) {
  .fantasium-crosssell-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .fantasium-crosssell-img { width: 70px; }
}

/* --------------------------------------------------------------------------
   CMS pages with CE content — break out of Bootstrap container
   The .elementor div is inside .container > .col-xs-12 > #content which
   constrains it. We use the classic 100vw breakout: position the element
   relative to the viewport instead of the container. overflow-x: clip on
   #wrapper prevents a horizontal scrollbar without creating a scroll ctx.
   CE's content_width (1200px) handles inner column centering.
   -------------------------------------------------------------------------- */
body.page-cms.elementor-page #wrapper {
  overflow-x: clip;
}
body.page-cms.elementor-page #content.page-content {
  padding: 0 !important;
  overflow: visible !important;
}
body.page-cms.elementor-page .elementor {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   CMS — Kontakt page (CE layout, left-side info widget)
   -------------------------------------------------------------------------- */

/* Contact info blocks inside the text-editor widget */
.f-contact-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.f-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.f-contact-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 9px;
  color: var(--f-gold);
  margin-top: 1px;
}

.f-contact-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #9a9490;
  margin: 0 0 4px;
}

.f-contact-value {
  font-size: 15px;
  color: #e6e3e0;
  font-weight: 500;
  margin: 0 0 2px;
  display: block;
}

a.f-contact-link {
  text-decoration: none;
  color: #c9c0b0;
  transition: color 0.2s;
}
a.f-contact-link:hover { color: var(--f-gold); }

.f-contact-note {
  font-size: 12px;
  color: #9a9490;
  margin: 0;
}

.f-contact-address {
  font-size: 13px;
  color: #c9c0b0;
  line-height: 1.75;
  margin: 4px 0 0;
}

.f-contact-divider {
  height: 1px;
  background: rgba(212, 175, 55, 0.12);
  margin: 16px 0;
}

/* Hide the PrestaShop page title on the Kontakt CMS page (CE heading replaces it) */
body.cms-id-8.elementor-page .page-header {
  display: none !important;
}

/* ---- Kontakt page (cms-id-8) — form card wrapper ----
   CE doesn't apply _css_classes to columns, so we scope via body.cms-id-8.
   The form column is elementor-col-55 (right column).
   ----------------------------------------------------------------- */
body.cms-id-8.elementor-page .elementor-col-55 > .elementor-column-wrap > .elementor-widget-wrap,
body.cms-id-8.elementor-page .elementor-col-55 > .elementor-widget-wrap {
  background: #0d0c10;
  border: 1px solid #292929;
  border-radius: 8px;
  padding: 40px 36px !important;
}

/* ---- Labels hidden (set via JSON show_labels:"" but belt-and-suspenders) ---- */
body.cms-id-8.elementor-page .elementor-field-label {
  display: none !important;
}

/* ---- Inputs & textarea ---- */
body.cms-id-8.elementor-page .elementor-field-textual {
  background: #0a090c !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important; /* was #292929 — var(--f-border) is only 0.15 opacity, invisible on #0a090c; 0.35 gives a visible warm gold */
  border-radius: 2px !important;
  color: #e6e3e0 !important;
  font-family: var(--f-font-body) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.cms-id-8.elementor-page .elementor-field-textual:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25) !important;
  outline: none !important;
}

body.cms-id-8.elementor-page .elementor-field-textual::placeholder {
  color: var(--f-text-muted) !important; /* was #7a7470 — too dark on #0a090c */
  opacity: 1 !important; /* override CE's 0.6 opacity that further dims it */
}

body.cms-id-8.elementor-page textarea.elementor-field-textual {
  min-height: 140px !important;
  resize: vertical !important;
}

/* ---- Subject select dropdown ---- */
body.cms-id-8.elementor-page .elementor-select-wrapper {
  position: relative;
}
body.cms-id-8.elementor-page .elementor-select-wrapper::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--f-text-muted); /* dropdown chevron colour */
  pointer-events: none;
}
body.cms-id-8.elementor-page select.elementor-field-textual {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 36px !important;
  cursor: pointer !important;
  color: var(--f-text-muted) !important; /* match input placeholder brightness — was #4a4845 (too dark), then var(--f-text) (too bright) */
}
body.cms-id-8.elementor-page select.elementor-field-textual option {
  background: #131215;
  color: #e6e3e0;
}

/* ---- Field spacing ---- */
body.cms-id-8.elementor-page .elementor-field-group {
  margin-bottom: 0 !important;
}
body.cms-id-8.elementor-page .elementor-field-type-submit {
  margin-top: 4px !important;
}

/* ---- Button tweaks (color+shadow set in JSON, CE generates scoped CSS that wins)
   CSS handles: hover lift, border-radius, font, send icon, transition             ---- */
body.cms-id-8.elementor-page .elementor-button {
  border-radius: 2px !important;
  font-family: var(--f-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 14px 24px !important;
  transition: box-shadow 0.25s, background-color 0.2s, transform 0.15s !important;
}

body.cms-id-8.elementor-page .elementor-button:hover {
  transform: translateY(-1px) !important;
}

/* Paper-plane send icon via CSS mask */
body.cms-id-8.elementor-page .elementor-button .elementor-button-text::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background: #0a0a0a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2020/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   O nás — CE entrance animation overrides
   Speed: ~0.45s, crisp ease-out
   -------------------------------------------------------------------------- */

/* Override Animate.css duration for both columns */
.f-about-col-img.animated,
.f-about-col-text.animated {
  animation-duration: 0.45s !important;
  animation-timing-function: ease-out !important;
}

/* Image column: scale from 0.95 instead of plain fadeIn */
@keyframes f-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.f-about-col-img.animated.fadeIn {
  animation-name: f-scale-in !important;
}

/* Text column: slide in from right (Animate.css fadeInRight goes right→center, perfect) */
@keyframes f-slide-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.f-about-col-text.animated.fadeInRight {
  animation-name: f-slide-right !important;
}

/* --------------------------------------------------------------------------
   Product — Ukázky tab iframe
   -------------------------------------------------------------------------- */
.fantasium-ukazky-wrap {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0a;
}

.fantasium-ukazky-wrap iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: none;
}

/* --------------------------------------------------------------------------
   Checkout — hide carrier & payment logos
   The b4n_three_step_order module renders logos for each carrier (Zásilkovna,
   PPL, Shipmall …) and each payment method. On the dark Fantasium background
   these images look poor (wrong aspect ratios, white halos, light-bg PNGs).
   Client decision: show name + description only, no logos.
   If logos are ever redesigned for dark backgrounds, remove these two rules.
   -------------------------------------------------------------------------- */
#carriers-list  .carrier-item  .item-logo,
#payments-list  .payment-item  .item-logo {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY — HOMEPAGE ELEMENTOR HEADINGS
   Elementor generates fixed font-sizes with no mobile breakpoints.
   These overrides scale down the key headings for tablets and phones.
   Widget IDs are scoped to elementor-2170105 (homepage) only.
   ========================================================================== */

/* Hide newsletter subscription section on homepage (until properly set up) */
body.page-index .elementor-element-552d9040 {
  display: none !important;
}

/* — Small tablet (≤ 767px) — */
@media (max-width: 767px) {
  /* Hero H1 — old ID selector, kept for reference but no longer matching after CE re-save */
  /* Section H2: "Naše tituly" & "Buď součástí smečky." */
  .elementor-element-6f0466d8 .elementor-heading-title,
  .elementor-element-3b2ec2dc .elementor-heading-title {
    font-size: 28px !important;
  }
  /* Mid-page H2: "Kde se fantazie stává skutečností." (body section) */
  .elementor-element-31cd3ab .elementor-heading-title {
    font-size: 26px !important;
  }
}

/* — Phone (≤ 480px) — */
@media (max-width: 480px) {
  /* Hero H1 */
  body.page-index .fantasium-hero-content h1.elementor-heading-title {
    font-size: 30px !important;
    letter-spacing: 1px !important;
  }
  /* Section H2s */
  .elementor-element-6f0466d8 .elementor-heading-title,
  .elementor-element-3b2ec2dc .elementor-heading-title {
    font-size: 22px !important;
  }
  /* Mid-page H2 */
  .elementor-element-31cd3ab .elementor-heading-title {
    font-size: 20px !important;
  }
}

/* Product image modal trigger: classic theme hides the .layer on mobile via hidden-sm-down.
   Override so the zoom/modal trigger remains clickable on all screen sizes. */
.product-cover .layer {
  display: flex !important;
}


/* --------------------------------------------------------------------------
   Cookie consent banner (Shaim CKS)
   The module admin sets position:inherit and opacity:0.8 via an inline <style>
   block that renders after this linked CSS — !important is the only reliable
   override. Safe to use here because JS only ever touches display, never
   position, opacity, transform, or color.
   -------------------------------------------------------------------------- */

/* Backdrop: left/right commented out in module CSS — restore + darken */
#cookies-banner-background {
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* Card */
#shaim_cks_eu {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius);
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.9);
}

#shaim_cks_eu .ck_table {
  background: transparent !important;
}

/* Heading */
#shaim_cks_euContent h3 {
  font-family: var(--f-font-heading);
  color: var(--f-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--f-border);
}

/* Body text */
#shaim_cks_eu p,
#shaim_cks_eu .ck_table td.first,
#shaim_cks_eu .more_info_href {
  color: var(--f-text-muted) !important;
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Primary button + custom accept button — same gold fill */
#shaim_cks_eu .closebutton,
#shaim_cks_eu .closebuttonCustom {
  background: var(--f-gold) !important;
  color: #000 !important;
  font-family: var(--f-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--f-radius-sm);
  transition: background-color var(--f-transition), box-shadow var(--f-transition);
}

#shaim_cks_eu .closebutton:hover,
#shaim_cks_eu .closebuttonCustom:hover {
  background: var(--f-gold-hover) !important;
  box-shadow: 0 0 20px var(--f-gold-glow);
}

/* Two-line button needs tighter line-height — use 1.4 consistent with site buttons */
#shaim_cks_eu .closebuttonCustom {
  line-height: 1.4 !important;
}

.page-content:has(ol.current-step-3) #user-login-form-wrapper h4.tso-title {
  display: none;
}

/* Login + registration form labels — invisible on dark bg */
.login-form label,
.register-form label {
  color: var(--f-gold) !important;
}

/* Form helper/hint text below inputs — globally visible on dark bg */
.form-control-comment,
.form-group .form-control-comment,
.login-form .form-control-comment,
.register-form .form-control-comment,
.js-customer-form .form-control-comment {
  color: #9a9590 !important;
}

/* Password-strength popover (Bootstrap popover used by zxcvbn feedback) —
   default is white bg + dark text, restyle for dark theme */
.popover {
  background-color: var(--f-bg-card) !important;
  border-color: var(--f-border-strong) !important;
}
.popover-content {
  color: var(--f-gold) !important;
}
/* Popover arrows — override the white borders with dark bg */
.popover.popover-top::after,
.popover.bs-tether-element-attached-bottom::after {
  border-top-color: var(--f-bg-card) !important;
}
.popover.popover-bottom::after,
.popover.bs-tether-element-attached-top::after {
  border-bottom-color: var(--f-bg-card) !important;
}
.popover.popover-left::after,
.popover.bs-tether-element-attached-right::after {
  border-left-color: var(--f-bg-card) !important;
}
.popover.popover-right::after,
.popover.bs-tether-element-attached-left::after {
  border-right-color: var(--f-bg-card) !important;
}

/* ── My Account dashboard ────────────────────────────────────────────────── */
.page-my-account #content .links a {
  color: var(--f-text);
}
.page-my-account #content .links a span.link-item {
  background: var(--f-bg-card);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  transition: border-color var(--f-transition), box-shadow var(--f-transition);
}
.page-my-account #content .links a:hover span.link-item {
  border-color: var(--f-gold);
  box-shadow: 0 0 20px var(--f-gold-glow);
}
.page-my-account #content .links a i {
  color: var(--f-gold) !important;
}
.page-my-account #content .links a:hover i {
  color: var(--f-gold-hover) !important;
}
.page-my-account #content .links a:hover {
  color: var(--f-gold);
}
/* Logout link at the bottom */
.page-my-account .logout {
  color: var(--f-text-muted);
  transition: color var(--f-transition);
}
.page-my-account .logout:hover {
  color: var(--f-gold);
}

/* ── Account subpages: identity, address, orders, notifications ─────────── */

/* Form labels across all account pages — gold on dark bg */
#customer-form label,
.js-address-form label,
.page-identity label,
.page-addresses label {
  color: var(--f-gold) !important;
}

/* Address form — center the submit button */
.js-address-form .form-footer {
  text-align: center;
}

/* Address cards — dark bg instead of white */
.page-addresses .address {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
}
.page-addresses .address h4 {
  color: var(--f-gold);
}
.page-addresses .address-footer {
  border-top-color: var(--f-border) !important;
}
.page-addresses .address-footer a {
  color: var(--f-text-muted) !important;
}
.page-addresses .address-footer a:hover {
  color: var(--f-gold) !important;
}

/* Notification center (ps_emailalerts) — override inline background:white
   Note: PS puts page identifier as body ID, not class */
body#module-ps_emailalerts-account #content ul li.p-1.m-1 {
  background: var(--f-bg-card) !important;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
}
body#module-ps_emailalerts-account #content li a {
  color: var(--f-text) !important;
}
body#module-ps_emailalerts-account #content li a[data-url] i,
body#module-ps_emailalerts-account #content li .material-icons {
  color: var(--f-text-muted) !important;
}
body#module-ps_emailalerts-account #content li .material-icons:hover {
  color: var(--f-gold) !important;
}

/* ── Order history table (controller=history) ───────────────────────────── */
.page-history #content h6 {
  color: var(--f-text) !important;
}
.page-history #content .table-bordered,
.page-history #content .table-bordered td,
.page-history #content .table-bordered th {
  border-color: var(--f-border) !important;
}
.page-history #content .table thead th {
  border-bottom-color: var(--f-border) !important;
}
.page-history #content .thead-default th {
  background-color: var(--f-bg-surface) !important;
  color: var(--f-gold) !important;
}
.page-history #content table td {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}
.page-history #content table a {
  color: var(--f-gold) !important;
}
/* "Zrušeno" status pill — PS sets inline bg #DADADA (grey), override to red */
.page-history .label[style*="DADADA"],
.page-order-detail .label[style*="DADADA"] {
  background-color: var(--f-red) !important;
  color: #fff !important;
}

/* ── Order detail page (controller=order-detail) ────────────────────────── */
.page-order-detail .box {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
}
.page-order-detail .box h3,
.page-order-detail .box h4 {
  color: var(--f-gold);
}
.page-order-detail #content table {
  background: var(--f-bg-card) !important;
  color: var(--f-text);
  border-color: var(--f-border) !important;
}
.page-order-detail #content table th {
  background: var(--f-bg-surface) !important;
  color: var(--f-gold) !important;
  border-color: var(--f-border) !important;
}
.page-order-detail #content table td {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}
.page-order-detail #content a {
  color: var(--f-gold);
}
.page-order-detail #order-items table tr.total-value,
.page-order-confirmation #order-items table tr.total-value {
  background-color: var(--f-bg-surface) !important;
}

/* Product image modal — dark bg, no white caption bar */
#product-modal .modal-content {
  background: var(--f-bg) !important;
  border-color: var(--f-border) !important;
}
#product-modal .modal-body {
  background: var(--f-bg) !important;
}
#product-modal .modal-body .image-caption {
  background: var(--f-bg-card) !important;
  border-top-color: var(--f-border) !important;
  color: var(--f-text) !important;
}

/* Product modal — close button */
#product-modal .fantasium-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
#product-modal .fantasium-modal-close:hover {
  opacity: 1;
}
#product-modal .fantasium-modal-close .material-icons {
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

/* Balíkovna / carrier pickup point detail card */
.dmbalikovna_select_point,
.dmbalikovna_point_info,
.dmbalikovna_left,
.dmbalikovna_right {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}
.dmbalikovna_right {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}
.dmbalikovna_right h3 {
  color: var(--f-gold) !important;
}
.dmbalikovna_row_hours_table,
.dmbalikovna_row_hours {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}
.dmbalikovna_container,
.dmbalikovna_row_address_table,
.dmbalikovna_address_hours,
.dmbalikovna_image_container {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
}

/* PPL pickup-point detail card — dark-theme override */
#dmppl_extra_carrier .dmppl_point_info,
#dmppl_extra_carrier .dmppl_left,
#dmppl_extra_carrier .dmppl_right,
#dmppl_extra_carrier #dmppl_select_point {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}

#dmppl_extra_carrier #branch_name {
  color: var(--f-gold) !important;
}

#dmppl_extra_carrier .dmppl_right table,
#dmppl_extra_carrier .dmppl_right td,
#dmppl_extra_carrier .dmppl_right th {
  background: transparent !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}

#dmppl_extra_carrier .dmppl_row_hours_table,
#dmppl_extra_carrier .dmppl_row_hours,
.dmppl_container .dmppl_row_hours_table,
.dmppl_container .dmppl_row_hours {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}

#dmppl_extra_carrier .dmppl_right h3,
.dmppl_container .dmppl_right h3 {
  color: var(--f-text-muted) !important;
}

/* PPL on order confirmation — address rows + container */
.dmppl_container .dmppl_point_info,
.dmppl_container .dmppl_left,
.dmppl_container .dmppl_right,
.dmppl_container .dmppl_row_address_table,
.dmppl_container .dmppl_address_hours,
.dmppl_container .dmppl_image_container {
  background: var(--f-bg-card) !important;
  color: var(--f-text) !important;
  border-color: var(--f-border) !important;
}

.dmppl_container .dmppl_left h3 {
  color: var(--f-gold) !important;
}

/* PPL pickup-point "Zobrazit mapu" button — dark-theme override */
#checkout-left #dmppl_button,
#dmppl_extra_carrier #dmppl_button {
  background-color: var(--f-gold) !important;
  color: var(--f-bg) !important;
  border: none !important;
}

/* PPL map overlay — reset inputs back to white so checkout dark styles don't bleed in */
#ppl-parcelshop-map .form-control,
#ppl-parcelshop-map input,
#ppl-parcelshop-map select,
.ppl-parcelshop-map .form-control,
.ppl-parcelshop-map input,
.ppl-parcelshop-map select,
#dmppl_show .form-control,
#dmppl_show input,
#dmppl_show select {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #85d092 !important;
  border-radius: 0 !important;
}

#ppl-parcelshop-map .form-control::placeholder,
#ppl-parcelshop-map input::placeholder,
.ppl-parcelshop-map .form-control::placeholder,
.ppl-parcelshop-map input::placeholder,
#dmppl_show .form-control::placeholder,
#dmppl_show input::placeholder {
  color: #004b93 !important;
  opacity: 1 !important;
}

/* Payment info definition-list on order confirmation (dm_gopay) — theme CSS sets
   #f6f6f6 background which is invisible on the dark theme */
.definition-list dl dd,
.definition-list dl dt {
  background: none !important;
  background-color: transparent !important;
}
.definition-list dl dt {
  color: var(--f-gold);
}

/* Secondary button — exact same size as primary, muted gold outline */
#shaim_cks_eu #ShowCustom,
#shaim_cks_eu .closebuttonPers {
  background: transparent !important;
  color: var(--f-text-muted) !important;
  border: 2px solid var(--f-border-strong) !important;
  font-family: var(--f-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--f-radius-sm);
  box-shadow: none;
  line-height: 30px;
  padding: 10px 30px;
  transition: background-color var(--f-transition), border-color var(--f-transition), color var(--f-transition);
}

#shaim_cks_eu #ShowCustom:hover,
#shaim_cks_eu .closebuttonPers:hover {
  background: var(--f-gold-subtle) !important;
  border-color: var(--f-gold) !important;
  color: var(--f-gold) !important;
}

/* Expanded settings panel */
#shaim_cks_eu .type-heading {
  background: transparent !important;
  color: var(--f-text) !important;
  border-bottom: 1px solid var(--f-border);
  padding: 0.5rem 0;
  font-family: var(--f-font-heading);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-align: left;
}

/* Label: text left, checkbox right */
#shaim_cks_eu .type-heading label {
  color: var(--f-text) !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  float: none;
}

/* Cancel the module's float:right on the checkbox */
#shaim_cks_eu .type-heading input[type=checkbox] {
  float: none;
  flex-shrink: 0;
  order: 2;
}

#shaim_cks_eu .type-description {
  color: var(--f-text-muted) !important;
  font-size: 0.8rem;
  border-bottom-color: var(--f-border);
  text-align: left;
}

/* Checkboxes — native-style matching checkout, gold border + fill */
#shaim_cks_eu input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  border: 2px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 3px !important;
  background-color: transparent !important;
  cursor: pointer;
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* Hide the module's custom :before painted box */
#shaim_cks_eu input[type=checkbox]:before {
  display: none !important;
}

#shaim_cks_eu input[type=checkbox]:checked {
  background-color: var(--f-gold) !important;
  border-color: var(--f-gold) !important;
}

/* Clean dark checkmark on gold background */
#shaim_cks_eu input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px !important;
  height: 10px !important;
  border: solid #000 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
}

#shaim_cks_eu input[type=checkbox]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Print — keep things readable
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
  #header, #footer { display: none; }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   TEMPORARY FIX — CMS page inline style overrides
   ---------------------------------------------------------------------------
   These rules nuke inline styles (background-color, font-family, color, etc.)
   pasted from Word / other sites on CMS content pages shared across multisite.

   TODO: Remove this entire block once CMS content is properly cleaned up.
         Search for "TEMPORARY FIX — CMS" to find it quickly.
   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Nuke inline styles on raw CMS content (Word junk).
   Uses > :not(.elementor) to skip CE-built content which lives
   inside a .elementor wrapper div, while Word-pasted HTML sits
   as direct children of .page-content. */
body.page-cms .page-content > :not(.elementor):not(header),
body.page-cms .page-content > :not(.elementor):not(header) * {
  background-color: transparent !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin-top: inherit !important;
  margin-bottom: inherit !important;
}

/* Restore headings to theme defaults */
body.page-cms .page-content > :not(.elementor):not(header) h1,
body.page-cms .page-content > :not(.elementor):not(header) h2,
body.page-cms .page-content > :not(.elementor):not(header) h3,
body.page-cms .page-content > :not(.elementor):not(header) h4,
body.page-cms .page-content > :not(.elementor):not(header) h5,
body.page-cms .page-content > :not(.elementor):not(header) h6 {
  font-family: var(--f-font-heading) !important;
  color: var(--f-gold) !important;
}

/* Restore paragraph text */
body.page-cms .page-content > :not(.elementor):not(header) p,
body.page-cms .page-content > :not(.elementor):not(header) li,
body.page-cms .page-content > :not(.elementor):not(header) td,
body.page-cms .page-content > :not(.elementor):not(header) th,
body.page-cms .page-content > :not(.elementor):not(header) span,
body.page-cms .page-content > :not(.elementor):not(header) div,
body.page-cms .page-content > :not(.elementor):not(header) dd,
body.page-cms .page-content > :not(.elementor):not(header) dt {
  color: var(--f-text) !important;
  font-family: var(--f-font-body, inherit) !important;
}

/* Restore bold text */
body.page-cms .page-content > :not(.elementor):not(header) strong,
body.page-cms .page-content > :not(.elementor):not(header) b {
  color: var(--f-text) !important;
  font-weight: 700 !important;
}

/* Restore links */
body.page-cms .page-content > :not(.elementor):not(header) a {
  color: var(--f-gold) !important;
}

/* Tables — give them some structure back */
body.page-cms .page-content > :not(.elementor):not(header) table {
  border-collapse: collapse !important;
  width: auto !important;
}

body.page-cms .page-content > :not(.elementor):not(header) table td,
body.page-cms .page-content > :not(.elementor):not(header) table th {
  padding: 6px 12px !important;
  border: 1px solid var(--f-border) !important;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   END — TEMPORARY FIX — CMS page inline style overrides
   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


/* =========================================================================
   SmartEmailing Newsletter Form — Fantasium Dark/Gold Theme
   Scoped to .se-webform so it works on any page (test page & homepage).
   ========================================================================= */

/* Form container — remove default grey bg, let the CE section bg show through */
.se-webform {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: Montserrat, sans-serif !important;
}

.se-webform .se-webform-inner {
  background: transparent !important;
  padding: 0 !important;
}

/* Hide the empty SE header */
.se-webform .se-header {
  display: none !important;
}

/* Body / field area */
.se-webform .se-body {
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

/* Reset SE's default ul/li margins that make the input narrower than the button */
.se-webform .se-body ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.se-webform .se-body li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Label */
.se-webform .se-label {
  display: none !important;
}

/* Email input — match original CE form */
.se-webform input[type="text"],
.se-webform input[type="email"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: var(--f-text, #e6e3e0) !important;
  height: 52px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-family: Montserrat, sans-serif !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
}

.se-webform input[type="text"]:focus,
.se-webform input[type="email"]:focus {
  border-color: var(--f-gold, #d4af37) !important;
}

.se-webform input[type="text"]::placeholder,
.se-webform input[type="email"]::placeholder {
  color: rgba(230, 227, 224, 0.6) !important;
  font-weight: 400 !important;
}

/* Submit button — full-width gold gradient */
.se-webform .se-submit {
  padding: 0 !important;
  margin: 0 !important;
}

.se-webform .se-submit button,
.se-webform button[type="submit"],
.se-webform input[type="submit"] {
  background: linear-gradient(135deg, #eebd2b, #d4af37) !important;
  color: #1c1710 !important;
  border: none !important;
  height: 52px !important;
  width: 100% !important;
  padding: 0 20px !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: Cinzel, Georgia, 'Times New Roman', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
}

.se-webform .se-submit button:hover,
.se-webform button[type="submit"]:hover,
.se-webform input[type="submit"]:hover {
  opacity: 0.9 !important;
}

/* Success/error messages */
.se-webform .se-message,
.se-webform .se-alert {
  color: var(--f-text, #e6e3e0) !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* -------------------------------------------------------------------------
   Newsletter section fallback styles
   CE may not generate element-specific CSS on all pages (e.g. when a section
   is imported via JSON). These rules ensure the heading and subtitle match
   the original design even without CE's per-element stylesheet.
   Scoped via :has(.se-webform) so they only hit the newsletter section.
   ------------------------------------------------------------------------- */
.elementor-section:has(.se-webform) .elementor-widget-heading {
  text-align: center !important;
}

.elementor-section:has(.se-webform) .elementor-widget-heading .elementor-heading-title {
  font-family: Cinzel, sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--f-text, #e6e3e0) !important;
}

.elementor-section:has(.se-webform) .elementor-widget-heading .elementor-heading-title span {
  color: var(--f-gold, #d4af37) !important;
}

.elementor-section:has(.se-webform) .elementor-widget-text-editor {
  text-align: center !important;
  color: var(--f-text, #e6e3e0) !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* GDPR note — smaller, muted */
.elementor-section:has(.se-webform) .elementor-widget-text-editor + .elementor-widget-html + .elementor-widget-text-editor,
.elementor-section:has(.se-webform) .elementor-widget-text-editor:last-child {
  font-size: 12px !important;
  color: #666 !important;
}


/* =========================================================================
   Checkout — Order summary: delivery & payment lines
   ========================================================================= */
#cart-right-delivery-payment .text-left {
  padding-right: 15px;
}

#cart-right-delivery-payment .text-right {
  text-align: right;
}

/* Hide estimated delivery time on carrier selection */
#carriers-data #carriers-list .delivery-option .item-name > .item-description {
  display: none;
}