/* Custom CSS for Product Listing Page */

:root {
  --snitch-blue: #1e3a8a;
  --snitch-blue-dark: #1e40af;
  --snitch-blue-light: #3b82f6;
  --snitch-cyan: #06b6d4;
  --snitch-indigo: #4f46e5;
  --snitch-silver: #e5e7eb;
  --text-dark: #1f2937;
  --text-light: #4b5563;

  /* Legacy variables for compatibility - mapped to snitch colors */
  --brand-pink-dark: var(--snitch-blue);
  --brand-pink-light: var(--snitch-blue-light);
  --gray: var(--text-light);
  --text-color: var(--text-dark);

  /* Derived variables for common UI elements */
  --general-background: #f8f9fa; /* Keeping this light gray as a general background */
  --card-background: white;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --border-light: #eee;
  --border-medium: #ddd;
  --scrollbar-track-bg: #f1f1f1;
  --scrollbar-thumb-bg: #c1c1c1;
  --scrollbar-thumb-hover-bg: #a8a8a8;

  /* Specific component colors */
  --category-title-border: var(--snitch-blue-light);
  --category-link-hover-bg: rgba(59, 130, 246, 0.1); /* Using snitch-blue-light RGB */
  --product-header-bg: var(--snitch-blue-dark); /* Replaced red with snitch-blue-dark */
  --product-price-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --pagination-active-bg: var(--snitch-blue-dark); /* Replaced #991cca */
  --pagination-active-border: var(--snitch-blue-dark); /* Replaced #991cca */
  --pagination-hover-border: var(--snitch-blue-dark); /* Replaced #991cca */
  --pagination-hover-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --modal-glass-bg: rgba(255,255,255,0.65);
  --modal-glass-shadow: 0 4px 20px 0 rgba(59, 130, 246, 0.3); /* Replaced #b4e0f4 with snitch-blue-light */
  --sort-tab-btn-hover-bg: rgba(59, 130, 246, 0.1); /* Replaced #e1f2fa */
  --sort-tab-btn-icon-pulse-color: var(--snitch-cyan); /* Replaced #FFD700 */
  --glass-bar-icons-shadow: 0 3px 18px rgba(30, 64, 175, 0.1); /* Replaced #991cca19 with snitch-blue-dark */
  --glass-icon-btn-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --glass-icon-btn-hover-bg: rgba(30, 64, 175, 0.2); /* Replaced #ed008c30 with snitch-blue-dark */
  --glass-icon-btn-hover-color: var(--snitch-blue-dark); /* Replaced #ed008c */
  --glass-icon-btn-special-bg: var(--snitch-blue); /* Replaced #ed008c */
  --glass-icon-btn-special-hover-bg: var(--snitch-blue-dark); /* Replaced #991cca */
  --loading-spinner-border-top: var(--snitch-blue-dark); /* Replaced #991cca */
  --loading-spinner-border: var(--snitch-silver); /* Replaced #f3f3f3 */

  /* New variables for Product Detail Styles */
  --product-detail-shadow: 0 5px 20px rgba(30, 64, 175, 0.1); /* Replaced rgba(153, 28, 202, 0.1) */
  --zoom-lens-border: var(--snitch-blue-dark); /* Replaced #991cca */
  --zoom-lens-bg: rgba(30, 64, 175, 0.1); /* Replaced rgba(153, 28, 202, 0.1) */
  --thumbnail-active-border: var(--snitch-blue-dark); /* Replaced #991cca */
  --product-category-bg: var(--general-background);
  --product-category-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --product-category-hover-bg: var(--snitch-blue-dark); /* Replaced #991cca */
  --product-category-hover-color: white;
  --product-price-section-bg: var(--general-background);
  --discount-badge-bg: var(--snitch-blue); /* Replaced #ed008c */
  --stock-available-color: var(--snitch-cyan); /* Replaced #28a745 */
  --stock-low-color: var(--snitch-blue-light); /* Replaced #ffc107 */
  --stock-out-color: var(--snitch-blue-dark); /* Replaced #dc3545 */
  --btn-add-to-cart-bg: var(--snitch-blue-dark); /* Replaced #991cca */
  --btn-add-to-cart-hover-bg: var(--snitch-blue); /* Replaced #7a1699 */
  --btn-add-to-cart-shadow: 0 5px 15px rgba(30, 64, 175, 0.3); /* Replaced rgba(153, 28, 202, 0.3) */
  --btn-wishlist-border: var(--snitch-blue-dark); /* Replaced #991cca */
  --btn-wishlist-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --btn-wishlist-hover-bg: var(--snitch-blue-dark); /* Replaced #991cca */
  --description-border: var(--snitch-blue-dark); /* Replaced #991cca */

  /* New variables for Product Grid Styles */
  --product-grid-row-gap: 24px;
  --product-old-price-color: var(--text-light); /* Replaced #bbb */
  --product-price-discounted-color: var(--snitch-blue); /* Replaced #ed008c */
  --product-price-regular-color: var(--snitch-blue-dark); /* Replaced #991cca */
  --product-currency-color: var(--text-light); /* Replaced #666 */
  --empty-message-color: var(--text-dark); /* Replaced #332339 */

  /* New variables for Mobile Category Modal */
  --mobile-category-link-bg: var(--card-background);
  --mobile-category-link-border-color: var(--border-medium);
  --mobile-category-link-hover-bg-light: rgba(59, 130, 246, 0.05); /* Lighter hover for chips */
  --mobile-category-link-active-bg-dark: var(--snitch-blue-dark);
  --mobile-category-link-active-color: white;
  --mobile-category-link-text-color: var(--text-dark);
  --mobile-category-link-icon-color: var(--snitch-blue);
}

