/* ==========================================================================
   webshop_theme — product_list.css
   Overrides the /all-products (and item-group) product listing page.
   Every selector targets an existing Frappe/Webshop class or id.
   Depends on design tokens in theme.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page scaffolding
      #page-index wraps the whole /all-products page.
      .page-content / .page-content-wrapper come from web.html layout.
   -------------------------------------------------------------------------- */
#page-index,
[data-doctype="Item Group"] {
  background-color: var(--bg-base) !important;
}

/* "All Products" heading rendered in {% block header %} */
#page-index .page-header,
[data-doctype="Item Group"] .page-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-3xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--space-8) !important;
}

/* Main row (sidebar + product grid sit inside this) */
#page-index .row,
[data-doctype="Item Group"] .row {
  --bs-gutter-x: 1.5rem;
}


/* --------------------------------------------------------------------------
   2. Toolbar: search input + view togglers
      .toolbar is JS-injected inside #product-listing
   -------------------------------------------------------------------------- */
.toolbar {
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* Search wrapper */
.toolbar .input-group {
  position: relative;
}

/* Search input — #search-box */
#search-box {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-4) var(--space-3) 2.75rem !important;
  height: 42px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

#search-box::placeholder {
  color: var(--text-muted) !important;
}

#search-box:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
  background-color: var(--bg-elevated) !important;
}

/* Search icon (SVG overlay) */
.search-icon {
  color: var(--text-muted);
  pointer-events: none;
  z-index: 2;
}

/* Search results dropdown */
#search-results-container {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-2) var(--space-3) !important;
  margin-top: var(--space-1);
}

#search-results-container .recent-search {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-default);
}

#search-results-container .recent-search:hover {
  background-color: var(--accent-muted) !important;
  color: var(--accent);
}

#search-results-container .category-chip {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-xs) !important;
}

/* View toggle container */
.toggle-container {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

#toggle-view {
  float: none !important;
}

/* List / Grid view buttons — #list, #image-view */
#list,
#image-view,
.btn-list-view,
.btn-grid-view {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base) !important;
  box-shadow: none !important;
}

#list:hover,
#image-view:hover,
.btn-list-view:hover,
.btn-grid-view:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Active state (JS adds .btn-primary) */
#list.btn-primary,
#image-view.btn-primary,
.btn-list-view.btn-primary,
.btn-grid-view.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  box-shadow: none !important;
}

.toggle-container .icon {
  color: inherit;
}


/* --------------------------------------------------------------------------
   3. Sub-category pills
      Rendered by JS via render_item_sub_categories()
   -------------------------------------------------------------------------- */
.sub-category-container.scroll-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.category-pill {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  transition: color var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base);
  cursor: pointer;
}

.category-pill:hover {
  color: var(--accent);
  border-color: var(--border-accent);
  background-color: var(--accent-muted);
}


/* --------------------------------------------------------------------------
   4. Product card — grid view
      Structure: .col-sm-4.item-card > .card.text-left > …
      The .card border:none rule already in webshop SCSS, so we add ours.
   -------------------------------------------------------------------------- */
.item-card-group-section .item-card {
  padding: var(--space-2) !important;
}

/* The card itself */
.item-card-group-section .card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  height: 100% !important;
  overflow: hidden;
  transition:
    border-color var(--duration-slow) var(--ease-out),
    box-shadow   var(--duration-slow) var(--ease-out),
    transform    var(--duration-slow) var(--ease-out) !important;
}

.item-card-group-section .card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent),
              var(--shadow-lg),
              0 6px 32px rgba(201, 168, 76, 0.14) !important;
  transform: translateY(-4px);
}

