/* ==========================================================================
   products.css — Dedicated styling for Products Page, 3D Flip Cards & 3-Image Carousels
   ========================================================================== */

/* ========================================
   1. PRODUCTS HERO SECTION
======================================== */
.hero--products {
  min-height: 72vh;
  padding-block: clamp(160px, 18vh, 210px) clamp(50px, 8vh, 80px);
}

.products-hero-wrap {
  max-width: 820px;
}

.products-hero-wrap h1 {
  margin-top: 16px;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}

.products-hero-wrap .lead {
  margin-bottom: 32px;
  color: var(--text-secondary);
}

/* Category Filter Bar */
.product-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.heading-block .product-filter-bar {
  justify-content: center;
}

.filter-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
  padding: 9px 20px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.25s var(--ease);
}

.filter-btn:hover {
  border-color: rgba(227, 6, 19, 0.4);
  color: var(--accent);
  background: rgba(227, 6, 19, 0.04);
  transform: translateY(-2px);
}

.filter-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast-text);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(227, 6, 19, 0.35);
}

/* Pagination control below the product grid — mirrors the filter-bar pill styling */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
}

.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.25s var(--ease);
}

.page-btn:hover:not(:disabled) {
  border-color: rgba(227, 6, 19, 0.4);
  color: var(--accent);
  background: rgba(227, 6, 19, 0.04);
  transform: translateY(-2px);
}

.page-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast-text);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(227, 6, 19, 0.35);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ========================================
   2. 3D FLIP CARD & CAROUSEL LAYOUT
======================================== */
.products-section,
.products-home-section {
  padding-block: clamp(70px, 10vh, 110px);
  position: relative;
}

body.product-card-scroll-locked {
  /* iOS-safe lock: overflow:hidden without position:fixed.
     position:fixed causes iOS Safari to reset scrollTop to 0 (page jumps).
     overflow:hidden alone is enough to block background scroll on Android
     Chrome; iOS is handled by the JS touch-boundary logic in products.js. */
  overflow: hidden;
  overscroll-behavior: none;
}

.products-home-section {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  margin-top: 50px;
}

/* 3D Perspective Card Wrapper */
.product-card-wrap {
  perspective: 1400px;
  -webkit-perspective: 1400px;
  margin-top: 40px;
  height: 384px;
  max-width: 340px;
  margin-inline: auto;
  width: 100%;
  position: relative;
  transition: transform 0.4s var(--ease);
  transform-origin: center;
  /* Keeps the card clear of the floating nav pill when pagination
     scrolls it into view with block: "start", at every breakpoint. */
  scroll-margin-top: 110px;
}

/* Subtle focus/elevation for the selected (flipped) card — transform only,
   so it never changes the card's own width/height box. */
.product-card-wrap.is-flipped {
  transform: scale(1.025);
  z-index: 10;
}

.product-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.product-card-wrap.is-flipped .product-card-inner {
  transform: rotateY(180deg);
}

/* Front & Back Faces — clean, compact, premium card shell */
.product-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden; /* clips the full-bleed image to the card's rounded top corners */
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.product-card-wrap:hover .product-card-face {
  border-color: rgba(227, 6, 19, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 18px 38px rgba(227, 6, 19, 0.10);
}

.product-card-wrap.is-flipped .product-card-face {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 20px 44px rgba(227, 6, 19, 0.12);
}

.product-card-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.product-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  background: #ffffff;
  overflow: hidden; /* Card itself never grows — content area scrolls internally */
  padding: 20px 22px 22px;
}

/* ---- Scrollable middle zone (between pinned header & pinned footer) ---- */
.card-back__scrollable {
  flex: 1 1 0%;       /* grows to fill space between header and footer */
  min-height: 0;      /* critical: allows flex child to shrink below content size */
  /* Explicit max-height so iOS Safari knows the scroll container has a boundary.
     The parent .product-card-back is position:absolute inset:0 with overflow:hidden,
     so the flex chain already constrains height — but making it explicit here
     forces WebKit to activate the native momentum scroller. */
  max-height: 100%;
  overflow-y: scroll;          /* 'scroll' (not 'auto') — required by iOS Safari to
                                  activate -webkit-overflow-scrolling: touch */
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* Android Chrome: contain scroll inside card */
  -webkit-overflow-scrolling: touch; /* iOS Safari: enable momentum (inertia) scrolling */
  touch-action: pan-y pinch-zoom;   /* tell the browser only vertical pan is needed here */
  scroll-behavior: smooth;
  padding-right: 4px; /* breathing room for custom scrollbar */
  margin-right: -4px; /* counteract layout shift */

  /* Thin custom scrollbar that matches the dark design */
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 6, 19, 0.35) transparent;
}
.card-back__scrollable::-webkit-scrollbar {
  width: 4px;
}
.card-back__scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.card-back__scrollable::-webkit-scrollable::-webkit-scrollbar-thumb {
  background: rgba(227, 6, 19, 0.35);
  border-radius: 4px;
}
.card-back__scrollable::-webkit-scrollbar-thumb {
  background: rgba(227, 6, 19, 0.35);
  border-radius: 4px;
}
.card-back__scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 6, 19, 0.6);
}

/* ========================================
   3. SINGLE PRODUCT IMAGE & VARIANT SELECTOR
======================================== */
/* Full-bleed image area — occupies the top of the card, clipped to its
   rounded top corners by the parent .product-card-face's overflow:hidden. */
.product-card__image-wrap {
  margin: 0;
  width: 100%;
  height: 190px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #ffffff;
  order: -1; /* Pull image to top of the flex-column card face */
  overflow: hidden;
}

/* Single Product Image */
.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform 0.4s var(--ease), opacity 0.25s ease, filter 0.25s ease;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.product-card-wrap:hover .product-card__image {
  transform: scale(1.06);
}

/* Smooth transition when switching size/volume variant */
.product-card__image.is-switching {
  opacity: 0.35;
  filter: blur(1px);
  transform: scale(0.97);
}

/* Legacy carousel backward compatibility (if any remnants exist) */
.product-carousel,
.product-carousel__track,
.product-carousel__slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.product-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-carousel__dots {
  display: none !important;
}

.product-card__image-wrap::after {
  display: none !important;
  content: none !important;
}

/* ========================================
   3B. SIZE / VOLUME VARIANT SELECTOR (CHIPS / PILLS)
======================================== */
.product-card__variants {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 10px;
  padding: 4px 0 0;
}

.variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.variant-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.variant-label svg {
  display: inline-block;
  vertical-align: middle;
}

.variant-active-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #e30613);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.variant-pill {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f8fafc;
  color: #334155;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
  outline: none;
}