/* General Styles */
body {
  background-color: var(--general-background);
}

/* Categories Section */
.categories-section {
  background: var(--card-background);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px var(--shadow-light);
  position: sticky;
  top: 20px;
  /* Apply glass-card properties */
  background: var(--modal-glass-bg);
  box-shadow: var(--modal-glass-shadow);
  backdrop-filter: blur(3px);
}

.categories-title {
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text-dark);
  border-bottom: 2px solid var(--category-title-border);
  padding-bottom: 8px;
}

.categories-list {
  max-height: 400px;
  overflow-y: auto;
}

.categories-list::-webkit-scrollbar {
  width: 6px;
}

.categories-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track-bg);
  border-radius: 3px;
}

.categories-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: 3px;
}

.categories-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-bg);
}

.category-link {
  color: var(--text-light);
  text-decoration: none;
  padding: 8px 0;
  display: block;
  transition: color 0.3s ease;
  border-bottom: 1px solid var(--border-light);
}

.category-link:hover {
  color: var(--snitch-blue-light);
  text-decoration: none;
}

.category-link:last-child {
  border-bottom: none;
}

/* Mobile Filter Buttons */
.mobile-filters {
  padding: 0 15px;
}

.mobile-filters .btn {
  border-radius: 8px;
  font-weight: 500;
}

/* Product Header */
.product-header {
  background: var(--product-header-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--shadow-light);
}

.product-count .count-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.sorting-options label {
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--text-light);
}

.sorting-options .form-select {
  border-radius: 6px;
  border: 1px solid var(--border-medium);
}

/* Product Grid */
.products-grid {
  margin-top: 20px;
  row-gap: var(--product-grid-row-gap); /* Moved from inline style */
}

/* Per-card cart counter badge */
.cart-counter{
  position:absolute;
  bottom:.5rem;
  left:.5rem;            /* for RTL you can flip to right if you prefer */
  min-width:1.5rem;
  height:1.5rem;
  padding:0 .4rem;
  border-radius:999px;
  background:#1967d2;
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(20,20,43,.12);
  z-index:2;
}


