/* ===== Amazon-like product cards (two-tone) ===== */

:root{
  --pcard-border: #e6e7e9;
  --pcard-media-bg: #fff;     /* was #f6f7f9 */
  --pcard-body-bg:  #f6f7f9;  /* was #fff */
  --pcard-shadow: 0 2px 10px rgba(0,0,0,.06);
  --pcard-shadow-hover: 0 6px 18px rgba(0,0,0,.10);
  --pcard-radius: 10px;
  --muted: #6b7280;
  --price: #0f1111;
  --mrp: #565959;
  --link: #007185;
}

.pcard{
  display:block;
  color:inherit;
  text-decoration:none;
}
.pcard-box{
  border:1px solid var(--pcard-border);
  border-radius: var(--pcard-radius);
  overflow:hidden;
  background: var(--pcard-body-bg);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pcard:hover .pcard-box{
  box-shadow: var(--pcard-shadow-hover);
  transform: translateY(-2px);
  border-color:#d5d7db;
}

/* top media (tone #1) */
.pcard-media{
  background: var(--pcard-media-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 220px;               /* keep images aligned */
  position:relative;
}
.pcard-media img{
  width: 86%;
  height: 86%;
  object-fit: contain;
  display:block;
}

/* bottom info (tone #2) */
.pcard-body{
  background: var(--pcard-body-bg);
  padding: 10px 12px 14px;
}

/* price block */
.a-price-block{
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.a-price{
  display:flex; align-items:flex-start; gap:2px;
  font-weight:700; color:var(--price); line-height:1;
}
.a-price-symbol{ font-size: 16px; transform: translateY(1px); }
.a-price-whole{ font-size: 20px; }
.a-price-fraction{ font-size: 12px; align-self:flex-start; transform: translateY(2px); }

/* Out-of-stock badge next to price */
.stock-badge{ font-size:12px; margin-left:8px; }
.stock-badge.is-oos{ color:#B12704; font-weight:600; }

.a-mrp{
  color: var(--mrp);
  font-size: 12px;
  text-decoration: line-through;
  margin-top: 2px;
  width: 100%; /* keep MRP on next line when badge is present */
}

/* title – clamp to 2 lines */
.pcard-title{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: #0f1111;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* subtle prime/reviews placeholders (optional) */
.pcard-meta{
  margin-top: 6px;
  display:flex; align-items:center; gap:8px;
  color: var(--muted); font-size:12px;
}

/* === Add to Cart button (desktop & general baseline) === */
.pcard .btn{
  display:block;
  width:100%;
  margin-top:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  text-align:center;
  border:1px solid #fcd200;
  background:#ffd814;
  color:#0f1111;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .05s ease, background-color .15s ease;
  white-space:nowrap; /* keep single-line on narrow cards */
}
.pcard .btn:hover{ background:#f7ca00; }
.pcard .btn:active{ transform: translateY(1px); }
.pcard .btn:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.pcard .btn[disabled],
.pcard .btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
  filter:grayscale(.15);
}
.pcard .btn.ok{ outline:2px solid #22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); }

/* =========================================================
   ROW CONTAINER (works with existing .row/.products)
   Base equal-height grid (variable --cols)
   ========================================================= */

/* ✅ Full-width safety: make sure row + inner grid expand fully,
   even if a global .row sets flex or a max-width elsewhere. */
.row.amazon-row{
  display:block;           /* override any flex row baseline */
  width:100%;
  max-width:none;
}
.row.amazon-row .products{
  width:100%;
  max-width:none;
  min-width:0;
  flex:1 1 auto;           /* harmless when parent isn’t flex */
}

/* Also ensure the common wrappers fill available width */
#grid, .cat-grid, .srch-grid{ display:block; width:100%; max-width:none; min-width:0; }

.row.amazon-row .products{
  --cols: 8;                           /* default fallback (JS can override) */
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(var(--cols), 1fr);
  align-items: stretch;                 /* make all items equal height */
}
.row.amazon-row .products > *{ height: 100%; }
.pcard, .pcard-box{ height: 100%; display:flex; flex-direction:column; }

/* Consistent media window so all images align */
.pcard-media{
  height: 220px;
  display:flex; align-items:center; justify-content:center;
  background: var(--pcard-media-bg);
}
.pcard-media img{
  max-width: 90%;
  max-height: 90%;
  width: auto; height: auto;
  object-fit: contain;
}

/* Reserve exactly two title lines so cards stay same height */
.pcard-title{
  font-size: 13px;
  line-height: 1.3;
  display:-webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.6em;                    /* 2 lines × line-height */
}

/* Optional: keep price block height predictable */
.a-price-block{ min-height: 30px; }

/* Responsive fallbacks (for the base grid only) */
@media (max-width:1600px){ .row.amazon-row .products{ --cols: 6; } }
@media (max-width:1400px){ .row.amazon-row .products{ --cols: 5; } }
@media (max-width:1200px){ .row.amazon-row .products{ --cols: 4; } }
@media (max-width:900px) { .row.amazon-row .products{ --cols: 3; } }
@media (max-width:640px) { .row.amazon-row .products{ --cols: 2; } }

/* =========================================================
   HOMEPAGE ROWS
   - Default: multi-row grid (no scroller)
   - If .home-scroller is present: single-line horizontal scroller
   Admin sets --cols; JS passes --vis for scroller when used
   ========================================================= */

/* Default home grid (no scroller) */
.row.amazon-row .products.home-products{
  width:100%;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-columns: initial;

  overflow-x: visible;
  overflow-y: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior-x: auto;
}

/* Scroller variant (wins over the default via extra class + !important) */
.row.amazon-row .products.home-products.home-scroller{
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - (var(--vis) - 1) * 14px) / var(--vis)) !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 8px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-x;
}
.row.amazon-row .products.home-products.home-scroller > a{ scroll-snap-align: start; height: 100%; }

/* Scroller visible count on smaller screens */
@media (max-width:900px){
  .row.amazon-row .products.home-products.home-scroller{ --vis: 3; }
}
@media (max-width:640px){
  .row.amazon-row .products.home-products.home-scroller{ --vis: 2.2; }
}

/* ✅ Mobile overrides for scroller feel */
@media (max-width: 900px){
  .row.amazon-row .products.home-products.home-scroller{
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity !important;
  }
}

/* Optional: thinner scrollbar for scroller only */
.row.amazon-row .products.home-products.home-scroller::-webkit-scrollbar{ height: 8px; }
.row.amazon-row .products.home-products.home-scroller::-webkit-scrollbar-thumb{ background:#d0d3d8; border-radius:6px; }
.row.amazon-row .products.home-products.home-scroller{ scrollbar-width: thin; scrollbar-color:#d0d3d8 transparent; }

/* =========================================================
   CATEGORY PAGE: multi-row grid
   ========================================================= */
.row.amazon-row .products.category-products{
  --cols: 5;
  width:100% !important;

  grid-auto-flow: row !important;
  grid-template-columns: repeat(var(--cols), 1fr) !important;
  grid-auto-columns: initial !important;

  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior-x: auto !important;
}
/* Keep 5 on big screens, then 4 → 3 → 2 (CATEGORY grid) */
@media (max-width:1600px){ .row.amazon-row .products.category-products{ --cols: 5; } }
@media (max-width:1400px){ .row.amazon-row .products.category-products{ --cols: 5; } }
@media (max-width:1200px){ .row.amazon-row .products.category-products{ --cols: 4; } }
/* HARD overrides to prevent overflow on mobile/tablet */
@media (max-width: 900px){
  .row.amazon-row .products.category-products{
    --cols: 3 !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px){
  .row.amazon-row .products.category-products{
    --cols: 2 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: hidden !important;
  }
}

/* =========================================================
   SEARCH PAGE GRID: multi-row grid controlled by --cols
   ========================================================= */
.row.amazon-row .products.search-products{
  width:100% !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(var(--cols), 1fr) !important;
  grid-auto-columns: initial !important;

  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior-x: auto !important;
}
/* HARD overrides to prevent overflow on mobile/tablet */
@media (max-width: 900px){
  .row.amazon-row .products.search-products{
    --cols: 3 !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px){
  .row.amazon-row .products.search-products{
    --cols: 2 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: hidden !important;
  }
}

/* =========================================================
   📱 MOBILE REFINEMENTS
   - Force sane columns for home grid when NOT using scroller
   - Compact corner cart button (home rows only)  ➜ now only when not .btn--full
   - Shorter media window (override min-height too)
   ========================================================= */

/* small tablets: force 3-up even if inline styles set higher */
@media (max-width: 900px){
  .row.amazon-row .products.home-products:not(.home-scroller){
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* phones: force 2-up even if inline styles set higher */
@media (max-width: 640px){
  .row.amazon-row .products.home-products:not(.home-scroller){
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* shorter image window – override both height and min-height */
  .pcard-media{
    height: 180px;
    min-height: 160px; /* beats the earlier 220px */
  }

  /* Home rows only: layout for CTA */
  .row.amazon-row .products.home-products .pcard-body{
    position: relative;
    padding-bottom: 14px; /* normal spacing with full-width button */
  }
  /* If (and only if) the compact FAB is used, add extra pad for its overlap */
  .row.amazon-row .products.home-products .pcard-body:has(.btn:not(.btn--full)){
    padding-bottom: 56px;
  }

  /* ✅ Compact FAB style ONLY when the button is NOT .btn--full */
  .row.amazon-row .products.home-products .pcard .btn:not(.btn--full){
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    position: absolute;
    right: 10px;
    bottom: 10px;

    font-size: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .row.amazon-row .products.home-products .pcard .btn:not(.btn--full)::before{
    content: "🛒";
    font-size: 20px;
  }

  /* Full-width button when explicitly marked */
  .row.amazon-row .products.home-products .pcard .btn.btn--full{
    width:100%;
    height:auto;
    padding:10px 14px;
    position:static;
    right:auto;
    bottom:auto;
    font-size:inherit;
    display:block;
  }
  .row.amazon-row .products.home-products .pcard .btn.btn--full::before{ content:none; }
}

/* extra-small phones */
@media (max-width: 400px){
  .pcard-media{
    height: 160px;
    min-height: 140px;
  }
}