/* Image container */
.item-card-group-section .card-img-container {
  background-color: var(--bg-elevated);
  overflow: hidden;
  height: 220px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-card-group-section .card-img {
  max-height: 210px !important;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.item-card-group-section .card:hover .card-img {
  transform: scale(1.05);
}

/* No-image placeholder */
.item-card-group-section .no-image,
.item-card-group-section .no-image-list {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  font-size: var(--text-2xl) !important;
  border-radius: 0 !important;
}

/* Card body */
.item-card-group-section .card-body {
  background-color: var(--bg-surface) !important;
  padding: var(--space-4) var(--space-5) var(--space-5) !important;
}

/* Product title */
.item-card-group-section .product-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: var(--leading-snug) !important;
  transition: color var(--transition-base);
}

.item-card-group-section .card:hover .product-title {
  color: var(--accent) !important;
}

/* Product category */
.item-card-group-section .product-category {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin: var(--space-1) 0 var(--space-3) !important;
}

/* Product price */
.item-card-group-section .product-price {
  font-family: var(--font-body) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  margin: var(--space-2) 0 !important;
}

/* Striked-through original price */
.item-card-group-section .striked-price {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}

/* Discount percentage label */
.item-card-group-section .product-info-green {
  color: #6fcf97 !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
}

/* Out of stock */
.item-card-group-section .out-of-stock {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}


/* --------------------------------------------------------------------------
   5. Add-to-Cart button
      .btn-add-to-cart-list  (visibility toggled on card hover / mobile always visible)
      .btn-explore-variants  (orange → gold)
      .go-to-cart-grid       (Go to Cart state)
   -------------------------------------------------------------------------- */
.item-card-group-section .btn-add-to-cart-list,
.item-card-group-section .btn.btn-add-to-cart-list,
.item-card-group-section .btn.btn-primary.btn-add-to-cart-list,
.btn-add-to-cart-list,
.btn.btn-primary.btn-add-to-cart-list {
  visibility: hidden;              /* webshop default — keep hidden until hover */
  background-color: #FACE68 !important;
  background: #FACE68 !important;
  border: 1px solid #FACE68 !important;
  color: #78350F !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: var(--space-2) var(--space-4) !important;
  width: 100%;
  margin-top: var(--space-3) !important;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base),
              transform       var(--duration-fast) var(--ease-out) !important;
  box-shadow: none !important;
}

/* Reveal on card hover */
.item-card-group-section .card:hover .btn-add-to-cart-list,
.item-card-group-section .card:focus-within .btn-add-to-cart-list {
  visibility: visible !important;
}

.btn-add-to-cart-list:hover,
.btn.btn-primary.btn-add-to-cart-list:hover {
  background-color: #e8924e !important;
  background: #e8924e !important;
  border-color: #e8924e !important;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.35) !important;
  transform: translateY(-1px);
  color: var(--text-inverse) !important;
}

/* Go-to-cart state */
.go-to-cart-grid {
  background-color: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  visibility: visible !important;
  margin-top: var(--space-2) !important;
  max-height: none !important;
}

.go-to-cart-grid:hover {
  background-color: var(--accent-muted) !important;
  color: var(--accent-light) !important;
}

/* Explore variants button */
.btn-explore-variants {
  visibility: hidden;
  background-color: var(--accent-muted) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  width: auto !important;
  min-width: unset !important;
  transition: background-color var(--transition-base),
              border-color var(--transition-base) !important;
}

.item-card-group-section .card:hover .btn-explore-variants,
.item-card-group-section .card:focus-within .btn-explore-variants {
  visibility: visible !important;
}

.btn-explore-variants:hover {
  background-color: rgba(201, 168, 76, 0.25) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

/* Mobile: always visible */
@media (max-width: 992px) {
  .btn-add-to-cart-list,
  .btn-explore-variants {
    visibility: visible !important;
  }
}


/* --------------------------------------------------------------------------
   6. Wishlist / Like action
      .like-action (grid) — hidden pill, revealed on hover
   -------------------------------------------------------------------------- */
.like-action,
.like-action-list {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
  transition: background-color var(--transition-base),
              border-color    var(--transition-base) !important;
}

.like-action:hover,
.like-action-list:hover {
  background-color: var(--accent-muted) !important;
  border-color: var(--accent) !important;
}

.like-action.like-action-wished,
.like-action-list.like-action-wished {
  background-color: rgba(244, 122, 122, 0.12) !important;
  border-color: rgba(244, 122, 122, 0.4) !important;
  visibility: visible !important;
}

/* Cart indicator badge */
.cart-indicator {
  background-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  border: 2px solid var(--bg-surface) !important;
}


/* --------------------------------------------------------------------------
   7. List-row view
      .list-row — shown when user switches to List View
   -------------------------------------------------------------------------- */
.list-row {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-bottom-color: var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-3) !important;
  transition: border-color var(--duration-slow) var(--ease-out),
              box-shadow   var(--duration-slow) var(--ease-out) !important;
}