.product-card {
  background: var(--card-background);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-medium);
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: .9rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta .product-discount { /* Added for specificity */
  background: var(--discount-badge-bg); /* Moved from inline style */
}

.product-meta del {
  color: var(--product-old-price-color); /* Moved from inline style */
}

.product-price {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: auto;
}

.product-price.discounted { /* New class for discounted price color */
  color: var(--product-price-discounted-color);
}

.product-price.regular { /* New class for regular price color */
  color: var(--product-price-regular-color);
}

.product-price .product-currency { /* New class for currency span */
  font-size: 0.95rem;
  color: var(--product-currency-color); /* Moved from inline style */
}

.product-box-hover.model-3 .glass-bar-icons .glass-icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}

/* Empty products message styles */
.empty-products-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 42px 0 46px 0; 
}

.empty-products-message .empty-products-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--empty-message-color);
  text-align: center;
  letter-spacing: 0.5px;
}


/* Pagination */
.pagination{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin:1rem 0;
  padding:.25rem 0;
  clear: both;            /* اگر چیزی کنارِش float باشد */
}

.pagination .page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 42px;
  padding: 0 .6rem;
  border-radius:.75rem;
  font-size:.95rem;
  text-decoration:none;

  /* شِمای شیشه‌ای ملایم مثل دکمه‌های موبایل */
  background: rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 16px rgba(20,20,43,.06);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  color:#273244;
}

.pagination .page-link.active{
  background:#1967d2;
  border-color:#1967d2;
  color:#fff;
  font-weight:600;
}

.pagination .page-link:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(25,103,210,.15);
}

.pagination .page-link:hover {
  background-color: var(--general-background);
  border-color: var(--pagination-hover-border);
  color: var(--pagination-hover-color);
}

/* Modal Styles */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px var(--shadow-medium);
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: 20px;
}

.modal-title {
  font-weight: 600;
  color: var(--text-dark);
}

.modal-body {
  padding: 20px;
}

.list-group-item {
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 15px 20px;
  font-weight: 500;
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item:hover {
  background-color: var(--general-background);
}

.list-group-item.active {
  background-color: var(--pagination-active-bg); /* Reused from pagination */
  border-color: var(--pagination-active-border); /* Reused from pagination */
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  .product-title {
    font-size: 1.1rem;
    -webkit-line-clamp: 3;
  }
}

  .product-price {
    font-size: 1rem;
  }

  .product-info {
    padding: 12px;
  }

  .product-header {
    margin: 0 15px;
  }

  .products-grid {
    padding: 0 15px;
  }
}

