/* ============================================================
   IPMCKART — CATEGORY PAGE PREMIUM LIGHT THEME
   Brand: Red (#e5101a) accents on clean white canvas
   Fonts: Barlow Condensed (headings) + Figtree (body)
   ============================================================ */

/* --- Design tokens --- */
:root {
  --cat-bg:            oklch(0.97 0.004 25);
  --cat-surface:       oklch(1.00 0.000 0);
  --cat-surface-alt:   oklch(0.95 0.006 25);
  --cat-accent:        oklch(0.50 0.220 25);
  --cat-accent-dim:    oklch(0.50 0.220 25 / 0.08);
  --cat-accent-hover:  oklch(0.44 0.220 25);
  --cat-text-1:        oklch(0.18 0.012 25);
  --cat-text-2:        oklch(0.42 0.016 25);
  --cat-text-3:        oklch(0.62 0.010 25);
  --cat-border:        oklch(0.88 0.010 25);
  --cat-border-focus:  oklch(0.50 0.220 25 / 0.35);
  --cat-price:         oklch(0.50 0.220 25);
  --cat-shadow-sm:     0 2px 8px oklch(0.18 0.012 25 / 0.07);
  --cat-shadow-md:     0 4px 20px oklch(0.18 0.012 25 / 0.12);
  --cat-shadow-lg:     0 8px 32px oklch(0.18 0.012 25 / 0.15);
  --cat-radius:        10px;
  --cat-radius-sm:     6px;
}

/* ── Page shell ──────────────────────────────────────── */
body {
  background-color: var(--cat-bg) !important;
  color: var(--cat-text-1) !important;
  font-family: 'Figtree', 'Poppins', sans-serif !important;
  font-size: 16px !important;
}

.page-wrapper {
  background-color: var(--cat-bg) !important;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar-shop,
.sidebar-wrapper {
  font-family: 'Figtree', sans-serif !important;
}

.sidebar-shop .widget,
.sidebar-wrapper .widget {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--cat-shadow-sm) !important;
}

.sidebar-shop .widget-title,
.sidebar-wrapper .widget-title {
  font-family: 'Barlow Condensed', 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--cat-text-1) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--cat-border) !important;
  position: relative !important;
}

.sidebar-shop .widget-title::after,
.sidebar-wrapper .widget-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--cat-accent);
  border-radius: 2px;
}

/* Category list */
.cat-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cat-list > li {
  border-bottom: 1px solid var(--cat-border) !important;
}

.cat-list > li:last-child {
  border-bottom: none !important;
}

.cat-list > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 6px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cat-text-1) !important;
  text-decoration: none !important;
  transition: color 0.18s ease, background 0.18s ease !important;
  border-radius: var(--cat-radius-sm) !important;
  min-height: 38px !important;
}

.cat-list > li > a:hover {
  color: var(--cat-accent) !important;
  background: var(--cat-accent-dim) !important;
  text-decoration: none !important;
  padding-left: 10px !important;
}

.cat-list > li.active > a,
.cat-list > li.current > a {
  color: var(--cat-accent) !important;
  font-weight: 600 !important;
  background: var(--cat-accent-dim) !important;
  padding-left: 10px !important;
}

/* Subcategory list */
.cat-sublist {
  list-style: none !important;
  margin: 0 0 8px 12px !important;
  padding: 0 !important;
}

.cat-sublist li a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 6px !important;
  font-size: 14px !important;
  color: var(--cat-text-2) !important;
  text-decoration: none !important;
  border-radius: var(--cat-radius-sm) !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}

.cat-sublist li a:hover {
  color: var(--cat-accent) !important;
  background: var(--cat-accent-dim) !important;
  text-decoration: none !important;
}

.cat-sublist li.active a {
  color: var(--cat-accent) !important;
  font-weight: 600 !important;
}

/* Product count badges */
.products-count,
.cat-list .products-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  background: var(--cat-accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
}

/* ── Search / Filter widget ─────────────────────────── */
.search-filters-widget {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--cat-shadow-sm) !important;
}

.search-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-section {
  border-bottom: 1px solid var(--cat-border);
  padding-bottom: 14px;
}

.filter-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.filter-group-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--cat-text-2) !important;
  margin-bottom: 10px !important;
  display: block;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-option {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cat-text-2) !important;
  background: var(--cat-surface) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.filter-option:hover {
  border-color: var(--cat-accent) !important;
  color: var(--cat-accent) !important;
  background: var(--cat-accent-dim) !important;
}

.filter-option.active,
.filter-option[aria-pressed="true"] {
  background: var(--cat-accent) !important;
  border-color: var(--cat-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Active filters bar */
.filters-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  margin-bottom: 8px !important;
}

.filters-bar-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cat-text-2) !important;
  white-space: nowrap !important;
}

