/*
 * WEAUTY Product Cards — single visual owner
 * v1.0.6.35
 *
 * Scope:
 * - Shop / archives / search / collection pages
 * - Home WooCommerce rails
 * - Related / Up-sells
 * - custom “با اینا ست کن” cards
 * - WooCommerce product blocks (fallback selectors)
 *
 * Layout/rail widths remain owned by their page modules. This file owns only the
 * visual product-card language: surface, media, title, price, badges and CTA.
 */
:root{
  --weauty-card-radius:18px;
  --weauty-card-media-radius:14px;
  --weauty-card-button-radius:12px;
  --weauty-card-border:rgba(17,17,17,.075);
  --weauty-card-border-sale:rgba(239,51,56,.22);
  --weauty-card-shadow:0 8px 24px rgba(17,17,17,.045);
  --weauty-card-shadow-hover:0 16px 38px rgba(17,17,17,.095);
  --weauty-card-ink:#171717;
  --weauty-card-muted:#747474;
  --weauty-card-promo:#ef3338;
}

/* ---------- WooCommerce loop cards ---------- */
ul.products>li.weauty-product-card,
.woocommerce ul.products>li.weauty-product-card,
.woocommerce-page ul.products>li.weauty-product-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:9px!important;
  background:#fff!important;
  border:1px solid var(--weauty-card-border)!important;
  border-radius:var(--weauty-card-radius)!important;
  box-shadow:var(--weauty-card-shadow)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
ul.products>li.weauty-product-card--sale,
.woocommerce ul.products>li.weauty-product-card--sale,
.woocommerce-page ul.products>li.weauty-product-card--sale{
  border-color:var(--weauty-card-border-sale)!important;
}
ul.products>li.weauty-product-card:hover,
.woocommerce ul.products>li.weauty-product-card:hover,
.woocommerce-page ul.products>li.weauty-product-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(17,17,17,.14)!important;
  box-shadow:var(--weauty-card-shadow-hover)!important;
}
ul.products>li.weauty-product-card--sale:hover,
.woocommerce ul.products>li.weauty-product-card--sale:hover,
.woocommerce-page ul.products>li.weauty-product-card--sale:hover{
  border-color:rgba(239,51,56,.34)!important;
}

/* Media is the visual anchor. Target the product thumbnail regardless of Blocksy wrapper depth. */
ul.products>li.weauty-product-card img,
.woocommerce ul.products>li.weauty-product-card img,
.woocommerce-page ul.products>li.weauty-product-card img{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:3/4!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#f6f6f6!important;
  border-radius:var(--weauty-card-media-radius)!important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)!important;
}
ul.products>li.weauty-product-card:hover img,
.woocommerce ul.products>li.weauty-product-card:hover img,
.woocommerce-page ul.products>li.weauty-product-card:hover img{
  transform:scale(1.018)!important;
}

/* ---------- Woo loop structure / vertical rhythm ----------
   Verified rendered markup for WEAUTY collection pages is:
   li.product > a.woocommerce-loop-product__link > (badge, image, title, price)
   followed by the CTA link. Woo shortcodes may additionally add a .woocommerce
   ancestor, while WEAUTY custom collection rendering may not. Own the actual
   inner layout here so ancestor-specific Woo/Blocksy spacing cannot change the
   card rhythm between Newest, Best Sellers, Shop, Related, etc. */
ul.products>li.weauty-product-card>a.woocommerce-loop-product__link,
.woocommerce ul.products>li.weauty-product-card>a.woocommerce-loop-product__link,
.woocommerce-page ul.products>li.weauty-product-card>a.woocommerce-loop-product__link{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  text-decoration:none!important;
}

/* Fallback for Blocksy variants that insert structural wrappers. */
ul.products>li.weauty-product-card>figure,
.woocommerce ul.products>li.weauty-product-card>figure,
.woocommerce-page ul.products>li.weauty-product-card>figure{
  margin:0!important;
  padding:0!important;
}
ul.products>li.weauty-product-card>.ct-woo-card-actions,
.woocommerce ul.products>li.weauty-product-card>.ct-woo-card-actions,
.woocommerce-page ul.products>li.weauty-product-card>.ct-woo-card-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
}

/* Identity */
ul.products>li.weauty-product-card .woocommerce-loop-product__title,
.woocommerce ul.products>li.weauty-product-card .woocommerce-loop-product__title,
.woocommerce-page ul.products>li.weauty-product-card .woocommerce-loop-product__title{
  margin:8px 3px 0!important;
  padding:0!important;
  min-height:0!important;
  color:var(--weauty-card-ink)!important;
  font-size:14px!important;
  font-weight:760!important;
  line-height:1.55!important;
  text-align:right!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}