@media (max-width: 575.98px) {
  .product-card {
    margin-bottom: 15px;
  }

  .pagination {
    margin-top: 20px;
  }

  .pagination .page-link {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

.glass-card {
    background: var(--modal-glass-bg);
    border-radius: 12px;
    box-shadow: var(--modal-glass-shadow);
    padding: 1.5rem 1rem;
    backdrop-filter: blur(3px);
}
.text-purple { color: var(--snitch-blue-dark); } /* Already snitch-blue-dark */

/* Loading States */
.product-card.loading {
  opacity: 0.7;
  pointer-events: none;
}

.sort-tabs {
  margin-top: 0;
}

.sort-tab-btn {
  background: var(--card-background);
  border: 2px solid var(--border-light);
  color: var(--text-dark);
  border-radius: 8px;
  padding: 6px 15px;
  font-size: .96rem;
  font-weight: 500;
  transition: .2s;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-tab-btn i {
  font-size: 1.1em;
  color: var(--category-title-border); /* Reused from categories-title border */
  margin-left: 5px;
  transition: all 0.3s ease;
  display: inline-block; /* Required for transforms */
}

/* Ohana-inspired pulse animation */
.sort-tab-btn:hover i,
.sort-tab-btn:focus i,
.sort-tab-btn.active i {
  animation: ohanaPulse 1.5s infinite; /* Gentle, endless pulse */
  color: var(--sort-tab-btn-icon-pulse-color); /* Replaced #FFD700 */
}

/* Active/Hover/Focus states (unchanged but included for completeness) */
.sort-tab-btn.active,
.sort-tab-btn:hover,
.sort-tab-btn:focus {
  background: var(--sort-tab-btn-hover-bg);
  border-color: var(--category-title-border);
  color: var(--snitch-blue-light);
  font-weight: bold;
}

/* Keyframes for a soft, "breathing" pulse */
@keyframes ohanaPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.glass-bar-icons {
  background: rgba(255,255,255,0.8); /* Keeping this specific opacity for glass effect */
  backdrop-filter: blur(4px);
  border-radius: 1.2em;
  padding: 9px 15px 6px 15px;
  box-shadow: var(--glass-bar-icons-shadow);
}
.glass-icon-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--glass-icon-btn-color);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.31rem;
  transition: .18s;
}
.glass-icon-btn:hover {
  background: var(--glass-icon-btn-hover-bg);
  color: var(--glass-icon-btn-hover-color);
}
.glass-icon-btn.glass-special {
  color: #fff;
  background: var(--glass-icon-btn-special-bg);
}
.glass-icon-btn.glass-special:hover {
  background: var(--glass-icon-btn-special-hover-bg);
  color: #fff;
}

.product-card.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--loading-spinner-border);
  border-top: 2px solid var(--loading-spinner-border-top);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Product Detail Styles */
.product-detail-container {
    background: var(--card-background);
    border-radius: 15px;
    box-shadow: var(--product-detail-shadow);
    overflow: hidden;
    margin-bottom: 2rem;
}
.product-images {
    position: relative;
    overflow: hidden;
}
.main-image-container {
    position: relative;
    height: 500px;
    overflow: hidden;
    cursor: zoom-in;
}
.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.main-image-container:hover .zoom-overlay {
    opacity: 1;
}
.main-image-container:hover .main-image {
    transform: scale(1.2);
}
.zoom-lens {
    position: absolute;
    border: 2px solid var(--zoom-lens-border);
    background: var(--zoom-lens-bg);
    width: 100px;
    height: 100px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.zoom-result {
    position: absolute;
    top: 0;
    right: -400px;
    width: 400px;
    height: 400px;
    border: 1px solid var(--border-medium);
    background: var(--card-background);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-medium);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.zoom-result img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-images {
    display: flex;
    gap: 10px;
    padding: 1rem;
    overflow-x: auto;
}
.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
}
.thumbnail.active,
.thumbnail:hover {
    border-color: var(--thumbnail-active-border);
}
.product-info {
    padding: 2rem;
}
.product-category {
    display: inline-block;
    background: var(--product-category-bg);
    color: var(--product-category-color);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: background 0.3s ease;
}
.product-category:hover {
    background: var(--product-category-hover-bg);
    color: var(--product-category-hover-color);
}
.product-price-section {
    background: var(--product-price-section-bg);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}
