/* ==========================================================================
   APPROVED PRODUCT CARD SYSTEM — staging homepage only (2026-09-27, v6 bottom-gap fix)
   Exact port of the approved Preview card (card-system-preview.php).
   Selectors are prefixed with .product-card.rcs-card so they win over the
   legacy vertical-card rules elsewhere in this stylesheet without touching them.
   Shop / category / search cards are NOT affected (different template).
   ========================================================================== */
:root{
  --rcs-navy:#101b2d;
  --rcs-cyan:#00c4ff;
  --rcs-cyan-soft:#eafbff;
  --rcs-muted:#8a97a8;
  --rcs-line:rgba(0,196,255,.35);
}
/* The approved card is horizontal — the rail needs wider columns than the old
   vertical card it was built for. Mobile (<=760px) keeps its single column. */
.product-rail{grid-auto-columns:calc((100% - 30px) / 3);}
@media (max-width:1050px){.product-rail{grid-auto-columns:calc((100% - 15px) / 2);}}

/* ---------- card ---------- */
.product-card.rcs-card{display:flex;gap:10px;background:#fff;border:1px solid var(--rcs-line);
  border-radius:17px;padding:10px 10px 14px;margin:0 0 4px;min-height:0;width:auto;
  grid-template-columns:none;grid-template-rows:none;box-shadow:none;overflow:visible}
