/**
 * ANBOOST Storefront — Product Cards (Phase 2 merchandising rethink)
 *
 * Phase 0 isolation: visual card rules are .shop-area scoped only.
 * Tokens (:root / body.theme) remain shared. PLP owner: storefront-plp-shelf.css.
 */

/* ------------------------------------------------------------------
   Merchandising tokens — product theater first
   ------------------------------------------------------------------ */
:root {
  --sf-card-image-ratio: 1 / 1;
  /* Content band stays short so the product owns the card */
  --sf-card-content-min: 5.75rem;
  --sf-card-gap-x: 1.35rem;
  --sf-card-gap-y: 1.75rem;
  --sf-card-radius: 1.05rem;
  /* Stage should disappear behind the product, not compete with it */
  --sf-card-stage: #f7f6f4;
  --sf-card-spotlight: rgba(255, 255, 255, 0.92);
  --sf-card-inset: 1.35rem;
  --sf-card-title-size: 0.9375rem;
  --sf-card-price-size: 1.1875rem;
}

body.hexfashion,
body.casual {
  --sf-card-image-ratio: 5 / 6; /* slightly taller product plane */
  --sf-card-stage: #f5f2ee;
  --sf-card-inset: 1.5rem;
}

body.aromatic {
  --sf-card-image-ratio: 5 / 6;
  --sf-card-stage: #f3efe9;
  --sf-card-inset: 1.6rem;
}

body.furnito {
  --sf-card-image-ratio: 4 / 3;
  --sf-card-stage: #f4f1eb;
  --sf-card-inset: 1.25rem;
}

body.medicom {
  --sf-card-image-ratio: 1 / 1;
  --sf-card-stage: #f4f6f8;
}

body.electro {
  --sf-card-image-ratio: 1 / 1;
  --sf-card-stage: #f3f4f6;
  --sf-card-inset: 1.15rem;
}

/* ------------------------------------------------------------------
   Card frame — nearly invisible so the product carries desire
   ------------------------------------------------------------------ */
body .shop-area .global-card,
body .shop-area .global-card.no-shadow,
body .shop-area .global-card.radius-0,
body .shop-area .single-product-item,
body .shop-area .single-global-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: var(--sf-card-radius) !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body .shop-area .global-card:hover,
body .shop-area .global-card.no-shadow:hover,
body .shop-area .single-product-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1) !important;
}

/* ------------------------------------------------------------------
   PRODUCT THEATER — eye hits the product first
   Soft radial spotlight + generous inset = product feels valuable
   ------------------------------------------------------------------ */
body .shop-area .global-card-thumb {
  position: relative !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  aspect-ratio: var(--sf-card-image-ratio) !important;
  background:
    radial-gradient(
      60% 55% at 50% 42%,
      var(--sf-card-spotlight) 0%,
      transparent 70%
    ),
    var(--sf-card-stage) !important;
  isolation: isolate;
}

body .shop-area .global-card-thumb > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: var(--sf-card-inset) !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 1;
}

/* Product is the only loud visual */
body .shop-area .global-card-thumb img,
body .shop-area .global-card-thumb > a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.12));
  transition:
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 280ms ease !important;
}

body .shop-area .global-card:hover .global-card-thumb img,
body .shop-area .global-card:hover .global-card-thumb > a img {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.16));
}

/* Kill heavy overlay competition with the product */
body .shop-area .hover-overlay::before {
  display: none !important;
}

/* ------------------------------------------------------------------
   Badge — tiny, peripheral, never steals the product
   ------------------------------------------------------------------ */
body .shop-area .global-card-thumb-badge {
  top: 0.75rem !important;
  inset-inline-start: 0.75rem !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5 !important;
  gap: 0.3rem !important;
}

body .shop-area .global-card-thumb-badge.right-side {
  inset-inline-start: auto !important;
  inset-inline-end: 0.75rem !important;
}

