/**
 * listing.css — child_hummingbird
 * Covers: product grid layout, product cards (miniatures), flags/badges,
 *         sort/filter toolbar, pagination, empty state.
 *
 * Register in theme.yml:
 *   - id: child-listing
 *     path: assets/css/listing.css
 *     pages:
 *       - category
 *       - search
 *       - prices-drop
 *       - new-products
 *       - best-sales
 */

/* ============================================================
   SHARED — brand tokens
   ============================================================ */

:root {
  --brand-dark:      #0b69f6;
  --brand-radius:    0.625rem;
  --card-border:     #0b69f6;
  --card-shadow:     0 2px 8px rgba(0, 0, 0, 0.07);
  --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.13);
}

/* ============================================================
   1. PRODUCTS GRID
   ============================================================ */

/* Uniform 4-col grid on desktop, 2 on tablet, 1 on mobile */

@media (max-width: 767.98px) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
}

@media (max-width: 479.98px) {
  .products {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ============================================================
   2. PRODUCT CARD — outer article
   ============================================================ */

.product-miniature {
  container-type: inline-size;
  container-name: product-miniature;
  height: 100%;
}

/* Card inner — white card with border + subtle shadow */
.product-miniature__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--brand-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Hover lift —  style */
@media (hover: hover) {
  .product-miniature__inner:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    border-color: #c5cfe8;
  }

  /* Subtle image scale already in parent theme — keep it */
  .product-miniature__inner:hover .product-miniature__image {
    transform: scale(1.06);
  }

  /* Quick-view slides up on hover */
  .product-miniature__inner:hover .product-miniature__quickview-button {
    transform: translateY(-100%);
  }
}

/* ============================================================
   3. IMAGE AREA
   ============================================================ */

.product-miniature__top {
  position: relative;
  overflow: hidden;
  /* Fixed-aspect image box — prevents layout shift, matches  1:1 */
  aspect-ratio: 1 / 1;
  background: #f8f9fa;
  border-radius: var(--brand-radius) var(--brand-radius) 0 0;
}

.product-miniature__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* keep full product visible, no crop */
  transition: transform 0.3s ease;
}

/* ============================================================
   5. PRODUCT FLAGS / BADGES
   ============================================================ */

.product-flags {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

/* Base badge */
.product-flags .badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* "New" — brand blue */
.product-flags .badge:not(.discount) {
  background: var(--brand-dark);
  color: #fff;
  border: none;
}

/* "Discount / Sale" — red accent */
.product-flags .badge.discount {
  background: #E53935;
  color: #fff;
  border: none;
}

/* ============================================================
   6. CARD BODY — bottom section
   ============================================================ */

.product-miniature__bottom {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
  padding: 0.875rem;
}

.product-miniature__infos {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-grow: 1;
}

/* ============================================================
   7. PRODUCT TITLE
   ============================================================ */

.product-miniature__title {
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  text-decoration: none;
  /* Clamp to 2 lines max — matches Plaisio card titles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-miniature__title:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* ============================================================
   8. PRICE BLOCK
   ============================================================ */

.product-miniature__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: auto;
}

/* Strikethrough original price */
.product-miniature__regular-price {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #9a9a9a;
  text-decoration: line-through;
}

/* Discount % pill — shown by PS automatically */
.product-miniature__discount-percentage {
  font-size: 0.75rem;
  font-weight: 700;
  color: #E53935;
  background: #fdecea;
  border-radius: 4px;
  padding: 0.1rem 0.375rem;
}

/* ============================================================
   9. COLOUR VARIANTS STRIP
   ============================================================ */

.product-miniature__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.125rem;
}

.product-miniature__variants .color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  transition: transform 0.15s, border-color 0.15s;
}

.product-miniature__variants .color:hover {
  transform: scale(1.2);
  border-color: var(--brand-dark);
}

/* ============================================================
   10. ACTIONS — add to cart / see details
   ============================================================ */

