/* ========== CSS v29 - NAVIGATION-IN BACKGROUND ========== */
/* ========== CSS VARIABLES - BREWERY GOLD THEME ========== */
:root {
  --primary-gold: #fac70c;
  --primary-gold-dark: #e0ad00;
  --primary-gold-light: #fdd647;
  --dark-color: #000000;
  --dark-bg: #111111;
  --light-bg: #f9f9f7;
  --text-dark: #1a1a1a;
}

/* ========== GLOBAL STYLES ========== */
* {
  box-sizing: border-box;
}

/* ========== SKIP LINK ========== */
.skip-link,
[class*="skip"]:not(.sr-only) {
  display: none !important;
}

/* Navigation bullets - white color */
.navigation-bullet,
.breadcrumb-arrow,
.breadcrumbs .separator,
.breadcrumbs > span {
  color: #ffffff !important;
}

/* Breadcrumbs - no border left */
.breadcrumbs,
.breadcrumb,
[class*="breadcrumb"],
.breadcrumbs .navigation-home-icon-wrapper {
  border-left: none !important;
}

html {
  background: #000000 !important;
}

body {
  font-family: 'Source Sans 3', sans-serif !important;
  color: #ffffff !important;
  background-color: #000000 !important;
}

/* Ensure all major elements are black */
div,
section,
article,
aside {
  background-color: #000000 !important;
}

/* ========== HEADER - PURE BLACK ========== */
#header {
  background: var(--dark-color) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 3px solid #fac70c !important;
  padding: 15px 0 !important;
}

#header .navigation-wrapper {
  background: var(--dark-color) !important;
}

#header .top-nav {
  background: transparent !important;
}

#header .project-phone {
  color: var(--primary-gold) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Header top layout - flexbox for logo LEFT, icons RIGHT */
/* Hide empty navigation-tools */
.header-top-wrapper .navigation-tools {
  display: none !important;
}

/* ========== LOGO - CLEAN ELEGANT STYLE ========== */
#header .logo-wrapper,
#header .logo,
#header .site-name {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  height: 160px !important;
}

/* Welcome text - added via JavaScript in header.js */
.welcome-text-added {
  /* Styles are applied inline via JavaScript for better control */
}

#header .logo-wrapper img,
#header .logo img,
#header .site-name img,
#header .site-name a img {
  max-height: 190px !important;
  width: auto !important;
  transition: all 0.3s ease !important;
  filter: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Breakpoint <= 1600px */
@media (max-width: 1599px) {
  #header .logo-wrapper img,
  #header .logo img,
  #header .site-name img,
  #header .site-name a img {
    max-height: 130px !important;
  }
}

/* Breakpoint <= 991px */
@media (max-width: 991px) {
  #header .header-top {
    height: 140px !important;
  }

  .welcome-text-added {
    top: 50px !important;
    left: 50px !important;
  }

  .header-top-wrapper {
    background-image: none !important;
  }
}

/* Breakpoint <= 767px */
@media (max-width: 767px) {
  .welcome-text-added {
    display: none !important;
  }
}

#header .logo-wrapper a:hover img,
#header .logo a:hover img,
#header .site-name a:hover img {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ========== HEADER ICONS - UNIFIED STYLE ========== */
.header-top-wrapper .navigation-buttons a,
.navigation-buttons a {
  background: transparent !important;
  color: #fac70c !important;
  text-decoration: none !important;
  padding: 12px 16px !important;
  margin: 0 4px !important;
  border-radius: 6px !important;
  border: 2px solid #fac70c !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.header-top-wrapper .navigation-buttons a:hover,
.navigation-buttons a:hover {
  background: transparent !important;
  color: var(--primary-gold-light) !important;
  border-color: var(--primary-gold-light) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4) !important;
}

.header-top-wrapper .navigation-buttons a div:first-child,
.navigation-buttons a div:first-child {
  font-size: 16px !important;
  margin-right: 8px !important;
}

.header-top-wrapper .navigation-buttons a div:last-child,
.navigation-buttons a div:last-child {
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ========== NAVIGATION MENU ========== */
#navigation {
  background: var(--dark-color) !important;
}