/* Price: current price is dominant, previous price is deliberately quieter. */
ul.products>li.weauty-product-card .price,
.woocommerce ul.products>li.weauty-product-card .price,
.woocommerce-page ul.products>li.weauty-product-card .price{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:4px 7px!important;
  direction:rtl!important;
  text-align:right!important;
  margin:2px 3px 0!important;
  padding:0!important;
  min-height:0!important;
  color:var(--weauty-card-ink)!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1.5!important;
}
ul.products>li.weauty-product-card .price del,
.woocommerce ul.products>li.weauty-product-card .price del,
.woocommerce-page ul.products>li.weauty-product-card .price del{
  order:1!important;
  opacity:.54!important;
  color:#777!important;
  font-size:11px!important;
  font-weight:450!important;
  text-decoration-color:#858585!important;
  text-decoration-thickness:1.2px!important;
}
ul.products>li.weauty-product-card .price ins,
.woocommerce ul.products>li.weauty-product-card .price ins,
.woocommerce-page ul.products>li.weauty-product-card .price ins{
  order:2!important;
  color:var(--weauty-card-ink)!important;
  font-size:14px!important;
  font-weight:850!important;
  text-decoration:none!important;
}

/* One primary action. Deliberately black; promotional red belongs to discount signals. */
ul.products>li.weauty-product-card a.button,
ul.products>li.weauty-product-card a.ct-button,
.woocommerce ul.products>li.weauty-product-card a.button,
.woocommerce ul.products>li.weauty-product-card a.ct-button,
.woocommerce-page ul.products>li.weauty-product-card a.button,
.woocommerce-page ul.products>li.weauty-product-card a.ct-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  margin:6px 0 0!important;
  padding:9px 13px!important;
  border:0!important;
  border-radius:var(--weauty-card-button-radius)!important;
  background:var(--weauty-card-ink)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.35!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
ul.products>li.weauty-product-card a.button:hover,
ul.products>li.weauty-product-card a.button:focus-visible,
ul.products>li.weauty-product-card a.ct-button:hover,
ul.products>li.weauty-product-card a.ct-button:focus-visible,
.woocommerce ul.products>li.weauty-product-card a.button:hover,
.woocommerce ul.products>li.weauty-product-card a.button:focus-visible,
.woocommerce-page ul.products>li.weauty-product-card a.button:hover,
.woocommerce-page ul.products>li.weauty-product-card a.button:focus-visible{
  background:#292929!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.12)!important;
}

/* Discount badge: rounded, compact, and the only strong red element on a normal card. */
ul.products>li.weauty-product-card .onsale,
ul.products>li.weauty-product-card .weauty-sale-percent-badge,
.woocommerce ul.products>li.weauty-product-card .onsale,
.woocommerce-page ul.products>li.weauty-product-card .onsale{
  border-radius:999px!important;
  padding:5px 9px!important;
  direction:rtl!important;
  white-space:nowrap!important;
  font-weight:850!important;
  letter-spacing:0!important;
  box-shadow:0 5px 14px rgba(239,51,56,.16)!important;
}

/* ---------- Home merchandising rails ----------
   Keep each shelf's approved editorial background; unify only card rhythm and spacing. */
.weauty-product-scroll{
  border-radius:18px!important;
  padding-block:3px 10px!important;
}
.weauty-product-scroll ul.products>li.weauty-product-card{
  box-shadow:0 7px 22px rgba(17,17,17,.045)!important;
}

/* ---------- Single product recommendation shelves ---------- */
.single-product .related.products,
.single-product .up-sells.upsells{
  padding:clamp(16px,2.1vw,24px)!important;
  border:1px solid rgba(0,0,0,.07)!important;
  border-radius:22px!important;
  background:#fafafa!important;
}
.single-product .related.products>h2,
.single-product .up-sells.upsells>h2{
  margin:0 0 14px!important;
  font-size:clamp(18px,1.55vw,22px)!important;
  font-weight:800!important;
}
.single-product .related.products ul.products>li.weauty-product-card,
.single-product .up-sells.upsells ul.products>li.weauty-product-card{
  padding:8px!important;
  border-radius:16px!important;
}
.single-product .related.products ul.products>li.weauty-product-card img,
.single-product .up-sells.upsells ul.products>li.weauty-product-card img{
  border-radius:13px!important;
}