body .shop-area .global-card-thumb-badge-box {
  margin: 0 !important;
  padding: 0.22rem 0.5rem !important;
  border-radius: 0.35rem !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  opacity: 0.92;
  box-shadow: none !important;
}

body .shop-area .global-card-thumb-badge-box.bg-color-two,
body .shop-area .global-card-thumb-badge-box.bg-two {
  background: rgba(26, 35, 50, 0.78) !important;
  color: #fff !important;
}

body .shop-area .global-card-thumb-badge-box.bg-color-new,
body .shop-area .global-card-thumb-badge-box.bg-new {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #1a2332 !important;
}

/* ------------------------------------------------------------------
   Actions — available, familiar, visually quiet until needed
   Product remains the hero; icons are servants, not co-stars
   ------------------------------------------------------------------ */
body .shop-area .global-card-thumb-icons {
  display: flex !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0.85rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 6 !important;
  /* Desktop: hidden until hover — product owns the quiet state */
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 180ms,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body .shop-area .global-card:hover .global-card-thumb-icons,
body .shop-area .global-card:focus-within .global-card-thumb-icons {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  bottom: 0.85rem !important;
}

body .shop-area .global-card-thumb-icons .icon-list {
  margin: 0 !important;
  padding: 0 !important;
}

body .shop-area .global-card-thumb-icons .icon-list .icon {
  height: 2.15rem !important;
  width: 2.15rem !important;
  font-size: 0.875rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #344054 !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background-color 150ms ease,
    color 150ms ease,
    transform 120ms ease !important;
}

body .shop-area .global-card-thumb-icons .icon-list .icon:hover,
body .shop-area .global-card-thumb-icons .icon-list .icon:focus-visible {
  background: #fff !important;
  color: var(--sf-action, var(--main-color-one)) !important;
  transform: scale(1.06);
}

body .shop-area .global-card-thumb-icons .icon-list .icon:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus-ring), 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}

/* Touch: actions must exist without hover — still visually light */
@media (hover: none), (max-width: 991.98px) {
  body .shop-area .global-card-thumb-icons {
    visibility: visible !important;
    opacity: 0.92 !important;
    transform: none !important;
  }

  body .shop-area .global-card-thumb-icons .icon-list .icon {
    height: 2.35rem !important;
    width: 2.35rem !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }
}

/* ------------------------------------------------------------------
   Content — subordinate to the product (read second)
   ------------------------------------------------------------------ */
body .shop-area .global-card-contents {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-height: var(--sf-card-content-min) !important;
  padding: 0.95rem 0.15rem 0.25rem !important;
  gap: 0.3rem !important;
  background: transparent !important;
  border: 0 !important;
  text-align: start !important;
}

body .shop-area .global-card-contents-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: start !important;
}

body .shop-area .global-card-contents-title,
body .shop-area .global-card-contents-title a,
body .shop-area .pb-0 .global-card-contents-title,
body .shop-area .pb-0 .global-card-contents-title a {
  font-family: var(--sf-font-heading) !important;
  font-size: var(--sf-card-title-size) !important;
  font-weight: 550 !important;
  line-height: 1.35 !important;
  color: #344054 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 0 !important;
  width: 100% !important;
  text-align: start !important;
  transition: color 160ms ease;
}