.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 12px !important;
  background: var(--cat-surface-alt) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cat-text-1) !important;
}

.filter-chip-remove,
.filter-chip .remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--cat-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease !important;
}

.filter-chip-remove:hover,
.filter-chip .remove:hover {
  background: var(--cat-accent-hover) !important;
}

#js-clear-filters {
  font-size: 13px !important;
  color: var(--cat-accent) !important;
  background: none !important;
  border: none !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  transition: color 0.18s ease !important;
}

#js-clear-filters:hover {
  color: var(--cat-accent-hover) !important;
}

/* ── Toolbox / sort bar ──────────────────────────────── */
.toolbox {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--cat-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.toolbox-left,
.toolbox-right {
  color: var(--cat-text-1) !important;
}

.toolbox .toolbox-item {
  color: var(--cat-text-1) !important;
}

.toolbox .toolbox-item label {
  color: var(--cat-text-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.toolbox select,
.toolbox .form-control {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  color: var(--cat-text-1) !important;
  border-radius: var(--cat-radius-sm) !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
}

.toolbox select:focus,
.toolbox .form-control:focus {
  border-color: var(--cat-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--cat-border-focus) !important;
}

.showing-results,
.toolbox-info,
.toolbox-show label {
  font-size: 14px !important;
  color: var(--cat-text-2) !important;
}

/* Grid/list view toggle buttons */
.toolbox .layout-btn {
  color: var(--cat-text-3) !important;
  background: transparent !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius-sm) !important;
  padding: 5px 8px !important;
  transition: all 0.18s ease !important;
}

.toolbox .layout-btn.active,
.toolbox .layout-btn:hover {
  color: var(--cat-accent) !important;
  border-color: var(--cat-accent) !important;
  background: var(--cat-accent-dim) !important;
}

/* ── Product card animation ──────────────────────────── */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Product cards ───────────────────────────────────── */
.product-default {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  box-shadow: var(--cat-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  font-family: 'Figtree', sans-serif !important;
  position: relative !important;
  animation: cardReveal 0.45s ease-out both !important;
  animation-delay: calc(var(--card-i, 0) * 60ms) !important;
}

@media (prefers-reduced-motion: reduce) {
  .product-default {
    animation: none !important;
  }
  .product-default:hover {
    transform: none !important;
  }
}

.product-default:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--cat-shadow-lg) !important;
  border-color: var(--cat-accent) !important;
}

/* Red highlight on top edge on hover */
.product-default::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cat-accent);
  border-radius: var(--cat-radius) var(--cat-radius) 0 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.product-default:hover::before {
  opacity: 1;
}

/* Product image area */
.product-default figure {
  background: #f7f7f7 !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
}

.product-default figure img {
  transition: transform 0.35s ease !important;
  object-fit: contain !important;
  max-height: 220px !important;
  width: 100% !important;
}

.product-default:hover figure img {
  transform: scale(1.05) !important;
}

/* Product action overlay buttons */
.product-default .product-action {
  background: rgba(255, 255, 255, 0.95) !important;
}

.product-default .btn-quickview {
  background: var(--cat-surface) !important;
  color: var(--cat-text-1) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
}

.product-default .btn-quickview:hover {
  background: var(--cat-accent) !important;
  color: #fff !important;
  border-color: var(--cat-accent) !important;
}

/* Product details section */
.product-default .product-details {
  padding: 14px 16px 16px !important;
  background: var(--cat-surface) !important;
}

.product-default .product-category {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--cat-text-3) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.product-default .product-title {
  margin: 0 0 10px !important;
}

.product-default .product-title a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cat-text-1) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.18s ease !important;
  font-family: 'Figtree', sans-serif !important;
}

.product-default .product-title a:hover {
  color: var(--cat-accent) !important;
  text-decoration: none !important;
}

/* Price box */
.product-default .price-box {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.product-default .new-price,
.product-default .product-price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cat-price) !important;
  font-family: 'Figtree', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}

.product-default .old-price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cat-text-3) !important;
  text-decoration: line-through !important;
}

/* Add to cart button */
.product-default .btn-add-cart,
.product-default .add-to-cart-btn,
.product-default .btn.btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: var(--cat-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cat-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Figtree', sans-serif !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.12s ease !important;
  letter-spacing: 0.02em !important;
}