.variant-pill:hover {
  border-color: rgba(227, 6, 19, 0.45);
  color: var(--accent, #e30613);
  background: rgba(227, 6, 19, 0.05);
  transform: translateY(-1px);
}

.variant-pill:focus-visible {
  outline: 2px solid var(--accent, #e30613);
  outline-offset: 2px;
}

.variant-pill.is-active {
  background: var(--accent, #e30613);
  color: #ffffff !important;
  border-color: var(--accent, #e30613);
  box-shadow: 0 2px 8px rgba(227, 6, 19, 0.32);
  font-weight: 700;
}

/* Guarantee NO variant pills appear on the front face of any card */
.product-card-front .product-card__variants,
.product-card-front .variant-pills,
.product-card-front .variant-header {
  display: none !important;
}

.card-back__desc {
  font-size: 11.5px;
  line-height: 1.45;
  margin-bottom: 8px;
  color: #cbd5e1;
}

/* Variant Selector inside Back Face (Flipped Card) */
.card-back__variants {
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
}

.card-back-variants__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* Preview thumbnail + label group */
.card-back-variants__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  transition: background 0.18s ease, transform 0.18s ease;
  user-select: none;
}

.card-back-variants__preview:hover {
  background: rgba(255, 255, 255, 0.06);
}

.card-back-variants__preview:focus-visible {
  outline: 2px solid #e30613;
  outline-offset: 2px;
}

.card-back-variants__thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.card-back-variants__thumb {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.card-back-variants__zoom-icon {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e30613;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #141417;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, background 0.18s ease;
  pointer-events: none;
}

.card-back-variants__preview:hover .card-back-variants__zoom-icon {
  transform: scale(1.15);
  background: #ff2b37;
}

.card-back-variants__thumb.is-switching {
  opacity: 0.25;
  transform: scale(0.92);
}

.card-back-variants__preview > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-back-variants__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a1a1aa;
}

.card-back-variants__current {
  font-size: 12px;
  font-weight: 700;
  color: #ff6b6b;
  white-space: nowrap;
}

/* Price badge in back-face variant header */
.card-back-variants__price {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Option Rows (Color Selector & Size Selector) */
.card-back-option-row {
  margin-top: 5px;
}

.card-back-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.card-back-option-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a1a1aa;
}

.card-back-option-val {
  font-size: 11px;
  font-weight: 700;
  color: #fca5a5;
}

/* Color Swatches */
.card-back-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.color-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  line-height: 1.2;
}

.color-swatch-btn:hover {
  background: rgba(227, 6, 19, 0.18);
  border-color: rgba(227, 6, 19, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.color-swatch-btn.is-active {
  background: rgba(227, 6, 19, 0.28);
  border-color: #e30613;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #e30613, 0 2px 10px rgba(227, 6, 19, 0.4);
  font-weight: 700;
}

.color-swatch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Size Pills in Explore Back Face */
.variant-pills--back {
  gap: 5px;
}

.variant-pills--back .variant-pill {
  padding: 3px 9px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
}

.variant-pills--back .variant-pill:hover {
  background: rgba(227, 6, 19, 0.2);
  border-color: rgba(227, 6, 19, 0.6);
  color: #ffffff;
}

.variant-pills--back .variant-pill.is-active {
  background: #e30613;
  border-color: #e30613;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(227, 6, 19, 0.45);
}

/* ==========================================================================
   PRODUCT IMAGE MODAL (POPUP FOR ENLARGED PRODUCT VIEW)
   ========================================================================== */
.product-image-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 16px;
}

.product-image-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.product-image-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.product-image-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(160deg, #1f1f24, #121216);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(227, 6, 19, 0.25);
  overflow: hidden;
  transform: scale(0.92);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-image-modal.is-open .product-image-modal__dialog {
  transform: scale(1);
}

.product-image-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}

.product-image-modal__close:hover {
  background: #e30613;
  border-color: #e30613;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(227, 6, 19, 0.6);
}

.product-image-modal__close:focus-visible {
  outline: 2px solid #e30613;
  outline-offset: 2px;
}

.product-image-modal__img-wrap {
  width: 100%;
  height: 340px;
  max-height: 55vh;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.product-image-modal__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6));
}

.product-image-modal__footer {
  padding: 16px 20px;
  background: rgba(12, 12, 16, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.product-image-modal__meta {
  min-width: 0;
  flex: 1;
}

.product-image-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.product-image-modal__sub {
  font-size: 12px;
  color: #a1a1aa;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-image-modal__sub strong {
  color: #ffffff;
}

.pim-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pim-sep {
  color: #52525b;
}

.product-image-modal__price {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .product-image-modal__dialog {
    max-width: 94vw;
    border-radius: 14px;
  }
  .product-image-modal__img-wrap {
    height: 250px;
    padding: 14px;
  }
  .product-image-modal__footer {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Category tag — floats over the top-left corner of the image like a badge.
   Positioned relative to .product-card-face (the nearest positioned
   ancestor), so no markup had to move for this. */
.product-card-front .product-card__body > .product-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-primary);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ========================================
   4. CARD FRONT CONTENT
======================================== */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding: 14px 16px 16px;
  min-height: 0;
}

.product-card__tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: rgba(227, 6, 19, 0.1);
  border: 1px solid rgba(227, 6, 19, 0.22);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
  display: inline-block;
}

.product-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  align-self: flex-start;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 0;
  margin-bottom: 8px;
  max-width: none;
  align-self: flex-start;
  text-align: left;
  margin-inline: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact customer rating chip — star, numeric score, review count */
.product-card__rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
}

.product-card__rating-star {
  color: var(--accent);
  flex-shrink: 0;
}

.product-card__rating-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.product-card__rating-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
}

/* Small row of 3 product-specific animated icons, filling the space above the "Explore more" button */
.product-card__icons {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  margin: auto auto 10px;
  text-align: center;
}

.product-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.78;
  filter: drop-shadow(0 0 5px rgba(227, 6, 19, 0.3));
  animation: productIconFloat 3.2s ease-in-out infinite;
}

.product-card__icon:nth-child(2) { animation-delay: 0.25s; }
.product-card__icon:nth-child(3) { animation-delay: 0.5s; }

@keyframes productIconFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.68; }
  50% { transform: translateY(-4px) scale(1.1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__icon { animation: none; }
}

/* Price + action row — pinned to the bottom of the card body */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
}

.product-card__price {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Front CTA Button — compact circular action button (bottom-right),
   triggers the same 3D flip as before. */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  margin-top: 0;
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.28s var(--ease);
  box-shadow: 0 4px 14px rgba(227, 6, 19, 0.3);
}

.product-card__cta svg {
  transition: transform 0.25s var(--ease);
}

.product-card__cta:hover {
  background: var(--accent-dim);
  color: #ffffff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(227, 6, 19, 0.42);
}

.product-card__cta:hover svg {
  transform: translateX(2px);
}

/* ========================================
   5. CARD BACK CONTENT (DETAILS & ADD TO CART)
======================================== */
.card-back__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0; /* Always pinned — never pushed off screen */
  position: relative;
  z-index: 4; /* stays above the internally-scrolling content */
}

