/* =========================================================
   Fara Store 14.9.0 — Product Card Quality Foundation
   Shared, theme-scoped safeguards for all official themes.
   Keeps each theme's visual identity while normalising card
   geometry, overflow, text wrapping, CTA behaviour and touch UX.
   ========================================================= */

/* Grid/flex children must be allowed to shrink instead of overflowing. */
:is(
  .atelier-product-grid,.atelier-latest-row,
  .beauty-products,.beauty-shop-grid,
  .deniz-product-grid,.deniz-product-rail,
  .nova-products,.nova-shop-grid,
  .irisun-product-grid,
  .jonoub-product-grid,
  .sage-product-row,.sage-products,.sage-shop-grid
){min-width:0!important;align-items:stretch!important}

/* Card shells: predictable height, safe clipping and no stray overlays. */
:is(
  .atelier-product-card,
  .beauty-product-card,
  .deniz-product-card,
  .dk-product,
  .irisun-product-card,
  .jonoub-product-card,
  .sage-product-card
){min-width:0!important;max-width:100%!important;height:100%!important;position:relative!important;isolation:isolate!important;overflow:hidden!important}

/* Media anchors are real layout boxes. This prevents absolute CTA/badges
   from using an inline anchor line-box as their containing block. */
:is(
  .atelier-product-card__media,
  .beauty-product-media,
  .deniz-product-card__media,
  .irisun-product-card__media,
  .jonoub-product-card__media,
  .sage-product-media
){display:block!important;width:100%!important;min-width:0!important;position:relative!important;overflow:hidden!important;text-decoration:none!important}

:is(
  .atelier-product-card__media,
  .beauty-product-media,
  .deniz-product-card__media,
  .irisun-product-card__media,
  .jonoub-product-card__media,
  .sage-product-media,
  .dk-product-image
) img{display:block!important;width:100%!important;height:100%!important;max-width:none!important}

/* Body zones stretch equally so prices/CTAs stay aligned across a row. */
:is(
  .atelier-product-card__body,
  .beauty-product-copy,
  .deniz-product-card__body,
  .irisun-product-card__body,
  .jonoub-product-card__body,
  .sage-product-copy
){min-width:0!important;display:flex!important;flex-direction:column!important;flex:1 1 auto!important}

/* Product names are intentionally limited to two lines. Long Persian/Latin
   names cannot make one card twice as tall as its neighbours. */
:is(
  .atelier-product-card h3,
  .beauty-product-card h3,
  .deniz-product-card h3,
  .dk-product h3,
  .irisun-product-card h3,
  .jonoub-product-card h3,
  .sage-product-card h3
){max-width:100%!important;overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow-wrap:anywhere!important;text-wrap:pretty!important}

:is(
  .atelier-product-card__price,
  .beauty-price,
  .deniz-product-card__bottom,
  .deniz-product-card__price,
  .dk-price,
  .irisun-product-card__price,
  .jonoub-product-card__price,
  .sage-price
){min-width:0!important;margin-top:auto!important}

:is(
  .atelier-product-card__price strong,
  .beauty-price strong,
  .deniz-product-card__price strong,
  .dk-price strong,
  .irisun-product-card__price strong,
  .jonoub-product-card__price strong,
  .sage-price strong
){max-width:100%!important;overflow-wrap:anywhere!important;font-variant-numeric:tabular-nums!important}

/* Premium image motion. It is intentionally subtle and disabled for users
   who request reduced motion. */
@media (hover:hover) and (pointer:fine){
  :is(
    .atelier-product-card,
    .beauty-product-card,
    .deniz-product-card,
    .dk-product,
    .irisun-product-card,
    .jonoub-product-card,
    .sage-product-card
  ):hover img{transform:scale(1.035)}
}

@media (prefers-reduced-motion:reduce){
  :is(
    .atelier-product-card,.beauty-product-card,.deniz-product-card,.dk-product,
    .irisun-product-card,.jonoub-product-card,.sage-product-card,
    .atelier-product-card img,.beauty-product-card img,.deniz-product-card img,
    .dk-product img,.irisun-product-card img,.jonoub-product-card img,.sage-product-card img
  ){transition:none!important;transform:none!important}
}

/* ---------- Jonoub / Irisun overlay CTA ---------- */
:is(.jonoub-product-card__view,.irisun-product-card__view){
  right:12px!important;left:auto!important;bottom:12px!important;
  width:max-content!important;max-width:calc(100% - 24px)!important;
  min-height:38px!important;padding:9px 14px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:999px!important;white-space:nowrap!important;line-height:1.2!important;
  text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important;
  opacity:0;transform:translateY(8px) scale(.98)!important;
  pointer-events:none;box-shadow:0 8px 24px rgba(30,18,10,.18);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
:is(.jonoub-product-card,.irisun-product-card):hover :is(.jonoub-product-card__view,.irisun-product-card__view),
:is(.jonoub-product-card__media,.irisun-product-card__media):focus-visible :is(.jonoub-product-card__view,.irisun-product-card__view){
  opacity:1;transform:none!important
}
:is(.jonoub-product-card__media,.irisun-product-card__media):focus-visible{outline:3px solid color-mix(in srgb,currentColor 22%,transparent);outline-offset:-3px}

/* Jonoub homepage showcase used a fixed five-track grid. With only one or
   two products that left a huge empty area and compressed CTA overlays.
   Use bounded, right-aligned cards instead. */
.jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact){
  grid-template-columns:repeat(auto-fit,minmax(210px,250px))!important;
  justify-content:start!important;gap:16px!important
}
.jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact) .jonoub-product-card{border-radius:18px!important}
.jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact) .jonoub-product-card__media{aspect-ratio:4/5!important}

/* Make card copy readable without changing each theme's identity. */
@media (max-width:780px){
  :is(
    .atelier-product-card__body,
    .beauty-product-copy,
    .deniz-product-card__body,
    .irisun-product-card__body,
    .jonoub-product-card__body,
    .sage-product-copy
  ){min-width:0}

  :is(.jonoub-product-card__view,.irisun-product-card__view){
    opacity:1;transform:none!important;right:9px!important;bottom:9px!important;
    min-height:34px!important;padding:8px 11px!important;font-size:10px!important;
    max-width:calc(100% - 18px)!important
  }

  .jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact){
    display:flex!important;overflow-x:auto;gap:12px!important;scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;padding-bottom:6px;scrollbar-width:none
  }
  .jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact)::-webkit-scrollbar{display:none}
  .jonoub-theme .jonoub-products-block>.jonoub-product-grid:not(.compact)>.jonoub-product-card{
    flex:0 0 min(76vw,290px)!important;scroll-snap-align:start
  }
}

@media (max-width:520px){
  .sage-product-copy h3{font-size:12px!important;line-height:1.75!important;min-height:42px!important}
  .sage-price strong{font-size:11px!important}
  .beauty-product-copy h3{font-size:12px!important;line-height:1.75!important}
  .beauty-price strong{font-size:12px!important}
  :is(.deniz-product-card h3,.irisun-product-card h3,.jonoub-product-card h3){font-size:13px!important;line-height:1.65!important}
}