.product-miniature__actions {
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-miniature__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-miniature__add.btn .material-icons {
  font-size: 20px;
}

/* Quantity stepper in card */
.product-miniature .quantity-button .input-group {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #ddd;
  height: 36px;
}

.product-miniature .quantity-button .input-group .btn {
  background: #f5f5f5;
  border: none;
  border-radius: 0;
  padding: 0 8px;
  font-size: 1rem;
  color: #333;
  line-height: 1;
}

.product-miniature .quantity-button .input-group .form-control {
  border: none;
  border-left: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  border-radius: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 4px;
  max-width: 44px;
}

/* ============================================================
   11. SORT & FILTER TOOLBAR
   ============================================================ */

.products__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.625rem 1rem;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: var(--brand-radius);
}

/* Product count */
.products__count {
  font-size: 0.8125rem;
  color: #6c757d;
  font-weight: 500;
}

.products__count span::after {
  content: none;   /* remove PS's trailing dot if any */
}

/* Right side of toolbar */
.products__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* "Sort by:" label */
.products__sort-label {
  font-size: 0.8125rem;
  color: #6c757d;
  white-space: nowrap;
}

/* Sort dropdown button */
.products__sort-dropdown-button {
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--brand-radius);
  border-color: #ddd ;
  color: #2d2d2d;
  padding: 0.375rem 0.875rem;
  background: #fff;
}

.products__sort-dropdown-button:hover,
.products__sort-dropdown-button:focus {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
  box-shadow: 0 0 0 2px rgba(1, 27, 86, 0.12);
}

.products__sort-dropdown-button.show {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* Sort dropdown menu */
.products__sort + .dropdown-menu,
.products__sort-dropdown + .dropdown-menu,
#sort_dropdown_button + .dropdown-menu {
  border-radius: var(--brand-radius);
  border-color: var(--card-border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  min-width: 180px;
}

#sort_dropdown_button ~ .dropdown-menu .dropdown-item {
  padding: 0.45rem 1rem;
  color: #2d2d2d;
}

#sort_dropdown_button ~ .dropdown-menu .dropdown-item:hover {
  background: #f0f4ff;
  color: var(--brand-dark);
}

#sort_dropdown_button ~ .dropdown-menu .dropdown-item[aria-current="true"] {
  background: var(--brand-dark);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   12. PAGINATION
   ============================================================ */

.products__pagination {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.pagination {
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* All page items */
.page-item .page-link {
  border-radius: 0.5rem !important;   /* each button individually rounded */
  border: 1px solid var(--card-border);
  color: var(--brand-dark);
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.page-item .page-link:hover {
  background: #f0f4ff;
  border-color: var(--brand-dark);
  color: var(--brand-dark);
  z-index: 1;
}

/* Active page */
.page-item.active .page-link {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  font-weight: 700;
}

/* Disabled (prev/next at edges) */
.page-item.disabled .page-link {
  background: #f5f5f5;
  border-color: var(--card-border);
  color: #bbb;
}

/* ============================================================
   13. "NO PRODUCTS" EMPTY STATE
   ============================================================ */

#js-product-list .not-found {
  text-align: center;
  padding: 3rem 1rem;
}

#js-product-list .not-found .h3 {
  color: var(--brand-dark);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

#js-product-list .not-found p {
  color: #6c757d;
  font-size: 0.9375rem;
}

/* ============================================================
   14. CATEGORY HEADER
   ============================================================ */

.page-title-section {
  margin-bottom: 1.25rem;
}

.page-title-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-dark);
}

/* Optional category description */
.category-cover img {
  border-radius: var(--brand-radius);
  margin-bottom: 1rem;
  max-height: 220px;
  width: 100%;
  object-fit: cover;
}

/* ============================================================
   15. RESPONSIVE TWEAKS
   ============================================================ */

@media (max-width: 767.98px) {
  /* Toolbar stacks */
  .products__selection {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem;
  }

  .products__sort {
    width: 100%;
    justify-content: space-between;
  }

  /* Card padding tighter on mobile */
  .product-miniature__bottom {
    padding: 0.625rem;
  }

  .product-miniature__price {
    font-size: 0.9375rem;
  }

  /* Pagination smaller */
  .page-item .page-link {
    min-width: 32px;
    height: 32px;
    font-size: 0.8125rem;
  }
}
 .products__filter-button {
    background: #0b69f6;
    color: #fff;
    border-radius: 0.625rem;
  }