/**
 * Main Stylesheet for Custom Webshop Theme
 * Modern, professional design optimized for Croatian market
 */

/* ===== Reset and Base Styles ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary: #e80000;
  --color-primary-dark: #cc0000;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-text: #666666;
  --color-text-light: #999999;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-bg-light: #ffffff;
  --spacing-unit: 1rem;
  --border-radius: 12px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.67;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.875rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

a:hover {
  color: var(--color-primary-dark);
  opacity: 1;
}

/* ===== Header Styles ===== */
.site-header {
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 0;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.98);
}

/* Trust subheader (front page only): Jamstvo, Niske cijene, Brza dostava, Sigurno plaćanje */
.trust-subheader {
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
}

.trust-subheader-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.trust-subheader-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.trust-subheader-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 1.25rem;
}

.trust-subheader-label {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .trust-subheader-inner {
    gap: 1rem;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .trust-subheader-item {
    font-size: 0.8125rem;
  }
}

.header-container {
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-branding .custom-logo {
  max-height: 60px;
  width: auto;
  display: block;
  margin-top: -1.25rem;
}

.site-title {
  font-size: 1.75rem;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.site-title a {
  color: var(--color-text);
  transition: color 0.2s ease;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-primary);
}

.site-description {
  display: none;
}

/* ===== Navigation ===== */
.main-navigation {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  justify-content: flex-end;
}

.main-navigation ul.primary-menu,
.main-navigation #primary-menu,
.main-navigation #primary-menu ul,
.main-navigation ul.menu,
.main-navigation .menu,
.primary-menu,
.primary-menu ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.main-navigation ul.primary-menu li,
.main-navigation #primary-menu li,
.main-navigation #primary-menu ul li,
.main-navigation ul.menu li,
.main-navigation .menu li,
.primary-menu li,
.primary-menu ul li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
}

.main-navigation ul.primary-menu a,
.main-navigation #primary-menu a,
.main-navigation #primary-menu ul a,
.main-navigation ul.menu a,
.main-navigation .menu a,
.primary-menu a,
.primary-menu ul a {
  color: var(--color-text);
  font-weight: 500;
  padding: 0.625rem 1rem 0.5rem 1rem;
  display: block;
  font-size: 1rem;
  white-space: nowrap;
  border-radius: 0;
  transition:
    color 0.2s ease,
    border-bottom-color 0.2s ease;
  text-decoration: none;
  position: relative;
  border-bottom: 4px solid transparent;
  margin-top: -1.25rem;
}

.main-navigation .category-count,
.primary-menu .category-count {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-left: 0.375rem;
}

.primary-menu a:hover,
.main-navigation .menu a:hover {
  color: var(--color-primary);
  background-color: transparent;
}

/* Active/current menu item - red underline */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current_page_ancestor > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
#primary-menu .current-menu-item > a,
#primary-menu .current_page_item > a,
#primary-menu .current_page_ancestor > a,
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current_page_ancestor > a {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  border-bottom: 4px solid var(--color-primary) !important;
  font-weight: 600;
}

.menu-toggle {
  display: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: 0.75rem;
  font-size: 0.875rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
}

.menu-toggle:hover {
  background-color: var(--color-bg);
  border-color: var(--color-primary);
}

.menu-toggle-icon {
  display: block;
  width: 24px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  background-color: var(--color-text);
  content: "";
  display: block;
  height: 3px;
  width: 24px;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}

.menu-toggle-icon::before {
  top: -7.5px;
}

.menu-toggle-icon::after {
  bottom: -7.5px;
}

.menu-toggle.active .menu-toggle-icon {
  background-color: transparent;
}

.menu-toggle.active .menu-toggle-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle.active .menu-toggle-icon::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* ===== Header Search ===== */
.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  /* Match menu/cart vertical alignment (they use -1.25rem; slight nudge for pixel alignment) */
  margin-top: -1.375rem;
}

.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 0 0 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.header-search-toggle:hover {
  color: var(--color-primary);
  background-color: rgba(232, 0, 0, 0.06);
}

.header-search-icon {
  flex-shrink: 0;
  font-size: 22px;
}

.header-search-submit .material-icons,
.header-search-close .material-icons {
  font-size: 20px;
}

.header-search-close .material-icons {
  font-size: 24px;
}

.header-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  padding: 1rem 20px 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.header-search-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-search-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.header-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  transition: border-color 0.2s ease;
}

.header-search-form:focus-within {
  border-color: var(--color-primary);
  outline: none;
}

.header-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.5rem 0;
}

.header-search-input::placeholder {
  color: var(--color-text-light);
}

.header-search-input:focus {
  outline: none;
}

.header-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header-search-submit:hover {
  background: var(--color-primary-dark);
}

.header-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0.25rem;
  border: none;
  background: transparent;
  color: var(--color-text-light);
  cursor: pointer;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.header-search-close:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

/* Hide Cart and Checkout from primary menu (header has cart button instead) */
.main-navigation #primary-menu li:has(a[href*="/cart/"]),
.main-navigation #primary-menu li:has(a[href*="/checkout/"]) {
  display: none !important;
}