.product-default .btn-add-cart:hover,
.product-default .add-to-cart-btn:hover,
.product-default .btn.btn-primary:hover {
  background: var(--cat-accent-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.product-default .btn-add-cart:active,
.product-default .add-to-cart-btn:active {
  transform: translateY(0) !important;
}

/* Badges / labels */
.product-default .product-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

.product-default .label-new {
  background: var(--cat-accent) !important;
  color: #fff !important;
}

.product-default .label-sale {
  background: #ff7c00 !important;
  color: #fff !important;
}

/* Rating stars */
.product-default .ratings-container {
  margin-bottom: 8px !important;
}

.product-default .product-ratings,
.product-default .ratings {
  color: #f59e0b !important;
  font-size: 13px !important;
}

/* ── Cards column stagger container ─────────────────── */
#js-product-grid .col-6,
#js-product-grid .col-sm-4,
#js-product-grid .col-md-4,
#js-product-grid .col-lg-4,
#js-product-grid .col-xl-3,
#js-product-grid [class*="col-"] {
  padding: 8px !important;
}

/* ── Load More button ────────────────────────────────── */
#js-load-more,
.btn-load-more,
[id*="load-more"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 36px !important;
  background: transparent !important;
  color: var(--cat-accent) !important;
  border: 2px solid var(--cat-accent) !important;
  border-radius: var(--cat-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Figtree', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  margin: 24px auto 0 !important;
}

#js-load-more:hover,
.btn-load-more:hover {
  background: var(--cat-accent) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px oklch(0.50 0.220 25 / 0.30) !important;
}

/* ── Pagination ──────────────────────────────────────── */
.toolbox-pagination {
  margin-top: 24px !important;
}

.toolbox-pagination .pagination .page-item .page-link {
  background: var(--cat-surface) !important;
  border-color: var(--cat-border) !important;
  color: var(--cat-text-1) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

.toolbox-pagination .pagination .page-item .page-link:hover {
  background: var(--cat-accent-dim) !important;
  border-color: var(--cat-accent) !important;
  color: var(--cat-accent) !important;
}

.toolbox-pagination .pagination .page-item.active .page-link {
  background: var(--cat-accent) !important;
  border-color: var(--cat-accent) !important;
  color: #fff !important;
}

/* ── Category hero bar ───────────────────────────────── */
.cat-hero {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--cat-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cat-hero::before {
  content: '';
  display: block;
  width: 4px;
  height: 28px;
  background: var(--cat-accent);
  border-radius: 4px;
  flex-shrink: 0;
}

.cat-hero .page-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cat-text-1) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.cat-hero .product-count-label {
  font-size: 14px !important;
  color: var(--cat-text-3) !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.breadcrumb-nav .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}

.breadcrumb-nav .breadcrumb-item a {
  color: var(--cat-text-2) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--cat-accent) !important;
}

.breadcrumb-nav .breadcrumb-item.active {
  color: var(--cat-text-1) !important;
  font-size: 14px !important;
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  color: var(--cat-text-3) !important;
}

/* ── Empty state ─────────────────────────────────────── */
#js-product-grid:empty::after,
.empty-state-msg {
  display: block;
  padding: 60px 20px;
  text-align: center;
  color: var(--cat-text-2);
  font-size: 16px;
}

/* ── Skeleton loading shimmer ────────────────────────── */
.product-skeleton {
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  border-radius: var(--cat-radius) !important;
  overflow: hidden !important;
}

.skeleton-line {
  background: linear-gradient(
    90deg,
    var(--cat-surface-alt) 25%,
    oklch(0.92 0.006 25) 50%,
    var(--cat-surface-alt) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.4s infinite !important;
  border-radius: 4px !important;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none !important; }
}

/* ── Mobile responsive ───────────────────────────────── */
@media (max-width: 991px) {
  .sidebar-shop {
    margin-bottom: 24px !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px !important;
  }

  .sidebar-shop .widget,
  .sidebar-wrapper .widget,
  .search-filters-widget {
    padding: 14px !important;
  }

  .cat-list > li > a {
    font-size: 15px !important;
    min-height: 44px !important;
  }

  .product-default .product-title a {
    font-size: 14px !important;
  }

  .product-default .new-price,
  .product-default .product-price {
    font-size: 16px !important;
  }

  .product-default .btn-add-cart,
  .product-default .add-to-cart-btn {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  .cat-hero .page-title {
    font-size: 18px !important;
  }

  #js-product-grid .col-6,
  #js-product-grid [class*="col-"] {
    padding: 5px !important;
  }

  #js-load-more,
  .btn-load-more {
    padding: 11px 28px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
}

/* ── Override any dark bootstrap/theme remnants ─────── */
.shop-container,
.products-container,
.main-content {
  background: transparent !important;
}

/* Ensure Bootstrap card overrides don't bleed in */
.product-default.card {
  border: 1px solid var(--cat-border) !important;
  background: var(--cat-surface) !important;
}