/* ==========================================================
   Location: /assets/css/best-selling.css
   Purpose:
   - Home section: Best Selling Products
   - Layout: Image LEFT + Details RIGHT (premium inline)
   - Right column order:
     1) Category (top)
     2) Title
     3) Price (left) + Rating (right)
     4) Wishlist (left) + Add to cart (right)
   - Scoped overrides ONLY for .hdaf-bs (safe for shop/wishlist pages)
   Related:
   - Section PHP: /template-parts/home/best-selling.php
   - Base CSS: /assets/css/product-loop.css
========================================================== */

/* Section spacing */
.hdaf-bs.hdaf-ps-section{ padding: 22px 0 12px; }

/* Grid */
.hdaf-bs__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Prevent hover clipping */
.hdaf-bs,
.hdaf-bs .hdaf-container,
.hdaf-bs__inner,
.hdaf-bs__grid{ overflow: visible; }

.hdaf-bs__item{ min-width:0; }

/* ==========================================================
   Card layout (inline, stable)
========================================================== */
.hdaf-bs .hdaf-pl{
  position: relative;
  display:grid;
  grid-template-columns: 124px 1fr; /* image left */
  column-gap: 14px;
  row-gap: 8px;

  padding: 14px;
  padding-bottom: 0px !important; /* 14 - 10 = 4 */
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

/* Reset global translateY pulls from product-loop.css (best-selling only) */
.hdaf-bs .hdaf-pl__title,
.hdaf-bs .hdaf-pl__row--meta,
.hdaf-bs .hdaf-pl__row--actions,
.hdaf-bs .hdaf-pl__rating{
  transform: none !important;
}

/* Make link split possible (so media stays left, details right) */
.hdaf-bs .hdaf-pl__link{ display: contents; }

/* LEFT: Media */
.hdaf-bs .hdaf-pl__media{
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;

  /* requested: border radius 5px (for 1px border) */
  border-radius: 5px;
  overflow: hidden;

  background:#fff;
  border:1px solid rgba(0,0,0,.06) !important;
}

.hdaf-bs .hdaf-pl__media img{
  width:100% !important;
  height:auto !important;
  display:block;
  aspect-ratio: 1 / 1;
  object-fit: contain;

  border-radius: 5px;
  transition: transform 200ms ease;
  transform-origin:center;
}

/* ==========================================================
   Right column: move blocks 5px UP (as requested)
========================================================== */
.hdaf-bs .hdaf-pl__catwrap,
.hdaf-bs .hdaf-pl__row--meta,
.hdaf-bs .hdaf-pl__row--actions{
  transform: translateY(-5px) !important;
}

/* RIGHT: Category (top) */
.hdaf-bs .hdaf-pl__catwrap{
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
}

.hdaf-bs .hdaf-pl__cat{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
  text-decoration: none;
}
.hdaf-bs .hdaf-pl__cat:hover{
  color: rgba(0,0,0,.92);
  text-decoration: underline;
}

/* RIGHT: Title */
.hdaf-bs .hdaf-pl__title{
  grid-column: 2;
  grid-row: 2;

  margin: 0 !important;
  font-size: 14px;
  line-height: 1.28;
  color:#0e5aa7;

  /* title ko extra uper */
  transform: translateY(-10px) !important;

  /* 2-line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* reserve 2 lines height (1 line ho tab bhi) */
  min-height: calc(1.28em * 2);
  max-height: calc(1.28em * 2);
}


/* RIGHT: Price + Rating row */
.hdaf-bs .hdaf-pl__row--meta{
  grid-column: 2;
  grid-row: 3;

  margin: 0 !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

/* Price (left) */
.hdaf-bs .hdaf-pl__price,
.hdaf-bs .hdaf-pl__price .amount{
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #000 !important;
}

/* Rating (right) */
.hdaf-bs .hdaf-pl__rating{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 84px;
}

/* RIGHT: Wishlist + ATC row */
.hdaf-bs .hdaf-pl__row--actions{
  grid-column: 2;
  grid-row: 4;

  margin-top: 4px !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

/* Ensure wishlist stays left and atc stays right */
.hdaf-bs .hdaf-pl__wish,
.hdaf-bs .hdaf-pl-action--wishlist{
  flex: 0 0 auto;
}

.hdaf-bs .hdaf-pl__atc{
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
}

/* If compare exists, keep it hidden in this compact row (premium clean) */
.hdaf-bs .hdaf-pl__compare{ display:none !important; }

/* ==========================================================
   Hover (premium, light, performance-safe)
========================================================== */
@media (hover:hover) and (pointer:fine){
  .hdaf-bs .hdaf-pl:hover{
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 0px 6px rgba(0,0,0,.18);
  }
  .hdaf-bs .hdaf-pl:hover .hdaf-pl__media img{
    transform: scale(1.04);
  }
}

/* Price + Rating row: total 10px up (5px more than base -5) */
.hdaf-bs .hdaf-pl__row--meta{
  transform: translateY(-10px) !important;
}

/* Wishlist + ATC row: total 13px up (8px more than base -5) */
.hdaf-bs .hdaf-pl__row--actions{
  transform: translateY(-13px) !important;
}

/* Best Selling: allow overlay to show fully */
.hdaf-bs .hdaf-pl__media{
  overflow: visible !important;
}

/* Quick View 20px up (from center) */
.hdaf-bs .hdaf-pl__media .hdaf-qv-btn{
  top: calc(50% - -15px) !important;
}


/* =========================================
   Best Selling: Adjust Quick View
========================================= */

/* --- Quick View size 10px smaller --- */
.hdaf-bs .hdaf-pl__media .hdaf-qv-btn{
  min-width: 82px !important;   /* was ~92 */
  height: 26px !important;      /* was ~36 */
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

/* ==========================================================
   Best Selling: Compare (exact selector)
   - 10px up (NO left/right move)
   - 5px smaller
========================================================== */
.hdaf-bs .hdaf-pl .hdaf-compare-btn--overlay{
  /* 5px smaller */
  width: 33px !important;
  height: 33px !important;
  border-radius: 999px !important;

  /* 10px up (without transform so no horizontal shift) */
  bottom: calc(12px + 10px) !important;
}

/* Icon smaller (match proportion) */
.hdaf-bs .hdaf-pl .hdaf-compare-btn__ico{
  width: 15px !important;
  height: 15px !important;
}

.hdaf-bs .hdaf-pl .hdaf-compare-btn--overlay{
  top: calc(75% - 10px) !important;
  bottom: auto !important;
}

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 991px){
  .hdaf-bs__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hdaf-bs .hdaf-pl{ grid-template-columns: 116px 1fr; padding: 12px; border-radius: 16px; }
  .hdaf-bs .hdaf-pl__rating{ min-width: 76px; }
}

@media (max-width: 560px){
  .hdaf-bs__grid{ grid-template-columns: 1fr; gap: 14px; }
  .hdaf-bs .hdaf-pl{ grid-template-columns: 110px 1fr; column-gap: 12px; }
  .hdaf-bs .hdaf-pl__title{ font-size: 13px; }
}