/*
 * Storefront v2 (design/storefront-v2, phase 1): the shared pieces (spv-), the category page and the product page.
 * Sizes from the 1440 reference inside the homepage's 1280 container; phones stack. Motion: transform / opacity only,
 * none under reduced motion.
 */

/* ------------------------------------------------------------------ shared: breadcrumb chips, «رجوع» */
.spv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--sph-font); }
.spv-crumbs a { display: flex; align-items: center; gap: 8px; block-size: 38px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: #cfd7ff; font-size: 15px; font-weight: 700; text-decoration: none; }
.spv-crumbs a:hover { background: rgba(169, 184, 255, 0.14); }
.spv-crumbs i { padding: 0 2px; color: rgba(255, 255, 255, 0.35); font-size: 18px; font-style: normal; }
.spv-crumbs span { padding: 0 6px; color: #fff; font-size: 15px; font-weight: 800; }
.spv-back { display: flex; flex-shrink: 0; align-items: center; gap: 6px; block-size: 38px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 700; text-decoration: none; }
.spv-back:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.45); }

/* ------------------------------------------------------------------ category page (10–15) */
.spv-cat { padding-block: 36px 90px; color: #fff; font-family: var(--sph-font); }
.spv-cat .spv-crumbs { margin-block-end: 18px; }
.spv-cat .spv-crumbs a { block-size: 36px; font-size: 14.5px; }
.spv-cat .spv-crumbs span { font-size: 14.5px; }
.spv-cband { position: relative; display: flex; align-items: center; overflow: hidden; block-size: 150px; margin-block-end: 22px; padding: 0 36px; border-radius: 24px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-bart { position: absolute; inset-block: 0; left: 0; inline-size: 60%; block-size: 100%; object-fit: cover; opacity: 0.18; }
.spv-cband.has-art::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(270deg, #121318 45%, rgba(18, 19, 24, 0) 75%); pointer-events: none; }
/* Round 2 (CatBand-B): three benefit blocks at the band's end. */
.spv-perks { position: relative; z-index: 6; display: flex; align-items: center; margin: 0; margin-inline-start: auto; padding: 0; list-style: none; }
.spv-perk { display: flex; align-items: center; gap: 12px; padding-inline: 24px; }
.spv-perk + .spv-perk { border-inline-start: 1px solid rgba(255, 255, 255, 0.08); }
.spv-perk:last-child { padding-inline-end: 0; }
.spv-perk-ic { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 14px; background: rgba(169, 184, 255, 0.1); color: var(--sph-accent); }
.spv-perk b { display: block; color: #fff; font-size: 15.5px; font-weight: 800; line-height: 1.4; }
.spv-perk small { display: block; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.spv-ctx { position: relative; z-index: 6; display: flex; align-items: center; gap: 18px; }
.spv-cico { display: flex; align-items: center; justify-content: center; inline-size: 64px; block-size: 64px; border-radius: 20px; background: rgba(169, 184, 255, 0.14); color: var(--sph-accent); }
.spv-ctx h1 { margin: 0; color: #fff; font-size: 34px; font-weight: 800; line-height: 1.3; }
.spv-csub { margin: 4px 0 0; color: rgba(255, 255, 255, .62); font-size: 15px; line-height: 1.6; }
.spv-tools { display: flex; align-items: center; gap: 8px; margin-block-end: 20px; }
.spv-tchips { display: flex; flex-wrap: wrap; gap: 8px; }
.spv-tchips a { display: inline-flex; align-items: center; block-size: 40px; padding: 0 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.spv-tchips a:hover { color: #fff; }
.spv-tchips a.is-on { background: #fff; color: #0b0b0f; }
.spv-csearch { display: flex; align-items: center; gap: 10px; inline-size: 268px; block-size: 42px; margin: 0; margin-inline-start: auto; padding: 0 14px; box-sizing: border-box; border-radius: 14px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.4); }
.spv-csearch:focus-within { box-shadow: inset 0 0 0 1.5px var(--sph-accent); }
.spv-csearch input { flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; background: transparent; color: #fff; font: 500 14px var(--sph-font); outline: none; }
.spv-csearch input::placeholder { color: rgba(255, 255, 255, 0.4); }
.spv-csearch input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.spv-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.spv-gal.is-covers { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; }
.spv-tile { display: block; color: #fff; text-decoration: none; }
.spv-tile[hidden] { display: none; }
/* Product images are the card drawn on a transparent square: shown whole, never cropped. */
.spv-tile img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 290 / 183; object-fit: contain; transition: transform 0.2s ease; }
.spv-tile.is-cover img { aspect-ratio: 2 / 3; border-radius: 16px; object-fit: contain; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8); }
.spv-tile:hover img { transform: translateY(-3px); }
.spv-tile b { display: block; margin-block-start: 12px; font-size: 16px; font-weight: 800; text-align: center; }
.spv-tile.is-cover b { margin-block-start: 10px; font-size: 15px; }
.spv-tile:hover b { color: var(--sph-accent); }
.spv-cempty { margin: 40px 0; color: rgba(255, 255, 255, 0.6); font-size: 16px; text-align: center; }
.spv-cempty[hidden] { display: none; }

/* ------------------------------------------------------------------ product page (20–27) */
body.spv-product { background: var(--sph-bg); }
.spv-page { position: relative; color: #fff; font-family: var(--sph-font); }
.spv-band { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 380px; overflow: hidden; background: linear-gradient(110deg, #0b0b0f 20%, rgba(11, 11, 15, 0.4)), radial-gradient(600px 300px at 80% 50%, rgba(169, 184, 255, 0.35), transparent 70%), #14151c; }
.spv-band .spv-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 30%; opacity: 0.35; }
.spv-band.has-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b0b0f 30%, rgba(11, 11, 15, 0.55) 60%, rgba(11, 11, 15, 0.25)), linear-gradient(0deg, #0b0b0f, rgba(11, 11, 15, 0) 45%); }
.spv-in-p { position: relative; z-index: 2; padding-block: 20px 90px; }
.spv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 38px; }
.spv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 520px; column-gap: 100px; align-items: start; margin-block-start: 28px; }
.spv-main { min-inline-size: 0; }
.spv-head { display: flex; align-items: flex-start; gap: 80px; min-block-size: 310px; margin-inline-end: -60px; }
/* The product's landscape image (290:183), whole; about 20% larger than the old 260px square's card (round 2). */
.spv-pic { flex: none; inline-size: 312px; block-size: auto; aspect-ratio: 290 / 183; margin-block-start: 40px; margin-inline-start: 14px; } /* Round 9c §1: straight, never tilted. */
.spv-pic picture { display: contents; }
.spv-pic img.spv-pimg { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.spv-pic.is-portrait { inline-size: 240px; aspect-ratio: 2 / 3; margin-block-start: 0; margin-inline-start: 50px; margin-inline-end: 10px; }
.spv-pic.is-portrait img.spv-pimg { border-radius: 16px; }
.spv-ttl { flex: none; inline-size: 340px; }
.spv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-end: 8px; font-size: 13.5px; font-weight: 700; }
.spv-brand { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); }
.spv-blogo { display: flex; overflow: hidden; inline-size: 28px; block-size: 28px; border-radius: 8px; background: #fff; }
.spv-blogo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.spv-stock { display: inline-flex; align-items: center; gap: 6px; color: #3ecf8e; }
.spv-stock::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.spv-stock.is-out { color: rgba(255, 255, 255, 0.78); }
.spv-stock.is-out::before { background: #ff4d4f; } /* Final round A8.1: «غير متوفر حالياً» with a red dot. */
.spv-stock.is-low { color: #ffbe5a; } /* Round 9 §5: «باقي N» (a real 1–5). */
.spv-sub { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.spv-ttl h1 { margin: 0; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.3; }
/* Round 9 §4: the short line under the name (the chosen option's, else the product's / its type's). */
.spv-tline { margin: 6px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 500; line-height: 1.6; }
.spv-tline[hidden] { display: none; }
.spv-warranty + .spv-warranty { margin-block-start: 8px; }
.spv-rate { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.spv-rate b { color: #fff; }
/* Round 9 §5: «تم شراؤه أكثر من N مرة» (our own paid orders). */
.spv-sold { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }

/* accordion (first item open) */
.spv-acc-i { margin-block-end: 10px; overflow: hidden; border-radius: 16px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-acc-i summary { display: flex; align-items: center; justify-content: space-between; block-size: 58px; padding: 0 20px; color: #fff; font-size: 16px; font-weight: 800; list-style: none; cursor: pointer; }
.spv-acc-i summary::-webkit-details-marker { display: none; }
.spv-acc-i summary svg { flex: none; color: rgba(255, 255, 255, 0.5); transition: transform 0.2s ease; }
.spv-acc-i[open] summary svg { color: var(--sph-accent); transform: rotate(180deg); }
.spv-acc-i summary:focus-visible { outline: 2px solid var(--sph-accent); outline-offset: -2px; }
.spv-acc-b { padding: 0 20px 18px; color: rgba(255, 255, 255, 0.75); font-size: 14.5px; line-height: 1.9; }
.spv-steps { margin: 0; padding-inline-start: 20px; }
.spv-steps b { color: #fff; }
.spv-ext { color: var(--sph-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.spv-ext:hover { color: #fff; }
.spv-dots { margin: 0; padding-inline-start: 20px; }
.spv-desc p { margin: 0 0 10px; }
.spv-desc h2, .spv-desc h3 { margin: 12px 0 6px; color: #fff; font-size: 16px; }
.spv-q { padding: 12px 0; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.spv-q:first-child { border: 0; padding-block-start: 0; }
.spv-q b { color: #fff; font-size: 15px; }
.spv-q p { margin: 4px 0 0; }
.spv-rv { padding: 12px 0; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.spv-rv:first-child { border: 0; padding-block-start: 0; }
.spv-rv p { margin: 0; }
.spv-rv p:first-child { display: flex; align-items: center; gap: 10px; }
.spv-rv b { color: #fff; }
.spv-stars { color: #ffc94a; letter-spacing: 1px; }
.spv-stars i { color: rgba(255, 255, 255, 0.2); font-style: normal; }
.spv-none { margin: 0; color: rgba(255, 255, 255, 0.55); }

/* product content (round 3): name + description, «مواصفات», «مميزات», «طريقة التفعيل» — real <h2>s, open on a desktop */
.spv-content { margin-block: 28px 18px; padding: 8px 26px; border-radius: 20px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-sec { padding-block: 20px 22px; }
.spv-sec + .spv-sec { border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.spv-sec-h { margin: 0 0 12px; font-size: 20px; font-weight: 800; line-height: 1.45; }
.spv-sec-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: start; cursor: default; }
.spv-sec-t svg { display: none; flex: none; color: rgba(255, 255, 255, 0.5); transition: transform 0.2s ease; }
.spv-sec-t:focus-visible { outline: 2px solid var(--sph-accent); outline-offset: 4px; border-radius: 6px; }
.spv-sec-b { color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.95; }
.spv-sec-b .spv-desc p:last-child { margin-block-end: 0; }
.spv-specs { display: grid; margin: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-specs > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.spv-specs > div:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.spv-specs dt { color: #fff; font-weight: 800; }
.spv-specs dd { margin: 0; overflow-wrap: anywhere; }
.spv-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.spv-feats li { display: flex; align-items: flex-start; gap: 10px; }
.spv-feats i { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; margin-block-start: 4px; border-radius: 50%; background: rgba(62, 207, 142, 0.14); color: #3ecf8e; font-style: normal; }

/* buy card */
.spv-buy { margin-block-start: 6px; padding: 26px; box-sizing: border-box; border-radius: 24px; background: #121318; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.6); }
.spv-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.spv-notes ul { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 93, 93, 0.1); color: #ffb0b0; font-size: 13.5px; line-height: 1.6; list-style: none; }
.spv-notes li { margin: 0; }
.spv-lbl { margin: 0 0 10px; color: #fff; font-size: 14.5px; font-weight: 800; }
.spv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spv-sv { display: flex; flex-wrap: wrap; gap: 8px; }
.spv-chip { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-block-size: 44px; max-inline-size: 100%; padding: 6px 18px; text-align: center; line-height: 1.3; overflow-wrap: anywhere; border: 0; border-radius: 14px; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); font: 700 15px var(--sph-font); cursor: pointer; }
.spv-sv .spv-chip { flex: 1 1 auto; min-inline-size: 90px; min-block-size: 46px; padding: 6px 12px; font-weight: 800; }
.spv-chip > span { min-inline-size: 0; text-wrap: balance; }
.spv-chip:hover { color: #fff; }
.spv-flag { display: flex; flex: none; font-style: normal; line-height: 1; }
.sp-flag { display: inline-block; inline-size: 20px; block-size: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); vertical-align: -2px; object-fit: contain; }
.spv-chip.is-on { background: rgba(169, 184, 255, 0.1); box-shadow: inset 0 0 0 2px var(--sph-accent); color: #fff; }
.spv-chip[hidden], .spv-opt[hidden], .spv-field[hidden], .spv-agree[hidden], .spv-warn[hidden] { display: none; }
.spv-grid { display: grid; grid-template-columns: repeat(var(--spv-cols, 4), minmax(0, 1fr)); gap: 10px; }
.spv-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-inline-size: 0; border: 0; text-align: center; overflow-wrap: anywhere; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font-family: var(--sph-font); cursor: pointer; }
.spv-grid--den .spv-opt { block-size: 74px; border-radius: 16px; }
.spv-grid--den b { font-size: 19px; font-weight: 800; }
.spv-grid--den .spv-op { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.spv-grid--pk .spv-opt { gap: 6px; padding: 14px 12px; border-radius: 16px; }
.spv-grid--pk b { font-size: 20px; font-weight: 800; }
.spv-grid--pk small { min-block-size: 16px; color: rgba(255, 255, 255, 0.5); font-size: 12px; }
/* «600 + 60» reads left to right, as in the reference. */
.spv-t-topup .spv-grid--pk small { direction: ltr; unicode-bidi: isolate; }
.spv-grid--pk .spv-op { font-size: 14.5px; font-weight: 800; }
.spv-opt:hover { box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.45); }
.spv-opt.is-on { background: rgba(169, 184, 255, 0.1); box-shadow: inset 0 0 0 2px var(--sph-accent); }
.spv-grid--den .spv-opt.is-on .spv-op { color: #cfd7ff; }
.spv-opt.is-out .spv-op { color: rgba(255, 255, 255, 0.4); font-weight: 600; }
.spv-ck { position: absolute; inset-block-start: 7px; inset-inline-start: 7px; display: none; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--sph-accent); color: #0b0b0f; }
.spv-grid--pk .spv-ck { inset-block-start: 8px; inset-inline-start: 8px; inline-size: 20px; block-size: 20px; }
.spv-ck svg { stroke-width: 3; }
.spv-opt.is-on .spv-ck { display: flex; }
.spv-chip:focus-visible, .spv-opt:focus-visible, .spv-add:focus-visible, .spv-now:focus-visible { outline: 2px solid var(--sph-accent); outline-offset: 2px; }

/* required input with «وين ألقاه؟» */
.spv-flbl { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #fff; font-size: 14.5px; font-weight: 800; }
.spv-req { color: #ff7a7a; font-style: normal; }
.spv-where { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--sph-accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.spv-where:hover { text-decoration: underline; }
.spv-in { display: flex; align-items: center; gap: 10px; block-size: 54px; padding: 0 16px; border-radius: 14px; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.spv-in:focus-within, .spv-in.is-filled { box-shadow: inset 0 0 0 1.5px var(--sph-accent), 0 0 0 4px rgba(169, 184, 255, 0.1); }
.spv-in svg { flex: none; color: var(--sph-accent); }
.spv-in input, .spv-in select, .spv-in textarea { flex: 1; min-inline-size: 0; padding: 0; border: 0; background: transparent; color: #fff; font: 700 17px var(--sph-font); outline: none; }
.spv-in select { block-size: 100%; font-size: 15px; }
.spv-in select option { background: #15161c; }
.spv-in:has(textarea) { block-size: auto; padding-block: 12px; }
.spv-field.is-bad .spv-in { box-shadow: inset 0 0 0 1.5px #ff7a7a; }
.spv-hint { margin: 8px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 13px; }

/* amber warning, requirements, tick */
.spv-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 190, 90, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 190, 90, 0.25); color: #ffd59a; font-size: 13.5px; line-height: 1.6; }
.spv-warn svg { flex: none; margin-block-start: 2px; }
.spv-warn b { color: #ffe3ad; font-weight: 800; }
.spv-reqbox { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(169, 184, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.2); }
.spv-reqbox b { font-size: 15px; }
.spv-reqbox p { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 14.5px; }
.spv-reqbox i { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: 7px; background: rgba(169, 184, 255, 0.16); color: var(--sph-accent); }
.spv-agree { position: relative; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.spv-agree input { position: absolute; opacity: 0; inline-size: 22px; block-size: 22px; margin: 0; }
.spv-agree i { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); color: transparent; }
.spv-agree input:checked + i { background: var(--sph-accent); box-shadow: none; color: #0b0b0f; }
.spv-agree input:focus-visible + i { outline: 2px solid var(--sph-accent); outline-offset: 2px; }

/* price, gift, buttons */
.spv-pr { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-block-start: 10px; }
.spv-pnote { margin: 8px 0 0; color: #7ee2b0; font-size: 13.5px; font-weight: 700; }
.spv-pnote[hidden] { display: none; }
.spv-price { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.2; }
.spv-price small { color: rgba(255, 255, 255, 0.55); font-size: 17px; font-weight: 600; }
.spv-na { color: rgba(255, 255, 255, 0.6); font-size: 20px; font-weight: 700; }
.spv-gift { position: relative; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.75); font-size: 14px; cursor: pointer; }
.spv-gift input { position: absolute; opacity: 0; inline-size: 40px; block-size: 22px; margin: 0; }
.spv-tg { position: relative; flex: none; inline-size: 40px; block-size: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.14); }
.spv-tg::after { content: ""; position: absolute; inset-block-start: 3px; right: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.spv-gift input:checked + .spv-tg { background: var(--sph-accent); }
.spv-gift input:checked + .spv-tg::after { background: #0b0b0f; transform: translateX(-18px); }
.spv-gift input:focus-visible + .spv-tg { outline: 2px solid var(--sph-accent); outline-offset: 2px; }
.spv-acts { display: flex; gap: 10px; }
.spv-qty { display: flex; flex: none; align-items: center; block-size: 58px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.spv-qty button { inline-size: 44px; block-size: 100%; border: 0; background: none; color: rgba(255, 255, 255, 0.7); font: 400 20px var(--sph-font); cursor: pointer; }
.spv-qty input { inline-size: 30px; padding: 0; border: 0; background: transparent; color: #fff; font: 800 18px var(--sph-font); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.spv-qty input::-webkit-inner-spin-button, .spv-qty input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.spv-add, .spv-now { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; block-size: 58px; padding: 0 12px; border: 0; border-radius: 16px; font: 800 17px var(--sph-font); white-space: nowrap; cursor: pointer; }
.spv-add { background: #fff; color: #0b0b0f; }
.spv-add:hover { background: var(--sph-accent); }
.spv-now { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); color: #fff; }
.spv-now:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.spv-add:disabled, .spv-now:disabled { opacity: 0.45; cursor: not-allowed; }
.spv-add:disabled:hover { background: #fff; }
.spv-acts .spv-fav { position: static; display: flex; flex: none; align-items: center; justify-content: center; inline-size: 58px; block-size: 58px; padding: 0; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: none; color: #ff7a9a; cursor: pointer; }
.spv-acts .spv-fav svg { inline-size: 20px; block-size: 20px; fill: none; }
.spv-acts .spv-fav svg path { fill: transparent; stroke: currentColor; stroke-width: 1.8; }
.spv-acts .spv-fav.is-on svg path { fill: currentColor; }
.spv-info { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spv-info li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.spv-info svg { flex: none; color: var(--sph-accent); }
.spv-pays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
/* Final round A8.4: the payment logos' tile is shell.css's, one size everywhere (product page, cart, footer). */

/* Final round A8.1: «أعلمني عند التوفر» — the buy buttons make way while the chosen option cannot be bought. */
.spv-notifybtn { display: none; }
.spv-form.is-wait [data-buy], .spv-form.is-wait .spv-qty, .spv-form.is-wait .spv-gift { display: none; }
.spv-form.is-wait .spv-notifybtn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; background: #fff; box-shadow: none; color: #0b0b0f; }
.spv-form.is-wait .spv-notifybtn:hover { background: #eef0ff; }
.spv-form.is-wait .spv-mbar .spv-notifybtn { flex: 1; }
.spv-notifyf { margin: 0; }
.spv-notify { margin-block-start: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.spv-notify:target { display: block; }
.spv-notify label { display: block; margin-block-end: 8px; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 700; }
.spv-notify-row { display: flex; gap: 8px; }
.spv-notify-row input { flex: 1; min-inline-size: 0; block-size: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #0f1015; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; font: 600 15px var(--sph-font); direction: ltr; text-align: start; }
.spv-notify-row input:focus { outline: 2px solid var(--sph-accent); outline-offset: 1px; }
.spv-notify-send { flex: none; block-size: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--sph-accent); color: #0b0b0f; font: 800 15px var(--sph-font); cursor: pointer; }
.spv-notify-ok { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(62, 207, 142, 0.12); color: #3ecf8e; font-size: 14px; font-weight: 700; }

/* the older storefront rules for the WooCommerce product form do not reach this page */
.spv-form .sp-region { color: #fff; }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1180px) {
  .spv-perk { padding-inline: 14px; }
  .spv-perk small { font-size: 12px; }
  .spv-layout { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; }
  .spv-head { gap: 32px; margin-inline-end: 0; }
  .spv-pic { inline-size: 240px; margin-inline-start: 10px; }
  .spv-pic.is-portrait { inline-size: 200px; }
  .spv-ttl { flex: 1; inline-size: auto; }
  .spv-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spv-gal.is-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ phones: one column */
@media (max-width: 860px) {
  .spv-cat { padding-block: 20px 60px; }
  .spv-cband { flex-direction: column; align-items: stretch; gap: 16px; block-size: auto; padding: 18px; border-radius: 20px; }
  .spv-cband.has-art::after { background: linear-gradient(270deg, #121318 50%, rgba(18, 19, 24, 0) 90%); }
  .spv-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-inline-start: 0; }
  .spv-perk { flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); text-align: center; }
  .spv-perk + .spv-perk { border-inline-start: 0; }
  .spv-perk:last-child { padding-inline-end: 6px; }
  .spv-perk-ic { inline-size: 36px; block-size: 36px; border-radius: 12px; }
  .spv-perk b { font-size: 13px; }
  .spv-perk small { font-size: 11px; line-height: 1.45; white-space: normal; }
  .spv-cico { inline-size: 48px; block-size: 48px; border-radius: 16px; }
  .spv-ctx { gap: 12px; }
  .spv-ctx h1 { font-size: 26px; }
  .spv-tools { flex-wrap: wrap; }
  .spv-tchips { flex-wrap: nowrap; order: 2; inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .spv-tchips a { flex: none; block-size: 36px; padding: 0 14px; font-size: 14px; }
  .spv-csearch { order: 1; inline-size: 100%; margin: 0; }
  .spv-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .spv-gal.is-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .spv-tile b { margin-block-start: 8px; font-size: 14px; }
  .spv-tile.is-cover b { font-size: 12.5px; }

  .spv-band { block-size: 330px; }
  .spv-in-p { padding-block: 14px 60px; }
  .spv-top { flex-wrap: wrap; }
  .spv-crumbs a { block-size: 34px; padding: 0 10px; font-size: 13.5px; }
  .spv-crumbs span { font-size: 13.5px; }
  .spv-back { display: none; }
  .spv-layout { display: flex; flex-direction: column; gap: 18px; margin-block-start: 18px; }
  .spv-main { display: contents; }
  .spv-head { order: 1; flex-direction: column; align-items: center; gap: 22px; min-block-size: 0; margin: 0; text-align: center; }
  .spv-pic, .spv-pic.is-portrait { inline-size: 230px; margin: 6px 0 0; }
  .spv-pic.is-portrait { inline-size: 180px; }
  .spv-ttl { inline-size: 100%; }
  .spv-meta, .spv-rate, .spv-sold { justify-content: center; }
  .spv-ttl h1 { font-size: 26px; }
  .spv-buy { order: 2; margin: 0; padding: 18px; border-radius: 20px; }
  .spv-content { order: 3; align-self: stretch; margin: 0; padding: 0 16px; }
  .spv-acc { order: 4; align-self: stretch; }
  .spv-sec { padding-block: 0; }
  .spv-sec-h { margin: 0; font-size: 17px; }
  .spv-sec-t { min-block-size: 56px; cursor: pointer; }
  .spv-sec-t svg { display: block; transform: rotate(180deg); }
  .spv-sec-b { padding-block-end: 18px; font-size: 14.5px; }
  .spv-content.is-js .spv-sec.is-shut .spv-sec-b { display: none; }
  .spv-content.is-js .spv-sec.is-shut .spv-sec-t svg { transform: none; }
  .spv-specs > div { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 12px; padding: 11px 12px; }
  .spv-feats { grid-template-columns: minmax(0, 1fr); }
  .spv-grid--den { --spv-cols: 2 !important; }
  .spv-grid--pk b { font-size: 17px; }
  .spv-grid--pk .spv-opt { padding: 12px 6px; }
  .spv-grid--pk .spv-op { font-size: 13px; }
  .spv-chip { padding: 0 14px; font-size: 14px; }
  .spv-sv .spv-chip { min-inline-size: 0; font-size: 14px; }
  .spv-price { font-size: 30px; }
  .spv-acts { flex-wrap: wrap; }
  .spv-add, .spv-now { flex: 1 1 40%; block-size: 52px; font-size: 16px; }
  .spv-qty { block-size: 52px; }
  .spv-acts .spv-fav { inline-size: 52px; block-size: 52px; }
  .spv-acc-i summary { block-size: 54px; padding: 0 16px; font-size: 15px; }
  .spv-acc-b { padding: 0 16px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .spv-tile img, .spv-acc-i summary svg, .spv-sec-t svg, .spv-tg::after { transition: none; }
  .spv-tile:hover img { transform: none; }
}

/* ================================================================== phase 2: buttons, toast, cart, results, orders */
.spv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 0 22px; border: 0; border-radius: 14px; background: #fff; color: #0b0b0f !important; font: 800 15px var(--sph-font); text-decoration: none; cursor: pointer; }
.spv-btn:hover { background: var(--sph-accent); }
.spv-btn--o { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); color: #fff !important; }
.spv-btn--o:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.spv-btn--d { background: #1d1e25; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff !important; }
.spv-btn--d:hover { background: #262833; }
.spv-ghost { min-block-size: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 700 14px var(--sph-font); cursor: pointer; }
.spv-ghost:hover { background: rgba(169, 184, 255, 0.16); }
.spv-inl { display: contents; }
.spv-x { display: inline-flex; padding: 2px; border: 0; background: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; vertical-align: middle; }

/* toast (05): under the cart icon */
.spv-toast { position: fixed; z-index: 70; inset-block-start: 92px; left: max(16px, calc((100vw - 1280px) / 2 - 64px)); inline-size: min(360px, calc(100vw - 32px)); padding: 18px 16px 16px; border-radius: 18px; background: #16171d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.6); color: #fff; font-family: var(--sph-font); transition: opacity 0.25s ease, transform 0.25s ease; }
.spv-toast.is-gone { opacity: 0; transform: translateY(-8px); }
.spv-toast-bar { position: absolute; inset-block-start: 16px; inset-inline: 16px; block-size: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.spv-toast-bar i { display: block; block-size: 100%; background: #3ecf8e; transform-origin: right; animation: spvToast 5s linear forwards; }
.spv-toast.is-held .spv-toast-bar i { animation-play-state: paused; }
.spv-toast.is-still .spv-toast-bar i { animation: none; }
@keyframes spvToast { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.spv-toast-t { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; font-size: 15px; font-weight: 800; }
.spv-ok { display: flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #3ecf8e; color: #0b0b0f; }
.spv-toast-x { position: absolute; inset-block-start: 26px; inset-inline-end: 12px; display: flex; padding: 6px; border: 0; background: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.spv-toast-line { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.spv-toast-img img { display: block; inline-size: 56px; block-size: 56px; border-radius: 12px; object-fit: contain; background: #0b0b0f; }
.spv-toast-line > span:last-child { display: grid; }
.spv-toast-line b { font-size: 14.5px; }
.spv-toast-line small { color: rgba(255, 255, 255, 0.7); font-size: 13.5px; font-weight: 700; }
.spv-toast-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spv-toast-acts form { display: contents; }
.spv-toast-acts .spv-btn { box-sizing: border-box; inline-size: 100%; min-block-size: 44px; padding-inline: 10px; font-size: 14px; }

/* cart (05) */
.spv-cart { padding-block: 36px 90px; color: #fff; font-family: var(--sph-font); }
.spv-clayout { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 30px; align-items: start; }
.spv-chead { display: flex; align-items: baseline; gap: 12px; margin-block-end: 18px; }
.spv-chead h1 { margin: 0; color: #fff; font-size: 30px; font-weight: 800; }
.spv-chead span { color: rgba(255, 255, 255, 0.55); }
.spv-line { margin-block-end: 14px; padding: 20px; border-radius: 20px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-lrow { display: flex; align-items: center; gap: 16px; }
.spv-limg img { display: block; inline-size: 84px; block-size: 84px; border-radius: 16px; object-fit: contain; background: #0b0b0f; }
.spv-linfo { display: grid; flex: 1; min-inline-size: 0; justify-items: start; }
.spv-tag { padding: 2px 8px; border-radius: 8px; background: rgba(169, 184, 255, 0.1); color: var(--sph-accent); font-size: 12px; font-weight: 700; }
.spv-lname { margin-block-start: 4px; color: #fff !important; font-size: 17px; font-weight: 800; text-decoration: none; }
.spv-lunit { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.spv-lend { display: flex; flex-shrink: 0; align-items: center; gap: 16px; }
.spv-qty--s { block-size: 42px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.spv-qty--s button { inline-size: 38px; block-size: 42px; }
.spv-qty--s button:disabled { opacity: 0.3; cursor: default; }
.spv-qty--s b { inline-size: 30px; font-size: 16px; text-align: center; }
.spv-ltotal { min-inline-size: 80px; font-size: 17px; font-weight: 800; white-space: nowrap; }
.spv-ltotal small { color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 600; }
.spv-rm { display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 10px; background: rgba(255, 93, 93, 0.1); color: #ff7a7a; cursor: pointer; }
.spv-rm:hover { background: rgba(255, 93, 93, 0.2); }
.spv-lfields { display: grid; gap: 10px; margin-block-start: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(169, 184, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.16); }
.spv-fld { display: flex; align-items: center; gap: 14px; }
.spv-flab { flex: none; inline-size: 170px; font-size: 14px; font-weight: 700; }
.spv-flab i { margin-inline-start: 4px; color: #ff7a7a; font-style: normal; }
.spv-flab small { display: block; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 500; }
.spv-fin { flex: 1; min-inline-size: 0; block-size: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font: 700 15px var(--sph-font); }
.spv-fin:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sph-accent); }
.spv-fsave { justify-self: end; }
.spv-lgift { margin-block-start: 12px; }
.spv-gmail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 10px; }
.spv-gmail label { font-size: 14px; font-weight: 700; }
.spv-gmail input { flex: 1; min-inline-size: 200px; block-size: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font: 600 14px var(--sph-font); }
.spv-cnote { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 13.5px; }
.spv-cnotes { margin-block-end: 16px; }
.spv-notes .woocommerce-message, .spv-notes .woocommerce-info { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(62, 207, 142, 0.1); color: #8ef0c4; list-style: none; }
.spv-sum { position: sticky; inset-block-start: 24px; display: grid; gap: 4px; padding: 24px; border-radius: 24px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-sum h2 { margin: 0 0 14px; color: #fff; font-size: 22px; font-weight: 800; }
.spv-coupon { display: flex; overflow: hidden; block-size: 48px; margin-block-end: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.spv-cp { display: flex; flex: 1; align-items: center; gap: 8px; padding: 0 14px; color: rgba(255, 255, 255, 0.4); }
.spv-cp input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: #fff; font: 600 14.5px var(--sph-font); outline: none; }
.spv-coupon button { inline-size: 86px; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; font: 700 14.5px var(--sph-font); cursor: pointer; }
.spv-coupon button:hover { background: rgba(169, 184, 255, 0.16); }
.spv-srow { display: flex; justify-content: space-between; padding: 8px 0; color: rgba(255, 255, 255, 0.7); font-size: 15px; }
.spv-srow b { color: #fff; }
.spv-sdisc b { color: #3ecf8e; }
.spv-stot { margin-block-start: 6px; padding-block-start: 14px; border-block-start: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-size: 20px; font-weight: 800; }
.spv-go-f { margin: 14px 0 12px; }
.spv-go { display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: 100%; block-size: 56px; border: 0; border-radius: 16px; background: #fff; color: #0b0b0f; font: 800 17px var(--sph-font); cursor: pointer; }
.spv-go:hover { background: var(--sph-accent); }
.spv-go small { font-size: 15px; font-weight: 700; opacity: 0.7; }
.spv-go-t { display: none; }
@media (max-width: 760px) { .spv-go-t { display: inline; } .spv-go-f .spv-ack { font-size: 12px; } }
.spv-empty { display: grid; justify-items: center; gap: 10px; max-inline-size: 460px; margin: 40px auto; padding: 40px 24px; border-radius: 24px; background: #121318; text-align: center; }
.spv-empty-ic { display: flex; align-items: center; justify-content: center; inline-size: 72px; block-size: 72px; border-radius: 50%; background: rgba(169, 184, 255, 0.12); color: var(--sph-accent); }
.spv-empty h1, .spv-empty h2 { margin: 0; color: #fff; font-size: 24px; }
.spv-empty p { margin: 0 0 8px; color: rgba(255, 255, 255, 0.6); }

/* statuses (31) */
.spv-st { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; block-size: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.spv-st::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.spv-st--grey { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.spv-st--amber { background: rgba(255, 190, 90, 0.12); color: #ffbe5a; }
.spv-st--green { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; }
.spv-st--blue { background: rgba(169, 184, 255, 0.14); color: var(--sph-accent); }
.spv-st--slate { background: rgba(140, 150, 180, 0.16); color: #c3cae0; }
.spv-st--red { background: rgba(255, 93, 93, 0.12); color: #ff8a8a; }

/* timeline */
.spv-tl { display: flex; justify-content: center; margin: 22px 0; padding: 0; list-style: none; }
.spv-tl li { position: relative; display: grid; flex: 0 1 200px; justify-items: center; gap: 10px; color: rgba(255, 255, 255, 0.45); font-size: 14px; font-weight: 800; }
.spv-tl li + li::before { content: ""; position: absolute; inset-block-start: 16px; inset-inline-end: calc(50% + 26px); inline-size: calc(100% - 52px); block-size: 2px; background: rgba(255, 255, 255, 0.1); }
.spv-tl li.is-done + li::before { background: #3ecf8e; }
.spv-tl span { display: flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #1d1e25; color: #0b0b0f; }
.spv-tl .is-done { color: #fff; }
.spv-tl .is-done span { background: #3ecf8e; }
.spv-tl .is-now { color: #fff; }
.spv-tl .is-now span { background: #ffbe5a; box-shadow: 0 0 0 6px rgba(255, 190, 90, 0.18); }
.spv-tl .is-now span::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #0b0b0f; }

/* order lines by type (31) */
.spv-olines { display: grid; }
.spv-olines.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.spv-oline { padding: 18px 0; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.spv-ocard { padding: 20px; border: 0; border-radius: 20px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-ohead { display: flex; align-items: center; gap: 14px; margin-block-end: 12px; }
.spv-oimg img { display: block; inline-size: 56px; block-size: 56px; border-radius: 12px; object-fit: contain; background: #0b0b0f; }
.spv-oname { display: grid; flex: 1; min-inline-size: 0; }
.spv-oname b { font-size: 16px; }
.spv-oname small { color: rgba(255, 255, 255, 0.5); }
.spv-code { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-block-size: 48px; margin-block-end: 10px; padding: 0 8px 0 14px; border-radius: 12px; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.25); }
.spv-cv { flex: 1; min-inline-size: 0; font: 600 16px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-align: left; overflow-wrap: anywhere; }
.spv-ib { display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 10px; background: rgba(169, 184, 255, 0.12); color: var(--sph-accent); cursor: pointer; }
.spv-ib:hover { background: rgba(169, 184, 255, 0.22); }
.spv-cmsg { flex-basis: 100%; padding-block-end: 6px; color: #3ecf8e; font-size: 12.5px; text-align: start; }
.spv-ohow, .spv-onote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.spv-ohow b { color: rgba(255, 255, 255, 0.85); }
.spv-odl { display: grid; gap: 10px; margin: 0; }
.spv-odl div { display: flex; justify-content: space-between; gap: 12px; }
.spv-odl dt { color: rgba(255, 255, 255, 0.6); }
.spv-odl dd { margin: 0; font-weight: 800; }
.spv-prog p { display: flex; justify-content: space-between; margin: 0 0 8px; color: rgba(255, 255, 255, 0.6); }
.spv-prog b { color: #fff; }
.spv-bar { display: block; overflow: hidden; block-size: 8px; margin-block-end: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); direction: ltr; }
.spv-bar i { display: block; block-size: 100%; border-radius: 4px; background: var(--sph-accent); }
.spv-prog small { color: rgba(255, 255, 255, 0.5); font-size: 12.5px; }
.spv-tgbtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 48px; margin-block-start: 12px; border-radius: 14px; background: #2aabee; color: #fff !important; font-weight: 800; text-decoration: none; }
.spv-tgbtn:hover { filter: brightness(1.08); }
.spv-orefill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block-start: 10px; }
.spv-orefill small { color: rgba(255, 255, 255, 0.5); font-size: 12.5px; }
.spv-cmsg.is-bad { color: #ff8a8a; }

/* success (30) / failure (32) */
.spv-result { padding-block: 26px 90px; color: #fff; font-family: var(--sph-font); }
.spv-rcard { max-inline-size: 830px; margin: 0 auto; padding: 22px 36px 34px; border-radius: 24px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); text-align: center; }
.spv-rcard--s { max-inline-size: 690px; }
.spv-ric { display: inline-flex; align-items: center; justify-content: center; inline-size: 84px; block-size: 84px; margin: 12px auto 8px; border-radius: 50%; }
.spv-ric.is-ok { background: #3ecf8e; box-shadow: 0 0 0 12px rgba(62, 207, 142, 0.12); color: #0b0b0f; }
.spv-ric.is-bad { background: #ff5d5d; box-shadow: 0 0 0 12px rgba(255, 93, 93, 0.12); color: #fff; }
.spv-rcard h1 { margin: 14px 0 6px; color: #fff; font-size: 30px; font-weight: 800; }
.spv-rsub { margin: 0 0 6px; color: rgba(255, 255, 255, 0.6); font-size: 15px; line-height: 1.8; }
.spv-rsub b { color: #fff; }
.spv-rcard .spv-olines { margin-block-start: 6px; text-align: start; }
.spv-rtot { display: flex; justify-content: space-between; padding: 18px 0; border-block-start: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.6); }
.spv-rtot b { color: #fff; }
.spv-racts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 12px; }
.spv-racts .spv-btn { min-block-size: 58px; font-size: 17px; }
.spv-rfoot { margin: 18px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.spv-rfoot a { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 860px) {
  .spv-cart { padding-block: 18px 120px; }
  .spv-clayout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .spv-chead h1 { font-size: 24px; }
  .spv-line { padding: 14px; border-radius: 18px; }
  .spv-lrow { flex-wrap: wrap; gap: 12px; }
  .spv-limg img { inline-size: 64px; block-size: 64px; }
  .spv-lend { inline-size: 100%; justify-content: space-between; }
  .spv-qty--s button { inline-size: 44px; block-size: 44px; }
  .spv-fld { flex-direction: column; align-items: stretch; gap: 6px; }
  .spv-flab { inline-size: auto; }
  .spv-sum { position: static; padding: 18px; }
  .spv-go-f { position: fixed; z-index: 40; inset-inline: 0; inset-block-end: 0; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11, 11, 15, 0.94); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
  .spv-toast { inset-block-start: 68px; left: 16px; }
  .spv-olines.is-cards { grid-template-columns: minmax(0, 1fr); }
  .spv-rcard { padding: 16px 18px 24px; border-radius: 20px; }
  .spv-rcard h1 { font-size: 24px; }
  .spv-racts { grid-template-columns: minmax(0, 1fr); }
  .spv-tl li { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .spv-toast { transition: none; }
}

/* notices (cart, product, account) */
ul.spv-notes { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.spv-n { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.spv-n--err { background: rgba(255, 93, 93, 0.1); color: #ffb0b0; }
.spv-n--ok { background: rgba(62, 207, 142, 0.1); color: #8ef0c4; }
.spv-ack { align-items: flex-start; margin-block-end: 12px; color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; line-height: 1.6; }
.spv-ack i { margin-block-start: 2px; }

/* ================================================================== phase 3: sign-in modal (01), avatar menu (04), account (02, 03) */
.spv-linkbtn { padding: 0; border: 0; background: none; color: var(--sph-accent); font: 700 14px var(--sph-font); cursor: pointer; }
.spv-linkbtn:hover { text-decoration: underline; }
.spv-count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 26px; block-size: 20px; margin-inline-start: auto; padding: 0 7px; border-radius: 10px; background: var(--sph-accent); color: #0b0b0f; font-size: 12px; font-style: normal; font-weight: 800; }

/* sign-in modal */
dialog.spv-login { display: none; grid-template-columns: 1fr 260px; inline-size: min(660px, calc(100vw - 32px)); max-block-size: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #121318; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 120px rgba(0, 0, 0, 0.7); color: #fff; font-family: var(--sph-font); }
dialog.spv-login[open] { display: grid; }
dialog.spv-login::backdrop { background: rgba(5, 5, 8, 0.7); }
.spv-lform { padding: 30px 28px 26px; overflow-y: auto; }
.spv-lform h2 { margin: 0; color: #fff; font-size: 26px; font-weight: 800; text-align: start; }
.spv-lsub { margin: 4px 0 18px; color: rgba(255, 255, 255, 0.6); font-size: 15px; }
.spv-lerr { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 93, 93, 0.1); color: #ffb0b0; font-size: 13.5px; }
.spv-lerr[hidden] { display: none; }
.spv-lstep { display: grid; gap: 12px; }
.spv-lstep[hidden] { display: none; }
.spv-lstep label, .spv-otp legend { color: #fff; font-size: 14px; font-weight: 800; }
.spv-lin { display: flex; align-items: center; gap: 10px; block-size: 52px; padding: 0 16px; border-radius: 14px; background: #181a24; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); }
.spv-lin:focus-within { box-shadow: inset 0 0 0 1.5px var(--sph-accent), 0 0 0 4px rgba(169, 184, 255, 0.1); }
.spv-lin input, dialog.spv-login .spv-lin input { flex: 1; min-inline-size: 0; block-size: 100%; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #fff; font: 700 15px var(--sph-font); outline: none; }
.spv-lbtn { block-size: 52px; border: 0; border-radius: 14px; background: #fff; color: #0b0b0f; font: 800 16px var(--sph-font); cursor: pointer; }
.spv-lbtn:hover { background: var(--sph-accent); }
.spv-lbtn:disabled { background: #3a3c46; color: rgba(255, 255, 255, 0.45); cursor: not-allowed; }
.spv-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: rgba(255, 255, 255, 0.45); font-size: 13px; }
.spv-or::before, .spv-or::after { content: ""; flex: 1; block-size: 1px; background: rgba(255, 255, 255, 0.08); }
.spv-ssos { display: grid; gap: 10px; }
.spv-ssos.is-row { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.spv-sso { display: flex; align-items: center; justify-content: center; gap: 10px; block-size: 50px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff !important; font-size: 14.5px; font-weight: 800; text-decoration: none; }
.spv-sso:hover { box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.5); }
.spv-lterms { margin: 4px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 12.5px; text-align: center; }
.spv-lterms a { color: rgba(255, 255, 255, 0.75); }
.spv-lmail { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 16px; block-size: 48px; border-radius: 14px; background: #181a24; color: rgba(255, 255, 255, 0.6); }
.spv-lmail bdi { flex: 1; color: #fff; font-weight: 700; text-align: start; }
.spv-lbot { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 16px; block-size: 56px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.spv-lbot small { margin-inline-start: auto; color: rgba(255, 255, 255, 0.5); }
.spv-otp { margin: 0; padding: 0; border: 0; }
.spv-otp legend { margin: 0 auto 10px; text-align: center; }
.spv-otpb { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.spv-otpb input, dialog.spv-login .spv-otpb input { block-size: 58px; min-inline-size: 0; padding: 0; border: 0 !important; border-radius: 12px; background: #181a24 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font: 800 22px var(--sph-font); text-align: center; caret-color: var(--sph-accent); }
.spv-otpb input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sph-accent), 0 0 0 4px rgba(169, 184, 255, 0.1); }
.spv-lresend { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; text-align: center; }
.spv-lresend[hidden] { display: none; }
.spv-lresend b { color: #fff; }
.spv-lart { position: relative; overflow: hidden; background: radial-gradient(260px 300px at 50% 55%, rgba(169, 184, 255, 0.22), transparent 70%), #0e0f14; }
.spv-llogo { position: absolute; inset-block-start: 26px; right: 22px; z-index: 2; }
.spv-llogo svg { display: block; inline-size: 116px; block-size: 22px; }
.spv-lS { position: absolute; inset-block-start: 24%; left: 10%; inline-size: 80%; block-size: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5)); }
.spv-lsweep { position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%); transform: translateX(-60%); }
dialog.spv-login.is-live .spv-lsweep { animation: spvSweep 7s ease-in-out infinite; }
@keyframes spvSweep { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.spv-lx { position: absolute; inset-block-start: 14px; left: 14px; z-index: 3; margin: 0; }
.spv-lx button { display: flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.spv-lx button:hover { color: #fff; }
.spv-login .cf-turnstile { min-block-size: 65px; }

/* avatar menu */
.spv-me { position: relative; }
.spv-mepill { display: inline-flex; align-items: center; gap: 10px; block-size: 46px; padding: 0 8px 0 18px; padding-inline: 8px 18px; border-radius: 23px; background: rgba(169, 184, 255, 0.14); box-shadow: inset 0 0 0 1.5px var(--sph-accent); color: #fff; font: 700 16px var(--sph-font); list-style: none; white-space: nowrap; cursor: pointer; }
.spv-mepill::-webkit-details-marker { display: none; }
.spv-av { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: linear-gradient(135deg, #cfd7ff, #8f9ce6); color: #0b0b0f; font-size: 15px; font-weight: 800; }
.spv-av--md { inline-size: 44px; block-size: 44px; font-size: 18px; }
.spv-av--lg { inline-size: 64px; block-size: 64px; font-size: 26px; }
.spv-dot { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: #ff5d5d; box-shadow: 0 0 0 2px #15161c; }
.spv-menu { position: absolute; z-index: 60; inset-block-start: calc(100% + 10px); inset-inline-end: 0; display: grid; inline-size: 300px; padding: 10px; border-radius: 18px; background: #16171d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.6); font-family: var(--sph-font); }
.spv-mehead { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; padding: 10px 10px 14px; border-block-end: 1px solid rgba(255, 255, 255, 0.08); }
.spv-mehead span:last-child { display: grid; min-inline-size: 0; }
.spv-mehead b { color: #fff; font-size: 16px; }
.spv-mehead small { overflow: hidden; color: rgba(255, 255, 255, 0.55); font-size: 12.5px; text-overflow: ellipsis; }
.spv-menu a { display: flex; align-items: center; gap: 12px; min-block-size: 46px; padding: 0 12px; border-radius: 12px; color: rgba(255, 255, 255, 0.85) !important; font-size: 15px; font-weight: 700; text-decoration: none; }
.spv-menu a:hover, .spv-menu a:focus-visible { background: rgba(169, 184, 255, 0.1); color: #fff !important; }
.spv-menu .spv-out { margin-block-start: 6px; border-block-start: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 12px 12px; color: #ff8a8a !important; }

/* account shell */
.spv-acc-page { padding-block: 36px 90px; color: #fff; font-family: var(--sph-font); }
.spv-alayout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.spv-aside { position: sticky; inset-block-start: 24px; display: grid; gap: 4px; padding: 26px 14px 14px; border-radius: 22px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-who { display: grid; justify-items: center; gap: 6px; margin-block-end: 18px; text-align: center; }
.spv-who b { margin-block-start: 6px; font-size: 18px; }
.spv-who small { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; overflow-wrap: anywhere; }
.spv-anav { display: grid; gap: 4px; padding-block-end: 12px; border-block-end: 1px solid rgba(255, 255, 255, 0.07); }
.spv-anav a, .spv-aside .spv-out { display: flex; align-items: center; gap: 12px; min-block-size: 48px; padding: 0 14px; border-radius: 14px; color: rgba(255, 255, 255, 0.75) !important; font-size: 15.5px; font-weight: 700; text-decoration: none; }
.spv-anav a:hover { color: #fff !important; }
.spv-anav a.is-on { background: rgba(169, 184, 255, 0.12); box-shadow: inset -3px 0 0 var(--sph-accent); color: #fff !important; }
.spv-anav a.is-on svg { color: var(--sph-accent); }
.spv-aside .spv-out { margin-block-start: 8px; color: #ff8a8a !important; }
.spv-apanel { padding: 24px; border-radius: 22px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.spv-apanel--flush { padding: 0; overflow: hidden; }
.spv-apanel--flush .spv-ahead { padding: 24px 24px 18px; border-block-end: 1px solid rgba(255, 255, 255, 0.07); margin: 0; }
.spv-ahead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.spv-ahead h1, .spv-ahead h2 { margin: 0; color: #fff; font-size: 28px; font-weight: 800; }
.spv-ahead h2 { font-size: 22px; }
.spv-ahead > span { color: rgba(255, 255, 255, 0.55); }
.spv-empty--in { margin: 10px auto; background: none; }
.spv-orders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.spv-olist { display: grid; gap: 10px; }
.spv-ocrd { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: #fff !important; text-decoration: none; }
.spv-ocrd:hover { box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.35); }
.spv-ocrd.is-on { background: rgba(169, 184, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(169, 184, 255, 0.5); }
.spv-ocrd .spv-oimg img { inline-size: 50px; block-size: 50px; }
.spv-otx { display: grid; flex: 1; min-inline-size: 0; }
.spv-otx b { overflow: hidden; font-size: 15.5px; white-space: nowrap; text-overflow: ellipsis; }
.spv-otx small { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.spv-onum { margin: 0 0 4px; color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.spv-odetail .spv-oline:first-child { border-block-start: 0; padding-block-start: 0; }
.spv-oinfo { margin-block-start: 6px; }
.spv-oinfo div { padding: 12px 0; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }
.spv-oacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 16px; }
.spv-oacts .spv-btn { min-block-size: 46px; font-size: 14.5px; }
.spv-btn--wa { background: #25d366; color: #0b0b0f !important; }
.spv-btn--wa:hover { background: #2fe476; }
.spv-btn--wa .spv-wa-s { display: none; } /* «مشكلة؟»: phones under 360 px only (mobile.css). */
.spv-gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spv-aform .sps-form { display: grid; gap: 12px; max-inline-size: 460px; margin-block-end: 22px; }
.spv-aform .sps-field { display: grid; gap: 6px; margin: 0; }
.spv-aform label { color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 700; }
.spv-aform input:not([type="checkbox"]) { block-size: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font: 600 15px var(--sph-font); }
.spv-aform input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sph-accent); }
.spv-aform .sps-btn { justify-self: start; min-block-size: 46px; padding: 0 22px; border: 0; border-radius: 14px; background: #fff; color: #0b0b0f; font: 800 15px var(--sph-font); cursor: pointer; }
.spv-aform .sps-btn.is-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; }
.spv-aform .sps-h3 { margin: 6px 0 4px; color: #fff; font-size: 17px; }
.spv-aform .sps-email { margin: 0 0 10px; color: rgba(255, 255, 255, 0.7); }

/* notifications */
.spv-notes-list { margin: 0; padding: 0; list-style: none; }
.spv-note { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-block-start: 1px solid rgba(255, 255, 255, 0.06); }
.spv-note:first-child { border: 0; }
.spv-note.is-new { background: rgba(169, 184, 255, 0.035); }
.spv-ndot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; }
.spv-note.is-new .spv-ndot { background: var(--sph-accent); }
.spv-nic { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 12px; }
.spv-nic--green { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; }
.spv-nic--amber { background: rgba(255, 190, 90, 0.12); color: #ffbe5a; }
.spv-nic--blue { background: rgba(169, 184, 255, 0.12); color: var(--sph-accent); }
.spv-nic--pink { background: rgba(255, 122, 154, 0.12); color: #ff7a9a; }
.spv-ntx { flex: 1; min-inline-size: 0; }
.spv-ntx b { font-size: 16px; }
.spv-ntx p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.spv-note time { flex: none; color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.spv-nbtn { flex: none; display: inline-flex; align-items: center; block-size: 36px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff !important; font-size: 13.5px; font-weight: 800; text-decoration: none; }
.spv-nbtn:hover { box-shadow: inset 0 0 0 1px var(--sph-accent); }

@media (max-width: 860px) {
  dialog.spv-login { grid-template-columns: minmax(0, 1fr); inline-size: 100vw; max-inline-size: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; padding-block-end: env(safe-area-inset-bottom); }
  .spv-lart { display: none; }
  .spv-lform { padding: 26px 18px 22px; }
  .spv-lform h2 { font-size: 22px; }
  .spv-otpb { gap: 8px; }
  .spv-otpb input { block-size: 52px; }
  .spv-menu { position: fixed; inset-block-start: 64px; inset-inline: 12px; inline-size: auto; }
  .spv-mepill { block-size: 40px; padding-inline: 4px 12px; font-size: 14px; }
  .spv-mepill .spv-av { inline-size: 30px; block-size: 30px; }
  .spv-acc-page { padding-block: 16px 60px; }
  .spv-alayout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spv-aside { position: static; display: block; padding: 16px; }
  .spv-who { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 12px; margin-block-end: 12px; text-align: start; }
  .spv-who .spv-av--lg { grid-row: span 2; inline-size: 52px; block-size: 52px; }
  .spv-who b { margin: 0; }
  .spv-anav { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 0; border: 0; scrollbar-width: none; }
  .spv-anav a { flex: none; min-block-size: 44px; padding: 0 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); font-size: 14.5px; }
  .spv-anav a.is-on { background: #fff; box-shadow: none; color: #0b0b0f !important; }
  .spv-anav a.is-on svg { color: #0b0b0f; }
  .spv-anav a svg { display: none; }
  .spv-aside .spv-out { display: none; }
  .spv-orders { grid-template-columns: minmax(0, 1fr); }
  .spv-apanel { padding: 16px; border-radius: 18px; }
  .spv-ahead h1 { font-size: 22px; }
  .spv-note { flex-wrap: wrap; padding: 16px; }
  .spv-note time { order: 3; }
  .spv-nbtn { order: 4; margin-inline-start: auto; }
  .spv-oacts { grid-template-columns: minmax(0, 1fr); }
  .spv-gal--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.spv-login.is-live .spv-lsweep { animation: none; }
}

/* ------------------------------------------------------------------ «قريباً» (a category marked soon) */
.spv-soonpage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 64px; padding: 64px 24px; border-radius: 24px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); text-align: center; }
.spv-soonpage h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 30px; font-weight: 800; color: #fff; }
.spv-soonpage p { margin: 0; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.spv-soontag { display: inline-flex; align-items: center; block-size: 22px; padding: 0 9px; border-radius: 11px; background: rgba(251, 191, 36, 0.14); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35); color: #fbbf24; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; }
.spv-soonpage .spv-soontag { block-size: 26px; padding: 0 12px; border-radius: 13px; font-size: 14px; }
@media (max-width: 640px) { .spv-soonpage { padding: 44px 18px; } .spv-soonpage h1 { font-size: 24px; } .spv-soonpage p { font-size: 14px; } }

/* ------------------------------------------------------------------ phones (pages/53): product */
.spv-mbar { display: none; }
@media (max-width: 760px) {
  .spv-pic, .spv-pic.is-portrait { inline-size: 100%; block-size: auto; aspect-ratio: 290 / 183; margin: 0; transform: none; }
  .spv-pic.is-portrait img.spv-pimg { border-radius: 16px; }
  .spv-pic img.spv-pimg { border-radius: 16px; filter: none; }
  .spv-head { align-self: stretch; align-items: stretch; inline-size: auto; text-align: start; }
  .spv-meta, .spv-rate, .spv-sold { justify-content: flex-start; }
  .spv-grid--den, .spv-grid--pk { --spv-cols: 3 !important; }
  .spv-grid--den .spv-opt { block-size: 70px; }
  .spv-grid--den b { font-size: 16px; }
  .spv-acts .spv-add, .spv-acts .spv-now { display: none; }
  .spv-acts:not(:has(.spv-qty, .spv-fav)) { display: none; }
  .spv-pr { display: none; }
  .spv-mbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 35; display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-block-start: 1px solid rgba(255, 255, 255, 0.08); background: rgba(11, 11, 15, 0.96); backdrop-filter: blur(10px); }
  .spv-mbar-p { display: flex; flex: none; flex-direction: column; margin: 0; min-inline-size: 84px; }
  .spv-mbar-p small { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
  .spv-mbar-p b { font-size: 20px; font-weight: 800; color: #fff; white-space: nowrap; }
  .spv-mbar-p b small { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
  .spv-mbar-p .spv-na { font-size: 13px; }
  .spv-mbar-now { flex: 1; block-size: 50px; border: 0; border-radius: 25px; background: #fff; color: #0b0b0f; font: 800 16px var(--sph-font); cursor: pointer; }
  .spv-mbar-cart { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 50px; block-size: 50px; border: 0; border-radius: 50%; background: rgba(169, 184, 255, 0.12); color: #fff; cursor: pointer; }
  .spv-mbar button:disabled { opacity: 0.45; cursor: not-allowed; }
  body:has(.spv-mbar) .sph-ftr { padding-block-end: calc(84px + env(safe-area-inset-bottom)); }
}

.spv-oend { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.spv-oamt { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; }
.spv-oamt small { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------------ phones: tap targets ≥ 44px */
.spv-in input { align-self: stretch; block-size: auto; min-block-size: 44px; }
@media (max-width: 760px) {
  .sph-logo, .sph-flogo { display: flex; align-items: center; min-block-size: 44px; }
  .spv-crumbs a, .spv-cat .spv-crumbs a { block-size: 44px; }
  .spv-csearch { block-size: 46px; }
  .spv-where { display: inline-flex; align-items: center; min-block-size: 44px; }
  .spc-add { block-size: 44px; }
  .spc-t { min-block-size: 44px; box-sizing: border-box; }
  .hv-row-tt h2 a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .hv-page .spc-t { min-block-size: 46px; }
  .hv-page .spc-add { min-block-size: 44px; min-inline-size: 44px; box-sizing: border-box; }
  .spv-linkbtn { min-block-size: 44px; }
  .spv-nbtn { block-size: 44px; }
}

/* «غير متوفر حالياً»: one disabled button, no price (round 2). */
.spv-form.is-na .spv-nabtn, .spv-form.is-soon .spv-nabtn { flex: 1; background: rgba(255, 255, 255, 0.08); box-shadow: none; color: rgba(255, 255, 255, 0.7); opacity: 1; }
.spv-tim { display: block; }

/* Round 4: the drawn SPECTER card (shell.css .spg) in the small image frames, sized like their <img>. */
.spv-limg .spg { inline-size: 84px; border-radius: 16px; }
.spv-oimg .spg, .spv-toast-img .spg { inline-size: 56px; border-radius: 12px; }
.spv-ocrd .spv-oimg .spg { inline-size: 50px; }
@media (max-width: 760px) { .spv-limg .spg { inline-size: 64px; } }
/* Round 8a: the offline-game template — badges under the title, the Steam price struck through, requirements. */
.spv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.spv-badge { display: inline-flex; align-items: center; min-block-size: 30px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 700; }
.spv-badge.is-instant { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; box-shadow: none; }
.spv-badge.is-warranty { background: rgba(169, 184, 255, 0.12); color: var(--sph-accent); box-shadow: none; }
.spv-badge.is-denuvo { background: rgba(255, 201, 74, 0.12); color: #ffc94a; box-shadow: none; }
.spv-was { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 13.5px; font-weight: 600; }
.spv-was s { margin-inline-start: 4px; text-decoration-thickness: 1.5px; }
.spv-warranty { margin: 0; }
.spv-req { margin-block-end: 12px; font-size: 13.5px; text-align: start; }
.spv-req b { display: block; margin-block-end: 6px; color: #fff; text-align: start; }
.spv-req ul { margin: 0; padding-inline-start: 20px; }
/* Round 8a: the offline account on «طلباتي» — login rows, «كيف تشتغل؟», «جيب كود Steam Guard». */
.spv-acc-l { flex: none; min-inline-size: 76px; color: rgba(255, 255, 255, 0.6); font-weight: 700; }
.spv-ohow .spv-steps { margin-block-start: 8px; }
.spv-steam { display: grid; gap: 10px; margin-block-start: 12px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.spv-steam-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; }
.spv-steam-h span { color: rgba(255, 255, 255, 0.65); font-size: 13.5px; }
.spv-steam-b { justify-self: start; }
.spv-steam-c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.spv-steam-v { color: #fff; font-size: 32px; font-weight: 800; letter-spacing: 0.18em; }
.spv-steam-help { justify-self: start; }

/* ------------------------------------------------------------------ round 9b: section tabs (one product, its sections) */
.spv-sects { position: relative; margin-block-start: 22px; }
.spv-sects-in { display: flex; gap: 10px; }
.spv-sect { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-inline-size: 0; max-inline-size: 300px; min-block-size: 64px; padding: 8px 18px; border-radius: 18px; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.72); font: 800 16px/1.3 var(--sph-font); text-align: center; text-decoration: none; transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; }
.spv-sect:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.45); }
.spv-sect.is-on { background: rgba(169, 184, 255, 0.1); box-shadow: inset 0 0 0 2px var(--sph-accent); color: #fff; }
.spv-sect:focus-visible { outline: 2px solid var(--sph-accent); outline-offset: 2px; }
.spv-sect-pic { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 52px; block-size: 34px; }
.spv-sect-pic img { display: block; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }
.spv-sect-pic .sp-flag { inline-size: 34px; block-size: auto; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.spv-sect-t { min-inline-size: 0; overflow-wrap: anywhere; text-wrap: balance; }
/* The switch: the page cross-fades (View Transitions where the browser has them, else this fade). */
.spv-root { transition: opacity 0.14s ease; }
.spv-root.is-leaving, .spv-root.is-entering { opacity: 0; }
.spv-root[aria-busy="true"] .spv-sects { cursor: progress; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
@media (max-width: 860px) {
  .spv-sects { margin-block-start: 14px; margin-inline: -16px; }
  .spv-sects-in { overflow-x: auto; padding: 2px 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .spv-sects-in::-webkit-scrollbar { display: none; }
  .spv-sect { flex: 1 0 auto; max-inline-size: none; min-block-size: 56px; padding: 6px 14px; gap: 10px; border-radius: 16px; font-size: 14.5px; scroll-snap-align: start; }
  .spv-sect-pic { inline-size: 40px; block-size: 26px; }
  .spv-sect-pic .sp-flag { inline-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .spv-root, .spv-sect { transition: none; }
}

/* ------------------------------------------------------------------ round 9c: the card template in lists and pages */
.spv-gal.is-hangs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.spv-tile.is-hang .spk { transition: transform 0.2s ease; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); }
.spv-tile.is-hang:hover .spk { transform: translateY(-3px); }
.spv-pic.is-hang { inline-size: 250px; aspect-ratio: auto; margin-block-start: 0; margin-inline-start: 40px; }
.spv-pic.is-hang .spk { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.spv-pic.is-card .spk { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
@media (max-width: 1180px) { .spv-gal.is-hangs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .spv-gal.is-hangs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .spv-pic.is-hang { inline-size: min(220px, 58vw); margin-inline: auto; }
}
/* Round 9c §5: the platform hubs (wide cards) and the games grid of «حسابات أوفلاين». */
.spv-gal.is-wides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.spv-tile.is-wide .spk { transition: transform 0.2s ease; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); }
.spv-tile.is-wide:hover .spk { transform: translateY(-3px); }
.spv-tile.is-wide.is-na { opacity: 0.75; }
.spv-hub-wallet { margin: -6px 0 22px; font-size: 14px; font-weight: 700; }
.spv-hub-wallet a { color: var(--sph-accent); text-decoration: none; }
.spv-hub-wallet a:hover { text-decoration: underline; }
.spv-gcount { margin: 0 0 14px; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.spv-tile.is-game b { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 14px; }
.spv-gprice { display: block; margin-block-start: 4px; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 700; text-align: center; }
.spv-gprice .spc-p { justify-content: center; }
.spv-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 34px; }
.spv-pager a, .spv-pager span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 40px; block-size: 40px; padding: 0 10px; box-sizing: border-box; border-radius: 12px; background: #121318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); color: #fff; font-weight: 700; text-decoration: none; }
.spv-pager span { background: #fff; color: #0b0b0f; }
@media (max-width: 860px) { .spv-gal.is-wides { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* The paused / unavailable badge sits on the card's bottom, clear of the hanging hole. */
/* Final round A1: a badge sits in the picture's top corner (the hanging card's free corner), never over the logo. */
.spv-tile.is-hang .spv-tim .sp-na-badge { inset-block-start: 3.5%; inset-inline-start: 4%; }
/* Final round A2: a short grid uses the full width; every tile's «يبدأ من». */
.spv-gal.is-few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spv-tile .spv-gprice { display: block; margin-block-start: 4px; color: rgba(255, 255, 255, 0.7); font-size: 13.5px; font-weight: 600; text-align: center; }
.spv-tile .spv-gprice i { color: #fff; font-style: normal; font-weight: 800; }
@media (max-width: 760px) { .spv-gal.is-few { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Final round A8.8: the Steam hub's drawn tiles (Storefront\V2\Hubs::art), the same frame as every wide card. */
.spv-hart { position: relative; display: block; inline-size: 100%; aspect-ratio: 290 / 183; overflow: hidden; border-radius: 16px; container-type: inline-size; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); }
.spv-hart.is-collage { background: linear-gradient(150deg, #2a475e, #121a26); }
.spv-hc { position: absolute; inset: 6cqi 5cqi; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2cqi; align-items: center; transform: rotate(-6deg) scale(1.08); }
.spv-hc-c { display: block; }
.spv-hc-c:nth-child(even) { transform: translateY(5cqi); }
.spv-hc-c img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 3; border-radius: 2.4cqi; box-shadow: 0 1.6cqi 3cqi rgba(0, 0, 0, 0.55); object-fit: contain; }
.spv-hart.is-full { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 80% 0%, #3d6d93, #16212f 60%, #0b0f16); }
.spv-hf-card { display: grid; grid-template-columns: auto 1fr; gap: 3cqi 4cqi; inline-size: 70%; padding: 5cqi; border-radius: 4cqi; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; }
.spv-hf-av { display: flex; align-items: center; justify-content: center; inline-size: 16cqi; block-size: 16cqi; border-radius: 50%; background: linear-gradient(140deg, #66c0f4, #2a75bb); font-style: normal; }
.spv-hf-av svg { inline-size: 55%; block-size: 55%; }
.spv-hf-lines { display: flex; flex-direction: column; justify-content: center; gap: 2cqi; }
.spv-hf-lines b { font-size: 6cqi; font-weight: 800; text-align: start; }
.spv-hf-lines em { display: block; block-size: 2.2cqi; border-radius: 2cqi; background: rgba(255, 255, 255, 0.22); }
.spv-hf-lines em + em { inline-size: 60%; }
.spv-hf-tags { display: flex; grid-column: 1 / -1; gap: 2cqi; }
.spv-hf-tags i { padding: 1cqi 3cqi; border-radius: 3cqi; background: rgba(102, 192, 244, 0.22); color: #cfe9ff; font-size: 3.8cqi; font-style: normal; font-weight: 700; }
.spv-hart.is-level { display: flex; align-items: center; justify-content: center; gap: 6cqi; background: radial-gradient(90% 120% at 30% 40%, #5b2bd6, #1d0f45 65%, #0c0820); }
.spv-hl-badge { position: relative; display: flex; align-items: center; justify-content: center; inline-size: 30cqi; aspect-ratio: 1; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(160deg, #ffe08a, #f2a516 55%, #b86b00); }
.spv-hl-badge::after { content: ""; position: absolute; inset: 8%; clip-path: inherit; background: linear-gradient(160deg, #2a1660, #120a2e); }
.spv-hl-badge b { position: relative; z-index: 1; color: #ffd36b; font: 800 11cqi/1 'Changa', sans-serif; }
.spv-hl-word { color: #fff; font: 800 9cqi/1 'Changa', sans-serif; letter-spacing: 0.02em; text-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.5); }
/* Final round A8.12: the sign-in window bigger and clearer (larger text, field and button; a phone's full width). */
dialog.spv-login { grid-template-columns: 1fr 280px; inline-size: min(780px, calc(100vw - 32px)); }
.spv-lform { padding: 40px 38px 32px; }
.spv-lform h2 { font-size: 32px; }
.spv-lsub { margin: 6px 0 24px; font-size: 17px; }
dialog.spv-login .spv-lform label { font-size: 16px; }
.spv-lin { block-size: 60px; padding: 0 18px; border-radius: 16px; }
.spv-lin input, dialog.spv-login .spv-lin input { font-size: 17px; }
.spv-lbtn { block-size: 60px; border-radius: 16px; font-size: 18px; }
.spv-sso { block-size: 58px; border-radius: 16px; font-size: 16.5px; }
.spv-lterms { font-size: 13.5px; }
@media (max-width: 760px) {
  dialog.spv-login { inline-size: 100vw; }
  .spv-lform { padding: 30px 20px 26px; }
  .spv-lform h2 { font-size: 26px; }
  .spv-lsub { font-size: 16px; }
}

/* Mobile v1: the phone-only pieces (Storefront\V2\Mobile) stay hidden from 768 px up; mobile.css shows them on phones. */
.spm-top, .spm-search, .spm-tabbar, .spm-home, .spm-svcs, .spm-trust, .spm-pills, .spv-ocprog { display: none; }