.card-back__return-btn {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.card-back__return-btn:hover,
.card-back__return-btn:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast-text);
}

.card-back__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.card-back__desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.card-back__reviews {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 16px;
  padding: 9px 11px;
  background: rgba(227, 6, 19, 0.07);
  border: 1px solid rgba(227, 6, 19, 0.16);
  border-radius: 12px;
}

.card-back__reviews-label {
  width: 100%;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-back__reviews-stars {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
}

.card-back__reviews-value {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 800;
}

.card-back__reviews-count {
  color: var(--text-muted);
  font-size: 11px;
}

.card-back__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.card-back-spec {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 8px 12px;
}

.card-back-spec__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.card-back-spec__val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}

.card-back__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0;  /* no longer uses auto since parent scrollable handles space */
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  flex-shrink: 0; /* Pinned — never disappears into scroll overflow */
}

.card-back__price {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
}

.card-back__stock {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.card-back__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  flex-shrink: 0; /* Always visible — pinned at the bottom of the back face */
}

/* Add to Cart Button — slightly more compact so Buy Now sits neatly beside it */
.btn--add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #E30613 0%, #b8010f 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
  box-shadow: 0 4px 16px rgba(184, 1, 15, 0.3);
}

.btn--add-cart svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn--add-cart:hover {
  background: linear-gradient(135deg, #cc0511 0%, #9a000c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 1, 15, 0.45);
}

.btn--add-cart:hover svg {
  transform: scale(1.15);
}

.btn--add-cart.is-added {
  background: #2dd4bf;
  color: #042f2e;
}

/* Buy Now Button — pairs with Add to Cart as a matching button group */
.btn--buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}

.btn--buy-now:hover {
  background: linear-gradient(135deg, #E30613 0%, #b8010f 100%);
  border-color: #E30613;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 1, 15, 0.35);
}

@media (max-width: 380px) {
  .btn--add-cart,
  .btn--buy-now {
    padding: 9px 8px;
    font-size: 11.5px;
  }
}

/* ========================================
   6. CART DRAWER ITEMS & DYNAMIC UI
======================================== */
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cart-item-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.cart-item-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: #181b24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cart-item-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}

.cart-item-info .price {
  font-size: 14px;
  color: #ff3b30 !important;
  font-weight: 700;
  margin: 0;
}

.cart-qty-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 3px 6px;
}

.cart-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-qty-btn:hover {
  background: #e30613;
  border-color: #e30613;
  color: #ffffff !important;
}

.cart-item-qty {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff !important;
  min-width: 18px;
  text-align: center;
}

/* Cart added notification toast */
.cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 16px rgba(227, 6, 19, 0.12);
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.cart-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cart-toast svg {
  color: var(--accent);
  width: 18px;
  height: 18px;
}

/* ========================================
   7. FLAGSHIP PRODUCT SPOTLIGHT (FEATURED)
======================================== */
.spotlight-section {
  background: linear-gradient(180deg, #1c2636 0%, #232f42 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.spotlight-content .eyebrow {
  color: var(--accent);
}

.spotlight-content h2 {
  color: var(--text-primary);
}

.spotlight-content .lead {
  color: var(--text-secondary);
}

.spotlight-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.spotlight-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spotlight-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1/1;
  background: radial-gradient(circle at center, rgba(227, 6, 19, 0.08) 0%, transparent 70%);
  border-radius: 36px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 24px;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.65));
  transition: transform 0.5s var(--ease);
}

.spotlight-frame:hover img {
  transform: scale(1.05) rotate(-1deg);
}

.spotlight-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0 32px;
}

.spec-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
}

.spec-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}

.spec-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ========================================
   8. CRAFTSMANSHIP & MATERIAL PILLARS
======================================== */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.material-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.material-card:hover {
  transform: translateY(-5px);
  border-color: rgba(227, 6, 19, 0.3);
}

.material-card__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  display: block;
}

.material-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Force reveal-animated content in these two sections to always render
   fully visible, regardless of whether the scroll-reveal JS has fired
   (fixes titles appearing invisible/blank on load or in static captures). */
.materials-grid .material-card.reveal,
.materials-grid .material-card.reveal * ,
.spotlight-content.reveal,
.spotlight-content.reveal * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.material-card p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========================================
   9. BESPOKE & TRADE COMMISSIONS
