/* ================================================================
   SHARED PRODUCT CARD — single source of truth

   The same product box is used in two places:

     • categories.php  — the main comparison grid
     • index.php       — the "Top Deals & Offers" slider

   Before this file each page styled the card separately, so the home
   slider drifted away from the category page. These are the values that
   were already live on the category page (the winning rules after
   category.css and compare.css had both loaded), copied here once so
   the two pages cannot disagree again.

   Loaded LAST on both pages, so it also settles the older duplicates.
   ================================================================ */

:root {
  --pc-primary: #079f34;
  --pc-navy:    #031e43;
  --pc-yellow:  #ffae00;
}

/* ---------------------------------------------------------- card shell */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.30) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 8px 24px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, background-color 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
}

/* keep the "buy" button pinned to the bottom so every card is the same
   height regardless of how many lines the title wraps to */
.product-card .card-buy { margin-top: auto; }

/* ---------------------------------------------------------- offer chip */
.product-label {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
}
.product-label.offer { color: #0c9d3d; background: #e5f9ed; }
.product-label.green { color: #078b38; background: #e5f9ed; }
.product-label.blue  { color: #1686cf; background: #e8f7ff; }
.product-label.teal  { color: #0b9985; background: #e5faf7; }

/* --------------------------------------------------------- wishlist */
.product-card .wishlist,
.wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #ff6681;
  background: #fff;
  border: 1px solid #e2edf2;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.product-card .wishlist.on,
.product-card .wishlist.on i { color: #e11d48; }

/* --------------------------------------------------------- store count */
.product-card .multi-store,
.product-grid .product-card .multi-store {
  position: absolute;
  top: 9px;
  right: 46px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(9, 32, 64, 0.82);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}

/* ---------------------------------------------------------- image block */
.product-image {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 9px;
  border-radius: 10px;
  background: #fbfdff;
  overflow: hidden;
}
.product-image > a,
.product-grid .product-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.product-image img,
.product-image > a > img,
.product-grid .product-image > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.product-card:hover .product-image img { transform: scale(1.04); }

/* ------------------------------------------------------------- title */
.product-card h3 {
  min-height: auto;
  margin: 0 0 6px;
  color: var(--pc-navy);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card h3 a,
.product-grid .product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover,
.product-grid .product-card h3 a:hover { color: var(--pc-primary); }

/* ------------------------------------------------------------- price */
.product-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 24px;
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 800;
}
.product-price del {
  margin-left: 4px;
  color: #9babb9;
  font-size: 11px;
  font-weight: 400;
}

/* ------------------------------------------------------------- rating */
.rating,
.product-card .rating {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  margin-top: 6px;
  font-size: 11px;
}
.rating span { color: var(--pc-yellow); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.rating .ss {
  color: var(--pc-yellow);
  font-size: 11px;
  line-height: 1;
  /* the star must not be squeezed by the flex gap or the line box */
  flex: 0 0 auto;
}
.rating small { color: #8396a8; font-size: 11px; }

/* -------------------------------------------------------------- stock */
.stock,
.product-card .stock {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin-top: 6px;
  color: #22a95a;
  font-size: 11px;
}
.stock span {
  width: 8px;
  height: 8px;
  background: #1abb59;
  border-radius: 50%;
  flex-shrink: 0;
}
.stock.out { color: #e11d48; }
.stock.out span { background: #e11d48; }

/* ------------------------------------------------------ compare toggle */
.compare-check,
.product-card .compare-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #64798d;
  font-size: 11px;
  cursor: pointer;
}
.compare-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--pc-primary);
  cursor: pointer;
}

/* --------------------------------------------------------- store logo

   The store badge was a 20px circle absolutely pinned to the card's bottom
   corner, sitting on top of the Buy button. It overlapped the button, was too
   small to identify, and on some themes disappeared against the image.

   It is now a proper inline badge: it sits under the price like any other
   field, is large enough to recognise, and no longer covers the Buy button. */
.product-card .store-logo {
  display: block;
  position: static;
  width: 44px;
  height: 44px;
  padding: 5px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dbe6ee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(23, 80, 100, 0.16);
  margin-top: 10px;
  pointer-events: none;
}
html.dark .product-card .store-logo {
  background: #14202f;
  border-color: #24334a;
}
/* Shown when a store has no logo image: the same box the <img> would have
   occupied, so the card layout does not shift. */
.store-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(23, 80, 100, 0.16);
}

/* ------------------------------------------------------------ buy cta */
.product-card .card-buy,
.product-grid .product-card .card-buy {
  display: block;
  margin-top: 9px;
  padding: 8px 6px;
  border-radius: 9px;
  background: #079f34;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.product-card .card-buy:hover,
.product-grid .product-card .card-buy:hover { filter: brightness(1.08); }

/* ================================================================
   TOP DEALS SLIDER (index.php only)

   A horizontal track of the same card. The card is given a fixed width
   so the track can scroll; that width is the same ballpark as one
   column of the category grid (auto-fill minmax(230px, 1fr)), which
   is what makes the two look like the same product box.
   ================================================================ */

/* ------------------------------------------------ water-drop glass --
   The hero's visual language applied to the deal strip: droplets
   floating behind the boxes, and a card highlight that sits in the
   top-left corner the way light hits a real droplet. Scoped to
   .deals-section so the category grid keeps its flatter glass. */
.deals-section { position: relative; overflow: hidden; }
.deals-section > * { position: relative; z-index: 2; }

.deals-drops {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.deals-drops .sd {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.30) 38%,
      rgba(180, 225, 255, 0.18) 62%,
      rgba(255, 255, 255, 0) 78%);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.85),
    0 6px 18px rgba(30, 80, 140, 0.10);
  animation: sdFloat 9s ease-in-out infinite;
}
@keyframes sdFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -16px, 0) scale(1.06); }
}

/* the droplet highlight itself, painted on the card surface */
.deals-section .product-card {
  background:
    radial-gradient(120% 90% at 18% 0%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0) 70%),
    rgba(255, 255, 255, 0.34) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 26px rgba(25, 65, 100, 0.10) !important;
}
.deals-section .product-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 20px 40px rgba(25, 65, 100, 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .deals-drops .sd { animation: none; }
}