/* ===== Cart Icon ===== */
.header-cart {
  position: relative;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}

.header-cart .cart-contents {
  margin-top: -1.25rem;
}

.cart-contents {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-sm);
}

.cart-contents:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cart-icon {
  font-size: 1rem;
}

.cart-count {
  background-color: var(--color-danger);
  color: #fff;
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 6px;
}

/* ===== Breadcrumbs ===== */
/* Breadcrumbs are hidden - removed per design requirements */
.breadcrumbs-container {
  display: none !important;
}

/* ===== Content Area ===== */
#primary.content-area {
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.site-main {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ===== WooCommerce Shop Styles ===== */

/* Results count and ordering - display above grid in a row */
.woocommerce-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-result-count {
  display: inline-block;
  margin: 0 !important;
  font-size: 0.9375rem;
  color: var(--color-text-light);
}

.woocommerce-ordering {
  display: inline-block;
  margin: 0 !important;
}

.woocommerce-ordering select.orderby {
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg-light);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.2s ease;
}

.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
  border-color: var(--color-primary);
  outline: none;
}

.woocommerce .products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  row-gap: 1.25rem !important;
  margin: 2.5rem 0 !important;
  list-style: none !important;
  padding: 0 !important;
  clear: none !important;
}

/* Remove ::before pseudo-element that causes empty first grid cell */
.woocommerce .products::before,
.woocommerce ul.products::before {
  display: none !important;
  content: none !important;
}

/* Related and upsell products - same grid but different margin */
section.related.products ul.products,
section.related.products .products,
section.upsells.products ul.products,
section.upsells.products .products,
section.related.products ul.products.columns-2,
section.related.products ul.products.columns-3,
section.related.products ul.products.columns-4,
section.related.products ul.products.columns-5,
section.related.products ul.products.columns-6,
section.upsells.products ul.products.columns-2,
section.upsells.products ul.products.columns-3,
section.upsells.products ul.products.columns-4,
section.upsells.products ul.products.columns-5,
section.upsells.products ul.products.columns-6 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  row-gap: 1.25rem !important;
  column-gap: 1rem !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Remove ::before pseudo-element from related/upsell products */
section.related.products ul.products::before,
section.related.products .products::before,
section.upsells.products ul.products::before,
section.upsells.products .products::before {
  display: none !important;
  content: none !important;
}

/* Override WooCommerce column classes */
.woocommerce .products.columns-1,
.woocommerce .products.columns-2,
.woocommerce .products.columns-3,
.woocommerce .products.columns-4,
.woocommerce .products.columns-5,
.woocommerce .products.columns-6,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6,
section.related.products .products.columns-1,
section.related.products .products.columns-2,
section.related.products .products.columns-3,
section.related.products .products.columns-4,
section.related.products .products.columns-5,
section.related.products .products.columns-6,
section.related.products ul.products.columns-1,
section.related.products ul.products.columns-2,
section.related.products ul.products.columns-3,
section.related.products ul.products.columns-4,
section.related.products ul.products.columns-5,
section.related.products ul.products.columns-6,
section.upsells.products .products.columns-1,
section.upsells.products .products.columns-2,
section.upsells.products .products.columns-3,
section.upsells.products .products.columns-4,
section.upsells.products .products.columns-5,
section.upsells.products .products.columns-6,
section.upsells.products ul.products.columns-1,
section.upsells.products ul.products.columns-2,
section.upsells.products ul.products.columns-3,
section.upsells.products ul.products.columns-4,
section.upsells.products ul.products.columns-5,
section.upsells.products ul.products.columns-6 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove ::before pseudo-element from all column class variations */
.woocommerce .products.columns-1::before,
.woocommerce .products.columns-2::before,
.woocommerce .products.columns-3::before,
.woocommerce .products.columns-4::before,
.woocommerce .products.columns-5::before,
.woocommerce .products.columns-6::before,
.woocommerce ul.products.columns-1::before,
.woocommerce ul.products.columns-2::before,
.woocommerce ul.products.columns-3::before,
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-5::before,
.woocommerce ul.products.columns-6::before {
  display: none !important;
  content: none !important;
}

/* Override any width calculations from WooCommerce column classes */
.woocommerce ul.products.columns-4 li.product,
.woocommerce .products.columns-4 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce .products.columns-3 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce .products.columns-2 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce .products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce .products.columns-6 li.product {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force first product to start at grid column 1 */
.woocommerce ul.products li.product:first-child,
.woocommerce .products li.product:first-child {
  grid-column-start: 1 !important;
  grid-column-end: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

@media (min-width: 768px) {
  .woocommerce .products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    row-gap: 1.25rem !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce .products,
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    row-gap: 1.25rem !important;
  }
}

@media (min-width: 1400px) {
  .woocommerce .products,
  .woocommerce ul.products {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    row-gap: 1.25rem !important;
  }
}

.woocommerce ul.products li.product,
.woocommerce .products li.product {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  float: none !important;
  clear: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  min-width: 0 !important;
  max-width: 100% !important;
  box-shadow: var(--shadow-sm);
  position: relative;
  grid-column: auto !important;
}

/* Override WooCommerce first/last classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce .products li.product.first,
.woocommerce .products li.product.last {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
  grid-column: auto !important;
}

/* Ensure grid starts at left edge */
.woocommerce .products,
.woocommerce ul.products {
  justify-items: stretch !important;
  align-items: stretch !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.2);
}