======================================== */
.bespoke-box {
  background: linear-gradient(135deg, rgba(27, 37, 54, 0.8) 0%, rgba(16, 22, 32, 0.95) 100%);
  border: 1px solid rgba(227, 6, 19, 0.25);
  border-radius: 28px;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.bespoke-box h3 {
  font-size: clamp(26px, 3.5vw, 38px);
  margin-bottom: 16px;
  line-height: 1.15;
}

.bespoke-box p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========================================
   10. RESPONSIVE BREAKPOINTS
======================================== */
@media (max-width: 1080px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .spotlight-frame {
    max-width: 380px;
    margin: 0 auto;
  }
  .bespoke-box {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
  }
  .materials-grid {
    grid-template-columns: 1fr;
  }

  /* ----------------------------------------------------------------------
     Mobile/tablet: disable the 3D rotateY flip entirely.
     WebKit/Blink mobile browsers do not reliably deliver touch scroll
     events to a scrollable element that lives inside a parent using
     `transform-style: preserve-3d` + `backface-visibility: hidden`
     (the .card-back__scrollable was a child of exactly that setup).
     The result: the inner details panel visually showed a scrollbar but
     never responded to touch drags — completely stuck.
     Fix: below 1080px we swap the 3D flip for a simple cross-fade, so the
     "back" face is a normal, non-3D-transformed element and native touch
     scrolling on .card-back__scrollable works everywhere. ------------- */
  .product-card-wrap {
    perspective: none;
    -webkit-perspective: none;
  }

  .product-card-inner {
    transform: none !important;
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: none;
  }

  .product-card-face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
  }

  .product-card-front {
    transform: rotateY(0deg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .product-card-back {
    transform: rotateY(-180deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
  }

  .product-card-wrap.is-flipped .product-card-front {
    transform: rotateY(180deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .product-card-wrap.is-flipped .product-card-back {
    transform: rotateY(0deg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
  }

}

@media (max-width: 680px) {
  /* Horizontal scrolling product-card track instead of a vertical stack.
     Only this container scrolls sideways — the rest of the page never
     gains horizontal overflow. */
  .product-grid {
    display: flex;
    grid-template-columns: unset;
    flex-wrap: nowrap;
    gap: 16px;
    max-width: none;
    margin-inline: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    padding: 6px 4px 22px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge/IE */
  }

  .product-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari — hide without disabling scroll */
    height: 0;
  }

  .product-card-wrap {
    flex: 0 0 auto;
    width: min(76vw, 288px);
    max-width: none;
    height: 372px;
    margin-top: 0;
    scroll-snap-align: start;
  }

  /* First/last card get a little extra breathing room so the peek of the
     next card reads intentionally rather than as a cut-off edge. */
  .product-grid .product-card-wrap:last-child {
    margin-right: 8px;
  }

  .spotlight-specs {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. PREMIUM DARK REDESIGN — SERVICE PAGE "PRODUCTS" SECTION ONLY (#collection)
   --------------------------------------------------------------------------
   Everything below is scoped under the #collection id so the homepage's
   .products-home-section (which reuses the same base card/filter/pagination
   classes) is completely unaffected.

   This block also FIXES real layout bugs found in the base card system:
   - the category tag was position:absolute with its containing block being
     the (position:relative) card body, so it rendered on top of the title
     instead of floating above it — fixed by returning it to normal flow.
   - the card's fixed height (384px) was tuned for the old overlapping tag
     and is too short once the tag takes up real space, clipping the price/
     CTA row — fixed with taller, breakpoint-specific heights.
   - cards were capped at max-width:340px and centered inside a wider grid
     column, producing uneven side gaps instead of 3 equal, edge-to-edge
     columns — fixed by letting cards fill their grid cell.
   - mobile used a horizontal snap-scroll strip; this section now uses a
     clean, stacked single column on mobile as specified.

   No transform/perspective/backface-visibility rules (the 3D flip) and no
   touch/scroll-behavior rules (the iOS-safe internal scroll on the card
   back) are touched anywhere in this block — only layout box sizing,
   spacing and color.
   ========================================================================== */

#collection {
  padding-block: clamp(80px, 10vw, 132px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(191, 0, 0, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #101010 45%, #141414 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Decorative background layer — reuses the Services section's grid/ring
   motif (defined in services.css) so the two sections read as one system. */
#collection .svc-showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#collection .svc-showcase-bg .svc-grid-bg {
  -webkit-mask-image: radial-gradient(65% 55% at 0% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(65% 55% at 0% 0%, #000 0%, transparent 78%);
  opacity: 0.6;
}

#collection .svc-showcase-ring-a {
  top: -100px;
  left: -120px;
  right: auto;
  width: 400px;
  height: 400px;
  border-color: rgba(191, 0, 0, 0.16);
}

#collection .svc-showcase-ring-b {
  bottom: 6%;
  right: -80px;
  left: auto;
  width: 200px;
  height: 200px;
  border-color: rgba(255, 255, 255, 0.06);
}

#collection .svc-showcase-glow {
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 360px;
  background: radial-gradient(circle, rgba(191, 0, 0, 0.09) 0%, transparent 70%);
  filter: blur(60px);
}

#collection .container {
  position: relative;
  z-index: 1;
}

/* ── Header ── */
#collection .heading-block {
  margin-bottom: 4px;
}

#collection .heading-block .eyebrow {
  color: var(--brand-red, #E30613);
}

#collection .heading-block h2 {
  color: #ffffff;
}

#collection .heading-block .lead {
  color: rgba(255, 255, 255, 0.62);
}

#collection .heading-block .lead strong {
  color: rgba(255, 255, 255, 0.88);
}

/* ── Filter bar — dark pill nav ── */
#collection .product-filter-bar {
  margin-top: 30px;
}

#collection .filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

#collection .filter-btn:hover {
  border-color: rgba(225, 0, 0, 0.4);
  color: #ffffff;
  background: rgba(225, 0, 0, 0.1);
  transform: translateY(-2px);
}

#collection .filter-btn.is-active {
  background: var(--brand-red, #E30613);
  color: #ffffff;
  border-color: var(--brand-red, #E30613);
  box-shadow: 0 6px 20px -4px rgba(225, 0, 0, 0.5);
}

/* ==========================================================================
   PRODUCT GRID — exactly 3 / 2 / 1 columns, equal-width cells, balanced gaps
   ========================================================================== */
#collection .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 32px;
  margin-top: 58px;
  align-items: stretch;
}

/* Cards fill their grid cell exactly — no more centered 340px islands
   leaving uneven space inside wider columns. */
#collection .product-card-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 486px;
}

@media (max-width: 1080px) and (min-width: 681px) {
  #collection .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
  #collection .product-card-wrap {
    width: 100%;
    max-width: none;
    height: 462px;
  }
}

/* Mobile — clean single column, no horizontal scroll strip. */
@media (max-width: 680px) {
  #collection .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    flex-wrap: unset;
    gap: 30px;
    max-width: none;
    margin-inline: 0;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    padding: 0;
  }

  #collection .product-grid .product-card-wrap {
    flex: unset;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    height: 480px;
    scroll-snap-align: none;
  }

  #collection .product-grid .product-card-wrap:last-child {
    margin-right: auto;
  }
}

/* ── Card shell — dark glass, premium border, ambient hover glow ── */
#collection .product-card-face {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  box-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.8);
}

#collection .product-card-wrap:hover:not(.is-flipped) {
  transform: translateY(-6px);
}

#collection .product-card-wrap:hover .product-card-face {
  border-color: rgba(225, 0, 0, 0.4);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.85), 0 0 30px -8px rgba(225, 0, 0, 0.28);
}

#collection .product-card-wrap.is-flipped .product-card-face {
  border-color: rgba(225, 0, 0, 0.45);
  box-shadow: 0 26px 56px -20px rgba(0, 0, 0, 0.85), 0 0 34px -6px rgba(225, 0, 0, 0.34);
}

#collection .product-card-back {
  background: rgba(20, 16, 16, 0.98);
}

/* ── Image treatment — slightly taller, more premium proportion ── */
#collection .product-card__image-wrap {
  height: 226px;
  background: #ffffff;
}

@media (max-width: 1080px) and (min-width: 681px) {
  #collection .product-card__image-wrap { height: 208px; }
}

@media (max-width: 680px) {
  #collection .product-card__image-wrap { height: 224px; }
}

#collection .product-carousel__slide img {
  filter: grayscale(0.15) brightness(0.94);
  transition: transform 0.5s var(--ease), filter 0.5s ease;
}

#collection .product-card-wrap:hover .product-carousel__slide.is-active img {
  filter: grayscale(0) brightness(1);
}

/* This floating badge only appears on the BACK face image accent (none left
   on the front, since the tag now lives in normal flow above the title —
   see the fix below). Kept dark/glassy in case markup elsewhere still uses it. */
#collection .product-card-front .product-card__body > .product-card__tag {
  background: rgba(10, 10, 10, 0.86);
}

/* ==========================================================================
   FRONT FACE CONTENT — fixed tag/title overlap, clear typographic hierarchy
   ========================================================================== */
#collection .product-card__body {
  padding: 22px 24px 22px;
}

/* THE FIX: return the tag to normal document flow. The base rule makes it
   position:absolute with its containing block being .product-card__body
   (itself position:relative), so it rendered directly on top of the title.
   Static positioning restores a clean stack: tag → title → description. */