.deals-slider { position: relative; }

/* The arrows are centred on the TRACK, not on the slider, which also holds
   the page dots. This wrapper is exactly the track's box. */
.deals-track-wrap { position: relative; }

.deals-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Swipe the strip to its end and the leftover movement used to chain to
     the page, dragging the whole homepage sideways from a single swipe.
     Containing the overscroll keeps the gesture inside the strip. */
  overscroll-behavior-x: contain;
  /* room for the hover lift and the glass shadow: the 4px side padding
     lives INSIDE the scroll box. The old "-4px" side margins pushed the
     box past the viewport edges, which made the ENTIRE page scroll
     sideways by ~8px on every device. */
  padding: 6px 4px 14px;
  margin: -6px 0 0;
}
.deals-viewport::-webkit-scrollbar { height: 0; display: none; }

.deals-track {
  /* Card width lives in ONE variable so the strip can be re-fitted to the
     window without touching the card rule. js/top-deals.js sets this inline
     (an inline value beats every rule below), which is what lets the row
     divide the available width instead of stopping short and leaving dead
     space on the right. The numbers here are only the no-JS fallback. */
  --deals-card-w: 240px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.deals-track .product-card {
  flex: 0 0 var(--deals-card-w);
  width: var(--deals-card-w);
  min-width: 0;
  height: 100%;
}

@media (max-width: 900px)  { .deals-track { --deals-card-w: 210px; } }
@media (max-width: 600px)  { .deals-track { --deals-card-w: 172px; } }
@media (max-width: 380px)  { .deals-track { --deals-card-w: 152px; } }

/* --- prev / next arrows, centred on the track edges ---
   These are <button>s now, so their `disabled` state is real: the arrow hides
   itself at the start of the track instead of staying visible and inert, and
   it is reachable by keyboard. `top:50%` is relative to .deals-slider, which
   is `position:relative` and wraps only the track - so "centred" means
   centred on the cards. */
.deals-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #0f172a;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.deals-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.deals-nav[disabled] { opacity: 0; pointer-events: none; }
.deals-nav.prev { left: 4px; }
.deals-nav.next { right: 4px; }

/* phones: the arrows would overlap the tiny cards or poke off-screen;
   touch-swipe and the dots page the track instead. */
@media (max-width: 767px) {
  .deals-nav { display: none; }
}

/* --- dots, one per "page" of the track --- */
.deals-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.deals-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.35);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.deals-dots button.on { width: 20px; background: #079f34; }

.deals-empty { color: #94a3b8; font-size: 13px; }

/* Respect users who do not want motion. */
@media (prefers-reduced-motion: reduce) {
  .deals-viewport { scroll-behavior: auto; }
  .product-card:hover { transform: none !important; }
  .product-card:hover .product-image img { transform: none; }
}