.list-row:hover,
.list-row:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent),
              0 6px 32px rgba(201, 168, 76, 0.1) !important;
}

.list-row .product-title {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  transition: color var(--transition-base);
}

.list-row:hover .product-title {
  color: var(--accent) !important;
}

.list-row .product-category {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.list-row .product-price {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* List-view image */
.list-image {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   8. Filter sidebar
      .filters-section > .title-section + .filter-block(s)
   -------------------------------------------------------------------------- */

/* Sidebar panel */
.filters-section {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
}

/* Header row: "Filters" + "Clear All" */
.filters-section .title-section {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: var(--space-4) !important;
  margin-bottom: var(--space-5) !important;
}

.filters-section .filters-title {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
}

.filters-section .clear-filters {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  text-decoration: none;
  transition: color var(--transition-base) !important;
  margin-bottom: 0 !important;
}

.filters-section .clear-filters:hover {
  color: var(--accent) !important;
}

/* Individual filter group block */
.filters-section .filter-block {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}

.filters-section .filter-block:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Filter group label e.g. "BRAND", "COLOR" */
.filters-section .filter-label {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: var(--space-3) !important;
}

/* Search-within-filter input */
.filters-section .filter-lookup-input {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: border-color var(--transition-base) !important;
}

.filters-section .filter-lookup-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-muted) !important;
  outline: none !important;
}

/* Checkbox rows */
.filters-section .filter-lookup-wrapper.checkbox {
  padding: var(--space-2) var(--space-1) !important;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.filters-section .filter-lookup-wrapper.checkbox:hover {
  background-color: var(--accent-muted);
}

.filters-section .label-area {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}

.filters-section .filter-lookup-wrapper.checkbox:hover .label-area {
  color: var(--accent) !important;
}

/* Checkboxes & radios inside filters */
.filters-section .product-filter,
.filters-section .discount-filter {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Discount filter section (JS-appended) */
#discount-filters {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}


/* --------------------------------------------------------------------------
   9. Pagination
      .product-paging-area > .btn-prev / .btn-next
   -------------------------------------------------------------------------- */
.product-paging-area {
  margin-top: var(--space-10) !important;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.btn-prev,
.btn-next {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-6) !important;
  transition: background-color var(--transition-base),
              border-color     var(--transition-base),
              color            var(--transition-base),
              box-shadow       var(--transition-base) !important;
  box-shadow: none !important;
}

.btn-prev:not(:disabled):hover,
.btn-next:not(:disabled):hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.3) !important;
}

.btn-prev:disabled,
.btn-next:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   10. No-products / error state
   -------------------------------------------------------------------------- */
.item-card-group-section .cart-empty.frappe-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-16) !important;
  text-align: center;
}

.item-card-group-section .cart-empty-message {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  color: var(--text-secondary) !important;
}

.item-card-group-section .alert-error {
  background-color: rgba(224, 82, 82, 0.08) !important;
  border: 1px solid rgba(224, 82, 82, 0.3) !important;
  border-radius: var(--radius-md) !important;
  color: #e05252 !important;
}


/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* ── Tablet ── */
@media (max-width: 991px) {
  /* Stack filter sidebar above products */
  #page-index .row > [class*="col-md-3"],
  #page-index .row > [class*="col-md-9"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .filters-section {
    margin-bottom: var(--space-6) !important;
  }

  #page-index .page-header,
  [data-doctype="Item Group"] .page-header {
    font-size: var(--text-2xl) !important;
  }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .toolbar {
    flex-wrap: wrap;
    padding: var(--space-3) !important;
    gap: var(--space-2);
  }

  .toolbar .input-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .toggle-container {
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: flex-end;
    margin-top: var(--space-2);
  }

  .item-card-group-section .item-card {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .item-card-group-section .card-img-container {
    height: 160px !important;
  }

  .btn-prev,
  .btn-next {
    padding: var(--space-2) var(--space-4) !important;
    font-size: 11px !important;
  }
}

/* ── Small phones ── */
@media (max-width: 400px) {
  .item-card-group-section .item-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Hide redundant Go to Cart button — navbar cart icon serves this purpose */
.go-to-cart,
.go-to-cart-grid {
  display: none !important;
}