#collection .product-card-front .product-card__body > .product-card__tag {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  margin-bottom: 12px;
  color: var(--brand-red, #E30613);
  background: rgba(225, 0, 0, 0.12);
  border: 1px solid rgba(225, 0, 0, 0.28);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#collection .product-card__title {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 6px;
}

#collection .product-card__desc {
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 14px;
}

#collection .product-card__rating {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}

#collection .product-card__rating-value {
  color: #ffffff;
}

#collection .product-card__rating-count {
  color: rgba(255, 255, 255, 0.4);
}

#collection .product-card__footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#collection .product-card__price {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 18px;
  color: #ffffff;
}

#collection .product-card__cta {
  background: linear-gradient(155deg, #bf0000, #9e0000);
  box-shadow: 0 12px 26px -8px rgba(191, 0, 0, 0.55);
}

#collection .product-card__cta:hover {
  background: linear-gradient(155deg, #d40000, #a80000);
  box-shadow: 0 14px 32px -6px rgba(191, 0, 0, 0.7);
}

/* ── Back face content ── */
#collection .card-back__header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#collection .card-back__return-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
}

#collection .card-back__return-btn:hover,
#collection .card-back__return-btn:focus-visible {
  background: var(--brand-red, #E30613);
  color: #ffffff;
}

#collection .card-back__title {
  color: #ffffff;
}

#collection .card-back__desc {
  color: rgba(255, 255, 255, 0.6);
}

#collection .card-back__reviews {
  background: rgba(225, 0, 0, 0.08);
  border-color: rgba(225, 0, 0, 0.2);
}

#collection .card-back__reviews-label {
  color: rgba(255, 255, 255, 0.4);
}

#collection .card-back__reviews-stars {
  color: var(--brand-red, #E30613);
}

#collection .card-back__reviews-value {
  color: #ffffff;
}

#collection .card-back__reviews-count {
  color: rgba(255, 255, 255, 0.4);
}

#collection .card-back-spec {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
}

#collection .card-back-spec__label {
  color: rgba(255, 255, 255, 0.38);
}

#collection .card-back-spec__val {
  color: #ffffff;
}

#collection .card-back__price-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

#collection .card-back__price {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--brand-red, #E30613);
}

#collection .card-back__stock {
  color: rgba(255, 255, 255, 0.42);
}

#collection .card-back__scrollable {
  scrollbar-color: rgba(225, 0, 0, 0.4) transparent;
}

#collection .card-back__scrollable::-webkit-scrollbar-thumb {
  background: rgba(225, 0, 0, 0.4);
}

/* ── Buttons on the back face ── */
#collection .btn--buy-now {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

#collection .btn--buy-now:hover {
  background: linear-gradient(135deg, #E30613 0%, #b8010f 100%);
  border-color: #E30613;
  color: #ffffff;
}

/* ==========================================================================
   PAGINATION — clearly separated, centered, breathing room above and below
   ========================================================================== */
#collection .pagination {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: center;
}

#collection .page-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

#collection .page-btn:hover:not(:disabled) {
  border-color: rgba(225, 0, 0, 0.4);
  color: #ffffff;
  background: rgba(225, 0, 0, 0.1);
}

#collection .page-btn.is-active {
  background: var(--brand-red, #E30613);
  color: #ffffff;
  border-color: var(--brand-red, #E30613);
  box-shadow: 0 6px 20px -4px rgba(225, 0, 0, 0.5);
}

@media (max-width: 680px) {
  #collection .pagination {
    margin-top: 48px;
    padding-top: 24px;
    gap: 6px;
  }
  #collection .page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
  }
}
/* ==========================================================================
   FIX: cancel the home page's "variant B" alternating card layout
   (index.css targets .product-grid > .product-card-wrap:nth-child(2)
   unscoped, so it also hijacked the 2nd card here on the Services page —
   reversing its layout, moving its image/overlay/dots, and breaking its
   height). These #collection overrides restore a uniform layout so every
   card in this grid matches (body on top, image below, consistent height).
   ========================================================================== */
#collection .product-grid > .product-card-wrap:nth-child(2) .product-card-front {
  flex-direction: column !important;
  padding: 0 !important;
}

#collection .product-grid > .product-card-wrap:nth-child(2) .product-card__image-wrap {
  flex: none !important;
  min-height: 0 !important;
}

#collection .product-grid > .product-card-wrap:nth-child(2) .pc-overlay {
  top: auto !important;
  bottom: 14px !important;
}

#collection .product-grid > .product-card-wrap:nth-child(2) .product-carousel__dots {
  top: 12px !important;
  bottom: auto !important;
}

/* index.css also sets an unscoped min-height on .product-card-inner that
   fights this page's fixed card height, letting content spill past the
   card's rounded border. Pin it back to fill its parent exactly. */
#collection .product-card-inner {
  min-height: 0 !important;
  height: 100% !important;
}

/* ==========================================================================
   SHARED PRODUCT CARD PREMIUM THEME
   Ported from index.css so these styles apply on every page that loads
   products.css (home, services, etc.) — giving identical dark-card look.
   ========================================================================== */

/* ── Card inner min-height for the home/services showcase ── */
.products-home-section .product-card-inner { min-height: 490px; }

