/* ===== PRODUCT CARD COMPONENT =====
 * Performance optimizations:
 * - contain: layout style for isolation
 * - content-visibility for off-screen rendering
 * - GPU-accelerated transitions
 */
.product-card {
  /* Base grid so all cards share the same layout structure */
  display: grid;
  grid-template-rows: 180px auto auto auto;
  grid-template-areas:
    "image"
    "title"
    "meta"
    "button";
  gap: 10px;
  align-items: start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 6px 18px rgba(14, 20, 25, 0.04);
  min-width: 220px;
  position: relative;
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease;
  overflow: hidden;
  /* Performance: isolate layout reflows */
  contain: layout style;
  /* Performance: defer rendering for off-screen cards */
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
}

/* Homepage "detailed" cards: image on top + fade into a rounded bottom content area (reference style) */
.product-card.detailed {
  /* Define consistent tracks so all cards align (subgrid will inherit these) */
  grid-template-rows: 240px auto auto minmax(50px, auto);
  grid-template-areas:
    "image"
    "content"
    "content"
    "content";
  gap: 0;
  border-radius: 22px;
  border: 1px solid var(--border-lighter);
  box-shadow: 0 18px 40px rgba(14, 20, 25, 0.10);
  background: var(--bg-white);
}

.product-card .product-badge {
  /* badge overlay */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: #e74c3c;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-block;
}

.product-card .product-image {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: #faf9f8;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.product-card.detailed .product-image {
  position: relative;
  background: var(--bg-light);
}

/* Fade effect at the bottom of the image */
.product-card.detailed .product-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 2;
}

.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* BEM compatibility: map shop.php product-card class names to existing rules */
.product-card__image {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: #faf9f8;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.product-card__content {
  grid-area: content;
  background: var(--bg-white);
  padding: 16px 18px 18px;
  margin-top: -22px;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  position: relative;
  z-index: 3;

  /* Fallback layout for non-subgrid browsers */
  display: grid;
  grid-template-rows: auto auto 46px;
  align-content: start;
  row-gap: 12px;
}

.product-card__title {
  grid-area: title;
  font-size: 16px;
  margin: 0;
  color: var(--text-dark);
  font-weight: 700;
  width: 100%;
  padding: 0 14px;
  line-height: 1.25;
}