/* ---------- Custom Style-With card: same system, compact curated variant ---------- */
.single-product .weauty-style-card.weauty-product-card{
  position:relative!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  padding:8px!important;
  background:#fff!important;
  border:1px solid var(--weauty-card-border)!important;
  border-radius:16px!important;
  box-shadow:var(--weauty-card-shadow)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.single-product .weauty-style-card.weauty-product-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(17,17,17,.14)!important;
  box-shadow:var(--weauty-card-shadow-hover)!important;
}
.single-product .weauty-style-card-image{
  position:relative!important;
  display:block!important;
  aspect-ratio:3/4!important;
  overflow:hidden!important;
  margin:0!important;
  border-radius:13px!important;
  background:#f6f6f6!important;
}
.single-product .weauty-style-card-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:13px!important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)!important;
}
.single-product .weauty-style-card:hover .weauty-style-card-image img{transform:scale(1.018)!important}
.single-product .weauty-style-card-copy{
  display:grid!important;
  gap:5px!important;
  padding:9px 2px 2px!important;
  text-align:right!important;
}
.single-product .weauty-style-card-title{
  color:var(--weauty-card-ink)!important;
  font-size:13px!important;
  font-weight:780!important;
  line-height:1.55!important;
  text-decoration:none!important;
}
.single-product .weauty-style-card-copy small{
  color:var(--weauty-card-muted)!important;
  font-size:11px!important;
  line-height:1.55!important;
}
.single-product .weauty-style-card-price{
  color:var(--weauty-card-ink)!important;
  font-size:12px!important;
  font-weight:800!important;
}
.single-product .weauty-style-card-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:38px!important;
  margin-top:4px!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:11px!important;
  background:var(--weauty-card-ink)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.35!important;
  text-decoration:none!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.single-product .weauty-style-card-button:hover,
.single-product .weauty-style-card-button:focus-visible{
  background:#292929!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.12)!important;
}
.single-product .weauty-style-sale-badge{
  position:absolute!important;
  top:9px!important;
  right:9px!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:var(--weauty-card-promo)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(239,51,56,.16)!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.4!important;
  direction:rtl!important;
  white-space:nowrap!important;
}

/* ---------- Woo Blocks fallback ---------- */
.wc-block-grid__product{
  overflow:hidden!important;
  padding:9px!important;
  background:#fff!important;
  border:1px solid var(--weauty-card-border)!important;
  border-radius:var(--weauty-card-radius)!important;
  box-shadow:var(--weauty-card-shadow)!important;
}
.wc-block-grid__product-image img{border-radius:var(--weauty-card-media-radius)!important;background:#f6f6f6!important}
.wc-block-grid__product-title{color:var(--weauty-card-ink)!important;font-weight:760!important;line-height:1.55!important}
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  width:100%!important;
  border-radius:var(--weauty-card-button-radius)!important;
  background:var(--weauty-card-ink)!important;
  color:#fff!important;
}

@media(max-width:689px){
  ul.products>li.weauty-product-card,
  .woocommerce ul.products>li.weauty-product-card,
  .woocommerce-page ul.products>li.weauty-product-card{padding:8px!important;border-radius:16px!important}
  ul.products>li.weauty-product-card img,
  .woocommerce ul.products>li.weauty-product-card img,
  .woocommerce-page ul.products>li.weauty-product-card img{border-radius:12px!important}
  ul.products>li.weauty-product-card .woocommerce-loop-product__title,
  .woocommerce ul.products>li.weauty-product-card .woocommerce-loop-product__title,
  .woocommerce-page ul.products>li.weauty-product-card .woocommerce-loop-product__title{font-size:13px!important;margin:7px 2px 0!important;padding:0!important;min-height:0!important}
  ul.products>li.weauty-product-card a.button,
  .woocommerce ul.products>li.weauty-product-card a.button,
  .woocommerce-page ul.products>li.weauty-product-card a.button{min-height:38px!important;border-radius:11px!important;padding:8px 10px!important}
  .single-product .related.products,
  .single-product .up-sells.upsells{padding:18px 14px!important;border-radius:18px!important}
  .single-product .weauty-style-card.weauty-product-card{padding:7px!important;border-radius:15px!important}
}

@media(prefers-reduced-motion:reduce){
  ul.products>li.weauty-product-card,
  ul.products>li.weauty-product-card img,
  .single-product .weauty-style-card.weauty-product-card,
  .single-product .weauty-style-card-image img,
  .single-product .weauty-style-card-button{transition:none!important;transform:none!important}
}