/* ── Hero-style dark surface for front & back faces ── */
.products-home-section .product-card-face.product-card-front,
.products-home-section .product-card-face.product-card-back {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(229, 0, 0, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(125, 125, 125, 0.14) 0%, transparent 65%),
    linear-gradient(135deg, #080808 0%, #0e0e0e 35%, #101010 65%, #0c0c0c 100%);
  border: 1px solid rgba(213, 213, 213, 0.12);
  border-radius: 20px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}
.products-home-section .product-card-wrap:hover .product-card-front {
  border-color: rgba(229, 0, 0, 0.4);
  box-shadow: 0 22px 46px -12px rgba(229, 0, 0, 0.25), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}

/* ── Card front & back base layout ── */
.products-home-section .product-card-face.product-card-front {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── Image panel (Cards 1 & 3: top of card) ── */
.products-home-section .product-card-front .product-card__image-wrap {
  flex: 0 0 255px !important;
  height: 255px !important;
  min-height: 255px !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
}
.products-home-section .product-card-front .product-carousel {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
.products-home-section .product-card-front .product-carousel__track {
  width: 100% !important;
  height: 100% !important;
}
.products-home-section .product-card-front .product-carousel__slide {
  width: 100% !important;
  height: 100% !important;
}
.products-home-section .product-card-front .product-carousel__slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.products-home-section .product-card-front .product-carousel__dots {
  position: absolute !important;
  top: 12px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 4 !important;
}
.products-home-section .product-card-front .c-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.products-home-section .product-card-front .c-dot.is-active {
  background: #e10000 !important;
}

/* ── Overlay: tag pill + rating pill ── */
.pc-overlay {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  top: auto !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.pc-overlay .product-card__tag,
.pc-overlay .product-card__rating {
  box-sizing: border-box !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  position: static !important;
  transform: none !important;
  background: linear-gradient(135deg, #ff2a2a 0%, #e10000 45%, #7a0000 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 16px rgba(225, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.pc-overlay .product-card__rating { gap: 5px !important; }
.pc-overlay .product-card__rating,
.pc-overlay .product-card__rating * { color: #ffffff !important; fill: #ffffff !important; opacity: 1 !important; }
.pc-overlay .product-card__rating-value { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1 !important; }
.pc-overlay .product-card__rating svg { display: block !important; flex: none !important; }
.pc-overlay .product-card__rating-count { display: none !important; }

/* ── Text panel ── */
.products-home-section .product-card-front .product-card__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 18px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
.pc-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.products-home-section .product-card-front .product-card__title {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
}
.pc-badge {
  flex: none !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  background: transparent !important;
}
.pc-meta {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #a2a2a2 !important;
}
.pc-meta span { margin: 0 3px !important; }

.products-home-section .product-card-front .product-card__desc {
  flex: none !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  overflow: hidden !important;
  margin: 6px 0 10px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #a2a2a2 !important;
}

/* ── Card footer: Price + Explore CTA button ── */
.products-home-section .pc-footer,
.products-home-section .product-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  width: 100% !important;
}
.products-home-section .pc-price,
.products-home-section .product-card__price {
  font-size: clamp(19px, 1.4vw, 22px) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ── Explore button — maroon pill, turns white on hover ── */
.products-home-section .product-card-front .product-card__cta.hv-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 5px 5px 5px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(225, 0, 0, 0.65) !important;
  background: linear-gradient(180deg, #7a0808 0%, #520606 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(225, 0, 0, 0.22) !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.products-home-section .product-card-front .product-card__cta.hv-btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #111111 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255, 255, 255, 0.22) !important;
}
.products-home-section .product-card-front .product-card__cta .hv-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #e10000 !important;
  color: #ffffff !important;
  flex: none !important;
  transition: transform 0.3s ease !important;
}
.products-home-section .product-card-front .product-card__cta.hv-btn:hover .hv-btn-icon {
  background: #e10000 !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

/* ── Middle card (2nd): text on top, image below ── */
.products-home-section .product-grid > .product-card-wrap:nth-child(2) .product-card-front {
  flex-direction: column !important;
  padding: 0 !important;
}
.products-home-section .product-grid > .product-card-wrap:nth-child(2) .product-card__image-wrap {
  flex: 0 0 255px !important;
  height: 255px !important;
  min-height: 255px !important;
  border-radius: 0 0 20px 20px !important;
  margin: 0 !important;
  background: transparent !important;
}
.products-home-section .product-grid > .product-card-wrap:nth-child(2) .product-carousel__dots {
  top: auto !important;
  bottom: 12px !important;
}
.products-home-section .product-grid > .product-card-wrap:nth-child(2) .pc-overlay {
  top: 14px !important;
  bottom: auto !important;
}

/* ── Back face: white text on dark surface ── */
.products-home-section .product-card-face.product-card-back { color: #ffffff; }
.products-home-section .product-card-back .card-back__header { border-bottom-color: rgba(213,213,213,0.12); }
.products-home-section .product-card-back .card-back__return-btn { border-color: rgba(255,255,255,0.25); color: #ffffff; background: transparent; }
.products-home-section .product-card-back .card-back__return-btn:hover { background: rgba(255,255,255,0.1); }
.products-home-section .product-card-back .card-back__title { color: #ffffff; }
.products-home-section .product-card-back .card-back__desc { color: #b5b5b5; }
.products-home-section .product-card-back .card-back-spec { background: rgba(255,255,255,0.05); border-color: rgba(213,213,213,0.12); }
.products-home-section .product-card-back .card-back-spec__label { color: #a2a2a2; }
.products-home-section .product-card-back .card-back-spec__val { color: #ffffff; }
.products-home-section .product-card-back .card-back__price-row { border-top-color: rgba(213,213,213,0.12); }
.products-home-section .product-card-back .card-back__price-row span[style] { color: #a2a2a2 !important; }
.products-home-section .product-card-back .card-back__price { color: #ffffff; }
.products-home-section .product-card-back .card-back__stock { color: #4ade80; }
.products-home-section .product-card-back .product-card__tag { color: #ff4d4d; }

/* ── Back face action buttons ── */
.products-home-section .product-card-back .btn--add-cart,
.products-home-section .product-card-back .btn--buy-now {
  padding: 10px 16px; font-size: 13.5px; border-radius: 999px;
  font-weight: 600; color: #ffffff;
}
.products-home-section .product-card-back .btn--add-cart {
  background: linear-gradient(180deg, #7a0808 0%, #520606 100%);
  border: 1px solid rgba(225, 0, 0, 0.65);
  box-shadow: 0 6px 18px rgba(225, 0, 0, 0.22);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.products-home-section .product-card-back .btn--add-cart:hover {
  background: linear-gradient(180deg, #a10c0c 0%, #720808 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(225, 0, 0, 0.4);
}
.products-home-section .product-card-back .btn--buy-now {
  background: #e10000;
  border: 1px solid #e10000;
  box-shadow: 0 6px 18px rgba(225, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.products-home-section .product-card-back .btn--buy-now:hover {
  background: #ff2a2a; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225, 0, 0, 0.45);
}

/* ── Card size: 520px tall ── */
.products-home-section .product-card-wrap,
.products-home-section .product-card-inner {
  height: 520px !important;
  min-height: 520px !important;
}
@media (max-width: 700px) {
  .products-home-section .product-card-wrap,
  .products-home-section .product-card-inner { height: 560px !important; min-height: 560px !important; }
  .products-home-section .product-grid { max-width: 380px; }
}

/* ── Section layout overrides ── */
.products-home-section { padding-top: clamp(48px, 6vw, 84px) !important; }
.products-home-section .hv-heading-block { margin-bottom: 24px !important; }
.products-home-section .product-grid { margin-top: 0 !important; transform: none !important; }

/* ── Section heading: readable on light background ── */
.hv-section--products .hv-heading-block .hv-h2 { color: #111111 !important; }
.hv-section--products .hv-heading-block .hv-accent-text { color: #e10000 !important; }
.hv-section--products .hv-heading-block .hv-lead-p { color: #4a4a4a !important; }
.hv-section--products .hv-heading-block .hv-section-pill {
  color: #333333 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* ── "Explore Our Services" / CTA button below cards ── */
.product-services-action {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  clear: both;
  margin: 44px 0 0;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.product-services-action .product-services-btn.hv-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  gap: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e10000 0%, #8a0000 45%, #0b0b0b 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(225, 0, 0, 0.6);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(225, 0, 0, 0.25);
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.product-services-action .product-services-btn.hv-btn:hover {
  background: linear-gradient(135deg, #e10000 0%, #8a0000 45%, #0b0b0b 100%);
  color: #ffffff;
  border-color: #e10000;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(225, 0, 0, 0.4);
  transform: translateY(-2px);
}
.product-services-action .hv-btn-icon {
  display: flex;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #ff2a2a 0%, #b00000 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 0, 0, 0.35);
}
.product-services-action .product-services-btn.hv-btn:hover .hv-btn-icon {
  background: linear-gradient(135deg, #ff2a2a 0%, #b00000 100%);
  color: #ffffff;
  transform: translateX(2px);
}

/* ==========================================================================
   MOBILE FIX (phones): buttons centred, consistent with services page
   ========================================================================== */
@media (max-width: 767px) {
  .product-card-wrap .pc-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  .product-card-wrap .product-card__cta.btn--explore-more {
    width: min(100%, 260px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
  .product-card-wrap .card-back__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .product-card-wrap .card-back__actions .btn--add-cart,
  .product-card-wrap .card-back__actions .btn--buy-now {
    width: min(100%, 260px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
}
/* ==========================================================================
   FIX: Services-page product images — show the WHOLE product inside the card
   (object-fit: contain = never cropped, never overflowing the image panel)
   ========================================================================== */
html body .products-home-section .product-grid .product-card-wrap .product-card-front .product-card__image-wrap {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000000 !important;
}
html body .products-home-section .product-grid .product-card-front .product-card__image-wrap > img.product-card__image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
html body .products-home-section .product-grid .product-card-wrap:hover .product-card__image-wrap > img.product-card__image {
  transform: none !important;
}

/* Black card background (front + back faces) */
html body .products-home-section .product-grid .product-card-wrap .product-card-face.product-card-front,
html body .products-home-section .product-grid .product-card-wrap .product-card-face.product-card-back {
  background: #000000 !important;
}

/* Hide scrollbar in cart drawer / cart section while preserving scrolling */
.cart-drawer,
.cart-drawer__panel,
.cart-drawer__body,
.cart-items-list,
#cartDrawerBody,
#coCartBody {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.cart-drawer::-webkit-scrollbar,
.cart-drawer__panel::-webkit-scrollbar,
.cart-drawer__body::-webkit-scrollbar,
.cart-items-list::-webkit-scrollbar,
#cartDrawerBody::-webkit-scrollbar,
#coCartBody::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* ==========================================================================
   MOBILE FIX (phones): wider, balanced product cards — home/services showcase
   --------------------------------------------------------------------------
   The base mobile rule sized each card at min(76vw, 288px) and the grid was
   capped at 380px, which left the cards looking narrow and compressed.
   Cards now fill the full width of their container (so they sit centred with
   even side gaps), keep the same fixed height, and cannot overflow the screen.
   Scoped to .products-home-section and phones only (<= 680px): desktop,
   tablet and every other section are untouched.
   ========================================================================== */
@media (max-width: 680px) {
  .products-home-section .product-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    scroll-padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .products-home-section .product-grid .product-card-wrap {
    /* width + flex: 0 0 auto (not a % flex-basis) so this is safe whether the
       grid lays cards out as a column or a row */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .products-home-section .product-grid .product-card-wrap:last-child {
    margin-right: 0 !important;
  }

  /* Faces always match the (now wider) wrapper exactly */
  .products-home-section .product-grid .product-card-inner,
  .products-home-section .product-grid .product-card-face {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   MOBILE FIX (phones): category + rating pills sit BELOW the product image
   --------------------------------------------------------------------------
   On the middle card (image at the bottom of the card) the category/rating
   pills were pinned to the top of the image. On phones they now follow the
   same arrangement as the image-on-top cards: pills at the bottom edge of
   the image, with the carousel dots at the top. The image itself, card
   size, colours and typography are untouched. Phones only (<= 680px).
   ========================================================================== */
@media (max-width: 680px) {
  html body .products-home-section .product-grid > .product-card-wrap:nth-child(2) .pc-overlay {
    top: auto !important;
    bottom: 14px !important;
  }

  html body .products-home-section .product-grid > .product-card-wrap:nth-child(2) .product-carousel__dots {
    top: 12px !important;
    bottom: auto !important;
  }
}


/* ==========================================================================
   MOBILE FIX (phones): more compact product cards (shorter height)
   --------------------------------------------------------------------------
   Card height 560px -> 520px. The image panel gives up 20px (255 -> 235) and
   the text area's vertical padding/gaps are tightened by a similar amount, so
   the title, description, price, Explore button, image, category pill and
   rating all stay visible and aligned. Width, colours, typography and the
   desktop layout are unchanged. Same breakpoint as the original 560px rule.
   ========================================================================== */
@media (max-width: 700px) {
  /* Overall card height */
  html body .products-home-section .product-card-wrap,
  html body .products-home-section .product-card-inner {
    height: 520px !important;
    min-height: 520px !important;
  }

  /* Image panel — slightly shorter (applies to both image-top and image-bottom cards) */
  html body .products-home-section .product-card-front .product-card__image-wrap,
  html body .products-home-section .product-grid > .product-card-wrap:nth-child(2) .product-card__image-wrap {
    flex: 0 0 235px !important;
    height: 235px !important;
    min-height: 235px !important;
  }

  /* Text area — reduce unnecessary vertical spacing */
  html body .products-home-section .product-card-front .product-card__body {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  html body .products-home-section .product-card-front .product-card__desc {
    margin: 4px 0 8px !important;
  }

  html body .products-home-section .pc-footer,
  html body .products-home-section .product-card__footer {
    padding-top: 4px !important;
    gap: 8px !important;
  }
}


/* ==========================================================================
   MOBILE FIX (phones): price left-aligned inside the product cards
   --------------------------------------------------------------------------
   The phone footer stacks price + Explore button in a centred column. Only
   the price is moved to the left edge of the text area; the Explore button
   stays centred, and the price's font, size and colour are untouched.
   Same breakpoint as the rule that centred it (<= 767px).
   ========================================================================== */
@media (max-width: 767px) {
  html body .products-home-section .pc-price,
  html body .products-home-section .product-card__price {
    align-self: flex-start !important;
    text-align: left !important;
    margin-right: auto !important;
  }
}


/* ==========================================================================
   MOBILE FIX (phones): product-card button visibility & consistency
   --------------------------------------------------------------------------
   Phones only (<= 767px). Desktop/tablet layout, button colours, gradients,
   icons and click behaviour are untouched.

   1. Services page (#collection): the front "Explore" CTA is a 42px circle on
      desktop (border-radius: 50%). The shared phone rule widens it to
      min(100%, 260px), which turned it into a flat ellipse. It is restored to
      the same maroon-red pill look used on the home cards.
   2. Every Explore / Add to Cart / Buy Now button gets a >= 44px tap target.
   3. Footers and action rows can never shrink or be pushed out of the card
      (flex-shrink: 0); the description gives way first (clamped), so the
      button is never clipped by the card's overflow:hidden.
   4. Buttons sit above the image / category / rating overlay, and the overlay
      container no longer swallows taps that land beside its pills.
   5. Sticky :hover on touch screens no longer leaves the button stuck in its
      hover colours after a tap.
   ========================================================================== */
@media (max-width: 767px) {

  /* -- 1. Services-page Explore CTA: pill, not ellipse ------------------- */
  html body #collection .product-card-front .product-card__cta {
    width: min(100%, 260px) !important;
    height: auto !important;
    min-height: 44px !important;
    margin-inline: auto !important;
    padding: 5px 5px 5px 18px !important;
    gap: 10px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Same stacked footer as the home cards: price on top, button below */
  html body #collection .product-card__footer {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  html body #collection .product-card__footer .product-card__price {
    align-self: flex-start !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  /* -- 2. Tap targets (design unchanged, just never smaller than 44px) --- */
  html body .product-card-front .product-card__cta,
  html body .product-card-back .btn--add-cart,
  html body .product-card-back .btn--buy-now {
    min-height: 44px !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  html body .product-card-back .card-back__return-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* -- 3. Buttons can never be squeezed out of the card ------------------ */
  html body .product-card-front .product-card__body {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body .product-card-front .pc-footer,
  html body .product-card-front .product-card__footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    position: relative;
    z-index: 6;
  }
  /* description is the flexible part: it shrinks first (clamped to 3 lines) */
  html body .product-card-front .product-card__desc {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    white-space: normal !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  /* Back face: header, price row and action buttons stay pinned & visible;
     only the middle section scrolls. */
  html body .product-card-back .card-back__price-row,
  html body .product-card-back .card-back__actions {
    flex-shrink: 0 !important;
    position: relative;
    z-index: 6;
  }
  html body .product-card-back .card-back__actions {
    padding-bottom: 2px;
  }
  html body .product-card-back .card-back__actions .btn--add-cart,
  html body .product-card-back .card-back__actions .btn--buy-now {
    flex-shrink: 0 !important;
    width: min(100%, 260px) !important;
    margin-inline: auto !important;
  }

  /* -- 4. Overlay (category + rating pills) must not cover buttons ------- */
  html body .product-card-front .pc-overlay {
    pointer-events: none !important;
    z-index: 3 !important;
  }
  html body .product-card-front .pc-overlay > * {
    pointer-events: auto;
    max-width: calc(50% - 4px);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  html body .product-card-front .product-card__image-wrap {
    z-index: 1 !important;
  }
}

/* -- 5. Touch screens: don't keep hover styling after a tap --------------- */
@media (max-width: 767px) and (hover: none) {
  html body .products-home-section .product-card-front .product-card__cta.hv-btn:hover {
    background: linear-gradient(180deg, #7a0808 0%, #520606 100%) !important;
    border-color: rgba(225, 0, 0, 0.65) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 6px 18px rgba(225, 0, 0, 0.22) !important;
  }
  html body #collection .product-card__cta:hover {
    background: linear-gradient(155deg, #bf0000, #9e0000) !important;
    transform: none !important;
  }
  html body .product-card-back .btn--add-cart:hover,
  html body .product-card-back .btn--buy-now:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   MOBILE FIX (phones): remove the empty gap between description and price
   --------------------------------------------------------------------------
   Cards had a fixed height (480-520px) while the text area is flex-column with
   the price/Explore footer pushed to the bottom (margin-top: auto). Whenever
   the text was shorter than the space available, the leftover became a large
   empty band above the price. On phones the front face now sizes to its own
   content, so the price sits a normal 10px under the description and the card
   is only as tall as it needs to be. The back face still fills the same box
   (min 400px) so the Add to Cart / Buy Now buttons keep their room.
   Phones only (<= 767px): desktop and tablet are untouched.
   ========================================================================== */
@media (max-width: 767px) {
  html body .product-grid {
    align-items: flex-start !important;
  }

  html body .product-grid .product-card-wrap,
  html body .product-grid .product-card-wrap .product-card-inner {
    height: auto !important;
    min-height: 400px !important;
  }

  /* Front face drives the card height (back face stays absolutely positioned) */
  html body .product-grid .product-card-wrap .product-card-front {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body .product-grid .product-card-wrap .product-card-front .product-card__body {
    flex: 0 0 auto !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }

  html body .product-grid .product-card-wrap .product-card-front .product-card__desc {
    margin: 4px 0 6px !important;
  }

  html body .product-grid .product-card-wrap .product-card-front .pc-footer,
  html body .product-grid .product-card-wrap .product-card-front .product-card__footer {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
}

/* ==========================================================================
   REMOVED: "In Stock • Ships in 24h" line on the back of every product card
   (home page + Services page, all screen sizes). The price stays in place.
   ========================================================================== */
html body .product-card-back .card-back__stock,
html body #collection .card-back__stock,
html body .products-home-section .product-card-back .card-back__stock {
  display: none !important;
}
html body .product-card-back .card-back__price-row {
  justify-content: flex-start !important;
}

/* ==========================================================================
   REMOVED: category tag pill (Cleaning / Protection / ...) on the FRONT of
   every product card. Only the star rating pill is kept, right-aligned.
   ========================================================================== */
html body .product-card-front .product-card__tag,
html body .product-card-front .pc-overlay .product-card__tag {
  display: none !important;
}
html body .product-card-front .pc-overlay {
  justify-content: flex-end !important;
}


/* ==========================================================================
   Product flip-card BACK face: compact typography (Services + Home pages)
   --------------------------------------------------------------------------
   Features list added with the Bosch product data. Sizes are set explicitly
   (the card otherwise inherits the large page font). Colours are inherited
   so the dark/light card themes keep working. Only type and spacing here.
   Scale (desktop -> mobile): title 17 | desc 12.5 | features heading 11
   | feature text 12.5 -> 12 | spec label 10.5 | spec value 12.5 -> 12
   ========================================================================== */
.product-card-back .card-back__features {
  margin: 10px 0 12px;
}
.product-card-back .card-back__features-title {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  opacity: 0.75;
}
.product-card-back .card-back__features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-card-back .card-back__features-list li {
  position: relative;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 5px;
  padding: 0 0 0 14px;
  opacity: 0.92;
}
.product-card-back .card-back__features-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.product-card-back .card-back__features-note {
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
  margin: 6px 0 0;
  opacity: 0.8;
}
.product-card-back .card-back-spec__val {
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.product-card-back .card-back-spec__val:empty::after {
  content: "\2014";
}

@media (max-width: 600px) {
  .product-card-back .card-back__title { font-size: 16px; }
  .product-card-back .card-back__desc { font-size: 12px; }
  .product-card-back .card-back__features-list li { font-size: 12px; }
  .product-card-back .card-back-spec__val { font-size: 12px; }
}