.product-card__code { color: #333; margin: 4px 0 0 0; }
.product-card__price { color: #0b6b3a; font-weight: 700; margin: 4px 0 0 0; }

.product-card__add { grid-area: button; display: flex; align-items: center; justify-content: center; margin: 10px 14px 14px; }
.product-card__add-btn { background: #e2231a; color: #fff; border: none; padding: 10px 18px; border-radius: 8px; width: 100%; cursor: pointer; }

/* Ensure the link doesn't introduce strange sizing when image fails */
.product-card .product-image a{
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.product-card .product-name {
  grid-area: title;
  font-size: 15px;
  margin: 0;
  color: #c0392b;
  font-weight: 700;
  width: 100%;
  padding: 0 14px;
}

/* Detailed content wrapper (bottom section) */
.product-card.detailed .product-content {
  grid-area: content;
  background: var(--bg-white);
  padding: 16px 18px 18px;
  margin-top: -22px; /* pulls content up into the fade area */
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  position: relative;
  z-index: 3; /* above the fade overlay */

  /* Fallback layout (non-subgrid browsers) */
  display: grid;
  grid-template-rows: auto auto 46px;
  align-content: start;
  row-gap: 12px;
}

/* Progressive enhancement: subgrid for perfectly consistent card internals */
@supports (grid-template-rows: subgrid) {
  .product-card.detailed .product-content {
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .product-card.detailed .product-name { grid-row: 1; }
  .product-card.detailed .product-meta { grid-row: 2; }
  .product-card.detailed .add-to-cart-btn { grid-row: 3; }

  /* Subgrid support for BEM classes used in shop.php */
  .product-card .product-card__content {
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .product-card .product-card__title { grid-row: 1; }
  .product-card .product-card__price { grid-row: 2; }
  .product-card .product-card__add { grid-row: 3; }
}

.product-card.detailed .product-name,
.product-card.detailed .product-meta,
.product-card.detailed .add-to-cart-btn {
  grid-area: auto;
  padding: 0;
}

.product-card.detailed .product-name {
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.25;
}

.product-card.detailed .product-variant {
  margin: 8px 0 0;
}

.product-card .product-name a {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
}
.product-card .product-name a:hover {
  color: #8b0000;
}

.product-card .product-variant {
  display: block;
  font-size: 12px;
  color: #666;
  font-weight: 400;
  margin: 6px 0 0 0;
}

.product-card .product-meta,
.product-card .product-table {
  grid-area: meta;
  font-size: 13px;
  color: #333;
  padding: 0 14px;
}

/* Wishlist / grid product actions: make action buttons uniform size and aligned */
.product-grid .product-card .product-actions {
  display: flex;
  gap: 12px;
  padding: 12px 14px 18px;
  justify-content: center;
  align-items: center;
}
.product-grid .product-card .product-actions .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  height: 44px;
  min-width: 110px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.product-grid .product-card .product-actions .btn.danger,
.product-grid .product-card .product-actions .btn.danger:active {
  background: #e74c3c;
  color: #fff;
  border: none;
}
.product-grid .product-card .product-actions .btn {
  background: var(--primary-color);
  color: var(--text-light);
  border: none;
}
.product-card .product-meta {
  /* Make meta a vertical stack where each item occupies full width */
  display: block;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.product-card.detailed .product-meta {
  margin-top: 12px;
  text-align: center;
}

.product-card.detailed .product-meta > * {
  text-align: center;
}

/* Ensure each child inside meta becomes a block and spans full width */
.product-card .product-meta > * {
  display: block;
  width: 100%;
  text-align: center;
  margin: 6px 0;
}

/* Center the struck-through original price nicely */
.product-card .product-price del{
  display: inline-block;
  margin-right: 6px;
}

.product-card .product-price {
  color: #0b6b3a;
  font-weight: 700;
  margin: 4px 0 0 0;
}

/* Global CSS adds ₹ via .product-price::before; disable it for these cards */
.product-card .product-price::before{
  content: "" !important;
  display: none !important;
}
.product-card .product-code {
  color: #333;
  margin: 4px 0 0 0;
}

/* Short description / variant should be full width and lighter color */
.product-card .product-variant {
  margin: 6px 0 8px 0;
  color: #666;
}

.product-card .table-label {
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 6px;
}

.product-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.product-card table thead th {
  background: #f8f8f8;
  padding: 6px;
  border: 1px solid #e6e6e6;
  font-weight: 600;
}
.product-card table td {
  padding: 6px;
  border: 1px solid #e6e6e6;
  text-align: center;
}

.product-card .add-to-cart-btn {
  grid-area: button;
  align-self: stretch;
  justify-self: stretch;
  margin: 10px 14px 14px;
  width: calc(100% - 28px);
  background: #34495e;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.28s ease, transform 0.18s ease;
}

.product-card.detailed .add-to-cart-btn {
  margin: 14px 0 0;
  width: 100%;
  border-radius: 12px;
  min-height: 48px;
  height: auto;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card .add-to-cart-btn:hover {
  background: #2c3e50;
}

@media (max-width: 768px) {
  .product-card {
    min-width: 0;
    width: 100%;
    padding: 0;
  }
  
  .product-card .product-image {
    height: 140px;
  }
  
  .product-card .product-image img {
    max-width: 100%;
    max-height: 100%;
  }

  .product-card.detailed {
    grid-template-rows: 200px auto;
    border-radius: 16px;
    min-width: 0;
    width: 100%;
  }

  .product-card.detailed .product-content {
    margin-top: -18px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 16px 16px 16px;
    row-gap: 8px;
    display: flex;
    flex-direction: column;
  }

  .product-card.detailed .product-image::after {
    height: 70px;
  }
  
  .product-card.detailed .product-name {
    font-size: 15px;
    line-height: 1.3;
  }
  
  .product-card.detailed .product-variant {
    font-size: 12px;
    margin-top: 6px;
  }
  
  .product-card.detailed .product-meta {
    margin-top: 8px;
  }
  
  .product-card.detailed .product-code,
  .product-card.detailed .product-price {
    font-size: 14px;
  }
  
  .product-card.detailed .add-to-cart-btn {
    margin-top: 8px;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 14px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .product-card.detailed {
    grid-template-rows: 180px auto;
    border-radius: 14px;
  }
  
  .product-card.detailed .product-content {
    padding: 14px 14px 14px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
  
  .product-card.detailed .product-name {
    font-size: 14px;
  }
  
  .product-card.detailed .product-variant {
    font-size: 11px;
  }
  
  .product-card.detailed .product-code,
  .product-card.detailed .product-price {
    font-size: 13px;
  }
  
  .product-card.detailed .add-to-cart-btn {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 13px;
  }
}

/* View All Products Button */
.view-all-products {
  display: none;
  text-align: center;
  margin-top: 8px; /* reduced gap to sit closer to product cards */
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color, #032f35);
  color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.view-all-btn:hover {
  background: var(--primary-dark, #021f24);
  transform: translateY(-2px);
}

.view-all-btn i {
  font-size: 13px;
}

/* With infinite-loop carousel all cards must remain visible */
/* (removed nth-child hiding rule) */

/* Hide inline view-all inside carousel (breaks infinite loop cloning) */
.mobile-view-all-wrapper {
  display: none !important;
}

.mobile-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary-color, #032f35);
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 15px rgba(2, 91, 89, 0.25);
}

.mobile-view-all-btn:hover {
  background: var(--primary-dark, #021f24);
  transform: translateY(-2px);
}

.mobile-view-all-btn i {
  font-size: 13px;
}

/* Show the View All Products button below the carousel */
.products-section .view-all-products {
  display: block;
}

/* Mobile: Show only first 8 product cards, then View All button */
@media (max-width: 768px) {
  /* Hide cloned cards (from carousel JS infinite-loop) on mobile grid */
  .products-carousel .products-grid .product-card[aria-hidden="true"] {
    display: none !important;
  }

  /* Hide cards after the 8th one */
  .products-carousel .products-grid .product-card:nth-child(n+9) {
    display: none !important;
  }

  /* Show the inline mobile View All Products button */
  .products-carousel .products-grid .mobile-view-all-wrapper {
    display: flex !important;
    justify-content: center;
    grid-column: 1 / -1;
    padding: 10px 0 0;
  }

  /* Hide the desktop-style View All button below the carousel */
  .products-section .view-all-products {
    display: none !important;
  }
}