.price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.current-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--product-price-color); /* Reused from product-price */
}
.original-price {
    font-size: 1.2rem;
    color: var(--text-light); /* Replaced #666 */
    text-decoration: line-through;
}
.discount-badge {
    background: var(--discount-badge-bg);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: bold;
}
.stock-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light); /* Replaced #666 */
}
.stock-available {
    color: var(--stock-available-color);
}
.stock-low {
    color: var(--stock-low-color);
}
.stock-out {
    color: var(--stock-out-color);
}
.product-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}
.btn-add-to-cart {
    background: var(--btn-add-to-cart-bg);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
}
.btn-add-to-cart:hover {
    background: var(--btn-add-to-cart-hover-bg);
    transform: translateY(-2px);
    box-shadow: var(--btn-add-to-cart-shadow);
}
.btn-wishlist {
    background: var(--card-background);
    color: var(--btn-wishlist-color);
    border: 2px solid var(--btn-wishlist-border);
    padding: 1rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.btn-wishlist:hover {
    background: var(--btn-wishlist-hover-bg);
    color: white;
}
.product-description {
    background: var(--card-background);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Keeping this shadow as it's generic */
}
.description-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--description-border);
    padding-bottom: 0.5rem;
}
.ohana-checkout-btn {
    background: linear-gradient(135deg, var(--snitch-blue), var(--snitch-indigo));
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
    position: relative;
    overflow: hidden;
}
.brief-description {
    font-size: 1.1rem;
    color: var(--text-light); /* Replaced #666 */
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.full-description {
    color: var(--text-light); /* Replaced #555 */
    line-height: 1.8;
}



/* ---------------------------------------------
   Header + Sort Tabs (mobile)
--------------------------------------------- */
@media (max-width: 767.98px) {
  .product-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem;
    padding: 1rem;
  }

  .product-count { text-align: center; }

  .sort-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
  }

  .sort-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(50% - .5rem); /* two per row */
    min-width: 120px;
    padding: .5rem;
    font-size: .9rem;
  }
}

/* Utilities */
.object-fit-cover { object-fit: cover; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------
   Product Card (base)
--------------------------------------------- */
.product-card {
  transition: box-shadow .2s ease, transform .2s ease;
  border-radius: .75rem;
}
.product-card:hover {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.text-danger-50 { color: #e2a5a5; }

.product-card .card-body { padding: .5rem .75rem; }

.product-price { font-size: 1rem; }
.product-meta  { font-size: .8rem; }

.product-badges {
  top: .5rem;
  right: .5rem;
  transform: scale(.9);
}

/* ---------------------------------------------
   Mobile (≤575.98px)
   - Force 2 columns
   - Taller image (4:5)
   - Hide hover toolbar, show stacked actions
--------------------------------------------- */
@media (max-width: 575.98px) {
  /* hide desktop hover toolbar on touch */
  .product-box-hover { display: none !important; }

  .product-info .mobile-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .5rem;
  }

  .product-info .mobile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 44px;
    padding: .5rem .6rem;
    font-size: .9rem;
    line-height: 1.1;
    border-radius: .75rem;

    /* glass look */
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 6px 16px rgba(20,20,43,.06);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    backdrop-filter: saturate(140%) blur(8px);
    color: #273244;
    text-decoration: none;
  }
  .product-info .mobile-action .bi { font-size: 1rem; transform: translateY(-1px); }

  /* variants */
  .product-info .mobile-action--primary {
    background: rgba(25,103,210,.12);
    border-color: rgba(25,103,210,.22);
    color: #1967d2;
  }
  .product-info .mobile-action--danger {
    background: rgba(220,53,69,.10);
    border-color: rgba(220,53,69,.22);
    color: #dc3545;
  }

  .product-info .mobile-action:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(20,20,43,.08);
  }
}

/* Tablets+ keep hover toolbar */
@media (min-width: 768px) {
  .product-card:hover .product-box-hover { display: flex !important; }
}

/* ---------------------------------------------
   Small+ (≥576px)
   - Inline actions
--------------------------------------------- */
@media (min-width: 576px) {
  .product-actions {
    display: flex;
    gap: .5rem;
  }
  .product-actions .btn { width: auto; }
}

/* ---------------------------------------------
   Medium+ (≥768px)
   - Enable hover toolbar
   - Slightly larger text/buttons
--------------------------------------------- */
@media (min-width: 768px) {
  .product-card:hover .product-box-hover { display: flex !important; }


  .product-price { font-size: 1.1rem; }

  .product-info .btn {
    font-size: .9rem;
    padding: .4rem .75rem;
  }
}

/* ---------------------------------------------
   Icon rendering & hover glass buttons
--------------------------------------------- */
.bi {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.glass-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  line-height: 1;
}
.glass-icon-btn .bi { font-size: 1.05rem; }