.product-card.rcs-card,.product-card.rcs-card *{box-sizing:border-box}
.rcs-media{flex:0 0 100px;width:100px;height:100px;border-radius:12px;overflow:hidden;background:#f2f6f8;align-self:flex-start}
.rcs-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.rcs-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.rcs-top{display:flex;gap:8px;align-items:flex-start}
.rcs-text{flex:1 1 auto;min-width:0}
.rcs-cat{margin:0 0 2px;font-size:11px;line-height:1.4;color:var(--rcs-muted)}
.rcs-title{margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.5;color:var(--rcs-navy);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcs-title a{color:inherit;text-decoration:none}
.rcs-price{margin:0;font-size:19px;font-weight:800;color:var(--rcs-cyan);line-height:1.3}
.rcs-price del{font-size:13px;color:var(--rcs-muted);font-weight:400;margin-inline-start:6px}
.rcs-price ins{text-decoration:none}
.rcs-price .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;border:0!important}
.rcs-trust{margin:3px 0 0;font-size:11px;line-height:1.4;color:var(--rcs-muted);display:flex;align-items:center;gap:5px}
.rcs-trust svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto}
/* wishlist — keeps .heart so the existing wishlist JS (.product-card .heart / .is-liked) binds unchanged */
.product-card.rcs-card .rcs-wish{position:static;inset:auto;float:none;transform:none;margin:0;
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #e2ebf0;background:#fbfcfd;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.product-card.rcs-card .rcs-wish svg{width:20px;height:20px;fill:none;stroke:#5b6b7f;stroke-width:1.8}
.product-card.rcs-card .rcs-wish.is-liked{border-color:rgba(244,63,94,.45);color:#f43f5e}
.product-card.rcs-card .rcs-wish.is-liked svg{fill:currentColor;stroke:currentColor}
/* shared trust/action row — trust text (right in RTL) + action (left in RTL) on one line;
   wraps gracefully only when the row is too narrow (e.g. 320px). The trust line
   always keeps its full width first (flex-grow) and the action never shrinks,
   so "منتج رقمي • تسليم سريع" is never clipped or obscured. */
.rcs-borrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.rcs-borrow .rcs-trust{margin:0;flex:1 1 auto;min-width:0}
.rcs-borrow .rcs-action{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Per-card visual Apple Pay button (official <apple-pay-button> web component,
   same attributes the noon plugin creates). Hidden until the engine confirms
   this device/customer is eligible — same hiding rule as the product page. */
.rcs-apay{display:flex;align-items:center;min-width:0}
.rcs-apaybtn{display:none;--apple-pay-button-width:118px;--apple-pay-button-height:44px}
.rcs-apaybtn.rcs-apay-on{display:inline-block}
/* State A — direct purchase: compact 44x44 navy button, cyan cart icon */
.rcs-buy{width:44px;height:44px;border:0;border-radius:12px;background:var(--rcs-navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rcs-buy svg{width:22px;height:22px;fill:none;stroke:var(--rcs-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* State B — requires configuration: same family as A — navy, cyan icon, white text, 44px high */
.rcs-opt{display:inline-flex;align-items:center;gap:7px;background:var(--rcs-navy);
  border:1px solid var(--rcs-navy);color:#fff;font-size:14px;font-weight:700;
  border-radius:12px;height:44px;padding:0 16px;text-decoration:none;white-space:nowrap}
.rcs-opt svg{width:17px;height:17px;fill:none;stroke:var(--rcs-cyan);stroke-width:1.8;stroke-linecap:round}
/* State C — out of stock: same 44px height/radius/alignment, muted disabled look */
.rcs-oos{display:inline-flex;align-items:center;gap:6px;background:#edf1f4;
  border:1px solid #dfe6eb;color:#9aa7b5;font-size:13px;font-weight:700;
  border-radius:12px;height:44px;padding:0 14px;text-decoration:none;white-space:nowrap}
.rcs-oos svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* Hidden Apple Pay engine mount (the noon_fixed_epo script is a singleton keyed
   to #noon_apple_pay_container). Clipped, not display:none, so the script's
   own show/hide logic on the button inside keeps working. */
.rcs-apay-engine{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;border:0!important}

/* ==========================================================================
   IMAGE-FIT FIX v5 (contain, no cropping) — staging only (2026-09-27)
   MOBILE IS APPROVED AND FROZEN (320/360/375/390/430, all <=760px).
   Every rule below lives inside min-width media queries and NEVER alters the
   mobile base above (lines 1-82, byte-identical to the approved version).
   Same component. Same WooCommerce/product-state logic. Same Apple Pay
   mechanism and payment flow. Desktop/tablet layout only.
   Real homepage container: .shell = min(1240px, calc(100% - 48px)).
   The rail stays a scroll-snap carousel; on >=768px the card becomes a
   vertical desktop card (image on top, content stacked) with an explicit
   column count per breakpoint. v4: column rules use the
   .rch-template .rc-home .product-rail selector with !important to
   override refinements.css (which forces 5-up/4-up with !important);
   rcs-card-system.css loads after refinements.css so these win. No transforms, no negative margins used to
   fake sizing, no hardcoded card heights, no duplicated cards.
   ========================================================================== */

/* ---- Shared vertical card for tablet + desktop (>=768px) ---- */
@media (min-width:768px){
  /* BOTTOM-GAP FIX (2026-09-27): the rail is a single-row column-flow grid with
     default align-items:stretch, so every card shorter than the tallest card in
     its rail gets stretched — and because the card is a flex column with
     justify-content:flex-start, the surplus lands BELOW the action row as dead
     space (most visible on short-content cards like Canva Pro). align-items:start
     keeps each card at its natural content-driven height. No fixed heights,
     no negative margins, no transforms; generic to all rails/cards. */
  .product-rail{align-items:start}
  /* vertical card: image on top, content stacked below */
  .product-card.rcs-card{flex-direction:column;gap:0;padding:12px;border-radius:20px;position:relative}
  .rcs-media{flex:none;width:100%;height:auto;aspect-ratio:16/10;border-radius:14px}
  /* wishlist overlays the image, stays cleanly inside the card */
  .product-card.rcs-card .rcs-wish{position:absolute;top:22px;inset-inline-start:22px;
    width:42px;height:42px;background:rgba(255,255,255,.94);border-color:#e2ebf0}
  .product-card.rcs-card .rcs-wish svg{width:20px;height:20px}
  .rcs-main{padding:12px 4px 2px}
  .rcs-cat{font-size:12px}
  .rcs-title{font-size:16px}
  .rcs-price{font-size:21px}
  .rcs-price del{font-size:14px}
  .rcs-trust{font-size:12px}
  /* trust line gets its own full-width row, actions on the next row */
  .rcs-borrow{flex-direction:column;align-items:stretch;gap:10px;margin-top:10px}
  .rcs-borrow .rcs-trust{flex:none}
  .rcs-borrow .rcs-action{margin:0;display:flex;align-items:center;gap:10px}
  .rcs-buy{flex:0 0 48px;width:48px;height:48px;border-radius:14px}
  .rcs-buy svg{width:22px;height:22px}
  .rcs-apaybtn{--apple-pay-button-height:48px;--apple-pay-button-border-radius:14px}
  /* state pills fill the action row on desktop/tablet */
  .rcs-borrow .rcs-opt,.rcs-borrow .rcs-oos{flex:1 1 auto;justify-content:center;height:48px;font-size:15px}
}

/* ---- Tablet 768-1023px: 2 columns ---- */
@media (min-width:768px) and (max-width:1023.98px){
  .rch-template .rc-home .product-rail{grid-auto-columns:calc((100% - 20px) / 2)!important;gap:20px}
  .rcs-apaybtn{--apple-pay-button-width:170px}
}

/* ---- Desktop 1024-1359px: 3 columns ---- */
@media (min-width:1024px) and (max-width:1359.98px){
  .rch-template .rc-home .product-rail{grid-auto-columns:calc((100% - 40px) / 3)!important;gap:20px}
  .product-card.rcs-card{padding:14px}
  .rcs-title{font-size:17px}
  .rcs-price{font-size:23px}
  .rcs-apaybtn{--apple-pay-button-width:180px;--apple-pay-button-height:50px}
  .rcs-buy{flex-basis:50px;width:50px;height:50px}
  .rcs-borrow .rcs-opt,.rcs-borrow .rcs-oos{height:50px}
}

/* ---- Wide desktop >=1360px: 4 columns (1366/1440/1920) ---- */
@media (min-width:1360px){
  .rch-template .rc-home .product-rail{grid-auto-columns:calc((100% - 60px) / 4)!important;gap:20px}
  .product-card.rcs-card{padding:14px}
  .product-card.rcs-card .rcs-wish{width:44px;height:44px}
  .rcs-title{font-size:16px}
  .rcs-price{font-size:22px}
  .rcs-apaybtn{--apple-pay-button-width:168px;--apple-pay-button-height:50px}
  .rcs-buy{flex-basis:50px;width:50px;height:50px}
  .rcs-borrow .rcs-opt,.rcs-borrow .rcs-oos{height:50px}
}