/*
 * listings.css — themed product listings (UI-SPEC §3.16, §4).
 *
 * Owns: the shop/category archive grid, Related products, Up-sells, the shared
 * product card (content-product.php), sale badges and pagination. Uses the
 * theme's --da-* tokens only, logical properties only (RTL-safe), 48px tap
 * floors, tabular money, and honours prefers-reduced-motion via the global
 * reset in style.css.
 *
 * Berry = money + the commitment CTA; violet = structure/links. Same language
 * as the product page's price block, so a card reads as part of the same store.
 */

/* =========================================================================
   1. Grid — WooCommerce loop list (ul.products). 2-col mobile → 3 → 4.
   ========================================================================= */

ul.products{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--da-s3);
}
/* WooCommerce's default stylesheet (loaded on the shop/category archive)
   floats each li.product and pins it to width:22% — which collapses our grid
   cards to tiny slivers. Neutralise it so every card fills its grid cell. */
ul.products li.product{
  inline-size:auto !important;
  max-inline-size:none !important;
  margin:0 !important;
  float:none !important;
  clear:none !important;
}
ul.products::before,
ul.products::after{ content:none !important; } /* kill WC's clearfix rows */

@media (min-width:640px){
  ul.products{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--da-s4);
  }
}

@media (min-width:1024px){
  ul.products{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================================
   2. Card
   ========================================================================= */

.da-pcard{
  display:flex;
  flex-direction:column;
  background:var(--da-bg);
  border-radius:var(--da-r-card);
  overflow:hidden;
  box-shadow:var(--da-shadow-card);
  transition:transform var(--da-dur-1) var(--da-ease-out),
             box-shadow var(--da-dur-1) var(--da-ease-out);
}

@media (hover:hover) and (pointer:fine){
  .da-pcard:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px -12px rgba(27, 21, 48, .18);
  }
}

/* ---- Media */
.da-pcard__media{
  position:relative;
  display:block;
  aspect-ratio:var(--da-media-ratio);
  overflow:hidden;
  background:var(--da-bg-soft);
}

.da-pcard__img{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}

.da-pcard__img--main{
  transition:transform var(--da-dur-2) var(--da-ease-out),
             opacity var(--da-dur-2) var(--da-ease-out);
}

.da-pcard__img--alt{
  opacity:0;
  transition:opacity var(--da-dur-2) var(--da-ease-out);
}

@media (hover:hover) and (pointer:fine){
  .da-pcard:hover .da-pcard__img--main{ transform:scale(1.05); }
  .da-pcard:hover .da-pcard__img--alt{ opacity:1; }
}

.da-pcard--oos .da-pcard__img--main{ opacity:.72; }

/* ---- Sale badge (berry = money) */
.da-pcard__badge{
  position:absolute;
  inset-block-start:var(--da-s2);
  inset-inline-start:var(--da-s2);
  display:inline-flex;
  align-items:center;
  gap:var(--da-s1);
  padding-block:4px;
  padding-inline:var(--da-s2);
  background:var(--da-berry);
  color:#fff;
  border-radius:var(--da-r-pill);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.da-pcard__badge-pct{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ---- Out-of-stock chip */
.da-pcard__oos{
  position:absolute;
  inset-block-end:var(--da-s2);
  inset-inline-start:var(--da-s2);
  padding-block:4px;
  padding-inline:var(--da-s2);
  background:rgba(27, 21, 48, .74);
  color:#fff;
  border-radius:var(--da-r-pill);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* ---- Body */
.da-pcard__body{
  display:flex;
  flex-direction:column;
  gap:var(--da-s2);
  padding:var(--da-s3);
  flex:1 1 auto;
}

@media (min-width:1024px){
  .da-pcard__body{ padding:var(--da-s4); }
}

/* ---- Title */
.da-pcard__title{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}

.da-pcard__link{
  color:var(--da-ink-900);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color var(--da-dur-1) var(--da-ease-out);
}

.da-pcard__link:hover{ color:var(--da-brand-700); }

/* ---- Rating (only rendered when reviews exist) */
.da-pcard__rating{
  display:inline-flex;
  align-items:center;
  gap:var(--da-s1);
}

.da-pcard__rating .da-stars{
  display:inline-flex;
  align-items:center;
  gap:1px;
}

.da-pcard__rating .da-icon{ display:block; }

.da-pcard__rating .da-star{
  inline-size:14px;
  block-size:14px;
  color:var(--da-line-strong);
}

.da-pcard__rating .da-star.is-filled{ color:var(--da-berry); }

.da-pcard__rating-count{
  font-size:12px;
  color:var(--da-ink-500);
  font-variant-numeric:tabular-nums;
}

/* ---- Price (berry sale, struck regular) */
.da-pcard__price{
  margin:0;
  margin-block-start:auto;   /* sink price + CTA so cards align at the base */
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--da-s2);
}

.da-pcard__now{
  font-size:16px;
  font-weight:800;
  color:var(--da-ink-900);
  font-variant-numeric:tabular-nums;
}

.da-pcard__now.is-sale{ color:var(--da-berry); }

/* wc_price() wraps the amount in its own spans — inherit the card's colour,
   weight and tabular digits so struck-regular / berry-sale styling holds. */
.da-pcard__price .woocommerce-Price-amount{
  unicode-bidi:isolate;
  color:inherit;
  font:inherit;
  font-variant-numeric:tabular-nums;
}

.da-pcard__price .woocommerce-Price-currencySymbol{ font-weight:inherit; }

@media (min-width:1024px){
  .da-pcard__now{ font-size:18px; }
}

.da-pcard__old{
  font-size:13px;
  font-weight:400;
  color:var(--da-ink-500);
  text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}

/* ---- CTA pill (berry = commitment) */
.da-pcard__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-block-size:var(--da-tap);
  margin-block-start:var(--da-s1);
  padding-inline:var(--da-s3);
  background:var(--da-berry);
  color:#fff;
  border-radius:var(--da-r-pill);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:background-color var(--da-dur-1) var(--da-ease-out),
             transform var(--da-dur-1) var(--da-ease-out);
}

@media (hover:hover) and (pointer:fine){
  .da-pcard__cta:hover{ background:var(--da-berry-700); }
}

.da-pcard__cta:active{
  background:var(--da-berry-800);
  transform:scale(.98);
}

/* Out-of-stock → neutral ghost link (never a berry buy-CTA on OOS) */
.da-pcard__cta--ghost{
  background:transparent;
  color:var(--da-brand-700);
  border:1.5px solid var(--da-brand-600);
}

.da-pcard__cta--ghost:active{ transform:none; }

@media (hover:hover) and (pointer:fine){
  .da-pcard__cta--ghost:hover{
    background:var(--da-brand-50);
    color:var(--da-brand-700);
  }
}

/* =========================================================================
   3. Section wrappers — Related / Up-sells
   ========================================================================= */

.da-listing{
  margin-block-start:var(--da-s6);
}

@media (min-width:1024px){
  .da-listing{ margin-block-start:var(--da-s7); }
}

/* Related sits inside single-product.php's <section class="da-section da-related">,
   which already supplies the outer spacing — so zero the inner top margin. */
.da-related .da-listing--related{ margin-block-start:0; }

.da-listing__heading{
  margin:0 0 var(--da-s4);
  font-size:18px;
  font-weight:700;
  color:var(--da-ink-900);
}

@media (min-width:1024px){
  .da-listing__heading{ font-size:20px; }
}

/* =========================================================================
   4. Archive head
   ========================================================================= */

.da-shop{
  margin-block-start:var(--da-s5);
  margin-block-end:var(--da-s7);
}

.da-shop__head{
  margin-block-end:var(--da-s5);
}

.da-shop__title{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:var(--da-ink-900);
}

@media (min-width:1024px){
  .da-shop__title{ font-size:26px; }
}

.da-shop__count{
  margin-block-start:var(--da-s1);
  font-size:13px;
  color:var(--da-ink-500);
  font-variant-numeric:tabular-nums;
}

.da-shop__desc{
  margin-block-start:var(--da-s3);
  color:var(--da-ink-700);
}

.da-shop__empty{
  padding-block:var(--da-s7);
  text-align:center;
  color:var(--da-ink-500);
}

/* =========================================================================
   5. Pagination (WooCommerce woocommerce_pagination())
   ========================================================================= */

.woocommerce-pagination{
  margin-block-start:var(--da-s6);
}

.woocommerce-pagination ul.page-numbers{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--da-s2);
}

.woocommerce-pagination li{
  display:flex;
  margin:0;
}

.woocommerce-pagination li .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:var(--da-tap);
  min-block-size:var(--da-tap);
  padding-inline:var(--da-s2);
  border-radius:var(--da-r-input);
  background:var(--da-bg-soft);
  color:var(--da-brand-700);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:background-color var(--da-dur-1) var(--da-ease-out);
}

@media (hover:hover) and (pointer:fine){
  .woocommerce-pagination li a.page-numbers:hover{ background:var(--da-brand-100); }
}

.woocommerce-pagination li .page-numbers.current{
  background:var(--da-brand-600);
  color:#fff;
}

.woocommerce-pagination li .page-numbers.dots{
  min-inline-size:auto;
  padding-inline:var(--da-s1);
  background:transparent;
  color:var(--da-ink-500);
}

/* Breadcrumb trail (shop / category). */
.da-breadcrumb{ margin-block:var(--da-s4) 0; font-size:13px; color:var(--da-ink-500); }
.da-breadcrumb a{ color:var(--da-brand-700); text-decoration:none; }
.da-breadcrumb a:hover{ text-decoration:underline; }