.navigation-in {
  background-color: #FCCA0940 !important;
}

.menu-level-1 > li > a {
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  padding: 14px 22px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  background: transparent !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  margin: 0 3px !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

.menu-level-1 > li > a:hover {
  color: var(--primary-gold) !important;
  background: transparent !important;
}

.menu-level-1 > li > a:after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent 0%, var(--primary-gold) 50%, transparent 100%) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.menu-level-1 > li > a:hover:after {
  width: 80% !important;
}

/* ========== SUBMENU / DROPDOWN - ONLY BLACK BACKGROUND ========== */
/* Main dropdown container - ONLY black background as requested */
ul.menu-level-2,
.navigation ul.menu-level-2,
nav ul.menu-level-2 {
  background: #000000 !important;
}

/* CRITICAL: Override ALL child backgrounds - use extreme specificity */
ul.menu-level-2 *,
.navigation ul.menu-level-2 *,
nav ul.menu-level-2 *,
ul.menu-level-2 li,
ul.menu-level-2 div,
ul.menu-level-2 span,
ul.menu-level-2 a,
.menu-level-2 > li,
.menu-level-2 > li > div,
.menu-level-2 li div,
li[class*="menu-item"] div {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Menu list items - force single line layout */
ul.menu-level-2 > li,
.menu-level-2 > li[role="none"] {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  display: block !important;
}

/* Removed menu-image and menu-item styles as requested */

/* Hide menu images in menu-level-2 */
.menu-level-2 .menu-image {
  display: none !important;
}

/* Menu level 2 hover effect */
.menu-level-2 a:hover,
.menu-level-2 li:hover > a {
  color: var(--primary-gold) !important;
  background: rgba(250, 199, 12, 0.1) !important;
  padding-left: 10px !important;
  transition: all 0.2s ease !important;
}

/* ========== BUTTONS & CTA ========== */
button:not(.increase):not(.decrease):not([class*="increase"]):not([class*="decrease"]),
a[class*="btn"],
.button,
input[type="button"],
input[type="submit"],
.btn,
.btn-primary,
.btn-secondary {
  background: linear-gradient(180deg, #fac70c 0%, #e0ad00 100%) !important;
  color: white !important;
  border: 1px solid #d4a500 !important;
  padding: 14px 32px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

button:not(.increase):not(.decrease):not([class*="increase"]):not([class*="decrease"]):hover,
a[class*="btn"]:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  background: linear-gradient(180deg, #e0ad00 0%, #d4a500 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

button:not(.increase):not(.decrease):not([class*="increase"]):not([class*="decrease"]):active,
.btn:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Increase button - transparent background */
.increase {
  background: transparent !important;
}

/* ========== PRODUCT CARDS ========== */
.product-item,
.product-box,
.product-card,
.product,
.item {
  background: #111111 !important;
  border: 2px solid rgba(250, 199, 12, 0.3) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(250, 199, 12, 0.1) !important;
  position: relative !important;
  color: #ffffff !important;
}

.product-item:hover,
.product-box:hover,
.product-card:hover,
.item:hover {
  transform: translateY(-6px) rotate(-1deg) !important;
  border-color: var(--primary-gold) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
}

.product-item a,
.product-box a,
.product-card a,
.item a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.product-item *,
.product-box *,
.product-card *,
.item * {
  color: #ffffff !important;
}

.product-item a:hover,
.product-box a:hover,
.product-card a:hover,
.item a:hover {
  color: var(--primary-gold) !important;
}

/* Stars label */
.stars-label {
  color: var(--primary-gold) !important;
}

/* Product active - black background */
.product.active {
  background: #000000 !important;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

h1 {
  font-size: 2.6rem !important;
  margin-bottom: 20px !important;
}

/* Force white color for h1 on product pages and main content */
.p-detail h1,
.product-detail h1,
main h1,
.content h1,
.product-top h1,
#product h1,
.h1,
.p-detail-inner-header-mobile .h1,
.p-image-wrapper .h1 {
  color: #ffffff !important;
}

h2 {
  font-size: 2rem !important;
  margin-bottom: 15px !important;
}

h3,
.content h3,
main h3,
.category-description h3 {
  font-size: 1.6rem !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  color: #e0ad00 !important;
}

h4 {
  font-size: 1.2rem !important;
}

h5 {
  font-size: 1rem !important;
}

h6 {
  font-size: 0.95rem !important;
}

/* ========== CATEGORY DESCRIPTIONS ========== */
.category-description,
.category-info,
.category-text {
  background: #111111 !important;
  padding: 25px !important;
  border-left: 4px solid var(--primary-gold) !important;
  border-radius: 6px !important;
  margin: 20px 0 !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
}

/* ========== ADMIN BAR ========== */
.admin-bar,
.admin-toolbar,
[class*="admin-bar"],
[class*="admin-toolbar"],
.shoptet-admin-bar {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--primary-gold) !important;
}

.admin-bar *,
.admin-toolbar *,
[class*="admin-bar"] *,
[class*="admin-toolbar"] *,
.shoptet-admin-bar * {
  color: #ffffff !important;
}

.admin-bar a,
.admin-toolbar a,
[class*="admin-bar"] a,
[class*="admin-toolbar"] a,
.shoptet-admin-bar a {
  color: var(--primary-gold) !important;
  text-decoration: none !important;
}

.admin-bar a:hover,
.admin-toolbar a:hover,
[class*="admin-bar"] a:hover,
[class*="admin-toolbar"] a:hover,
.shoptet-admin-bar a:hover {
  color: var(--primary-gold-light) !important;
}

/* ========== CATEGORY SIDEBAR ========== */
.complementary,
.sidebar,
.aside,
[role="complementary"] {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Remove all unwanted backgrounds from sidebar children */
.complementary *,
.sidebar *,
.aside *,
[role="complementary"] * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Sidebar headings */
.complementary h1,
.complementary h2,
.complementary h3,
.complementary h4,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.aside h1,
.aside h2,
.aside h3,
.aside h4 {
  color: var(--primary-gold) !important;
  background: transparent !important;
}

/* Sidebar text - ensure white text */
.complementary,
.complementary p,
.complementary span,
.complementary li,
.sidebar,
.sidebar p,
.sidebar span,
.sidebar li,
.aside,
.aside p,
.aside span,
.aside li {
  color: #ffffff !important;
}

/* Sidebar links */
.complementary a,
.sidebar a,
.aside a,
[role="complementary"] a {
  color: var(--primary-gold) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.complementary a:hover,
.sidebar a:hover,
.aside a:hover,
[role="complementary"] a:hover {
  color: var(--primary-gold-light) !important;
  background: rgba(250, 199, 12, 0.1) !important;
}


/* ========== BENEFIT BANNERS / ICONS - COMPREHENSIVE FIX ========== */
.benefits,
.benefit-banners,
.benefit-list,
.benefits-wrapper,
[class*="benefit"],
.benefit-item,
.benefit-box {
  background: transparent !important;
}

/* All benefit containers and wrappers */
.benefits > *,
.benefit-banners > *,
.benefit-list > *,
[class*="benefit"] > *,
.benefit-item > *,
.benefit-box > * {
  background: transparent !important;
}

/* Benefit images - invert to white for black background */
.benefits img,
.benefit-banners img,
.benefit-list img,
[class*="benefit"] img,
.benefit-item img,
.benefit-box img {
  background: transparent !important;
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
  padding: 10px !important;
  max-width: 80px !important;
}

/* SVG icons in benefits */
.benefits svg,
.benefit-banners svg,
.benefit-list svg,
[class*="benefit"] svg,
.benefit-item svg,
.benefit-box svg {
  fill: var(--primary-gold) !important;
  stroke: var(--primary-gold) !important;
  background: transparent !important;
}

/* Benefit icon containers */
.benefits [class*="icon"],
.benefit-banners [class*="icon"],
.benefit-list [class*="icon"],
[class*="benefit"] [class*="icon"] {
  background: transparent !important;
  border: none !important;
}

/* Benefit banner data text - white color */
.benefitBanner__data,
[class*="benefitBanner"] [class*="data"],
.benefit-data,
.benefit-banner-data {
  color: #ffffff !important;
}

/* ========== NEWSLETTER SECTION ========== */
.newsletter,
.newsletter-section,
.footer-newsletter,
.footer-newsletter-full-width {
  background: #000000 !important;
  color: #ffffff !important;
  padding: 4rem 2rem !important;
  border-top: 4px solid var(--primary-gold) !important;
  position: relative !important;
  overflow: hidden !important;
}

.newsletter::before,
.footer-newsletter::before {
  content: '🍺' !important;
  position: absolute !important;
  font-size: 150px !important;
  opacity: 0.08 !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-10deg) !important;
  z-index: 0 !important;
}

.newsletter h2,
.newsletter-section h2,
.footer-newsletter h2,
.footer-newsletter-full-width h2 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  position: relative !important;
  z-index: 1 !important;
}

.newsletter h2,
.newsletter-section h2,
.newsletter input,
.newsletter-section input,
.newsletter button,
.newsletter-section button,
.newsletter p,
.newsletter-section p,
.footer-newsletter h2,
.footer-newsletter-full-width h2,
.footer-newsletter button,
.footer-newsletter-full-width button {
  position: relative !important;
  z-index: 1 !important;
}

.newsletter input,
.newsletter-section input {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 2px solid rgba(212,165,116,0.3) !important;
  border-radius: 6px !important;
  padding: 16px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(5px) !important;
}

.newsletter input:focus,
.newsletter-section input:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 20px rgba(212,165,116,0.4) !important;
  background: rgba(255,255,255,0.15) !important;
}

.newsletter button,
.newsletter-section button,
.footer-newsletter button,
.footer-newsletter-full-width button {
  background: linear-gradient(180deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 15px 30px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  min-width: 120px !important;
  transition: all 0.3s ease !important;
  font-size: 14px !important;
  display: inline-block !important;
  text-align: center !important;
}

/* FIX: Newsletter button text visibility - override .sr-only */
.newsletter button .sr-only,
.newsletter-section button .sr-only,
.footer-newsletter button .sr-only,
.footer-newsletter-full-width button .sr-only,
.newsletter button span,
.newsletter-section button span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.newsletter button:hover,
.newsletter-section button:hover,
.footer-newsletter button:hover,
.footer-newsletter-full-width button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(250, 199, 12, 0.4) !important;
}

/* ========== FORM ELEMENTS ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.textbox,
.input,
.form-control {
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  transition: all 0.3s ease !important;
  background-color: #fff !important;
  color: var(--text-dark) !important;
  font-size: 14px !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: #999 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.textbox:focus,
.input:focus,
.form-control:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.3) !important;
  outline: none !important;
  background-color: #fff !important;
}

/* ========== FOOTER ========== */
#footer,
footer,
.footer {
  background: linear-gradient(180deg, #1a1610 0%, #000000 100%) !important;
  color: #ccc !important;
  border-top: 4px solid var(--primary-gold) !important;
  padding: 50px 20px 30px !important;
  position: relative !important;
}

footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--primary-gold) !important;
}

footer a,
#footer a,
.footer a {
  color: var(--primary-gold) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

footer a:hover,
#footer a:hover,
.footer a:hover {
  color: var(--primary-gold-light) !important;
  text-decoration: underline !important;
  text-shadow: 0 0 10px rgba(212,165,116,0.5) !important;
}

/* ========== FOOTER BOTTOM ========== */
.footer-bottom,
.footer-bottom-full-width,
[class*="footer-bottom"] {
  background: #000000 !important;
  color: #ffffff !important;
}

.footer-bottom a,
.footer-bottom-full-width a,
[class*="footer-bottom"] a {
  color: var(--primary-gold) !important;
}

.footer-bottom a:hover,
.footer-bottom-full-width a:hover,
[class*="footer-bottom"] a:hover {
  color: var(--primary-gold-light) !important;
}

/* ========== HERO SECTION ========== */
.banner,
.hero,
.hero-section,
.slide,
.carousel-item {
  background-color: var(--light-bg) !important;
}

/* ========== LINKS ========== */
a {
  color: var(--primary-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--primary-gold-dark) !important;
}

/* ========== BREADCRUMBS ========== */
.breadcrumbs,
.breadcrumb,
[class*="breadcrumb"] {
  background: #111111 !important;
  padding: 15px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 25px !important;
  font-size: 14px !important;
  color: #ffffff !important;
}

.breadcrumbs a,
.breadcrumb a,
[class*="breadcrumb"] a {
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover,
[class*="breadcrumb"] a:hover {
  color: var(--primary-gold) !important;
  text-decoration: underline !important;
}

.breadcrumbs [class*="active"],
.breadcrumb [class*="active"],
[class*="breadcrumb"] [class*="active"] {
  color: var(--primary-gold) !important;
  font-weight: 700 !important;
}

/* ========== SIMPLIFIED PRODUCT SORTING ========== */
/* Simplified as requested - only basic styles */
.productsTop {
  background: var(--dark-bg) !important;
  padding: 10px !important;
  margin-bottom: 15px !important;
}

.productsTop > div {
  display: inline-block !important;
  margin-right: 10px !important;
}

/* Basic sorting radio styles */
.products-sorting input[type="radio"] {
  display: none !important;
}

.products-sorting label {
  padding: 8px 16px !important;
  cursor: pointer !important;
  color: #cccccc !important;
  transition: color 0.2s ease !important;
}

.products-sorting label:hover {
  color: var(--primary-gold) !important;
}

.products-sorting input[type="radio"]:checked + label {
  color: var(--primary-gold) !important;
  font-weight: 700 !important;
}

/* Category header fieldset labels */
#category-header fieldset {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#category-header fieldset input[type="radio"] {
  display: none !important;
}

#category-header fieldset label {
  padding: 8px 16px !important;
  cursor: pointer !important;
  color: #cccccc !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  border-radius: 4px !important;
}

#category-header fieldset label:hover {
  color: var(--primary-gold) !important;
  background: rgba(250, 199, 12, 0.1) !important;
}

#category-header fieldset input[type="radio"]:checked + label {
  color: var(--primary-gold) !important;
  font-weight: 700 !important;
  background: rgba(250, 199, 12, 0.15) !important;
}