body .shop-area .global-card-contents-title a:hover,
body .shop-area .global-card-contents-title a:focus-visible {
  color: var(--sf-ink, #1a2332) !important;
}

body .shop-area .global-card .rating-wrap,
body .shop-area .global-card .ratings,
body .shop-area .global-card .total-ratings,
body .shop-area .global-card-contents .rating-wrap {
  margin: 0 !important;
  color: #98a2b3 !important;
  font-size: 0.6875rem !important;
  line-height: 1.2 !important;
  min-height: 0.85rem;
  opacity: 0.85 !important;
}

/* Price: quiet confidence after the product has already sold desire */
body .shop-area .global-card .price-update-through,
body .shop-area .global-card-contents .price-update-through,
body .shop-area .price-update-through.mt-3 {
  margin: 0.45rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  text-align: start !important;
}

body .shop-area .global-card .flash-prices,
body .shop-area .global-card-contents .flash-prices,
body .shop-area .price-update-through .flash-prices,
body .shop-area .color-one .flash-prices,
body .shop-area .color-two .flash-prices {
  color: var(--sf-ink, #1a2332) !important;
  font-size: var(--sf-card-price-size) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body .shop-area .global-card .flash-old-prices,
body .shop-area .global-card-contents .flash-old-prices {
  color: #98a2b3 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------------
   Grid — product walls, not floating lonely tiles
   ------------------------------------------------------------------ */
body .shop-area #tab-grid2 .row,
body .shop-area #tab-grid2 .row.gy-5,
body .shop-area .row.gy-5,
body .shop-area .product-list-ajax .row.gy-5,
{
  --bs-gutter-x: var(--sf-card-gap-x) !important;
  --bs-gutter-y: var(--sf-card-gap-y) !important;
  row-gap: var(--sf-card-gap-y) !important;
}

body .shop-area #tab-grid2 .row > [class*="col-"],
body .shop-area .row.gy-5 > [class*="col-"] {
  margin-bottom: 0 !important;
}

/* List view — product still leads */
body .shop-area .global-card.list-card,
body .shop-area .list-products .global-card,
body .shop-area #tab-list .global-card {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
}

body .shop-area .global-card.list-card .global-card-thumb,
body .shop-area #tab-list .global-card-thumb {
  aspect-ratio: 1 / 1 !important;
  width: 11rem !important;
  min-width: 11rem !important;
  flex: 0 0 11rem !important;
}

body .shop-area .global-card.list-card .global-card-contents,
body .shop-area #tab-list .global-card-contents {
  justify-content: center !important;
  padding: 1rem 1.15rem !important;
  min-height: 0 !important;
}

@media (max-width: 575.98px) {
  :root {
    --sf-card-inset: 0.85rem;
    --sf-card-gap-x: 0.75rem;
    --sf-card-gap-y: 1.15rem;
    --sf-card-content-min: 5.25rem;
  }

  body .shop-area .global-card-contents {
    padding: 0.75rem 0.1rem 0.15rem !important;
  }

  body .shop-area .global-card.list-card .global-card-thumb,
  body .shop-area #tab-list .global-card-thumb {
    width: 7.75rem !important;
    min-width: 7.75rem !important;
    flex-basis: 7.75rem !important;
  }
}

/* Category tiles — image-led too */
body .shop-area .single-category {
  border: 0;
  border-radius: var(--sf-card-radius);
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body .shop-area .single-category:hover {
  transform: translateY(-3px);
}

body .shop-area .single-category-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--sf-card-radius);
  overflow: hidden;
  background: var(--sf-card-stage);
}

body .shop-area .single-category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

body .shop-area .single-category:hover .single-category-thumb img {
  transform: scale(1.05);
}

body .shop-area .single-category-contents-title {
  font-size: var(--sf-card-title-size);
  font-weight: 550;
  color: #344054;
  padding: 0.85rem 0.15rem 0.25rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  body .shop-area .global-card:hover,
  body .shop-area .single-category:hover,
  body .shop-area .global-card:hover .global-card-thumb img,
  body .shop-area .single-category:hover .single-category-thumb img,
  body .shop-area .global-card-thumb-icons {
    transform: none !important;
  }
}

/* ------------------------------------------------------------------
   Aromatic product image centering (late override)
   ------------------------------------------------------------------ */
body.aromatic .shop-area .global-card-thumb {
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: 1 / 1 !important;
}

body.aromatic .shop-area .global-card-thumb > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.aromatic .shop-area .global-card-thumb > a img,
body.aromatic .shop-area .global-card-thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
}