/* ============================================================
   Product card — ported from PUREDOZO card system (2026-07-04),
   re-skinned to Perks brand: purple #4D008C, yellow #FFD400,
   Montserrat (theme font), white card border + yellow hover invert
   (signature Perks interaction kept from the old card).
   Base = "1 card" (carousel / desktop grid). "#product-grid"
   scope = compact 2-col layout, mobile/tablet only (<990px).
   ============================================================ */

/* ---- Card ---- */
.updated-product-card{
  --upc-radius:22px;
  --upc-badge-bg:rgba(58,0,104,.92);   /* deep purple pills — high contrast on the yellow tile */
  --upc-promo-bg:rgba(77,0,140,.95);   /* promo inverted: purple bg + yellow text (yellow badge would vanish on yellow tile) */
  --upc-inset:14px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  background:#4D008C;
  border:1px solid #fff;
  border-radius:var(--upc-radius);
  overflow:hidden;
  box-sizing:border-box;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, background-color .3s ease, border-color .3s ease;
  font-family:'Montserrat','Outfit',sans-serif;
}
.updated-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 26px rgba(0,0,0,.35);
  background:#FFD400;
  border-color:#FFD400;
}

/* ---- Image + gradient ---- */
.upc__image{
  position:relative;
  width:100%;
  aspect-ratio:189/230;      /* portrait — trimmed so the pack nearly touches the top/bottom badges */
  background:linear-gradient(180deg,#FFDC3D 0%,#FFC800 100%);   /* perks yellow tile (user request 2026-07-04) */
  border-radius:var(--upc-radius);
  overflow:hidden;
}
.upc__pack{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;                 /* pack fills the tile edge-to-edge (top/left/right = 0) */
  box-sizing:border-box;
}
.upc__pack--full{ padding:0; object-fit:cover; }   /* fallback featured image fills tile */

/* ---- Badges ---- */
.upc__badge{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding:6px 10px;
  border-radius:10px;
  background:var(--upc-badge-bg);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  color:#fff;
  line-height:1;
  z-index:2;
}
.upc__badge--tl{ top:var(--upc-inset); left:var(--upc-inset); }
.upc__badge--tr{ top:var(--upc-inset); right:var(--upc-inset); }
.upc__badge--bl{ bottom:var(--upc-inset); left:var(--upc-inset); }
.upc__badge--br{
  bottom:var(--upc-inset); right:var(--upc-inset);
  flex-direction:row; align-items:center; gap:6px; padding:5px 10px;
}

/* ---- Badge rows: left/right badges share a flex row and can NEVER overlap.
   If both don't fit (narrow carousel card + long values) the right badge
   wraps onto its own line instead of colliding. ---- */
.upc__badge-row{
  position:absolute;
  left:var(--upc-inset);
  right:var(--upc-inset);
  display:flex;
  gap:6px;
  z-index:2;
  pointer-events:none;
}
.upc__badge-row--top{ top:var(--upc-inset); flex-wrap:nowrap; align-items:flex-start; }
.upc__badge-row--bottom{ bottom:var(--upc-inset); flex-wrap:nowrap; align-items:flex-end; }
.upc__badge-row .upc__badge{ position:static; flex:0 0 auto; }
.upc__badge-row .upc__badge--tr,
.upc__badge-row .upc__badge--br{ margin-left:auto; }
.upc__badge-lg{ font-size:18px; font-weight:700; line-height:1.05; }
.upc__badge-sm{ font-size:15px; font-weight:500; line-height:1.05; }
.upc__badge--promo{
  background:var(--upc-promo-bg);
  color:#F2FF00;   /* same acid lime as the bottom-right badge icon (user request 2026-07-05) */
  font-weight:700;
  font-size:16px;
  text-align:center;
  line-height:1.05;
  max-width:78px;
  align-items:center;
}
.upc__badge-ico{ display:inline-flex; width:14px; height:14px; flex:0 0 auto; }
.upc__badge-ico svg{ width:100%; height:100%; display:block; }

/* "N tabs / N cubes" (bottom-right): always ONE line — long values like
   "20 cubes" wrap to two lines otherwise; keep the badge compact instead of huge */
.upc__badge--br{ white-space:nowrap; }
.upc__badge--br .upc__badge-sm{ font-size:15px; font-weight:600; }
.upc__badge--br .upc__badge-ico{ width:15px; height:15px; }
.upc__badge--br{ min-height:46px; box-sizing:border-box; }

/* D9 Smashers gummies carry a 5-digit "10,000mg / 20,000mg" bottom-left badge
   whose big number is wide enough to collide with the bottom-right "20 cubes" badge.
   Shrink that number (only on these products) so the two bottom badges clear each other. */
.updated-product-card[href*="d9-smasher"] .upc__badge--bl{ max-width:44%; }
.updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:13px; }
#product-grid .updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:11px; }
@media screen and (min-width:750px){
  .updated-product-card[href*="d9-smasher"] .upc__badge--bl .upc__badge-lg{ font-size:16px; }
}