/* ========== DISABLED FILTERS ========== */
.filter-label[disabled],
input[type="checkbox"][disabled] + label,
input[type="checkbox"][disabled] + *,
[disabled] .filter-label,
[disabled] + label,
label:has(input[disabled]) {
  color: #666666 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ========== FILTER VISIBILITY IMPROVEMENTS ========== */
.complementary .filter-group,
.complementary .filters,
aside .filter-group,
aside .filters,
.filters {
  background: #000000 !important;
  border: none !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.filter-group h4,
.filters h4,
.filter-group h3,
.filters h3 {
  color: var(--primary-gold) !important;
  margin-bottom: 15px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Checkbox styling for better visibility */
.complementary input[type="checkbox"],
.filters input[type="checkbox"],
aside input[type="checkbox"] {
  accent-color: var(--primary-gold) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  margin-right: 10px !important;
}

/* Range slider styling */
.complementary input[type="range"],
.filters input[type="range"],
aside input[type="range"],
[class*="slider"] input[type="range"] {
  accent-color: var(--primary-gold) !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(250, 199, 12, 0.2) !important;
}

/* Filter price display */
.complementary .filter-price,
.filters .filter-price,
aside .filter-price,
[class*="price-range"] {
  color: var(--primary-gold) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.complementary input[type="checkbox"] + label,
.complementary input[type="checkbox"] + *,
.filters input[type="checkbox"] + label,
.filters input[type="checkbox"] + *,
aside input[type="checkbox"] + label,
aside input[type="checkbox"] + * {
  color: #ffffff !important;
  cursor: pointer !important;
}

/* Price slider styling */
.complementary input[type="range"],
aside input[type="range"] {
  accent-color: var(--primary-gold) !important;
}

/* ========== OUT OF STOCK / UNAVAILABLE ========== */
.unavailable,
[class*="unavailable"],
.out-of-stock,
[class*="out-of-stock"],
[class*="nedostupn"] {
  color: #e67e22 !important;
  background: rgba(230, 126, 34, 0.08) !important;
  padding: 6px 12px !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid rgba(230, 126, 34, 0.2) !important;
  display: inline-block !important;
}

/* ========== CATEGORY BOXES - NO SUBCATEGORIES ========== */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin: 30px 0 !important;
}

.category-list > * {
  background: #111111 !important;
  border: 2px solid rgba(250, 199, 12, 0.2) !important;
  border-radius: 12px !important;
  padding: 25px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(250, 199, 12, 0.1) !important;
}

.category-list > *:hover {
  transform: translateY(-4px) !important;
  border-color: var(--primary-gold) !important;
  box-shadow: 0 8px 20px rgba(250, 199, 12, 0.2) !important;
}

.category-list a {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

.category-list a:hover {
  color: var(--primary-gold) !important;
}

/* Subcategories removed as requested by user */

/* ========== SIDEBAR ENHANCEMENTS ========== */
.complementary li,
.sidebar li,
.aside li,
.topic,
.category-item {
  transition: all 0.2s ease !important;
  padding: 2px 0 !important;
  background: transparent !important;
}

.complementary li:hover,
.sidebar li:hover,
.aside li:hover,
.topic:hover {
  padding-left: 8px !important;
}

.topic a,
.category-item a {
  background: transparent !important;
  color: #ffffff !important;
}

.complementary li a,
.sidebar li a,
.aside li a {
  display: block !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.complementary li a:hover,
.sidebar li a:hover,
.aside li a:hover {
  background: rgba(250, 199, 12, 0.15) !important;
  padding-left: 20px !important;
}

/* Active category - ONLY top level, absolutely NO subcategories */
.complementary > ul > li[class*="active"] > a,
.complementary > nav > ul > li[class*="active"] > a,
.complementary > div > ul > li[class*="active"] > a,
.sidebar > ul > li[class*="active"] > a,
.aside > ul > li[class*="active"] > a,
.complementary > ul > li > a[class*="active"],
.sidebar > ul > li > a[class*="active"],
.aside > ul > li > a[class*="active"] {
  background: rgba(250, 199, 12, 0.2) !important;
  border-left: 3px solid var(--primary-gold) !important;
  font-weight: 700 !important;
}

/* Categories section subcategories - proper styling */
.categories ul,
.sidebar .categories ul,
.complementary .categories ul {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.categories ul li,
.sidebar .categories ul li,
.complementary .categories ul li {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
  margin: 0 !important;
}

/* Subcategories in nested lists must NEVER have gold background */
.complementary li li,
.sidebar li li,
.aside li li,
.complementary ul ul li,
.sidebar ul ul li,
.aside ul ul li {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.complementary li li a,
.sidebar li li a,
.aside li li a,
.complementary ul ul a,
.sidebar ul ul a,
.aside ul ul a {
  background: transparent !important;
  border-left: none !important;
  font-weight: 400 !important;
  padding-left: 20px !important;
}

/* Active subcategory styling - categories section specific */
.categories ul li.active a,
.categories ul li[class*="active"] a,
.categories ul .active a,
.sidebar .categories li.active a,
.complementary .categories li.active a {
  background: rgba(250, 199, 12, 0.1) !important;
  border-left: 3px solid var(--primary-gold) !important;
  font-weight: 700 !important;
  color: var(--primary-gold) !important;
  padding-left: 25px !important;
}

/* Active subcategory in nested lists - fallback */
.complementary li li[class*="active"] a,
.sidebar li li[class*="active"] a,
.aside li li[class*="active"] a,
.complementary ul ul li[class*="active"] a,
.sidebar ul ul li[class*="active"] a,
.aside ul ul li[class*="active"] a {
  background: rgba(250, 199, 12, 0.05) !important;
  border-left: 2px solid var(--primary-gold) !important;
  font-weight: 600 !important;
  color: var(--primary-gold) !important;
  padding-left: 25px !important;
}

/* Hide images in subcategories with-image */
.subcategories.with-image .image {
  display: none !important;
}

/* ========== CONTENT AREAS ========== */
#content,
.content,
main,
.main-content,
[role="main"],
.content-wrapper,
[class*="content"],
.main,
.primary,
.layout-wrapper,
.page-wrapper,
.site-wrapper,
.container,
[class*="wrapper"],
[class*="container"],
[class*="layout"],
[class*="page"],
[class*="main"],
[class*="primary"] {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Price badges */
.price,
.product-price,
[class*="price"] strong {
  color: var(--primary-gold) !important;
  font-weight: 700 !important;
}

/* Empty content paragraphs */
.empty-content p {
  color: #ffffff !important;
}

/* ========== RESPONSIVE - TABLET ========== */
@media (max-width: 1024px) {
  #header .logo-wrapper img,
  #header .logo img,
  #header .site-name img,
  #header .site-name a img {
    max-height: 100px !important;
  }

  .menu-level-1 > li > a {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }

  h1 {
    font-size: 2.3rem !important;
    color: #ffffff !important;
  }

  h2 {
    font-size: 1.8rem !important;
  }

  h3 {
    font-size: 1.4rem !important;
  }
}

/* ========== RESPONSIVE - MOBILE ========== */
@media (max-width: 768px) {
  .content-wrapper {
    margin-top: 100px !important;
  }

  #header .logo-wrapper img,
  #header .logo img,
  #header .site-name img,
  #header .site-name a img {
    max-height: 90px !important;
  }

  .menu-level-1 > li > a {
    padding: 10px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .header-top-wrapper .site-name + * a div:last-child {
    display: none !important;
  }

  h1 {
    font-size: 1.9rem !important;
    color: #ffffff !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
    padding-left: 20px !important;
  }


  .newsletter,
  .newsletter-section {
    padding: 2.5rem 1.5rem !important;
  }

  button,
  a[class*="btn"],
  .button,
  .btn {
    padding: 12px 24px !important;
    font-size: 11px !important;
  }
}

/* ========== RESPONSIVE - SMALL PHONES ========== */
@media (max-width: 480px) {
  #header .logo-wrapper img,
  #header .logo img,
  #header .site-name img,
  #header .site-name a img {
    max-height: 80px !important;
  }

  .menu-level-1 > li > a {
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  h1 {
    font-size: 1.5rem !important;
    color: #ffffff !important;
  }

  h2 {
    font-size: 1.2rem !important;
  }

  h3 {
    font-size: 1rem !important;
  }

  button,
  .btn {
    padding: 10px 18px !important;
    font-size: 10px !important;
  }
}

/* ========== CART / KOŠÍK OPTIMIZATIONS ========== */
/* Cart page styling */
.cart,
.cart-content,
[class*="cart-page"],
[class*="kosik"] {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Cart items */
.cart-item,
.cart-product,
[class*="cart-item"],
[class*="cart-row"] {
  background: #111111 !important;
  border: 1px solid rgba(250, 199, 12, 0.2) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-bottom: 15px !important;
}

/* ========== UI SLIDER STYLING ========== */
.ui-slider {
  background: #222222 !important;
  border: 2px solid var(--primary-gold) !important;
  border-radius: 8px !important;
  height: 10px !important;
  position: relative !important;
}

.ui-slider::before,
.ui-slider:before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%) !important;
  border-radius: 6px !important;
}

.ui-slider .ui-slider-handle,
.ui-slider-handle {
  background: var(--primary-gold) !important;
  border: 3px solid #000000 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  top: -7px !important;
  cursor: grab !important;
  box-shadow: 0 2px 8px rgba(250, 199, 12, 0.4) !important;
}

.ui-slider .ui-slider-handle:active,
.ui-slider-handle:active {
  cursor: grabbing !important;
  transform: scale(1.1) !important;
}

.ui-slider-horizontal {
  width: 100% !important;
}

.ui-slider-vertical {
  width: 10px !important;
  height: 200px !important;
}

/* Cart total section */
.cart-total,
.cart-summary,
[class*="cart-total"],
[class*="cart-summary"] {
  background: #111111 !important;
  border: 2px solid var(--primary-gold) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

.cart-total strong,
.cart-summary strong,
[class*="total-price"] {
  color: var(--primary-gold) !important;
  font-size: 24px !important;
}

/* Continue to checkout button */
.cart button[type="submit"],
.cart .btn-primary,
[class*="checkout-button"],
[class*="continue-button"] {
  background: linear-gradient(180deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%) !important;
  color: #000000 !important;
  padding: 18px 40px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 8px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 20px auto !important;
  display: block !important;
}

/* Remove item button */
.cart .remove,
.cart-remove,
[class*="remove-item"],
[class*="delete-item"] {
  color: #e74c3c !important;
  background: transparent !important;
  border: 1px solid #e74c3c !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.cart .remove:hover,
.cart-remove:hover {
  background: #e74c3c !important;
  color: #ffffff !important;
}

/* ========== CONTACT FORM - INSERTED BY JS ========== */
.contact-form-wrapper {
  background: #000000 !important;
  padding: 60px 20px !important;
  margin: 60px 0 !important;
  border-top: 4px solid var(--primary-gold) !important;
  border-bottom: 4px solid var(--primary-gold) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Beer emoji background - right side */
.contact-form-wrapper::before {
  content: '🍺' !important;
  position: absolute !important;
  font-size: 180px !important;
  opacity: 0.36 !important;
  right: -20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(15deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Hop emoji background - left side */
.contact-form-wrapper::after {
  content: '🌾' !important;
  position: absolute !important;
  font-size: 120px !important;
  opacity: 0.36 !important;
  left: -10px !important;
  top: 20% !important;
  transform: rotate(-20deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.contact-form-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  background: #111111 !important;
  padding: 40px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(250, 199, 12, 0.3) !important;
  box-shadow: 0 8px 24px rgba(250, 199, 12, 0.15) !important;
  position: relative !important;
  z-index: 1 !important;
}

.contact-form-container h2 {
  color: var(--primary-gold) !important;
  font-size: 2.2rem !important;
  margin-bottom: 15px !important;
  text-align: center !important;
}

.contact-form-container > p {
  color: #cccccc !important;
  text-align: center !important;
  margin-bottom: 35px !important;
  font-size: 16px !important;
}

.contact-form-container form {
  background: transparent !important;
}

.contact-form-container fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contact-form-container .row-a {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  background: none !important;
}

.contact-form-container .row-a .column {
  flex: 1 !important;
  background: none !important;
}

.contact-form-container .form-group {
  margin-bottom: 20px !important;
  background: none !important;
}

.contact-form-container .form-control {
  width: 100% !important;
  padding: 14px 18px !important;
  background: #000000 !important;
  border: 2px solid rgba(250, 199, 12, 0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  transition: all 0.3s ease !important;
}

.contact-form-container .form-control::placeholder {
  color: #888888 !important;
}

.contact-form-container .form-control:focus {
  outline: none !important;
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 12px rgba(250, 199, 12, 0.3) !important;
  background: #0a0a0a !important;
}

.contact-form-container textarea.form-control {
  resize: vertical !important;
  min-height: 150px !important;
}

.contact-form-container .btn-submit {
  width: 100% !important;
  max-width: 300px !important;
  display: block !important;
  margin: 30px auto 0 !important;
  padding: 16px 40px !important;
  background: linear-gradient(180deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(250, 199, 12, 0.3) !important;
}

.contact-form-container .btn-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(250, 199, 12, 0.5) !important;
}

.contact-form-container .btn-submit:active {
  transform: translateY(-1px) !important;
}

/* ========== COOKIES SETTINGS ========== */
.cookiesSetting__item__text,
.cookiesSetting__perex,
.cookiesSetting__item__name {
  color: #ffffff !important;
}

/* Responsive - mobile */
@media (max-width: 768px) {
  .contact-form-wrapper {
    padding: 40px 15px !important;
    margin: 40px 0 !important;
  }

  .contact-form-container {
    padding: 30px 20px !important;
  }

  .contact-form-container h2 {
    font-size: 1.8rem !important;
  }

  .contact-form-container .row-a {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .contact-form-container .btn-submit {
    max-width: 100% !important;
  }
}