/**
 * VELORA Commerce — product card
 *
 * Scoped to the section root so edits here cannot reach any other part
 * of the page. Colours come from the theme tokens, never literals.
 */

#fp .fp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;display:flex;flex-direction:column}
#fp .fp-card__edge{height:6px;background:var(--sadu-thin) repeat-x;background-size:auto 6px}
#fp .fp-card__badge{position:absolute;inset-inline-start:12px;top:14px;z-index:2;background:linear-gradient(180deg,var(--primary2),var(--primary));color:#fff;font-weight:800;font-size:12px;padding:6px 11px;border-radius:999px;border:2px solid rgba(255,255,255,.18)}
#fp .fp-card__img{display:block;aspect-ratio:1/1;background:linear-gradient(180deg,#132340,#0c1526)}
#fp .fp-card__img img,#fp .fp-card__pic{width:100%;height:100%;object-fit:cover}
#fp .fp-card__body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
#fp .fp-card__rate{font-size:12px;color:var(--primary2);font-weight:700}
#fp .fp-card__rate small{color:var(--muted);font-weight:600}
#fp .fp-card__title{font-weight:700;font-size:15px;line-height:1.6}
#fp .fp-card__desc{margin:0;color:var(--muted);font-size:12px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#fp .fp-card__price{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:17px;color:#fff}
#fp .fp-card__price del{color:var(--muted);font-weight:600;font-size:13px}
#fp .fp-card__price ins{text-decoration:none}
#fp .fp-card .fp-btn{margin-top:auto;height:44px;font-size:14px}
#fp .fp-card__stock{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;align-self:flex-start}
#fp .fp-card__stock--out{background:color-mix(in srgb, var(--sale) 14%, transparent);color:var(--sale);border:1px solid color-mix(in srgb, var(--sale) 30%, transparent)}
#fp .fp-card--out .fp-card__pic,#fp .fp-card--out .fp-card__img img{opacity:.55;filter:grayscale(.35)}
#fp .fp-card--out .fp-btn--primary{background:var(--surface2);color:var(--muted);border:1px solid var(--line);box-shadow:none}

/* === CARD TAZ :: start === */
/* كارت بإطار دهبي منوّر، الصورة من غير شريط سدو، والمحتوى في النص زي كارت تاز. */
#fp .fp-card{border:1.5px solid color-mix(in srgb,var(--primary) 72%,transparent);border-radius:22px;background:linear-gradient(180deg,#15120c,#0b0a08);box-shadow:0 0 18px rgba(212,175,55,.16),inset 0 0 16px rgba(212,175,55,.05);transition:box-shadow .3s ease,translate .3s ease}
#fp .fp-card:hover{box-shadow:0 0 30px rgba(212,175,55,.3),inset 0 0 16px rgba(212,175,55,.08);translate:0 -3px}
#fp .fp-card__edge{display:none}
#fp .fp-card__badge{inset-inline-start:0;top:0;border:0;border-radius:0 0 0 14px;padding:7px 14px;font-size:12px;font-weight:800;color:#1a1407;background:linear-gradient(180deg,#f3d774,#d4a52c);box-shadow:0 4px 14px rgba(0,0,0,.35)}
#fp .fp-card__img{position:relative;background:#0b0a08}
#fp .fp-card__img .fp-card__rate{position:absolute;inset-inline-end:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:rgba(10,9,7,.72);border:1px solid rgba(212,175,55,.35);color:#fff;font-size:13px;font-weight:800;line-height:1}
#fp .fp-card__img .fp-card__rate b{color:var(--primary2);font-size:14px}
#fp .fp-card__img .fp-card__rate small{display:none}
#fp .fp-card__body{padding:16px 16px 18px;gap:6px;align-items:center;text-align:center}
#fp .fp-card__title{font-size:17px;font-weight:800;line-height:1.5;color:#fff}
#fp .fp-card__title a{color:inherit}
#fp .fp-card__desc{font-size:12.5px;-webkit-line-clamp:1}
#fp .fp-card__price{justify-content:center;flex-direction:row-reverse;gap:10px;font-size:18px}
#fp .fp-card__price ins,#fp .fp-card__price > .amount{color:var(--primary2)}
#fp .fp-card__price del{font-size:13.5px}
#fp .fp-card .fp-btn{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;height:46px;border-radius:999px;border:0;font-size:15px;font-weight:800;color:#1a1407;background:linear-gradient(180deg,#f3d774,#cf9e27);box-shadow:0 6px 18px rgba(212,175,55,.22)}
#fp .fp-card .fp-btn::after{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 12H6.6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 12H6.6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center/contain no-repeat}
#fp .fp-card .fp-btn.loading::after{opacity:.4}
#fp .fp-card .added_to_cart{font-size:12px;color:var(--primary2);align-self:center}
@media (max-width:600px){
  #fp .fp-card{border-radius:18px}
  #fp .fp-card__body{padding:12px 12px 14px}
  #fp .fp-card__title{font-size:15px}
  #fp .fp-card__price{font-size:16px}
  #fp .fp-card .fp-btn{height:42px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){#fp .fp-card{transition:none}#fp .fp-card:hover{translate:none}}
/* === CARD TAZ :: end === */

/* === SND CARD HOME MOBILE :: start === */
/* كارت قصير زي تاز: صورة مربعة وتحتها اسم سطر واحد ووصف وسعر وزرار رفيع. */
@media (max-width:600px){
  #fp #fp-sellers .fp-card{width:224px}
  #fp .fp-card{border-radius:18px}
  #fp .fp-card__badge{padding:4px 10px;font-size:11px;font-weight:700;border-radius:0 0 0 12px}
  #fp .fp-card__body{padding:8px 10px 9px;gap:1px}
  #fp .fp-card__title{max-width:100%;font-size:15px;line-height:1.3}
  #fp .fp-card__title a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #fp .fp-card__desc{font-size:12px;line-height:1.4}
  #fp .fp-card__price{font-size:15px;line-height:1.2;gap:6px;margin-top:1px}
  #fp .fp-card__price del{font-size:12px}
  #fp .fp-card .fp-btn{height:32px;margin-top:5px;padding:0 12px;font-size:13px;font-weight:700;gap:6px}
  #fp .fp-card .fp-btn::after{width:15px;height:15px;flex-basis:15px}
}
/* === SND CARD HOME MOBILE :: end === */