/* ---- Info ---- */
.upc__info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 20px 20px;
  flex:1 1 auto;
}
.upc__title{
  margin:0;
  color:#fff;
  font-weight:900;
  font-size:20px;
  line-height:1.2;
  font-family:'Montserrat','Outfit','Arial Black',sans-serif;
  text-align:left;
  transition:color .3s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis-weight: none;
  /* HH titles are long ("Dozo PERKS 7-HYDROXYMITRAGYNINE | ...") — wrap anywhere + clamp to 3 lines */
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* all info lines start at the same left edge (grid centers text otherwise) */
.upc__info{ text-align:left; }
.upc__meta{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#fff;
  font-weight:500;
  font-size:16px;
  transition:color .3s ease;
}
.upc__rating,
.upc__flavors{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.upc__ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.upc__ico--star{ width:19px; height:19px; }
.upc__ico--flavor{ width:16px; height:16px; }
.upc__ico svg{ width:100%; height:100%; display:block; }
/* icon color: perks yellow, flips to purple on the yellow hover card */
.upc__ico svg{ --fill-0:#FFD400; --stroke-0:#FFD400; }
.upc__price{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.upc__price-from{ color:#C9B8DC; font-weight:500; font-size:20px; transition:color .3s ease; }
.upc__price-val{ color:#fff; font-weight:700; font-size:20px; transition:color .3s ease; }

/* ---- Perks hover invert: yellow card, purple text/icons ---- */
.updated-product-card:hover .upc__title,
.updated-product-card:hover .upc__meta,
.updated-product-card:hover .upc__price-from,
.updated-product-card:hover .upc__price-val{ color:#4D008C; }
.updated-product-card:hover .upc__ico svg{ --fill-0:#4D008C; --stroke-0:#4D008C; }

/* ============================================================
   Format "1 card" — carousel width (updated-featured-products)
   ============================================================ */
.updated-featured-products_scroll .updated-product-card{ flex:0 0 auto; width:300px; }

@media screen and (max-width:860px){
  .updated-featured-products_scroll .updated-product-card{ width:86vw; max-width:360px; }
}

/* ============================================================
   Format "2 cards" — collection grid, MOBILE/TABLET ONLY (compact, meta stacked).
   Desktop (≥990px) intentionally falls through to the base "1 card"
   layout so the 3-per-row grid matches the featured carousel.
   Scope by #product-grid (unique to main-collection-product-grid),
   NOT .product-grid — carousels (featured-collection/product) also use
   ul.product-grid and must keep the "1 card" base layout.
   ============================================================ */
@media screen and (max-width:989px){
#product-grid .updated-product-card{ --upc-radius:18px; --upc-inset:8px; }
#product-grid .updated-product-card .upc__info{ padding:12px 14px 14px; gap:6px; }
#product-grid .updated-product-card .upc__title{ font-size:16px; line-height:1.15; }
#product-grid .updated-product-card .upc__meta{ flex-direction:column; align-items:flex-start; gap:6px; font-size:14px; }
/* uniform line spacing: drop the auto push on price + equal meta icon widths so rating/flavors text align */
#product-grid .updated-product-card .upc__price{ margin-top:0; }
#product-grid .updated-product-card .upc__meta .upc__ico{ width:18px; height:18px; }
#product-grid .updated-product-card .upc__price-from,
#product-grid .updated-product-card .upc__price-val{ font-size:16px; }

/* Portrait image + full-width pack (2-card layout: gradient 189×258, pack spans full width) */
#product-grid .updated-product-card .upc__image{ aspect-ratio:189 / 258; border-radius:18px; }
#product-grid .updated-product-card .upc__pack{ padding:0; object-position:center; }

/* compact badges so all 4 corners fit the narrow 2-col tile without overlap */
#product-grid .updated-product-card .upc__badge{ padding:4px 6px; }
#product-grid .updated-product-card .upc__badge--br{ gap:5px; padding:6px 4px; bottom:17px; min-height:0; }
#product-grid .updated-product-card .upc__badge--br .upc__badge-sm{ font-size:14px; }
#product-grid .updated-product-card .upc__badge--br .upc__badge-ico{ width:15px; height:15px; }
#product-grid .updated-product-card .upc__badge-lg{ font-size:13px; }
#product-grid .updated-product-card .upc__badge-sm{ font-size:11px; }
#product-grid .updated-product-card .upc__badge-ico{ width:12px; height:12px; }
#product-grid .updated-product-card .upc__badge--promo{ font-size:15px; max-width:80px; line-height:1.05; padding:6px 8px; }

/* enlarge the two LEFT badges (dose / pack weight) for prominence — same as PD template */
#product-grid .updated-product-card .upc__badge--tl,
#product-grid .updated-product-card .upc__badge--bl{ padding:6px 6px; }
#product-grid .updated-product-card .upc__badge--tl .upc__badge-lg,
#product-grid .updated-product-card .upc__badge--bl .upc__badge-lg{ font-size:17px; }
#product-grid .updated-product-card .upc__badge--tl .upc__badge-sm,
#product-grid .updated-product-card .upc__badge--bl .upc__badge-sm{ font-size:13px; }
}

/* ============================================================
   Widen the "featured products" carousel on tablet/mobile:
   the page-width wrapper adds large side gutters + centers at
   max-width 1200 — override so cards stretch edge-to-edge with a
   thin gutter. Desktop (>1024) keeps the centered page-width look.
   ============================================================ */
@media screen and (max-width:1024px){
  .shopify-section.section-featured-product.page-width{
    max-width:100% !important;
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

/* 4-digit mg products (10ct "1,000mg jar" / 5ct "1,250mg pack") — shrink the long bottom-left number
   a touch so the bottom badges keep the same gap as the template instead of overlapping.
   Mobile/tablet compact grid only (desktop tiles are wide enough). */
@media screen and (max-width:989px){
#product-grid .updated-product-card[href*="10ct-100mg-dozo-perks"] .upc__badge--bl .upc__badge-lg,
#product-grid .updated-product-card[href*="5ct-dozo-perks-kratom"] .upc__badge--bl .upc__badge-lg,
#product-grid .updated-product-card[href*="kratom-extracts"] .upc__badge--bl .upc__badge-lg{ font-size:14px; }
/* 10ct also has a wide "10 tabs" (2-digit) — trim it so the bottom gap matches the template */
#product-grid .updated-product-card[href*="10ct-100mg-dozo-perks"] .upc__badge--br .upc__badge-sm{ font-size:12px; }
}

/* ============================================================
   Desktop (≥990px): enlarge all 4 corner badges so they nearly
   touch the pack (same as PD). Applies to the base "1 card"
   layout = collection grid AND featured carousel.
   ============================================================ */
@media screen and (min-width:990px){
  .updated-product-card .upc__badge{ padding:8px 13px; border-radius:12px; }
  .updated-product-card .upc__badge-lg{ font-size:23px; }
  .updated-product-card .upc__badge-sm{ font-size:19px; }
  .updated-product-card .upc__badge--br{ gap:7px; padding:7px 13px; min-height:54px; }
  .updated-product-card .upc__badge--br .upc__badge-sm{ font-size:17px; }
  .updated-product-card .upc__badge--br .upc__badge-ico{ width:17px; height:17px; }
  .updated-product-card .upc__badge--promo{ font-size:19px; max-width:96px; }

  /* NOTE: left badges (dose / pack weight) always keep full size — user rule.
     When a row is too tight the RIGHT badge font auto-shrinks via
     updated-product-card.js (count/promo = less important characteristic). */
}

/* ============================================================
   Legacy styles kept for card-product.liquid (predictive search
   rating block still uses the old classes) — do not remove.
   ============================================================ */
.updated-product-card_ratings{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.updated-product-card_ratings>div{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:15px;
  color:#fff;
}
.search-rating>div{ color:#000; }
.search-rating-icon svg path{ fill:#000; transition:all .3s; }
.search-rating-icon svg rect{ fill:#000; transition:all .3s; }