.woocommerce ul.products li.product a {
  display: block;
  text-decoration: none;
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  background-color: var(--color-bg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  position: relative;
  padding-top: 0;
  overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 1.5rem 1.5rem 0.75rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 3.2em;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
  color: var(--color-primary);
}

/* Product brand in loop (below title, above price) */
.woocommerce ul.products li.product .product-loop-brand {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  margin-left: 1.5rem;
}

.woocommerce ul.products li.product .product-loop-brand-link {
  color: var(--color-text-light);
  text-decoration: none;
}

.woocommerce ul.products li.product .product-loop-brand-link:hover {
  color: var(--color-primary);
}

/* Product loop price - base styles */
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  padding: 0 1.5rem 1rem 1.5rem;
  color: var(--color-success);
  font-weight: 700;
  font-size: 1.375rem;
  margin-top: auto;
  letter-spacing: -0.01em;
}

/* Price layout: row 1 = original, row 2 = current price + unit. Each .price-row is one visual row. */
.product-price-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem;
}

.product-price-stack > .price-row {
  display: block !important;
}

/* Current row: amount and unit stay on same line */
.product-price-stack .price-row-current .discounted-price,
.product-price-stack .price-row-current .price-unit {
  display: inline;
}

/* When WooCommerce outputs <del>+<ins>+unit in one .price-row-current, put original price on its own line */
.product-price-stack .price-row-current del {
  display: block !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price .original-price {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* Discount badge styling - applies to both shop and single product pages */
/* Override any WooCommerce default onsale styles */
span.onsale.general-discount-badge,
.general-discount-badge,
.woocommerce ul.products li.product .general-discount-badge,
.woocommerce ul.products li.product span.onsale.general-discount-badge,
.woocommerce-product-gallery__wrapper .general-discount-badge,
.woocommerce-product-gallery__wrapper span.onsale.general-discount-badge,
.single-product .general-discount-badge,
.single-product span.onsale.general-discount-badge {
  position: absolute !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  right: auto !important;
  background-color: #ef4444 !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
}

/* Remove any pseudo-elements from WooCommerce default onsale */
span.onsale.general-discount-badge::before,
.general-discount-badge::before {
  display: none !important;
  content: none !important;
}

/* Discounted price styling */
.woocommerce ul.products li.product .price .discounted-price {
  color: #ef4444;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}

/* Original price with discount styling */
.woocommerce ul.products li.product .price .original-price {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 1rem;
  text-decoration: line-through;
  line-height: 1.2;
}

/* ===== Single Product Page Discount Styles ===== */
/* Ensure product gallery wrapper has relative positioning for badge */
.woocommerce-product-gallery__wrapper {
  position: relative;
}

/* Single product price uses .product-price-stack for layout (see above) */

.single-product .summary .price .discounted-price {
  color: #ef4444;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.single-product .summary .price .original-price {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 1.125rem;
  text-decoration: line-through;
  line-height: 1.2;
}

/* ===== Related Products Grid ===== */
/* Ensure related products use the same grid layout as shop page */
section.related.products,
section.upsells.products {
  margin: 2.5rem 0 2.5rem 0.5rem;
  clear: both;
  width: 100%;
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
  grid-auto-rows: unset !important;
}

/* Ensure h2 and ul are block elements, not grid items */
section.related.products > h2,
section.related.products > ul,
section.related.products > .products,
section.upsells.products > h2,
section.upsells.products > ul,
section.upsells.products > .products {
  display: block;
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100%;
}

section.related.products > ul.products,
section.upsells.products > ul.products {
  display: grid !important;
}

section.related.products h2,
section.upsells.products h2 {
  margin-bottom: 1.5rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Force grid layout for related/upsell products - override any conflicting styles */
section.related.products .products,
section.related.products ul.products,
section.related.products ul,
section.upsells.products .products,
section.upsells.products ul.products,
section.upsells.products ul,
section.related.products ul.products.columns-2,
section.related.products ul.products.columns-3,
section.related.products ul.products.columns-4,
section.related.products ul.products.columns-5,
section.related.products ul.products.columns-6,
section.upsells.products ul.products.columns-2,
section.upsells.products ul.products.columns-3,
section.upsells.products ul.products.columns-4,
section.upsells.products ul.products.columns-5,
section.upsells.products ul.products.columns-6 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  row-gap: 1.25rem !important;
  column-gap: 1rem !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* Remove ::before pseudo-element from related/upsell products with column classes */
section.related.products ul.products.columns-2::before,
section.related.products ul.products.columns-3::before,
section.related.products ul.products.columns-4::before,
section.related.products ul.products.columns-5::before,
section.related.products ul.products.columns-6::before,
section.upsells.products ul.products.columns-2::before,
section.upsells.products ul.products.columns-3::before,
section.upsells.products ul.products.columns-4::before,
section.upsells.products ul.products.columns-5::before,
section.upsells.products ul.products.columns-6::before {
  display: none !important;
  content: none !important;
}

/* Ensure related/upsell product items use full width and grid positioning */
section.related.products .products li.product,
section.related.products ul.products li.product,
section.related.products ul li.product,
section.related.products ul.products.columns-2 li.product,
section.related.products ul.products.columns-3 li.product,
section.related.products ul.products.columns-4 li.product,
section.upsells.products .products li.product,
section.upsells.products ul.products li.product,
section.upsells.products ul li.product,
section.upsells.products ul.products.columns-2 li.product,
section.upsells.products ul.products.columns-3 li.product,
section.upsells.products ul.products.columns-4 li.product {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.woocommerce ul.products li.product .button {
  margin: 0 1.5rem 1.5rem 1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  text-align: center;
  display: block;
  width: calc(100% - 3rem);
  margin-top: auto;
  box-shadow: var(--shadow-sm);
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product .button:active {
  transform: translateY(0);
}

/* ===== WooCommerce Cart Styles ===== */
.woocommerce-cart-form {
  margin-bottom: 3rem;
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
  background-color: var(--color-bg-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.woocommerce table.shop_table thead {
  background-color: var(--color-bg);
}

.woocommerce table.shop_table th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  border-bottom: 2px solid var(--color-border);
}

.woocommerce table.shop_table td {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce table.shop_table .product-remove a {
  color: var(--color-danger);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.woocommerce table.shop_table .product-remove a:hover {
  color: #fff;
  background-color: var(--color-danger);
}

.woocommerce table.shop_table .product-thumbnail img {
  max-width: 100px;
  height: auto;
  border-radius: 8px;
}

.woocommerce-cart-form .actions {
  text-align: right;
  padding: 2rem;
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
  margin-top: 2rem;
}

.woocommerce-cart-form .coupon {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.woocommerce-cart-form .coupon input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 0.9375rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.woocommerce-cart-form .coupon input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ===== Shop Layout Wrapper - z-index below top-categories-container so category/brand dropdown overlays filter ===== */
.woocommerce-shop-layout-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* z-index below category/brand dropdown (1100) so dropdown overlays filter view */
.shop-filters-sidebar {
  flex: 0 0 280px;
  min-width: 0;
  margin-left: 1.25rem;
  position: relative;
  z-index: 100;
}

/* Hide filters sidebar on front page */
body.home .shop-filters-sidebar {
  display: none;
}

.shop-products-main {
  flex: 1;
  min-width: 0;
  margin-right: 1.25rem;
}

/* On front page, products main takes full width */
body.home .woocommerce-shop-layout-wrapper {
  gap: 0;
}

body.home .shop-products-main {
  flex: 1 1 100%;
  width: 100%;
}

/* ===== Filter Form Styles ===== */
.custom-webshop-filters {
  background: var(--color-bg-light);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  margin: 0;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 2rem;
}

.custom-webshop-filter-group {
  margin-bottom: 2rem;
}

.custom-webshop-filter-group:last-child {
  margin-bottom: 0;
}

.custom-webshop-filter-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.custom-webshop-filter-group input,
.custom-webshop-filter-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  background-color: var(--color-bg-light);
}

.custom-webshop-filter-group input:focus,
.custom-webshop-filter-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ===== Buttons ===== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button,
.woocommerce .button.alt {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  padding: 0.875rem 2rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button:hover,
.woocommerce .button.alt:hover {
  background-color: var(--color-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  text-decoration: none !important;
}

/* Override any WooCommerce default button colors */
.woocommerce a.button[style*="background"],
.woocommerce button.button[style*="background"],
.woocommerce input.button[style*="background"] {
  background-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}

/* ===== Sidebar ===== */
#secondary.widget-area {
  background-color: var(--color-bg-light);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-top: 0;
}

.widget {
  margin-bottom: 2.5rem;
}

.widget:last-child {
  margin-bottom: 0;
}

.widget-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-text);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
}

/* ===== Footer ===== */
.site-footer {
  background-color: #111827;
  color: #d1d5db;
  padding: 4rem 0 2rem 0;
  margin-top: 5rem;
}

.footer-container {
  width: 100%;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-widget-area {
  color: #9ca3af;
}

.footer-widget-area .widget-title {
  color: #fff;
  border-bottom-color: #374151;
}

.footer-widget-area a {
  color: #9ca3af;
  transition: color 0.2s ease;
}

.footer-widget-area a:hover {
  color: #fff;
}

.site-info {
  text-align: center;
  padding-top: 2.5rem;
  border-top: 1px solid #374151;
  color: #6b7280;
  font-size: 0.875rem;
}

.footer-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 0;
  flex-wrap: wrap;
}

.footer-menu a {
  color: #9ca3af;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: #fff;
}

.footer-privacy-links {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-privacy-links a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-privacy-links a:hover {
  color: #fff;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
  :root {
    --spacing-unit: 0.875rem;
  }

  .header-container {
    flex-wrap: nowrap;
    padding: 0 1.5rem;
    gap: 1rem;
  }

  .site-branding {
    flex-shrink: 0;
  }

  .menu-toggle {
    display: block;
  }

  .main-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: flex-end;
  }

  .header-cart {
    margin-left: 0;
    margin-top: 0;
    flex-shrink: 0;
  }

  .header-cart .cart-contents {
    margin-top: 0;
  }

  /* On mobile, don't pull search up so it aligns with cart and menu toggle */
  .header-search-wrap {
    margin-top: 0;
  }

  /* When menu is expanded, change to column layout */
  .main-navigation.menu-expanded {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .main-navigation.menu-expanded .header-search-wrap {
    width: 100%;
    margin-top: 0.5rem;
    order: 1;
  }

  .main-navigation.menu-expanded .header-search-toggle {
    margin: 0 auto;
  }

  .main-navigation.menu-expanded .header-cart {
    width: 100%;
    margin-top: 1rem;
  }

  .main-navigation.menu-expanded .header-cart .cart-contents {
    width: 100%;
    justify-content: center;
  }

  /* When menu is expanded, header container should wrap to column */
  .header-container.menu-expanded {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
  }

  .header-container.menu-expanded .site-branding {
    width: 100%;
  }

  .header-container.menu-expanded .main-navigation {
    width: 100%;
  }

  .main-navigation ul.primary-menu,
  .main-navigation #primary-menu,
  .main-navigation #primary-menu ul,
  .primary-menu,
  .primary-menu ul {
    display: none !important;
    flex-direction: column !important;
    width: 100%;
    margin-top: 1rem;
    gap: 0;
  }

  .main-navigation ul.primary-menu.active,
  .main-navigation #primary-menu.active,
  .main-navigation #primary-menu.active ul,
  .primary-menu.active,
  .primary-menu.active ul {
    display: flex !important;
  }

  .main-navigation ul.primary-menu li,
  .main-navigation #primary-menu li,
  .main-navigation #primary-menu ul li,
  .primary-menu li,
  .primary-menu ul li {
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }

  .main-navigation ul.primary-menu a,
  .main-navigation #primary-menu a,
  .main-navigation #primary-menu ul a,
  .primary-menu a,
  .primary-menu ul a {
    padding: 1rem 1.5rem;
    width: 100%;
  }

  #primary.content-area {
    padding: 20px;
  }

  .site-main {
    padding: 20px;
  }

  .breadcrumbs-container .content-area {
    padding: 0 20px;
  }

  .footer-widgets {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .woocommerce .products {
    grid-template-columns: 1fr;
    gap: 1rem;
    row-gap: 1.25rem;
  }

  .woocommerce table.shop_table {
    font-size: 0.875rem;
  }

  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 1rem 0.75rem;
  }

  .woocommerce-cart-form .coupon {
    flex-direction: column;
  }

  .custom-webshop-filters {
    padding: 1.5rem;
    position: static;
  }

  .woocommerce-shop-layout-wrapper {
    flex-direction: column;
    gap: 1.5rem;
  }

  .shop-filters-sidebar {
    flex: 1 1 100%;
    width: 100%;
  }

  .shop-products-main {
    flex: 1 1 100%;
    width: 100%;
  }

  h1 {
    font-size: 1.875rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
}

/* Hide sidebar on front page */
body.home #secondary,
body.home .widget-area,
body.home aside#secondary {
  display: none !important;
}

/* ===== Utility Classes ===== */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100000;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* ===== Loading States ===== */
.woocommerce .products.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ===== Pagination ===== */
.woocommerce-pagination,
.custom-webshop-pagination {
  margin: 3rem 0;
  padding: 2rem 0;
  border: none !important;
  border-top: none !important;
}

/* Override WooCommerce default pagination borders */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  border: none !important;
  border-right: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
}

.custom-webshop-pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.custom-webshop-per-page {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-webshop-per-page label {
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.custom-webshop-per-page select {
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  background-color: var(--color-bg-light);
  cursor: pointer;
}

.woocommerce-pagination .page-numbers,
.custom-webshop-pagination .page-numbers {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
  border: none !important;
}

.woocommerce-pagination .page-numbers li,
.custom-webshop-pagination .page-numbers li {
  margin: 0;
  padding: 0;
  border: none !important;
  border-right: none !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.woocommerce-pagination .page-numbers a,
.custom-webshop-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span:not(.current):not(.dots),
.custom-webshop-pagination .page-numbers span:not(.current):not(.dots) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px;
  color: var(--color-text);
  font-weight: 500;
  transition: all 0.2s ease;
  background-color: var(--color-bg-light);
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.woocommerce-pagination .page-numbers a:hover,
.custom-webshop-pagination .page-numbers a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce-pagination .page-numbers .current,
.custom-webshop-pagination .page-numbers .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Ensure dots also have the same width and alignment */
.woocommerce-pagination .page-numbers .dots,
.custom-webshop-pagination .page-numbers .dots {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Top Categories Display - z-index above shop layout and above brands section (front page)
   so category dropdown portal stacks above filter sidebar and brands scroll */
.top-categories-container {
  position: relative;
  z-index: 200;
  isolation: isolate;
  margin-bottom: 0;
  padding: 20px 0;
}

/* Categories-only container: higher z-index so its dropdown appears above brands section on front page */
.top-categories-container:not(.top-brands-container) {
  z-index: 210;
}

/* Top categories use #primary padding; no extra horizontal margin */
body.woocommerce-shop .top-categories-container {
  margin-left: 0;
  margin-right: 0;
}

/* Izdvajamo iz ponude – horizontal product scroll (front page) */
.izdvajamo-iz-ponude-container {
  position: relative;
  z-index: 150;
  margin-bottom: 0;
  padding: 20px 0;
}

.izdvajamo-iz-ponude-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.izdvajamo-iz-ponude-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.izdvajamo-iz-ponude-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.izdvajamo-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.izdvajamo-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.izdvajamo-iz-ponude-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.izdvajamo-iz-ponude-scroll::-webkit-scrollbar {
  height: 6px;
}

.izdvajamo-iz-ponude-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border, #ddd);
  border-radius: 3px;
}

.izdvajamo-iz-ponude-scroll .products.izdvajamo-products {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: unset !important;
}

/* Override .woocommerce .products.columns-* li.product { width: 100% !important } so items stay 220px */
.izdvajamo-iz-ponude-scroll .products.izdvajamo-products li.product {
  flex: 0 0 auto !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 650px !important;
  margin: 0;
}

/* Company info + map (front page) */
.company-info-section {
  margin-top: 2rem;
  padding: 2rem 0;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}

.company-info-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.company-info-title {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.company-info-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.company-info-content p {
  margin: 0 0 0.5rem 0;
}

.company-info-content a {
  color: var(--color-primary);
}

.company-cards-label {
  margin: 0.75rem 0 0.35rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.company-cards-icons {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.company-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.company-card-logo {
  height: 28px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  vertical-align: middle;
}

.company-payway-sticker-link {
  display: inline-block;
  line-height: 0;
}

.company-payway-sticker {
  display: block;
  max-height: 140px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

.company-map-block {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.company-map-iframe {
  display: block;
  min-height: 300px;
}

@media (max-width: 768px) {
  .company-info-inner {
    grid-template-columns: 1fr;
  }

  .izdvajamo-iz-ponude-scroll .products.izdvajamo-products li.product {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* Top brands (home page) – reuse top-categories layout; z-index below categories so category dropdown overlays */
.top-brands-container.top-categories-container {
  z-index: 100;
  margin-left: 0;
  margin-right: 0;
}

.top-brands-container.js-dropdown-portal .brand-item .subcategories-dropdown {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* Titles above category/brand scroll */
.top-taxonomy-title,
.top-categories-title,
.top-brands-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Horizontal scroll contained to screen; dropdown shown via JS portal */
.top-categories-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.top-categories-scroll::-webkit-scrollbar {
  height: 6px;
}

.top-categories-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border, #ddd);
  border-radius: 3px;
}

/* When portal is active, in-card dropdown stays collapsed (JS clones content to portal) */
.top-categories-container.js-dropdown-portal
  .category-item
  .subcategories-dropdown {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* Portal: fixed-position dropdown shown by JS so it isn't clipped.
   z-index above filter view (1000) and above parent scroll entries (10). */
.subcategories-dropdown-portal {
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  min-width: 120px;
  max-width: 140px;
  background-color: #fff;
  background-color: var(--color-bg-light, #fff);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  max-height: 400px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.subcategories-dropdown-portal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.subcategories-dropdown-portal .subcategories-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}

.category-item {
  position: relative;
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 140px;
  background-color: var(--color-bg-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.category-item .category-link {
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* z-index kept below dropdown (1100) so dropdown overlays sibling items */
.category-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  z-index: 10;
}

.category-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
}

.category-image {
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 0.75rem;
  border-radius: 8px;
}

.category-name {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--color-text);
}

.category-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-left: 0.25rem;
}

/* Higher than parent .category-item (z-index: 10) and filter view (1000) */
.subcategories-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  background-color: var(--color-bg-light, #fff);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 1100;
  margin-top: 0;
}

.category-item:hover .subcategories-dropdown {
  max-height: 400px;
  opacity: 1;
  visibility: visible;
}

.subcategories-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}

.subcategory-item {
  margin: 0;
  padding: 0;
}

.subcategory-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.2s ease;
}

.subcategory-link:hover {
  background-color: var(--color-bg);
}

.subcategory-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.subcategory-name {
  font-size: 0.875rem;
  color: var(--color-text);
}

.subcategory-name .category-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-left: 0.25rem;
}

/* Responsive adjustments for horizontal category scroll */
@media (max-width: 768px) {
  .top-categories-scroll {
    gap: 1rem;
  }

  .category-item {
    min-width: 100px;
    max-width: 120px;
  }

  .category-image {
    max-width: 80px;
    max-height: 80px;
  }

  .category-name {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .top-categories-scroll {
    gap: 0.75rem;
  }

  .category-item {
    min-width: 90px;
    max-width: 100px;
  }

  .category-image {
    max-width: 60px;
    max-height: 60px;
  }

  .category-name {
    font-size: 0.75rem;
  }

  .category-link {
    padding: 0.75rem 0.5rem;
  }
}

/* ===== Global WooCommerce Overrides ===== */
/* Override any default WooCommerce colors to match theme */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce .product .price,
.single-product .price,
.single-product .summary .price {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.woocommerce .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del,
.single-product .price del,
.single-product .summary .price del {
  color: var(--color-text-light) !important;
  opacity: 1 !important;
}

.woocommerce .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.woocommerce ul.products li.product .price ins,
.single-product .price ins,
.single-product .summary .price ins {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

/* Override any purple/blue button colors */
.woocommerce a.button[class*="alt"],
.woocommerce button.button[class*="alt"],
.woocommerce input.button[class*="alt"],
.woocommerce .button[class*="alt"],
.woocommerce a.button:not([class*="primary"]):not([class*="red"]),
.woocommerce button.button:not([class*="primary"]):not([class*="red"]),
.woocommerce input.button:not([class*="primary"]):not([class*="red"]) {
  background-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ===== Single Product Page Styles ===== */
.single-product {
  margin: 0;
  padding: 0;
}

.single-product .site-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.single-product .product {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  padding: 0;
  align-items: start;
}

/* Make tabs and related products span full width below the product grid */
.single-product .product .woocommerce-tabs,
.single-product .product section.related.products,
.single-product .product section.upsells.products {
  grid-column: 1 / -1;
  width: 100%;
  clear: both;
}

/* Add left margin to related products section */
.single-product .product section.related.products {
  margin-left: 1.25rem !important;
}

.single-product .product .woocommerce-product-gallery {
  width: 100% !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery__wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery__image {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery__image img,
.single-product .product .woocommerce-product-gallery__image .wp-post-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery__image a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery figure {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.single-product .product .woocommerce-product-gallery figure img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Ensure product gallery images fill the container */
.single-product .product .woocommerce-product-gallery .wp-post-image,
.single-product
  .product
  .woocommerce-product-gallery
  img:not(.emoji):not(.zoomImg) {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Thumbnail gallery styling */
.single-product .product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.single-product .product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 calc(25% - 0.5625rem);
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.single-product
  .product
  .woocommerce-product-gallery
  .flex-control-thumbs
  li
  img {
  width: 100%;
  height: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  border: 2px solid transparent;
  border-radius: 8px;
}

.single-product
  .product
  .woocommerce-product-gallery
  .flex-control-thumbs
  li
  img:hover,
.single-product
  .product
  .woocommerce-product-gallery
  .flex-control-thumbs
  li
  img.flex-active {
  opacity: 1;
  border-color: var(--color-primary);
}

.single-product .product .summary {
  padding: 0;
  margin: 0;
}

.single-product .product .summary .product_title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.single-product .product .summary .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.single-product .product .summary .price del {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 1.125rem;
  text-decoration: line-through;
  margin-right: 0.5rem;
}

.single-product .product .summary .price ins {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.single-product
  .product
  .summary
  .woocommerce-product-details__short-description {
  margin-bottom: 1.5rem;
  color: var(--color-text);
  line-height: 1.7;
}

.single-product
  .product
  .summary
  .woocommerce-product-details__short-description
  p {
  margin-bottom: 1rem;
}

.single-product form.cart {
  margin: 2rem 0;
  padding: 0;
}

.single-product form.cart .quantity {
  margin-right: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.single-product form.cart .quantity input[type="number"] {
  width: 80px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  background-color: var(--color-bg-light);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.single-product form.cart .quantity input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 0, 0, 0.1);
}

.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button,
.single-product .button.single_add_to_cart_button {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  padding: 0.875rem 2rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover,
.single-product .button.single_add_to_cart_button:hover {
  background-color: var(--color-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.single-product .single_add_to_cart_button:disabled,
.single-product button.single_add_to_cart_button:disabled,
.single-product .button.single_add_to_cart_button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.single-product .woocommerce-variation-add-to-cart .button {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.single-product .woocommerce-variation-add-to-cart .button:hover {
  background-color: var(--color-primary-dark) !important;
}

.single-product table.variations {
  margin: 1.5rem 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.single-product table.variations tr {
  display: block;
  margin-bottom: 1rem;
}

.single-product table.variations th {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  padding: 0;
  text-align: left;
}

.single-product table.variations td {
  display: block;
  padding: 0;
}

.single-product table.variations select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  background-color: var(--color-bg-light);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

.single-product table.variations select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 0, 0, 0.1);
}

.single-product .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-text-light);
  font-size: 0.875rem;
  text-decoration: underline;
}

.single-product .reset_variations:hover {
  color: var(--color-primary);
}

.single-product .product_meta {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.single-product .product_meta span {
  display: block;
  margin-bottom: 0.5rem;
}

.single-product .product_meta span.sku_wrapper,
.single-product .product_meta span.posted_in,
.single-product .product_meta span.tagged_as {
  color: var(--color-text);
}

.single-product .product_meta a {
  color: var(--color-primary);
}

.single-product .product_meta a:hover {
  color: var(--color-primary-dark);
}

/* Responsive single product layout */
@media (max-width: 968px) {
  .single-product .product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ===== WooCommerce Product Tabs ===== */
.woocommerce-tabs {
  margin: 3rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  display: flex;
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
}

.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.wc-tabs li {
  margin: 0;
  padding: 0;
  border: none;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.wc-tabs li a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  position: relative;
}

.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.wc-tabs li a:hover {
  color: var(--color-primary);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.wc-tabs li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-tabs .panel {
  padding: 2rem 0;
  margin: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel > *:first-child,
.woocommerce-tabs .panel > *:first-child {
  margin-top: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel > *:last-child,
.woocommerce-tabs .panel > *:last-child {
  margin-bottom: 0;
}

/* Description Tab */
#tab-description {
  max-width: 100%;
  margin: 0;
  padding: 0 1.5rem;
}

#tab-description h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  padding: 0;
  color: var(--color-text);
}

#tab-description > * {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

#tab-description p {
  margin-bottom: 1.25rem;
  margin-left: 0;
  margin-right: 0;
  line-height: 1.7;
  color: var(--color-text);
}

#tab-description p:last-child {
  margin-bottom: 0;
}

#tab-description ul,
#tab-description ol {
  margin-bottom: 1.25rem;
  margin-left: 2rem;
  margin-right: 0;
  padding-left: 0;
}

#tab-description ul:last-child,
#tab-description ol:last-child {
  margin-bottom: 0;
}

#tab-description li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

#tab-description img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

/* Additional Information Tab */
#tab-additional_information {
  max-width: 100%;
  margin: 0;
  padding: 0 1.5rem;
}

#tab-additional_information h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  padding: 0;
  color: var(--color-text);
}

#tab-additional_information > * {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

#tab-additional_information .woocommerce-product-attributes {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

#tab-additional_information .woocommerce-product-attributes th {
  width: 30%;
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
  text-align: left;
  margin: 0;
}

#tab-additional_information .woocommerce-product-attributes td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  margin: 0;
}

#tab-additional_information .woocommerce-product-attributes tr:last-child th,
#tab-additional_information .woocommerce-product-attributes tr:last-child td {
  border-bottom: none;
}

#tab-additional_information .woocommerce-product-attributes p {
  margin: 0;
  padding: 0;
}

/* Reviews Tab */
#tab-reviews {
  max-width: 100%;
}

#tab-reviews .woocommerce-Reviews {
  width: 100%;
  max-width: 100%;
}

#tab-reviews .woocommerce-Reviews-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--color-text);
}

#tab-reviews .woocommerce-noreviews {
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: 2rem;
}

#tab-reviews .commentlist {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
}

#tab-reviews .commentlist li.review {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

#tab-reviews .commentlist li.review:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#tab-reviews .comment_container {
  display: flex;
  gap: 1.5rem;
}

#tab-reviews .comment_container .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}

#tab-reviews .comment-text {
  flex: 1;
}

#tab-reviews .comment-text .star-rating {
  margin-bottom: 0.75rem;
}

#tab-reviews .comment-text .meta {
  margin-bottom: 0.75rem;
}

#tab-reviews .comment-text .meta strong {
  font-weight: 600;
  color: var(--color-text);
}

#tab-reviews .comment-text .meta time {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

#tab-reviews .comment-text .description {
  color: var(--color-text);
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* Review Form */
#review_form_wrapper {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

#review_form_wrapper .comment-reply-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

#review_form_wrapper .comment-form-rating {
  margin-bottom: 1.5rem;
}

#review_form_wrapper .comment-form-rating label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

#review_form_wrapper .comment-form-comment label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

#review_form_wrapper .comment-form-comment textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.6;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  resize: vertical;
  min-height: 120px;
}

#review_form_wrapper .comment-form-comment textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 0, 0, 0.1);
}

#review_form_wrapper .comment-form-author label,
#review_form_wrapper .comment-form-email label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

#review_form_wrapper .comment-form-author input,
#review_form_wrapper .comment-form-email input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#review_form_wrapper .comment-form-author input:focus,
#review_form_wrapper .comment-form-email input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 0, 0, 0.1);
}

#review_form_wrapper .form-submit {
  margin-top: 1.5rem;
}

#review_form_wrapper #submit {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.875rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  float: none;
}

#review_form_wrapper #submit:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Star Rating */
.star-rating {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  width: 5.4em;
  font-family: star;
  color: #ffb900;
}

.star-rating::before {
  content: "\73\73\73\73\73";
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}

.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}

.star-rating span::before {
  content: "\53\53\53\53\53";
  top: 0;
  position: absolute;
  left: 0;
}

/* Responsive adjustments for tabs */
@media (max-width: 768px) {
  .woocommerce-tabs ul.tabs,
  .woocommerce-tabs ul.wc-tabs {
    flex-wrap: wrap;
  }

  .woocommerce-tabs ul.tabs li a,
  .woocommerce-tabs ul.wc-tabs li a {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }

  #tab-description h2,
  #tab-additional_information h2,
  #tab-reviews .woocommerce-Reviews-title {
    font-size: 1.5rem;
  }

  #tab-additional_information .woocommerce-product-attributes th,
  #tab-additional_information .woocommerce-product-attributes td {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  #tab-reviews .comment_container {
    flex-direction: column;
  }

  #tab-reviews .comment_container .avatar {
    width: 50px;
    height: 50px;
  }
}