/*
 * Homepage v1 (design/homepage-v1, owner-approved 2026-10-30). Each section is scoped under its own id (#hv-…);
 * banner art classes are prefixed hb-, section classes hv-, the card spc- (shell.css). Desktop = the 1440 reference
 * (full width: content keeps the reference's 56px side insets); phones get a stacked fallback at the end.
 *
 * Motion: transform / opacity only, moving layers on their own layer; marquee viewports use contain:paint and gradient
 * overlay divs (never mask-image). home.js pauses everything offscreen and while the tab is hidden (.is-paused);
 * prefers-reduced-motion shows the first banner and still rows.
 */

.hv-page { overflow: hidden; overflow: clip; background: #0b0b0f; color: #fff; font-family: var(--sph-font); }
.hv-page h2 { color: #fff; }
.hv-sec { position: relative; overflow: hidden; inline-size: var(--sph-wrap); margin-inline: auto; background: #0b0b0f; }
.hv-h { position: absolute; inset-block-start: 30px; inset-inline-start: 0; margin: 0; font-size: 34px; font-weight: 800; line-height: 1.3; }
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ hero */
/* 48 s loop, 8 s per banner: fade in 0.5 s, hold, fade out 0.5 s; the next starts only after it (never two headlines). */
@keyframes hvSlide { 0% { opacity: 0; visibility: visible; } 1.04%, 15.62% { opacity: 1; } 16.66% { opacity: 0; visibility: visible; } 16.67%, 100% { opacity: 0; visibility: hidden; } }
@keyframes hvDot { 0% { inline-size: 0; } 16.6% { inline-size: 100%; } 16.7%, 100% { inline-size: 0; } }
.hv-hero { --hv-k: 0.8889; position: relative; inline-size: var(--sph-wrap); aspect-ratio: 1440 / 520; margin: 24px auto 0; overflow: hidden; border-radius: 20px; background: #0b0b0f; isolation: isolate; }
/* Each banner keeps its 1440×520 layout and is scaled as a whole to the container (home.js sets --hv-k = width / 1440). */
.hv-sl > .hvb { position: absolute; inset-block-start: 0; right: 0; inline-size: 1440px; transform: scale(var(--hv-k)); transform-origin: 100% 0; }
.hv-slides { position: absolute; inset: 0; }
.hv-cats { display: none; }
.hv-sl { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; animation: hvSlide 48s linear infinite; }
.hv-dots { position: absolute; inset-inline-end: calc(56px * var(--hv-k)); inset-block-end: calc(26px * var(--hv-k)); z-index: 9; display: flex; gap: 8px; }
.hv-dots i { position: relative; overflow: hidden; inline-size: 34px; block-size: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.hv-dots b { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: #fff; animation: hvDot 48s linear infinite; }

.hvb { position: relative; block-size: 520px; overflow: hidden; color: #fff; font-family: var(--sph-font); }
.hvb-in { position: relative; block-size: 520px; overflow: hidden; }
.hvb-art { position: absolute; inset: 0; }
.hvb-txt { position: absolute; inset-inline-start: 120px; inset-block: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.hvb-h { margin: 0; font-size: 72px; font-weight: 800; line-height: 1.3; }
.hvb-p { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.hvb-cta { display: flex; gap: 12px; margin-block-start: 8px; }
.hvb-btn { display: inline-flex; align-items: center; block-size: 54px; padding: 0 30px; border-radius: 27px; background: #fff; color: #0a0a0d !important; font-size: 19px; font-weight: 800; text-decoration: none; }
.hvb-btn:hover { background: var(--sph-accent); }
#hv-b1 .hvb-p, #hv-b3 .hvb-p, #hv-b7 .hvb-p { font-size: 22px; line-height: normal; color: rgba(255, 255, 255, 0.75); }
#hv-b1 .hvb-cta, #hv-b3 .hvb-cta, #hv-b7 .hvb-cta { margin-block-start: 10px; }

/* ------------------------------------------------------------------ «الأكثر مبيعاً» */
@keyframes hvRun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
@keyframes hvRunBack { from { transform: translate3d(50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
#hv-best { block-size: 470px; }
#hv-best .hv-h { inset-block-start: 34px; }
#hv-best .hv-vp { position: absolute; inset-block-start: 124px; block-size: 290px; inset-inline-start: 244px; inset-inline-end: 0; overflow: hidden; contain: paint; }
#hv-best .hv-track { display: flex; inline-size: max-content; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; animation: hvRun 50s linear infinite; }
#hv-best .hv-track:hover { animation-play-state: paused; }
/* Round 5: no more tiles than fit stand still beside the #1 card, each once (no marquee copies). */
#hv-best .hv-vp.is-still { overflow-x: auto; scrollbar-width: none; }
#hv-best .hv-track.is-still { padding-inline-start: 156px; animation: none; will-change: auto; }
#hv-best .hv-fade { position: absolute; inset-inline-end: 0; inset-block-start: 110px; z-index: 2; inline-size: 90px; block-size: 320px; pointer-events: none; background: linear-gradient(90deg, #0b0b0f, rgba(11, 11, 15, 0)); }
#hv-best .hv-one { position: absolute; z-index: 3; inset-inline-start: 0; inset-block-start: 104px; inline-size: 400px; block-size: 330px; overflow: hidden; border-radius: 22px; background: radial-gradient(400px 300px at 70% 0%, rgba(169, 184, 255, 0.22), rgba(169, 184, 255, 0) 70%), #15161c; box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.25); }
#hv-best .hv-one-im { position: absolute; inset-inline-end: 18px; inset-block-start: 30px; inline-size: 206px; block-size: 206px; overflow: hidden; border-radius: 16px; background: #0b0b0f; }
#hv-best .hv-one-im img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
#hv-best .hv-one-r { position: absolute; inset-inline-start: 26px; inset-block-start: 22px; font-size: 120px; font-weight: 800; line-height: 1; color: var(--sph-accent); }
#hv-best .hv-one-tag { position: absolute; inset-inline-start: 26px; inset-block-start: 150px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
/* The #1 name gets a wider column and up to two lines (round 3): a short name is never cut. */
#hv-best .hv-one-x { position: absolute; inset-inline-start: 26px; inset-block-start: 174px; display: flex; flex-direction: column; gap: 6px; inline-size: 150px; }
#hv-best .hv-one-t { display: -webkit-box; inline-size: 100%; overflow: hidden; font-size: 20px; font-weight: 800; line-height: 1.3; color: #fff; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
#hv-best .hv-one-o { inline-size: 100%; overflow: hidden; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.6); white-space: nowrap; text-overflow: ellipsis; }
#hv-best .hv-one-o b { color: #fff; font-weight: 800; }
#hv-best .hv-one-p { position: absolute; inset-inline-start: 26px; inset-block-end: 26px; }
#hv-best .hv-one-p .spc-p { font-size: 28px; }
#hv-best .hv-one-p .spc-cur { font-size: 0.8em; }
#hv-best .hv-one .spc-add, #hv-best .hv-one .spc-out { position: absolute; inset-inline-end: 18px; inset-block-end: 22px; }
#hv-best .hv-one .spc-add { gap: 8px; block-size: 44px; padding: 0 20px; border-radius: 22px; font-size: 16px; }
#hv-best .hv-one .spc-add .spc-ic { inline-size: 19px; block-size: 19px; }
#hv-best .hv-one .spc-out { block-size: 40px; padding: 0 16px; border-radius: 20px; }

/* ------------------------------------------------------------------ «مختارات سبيكتر» */
#hv-picks { block-size: 560px; }
#hv-picks .hv-st { position: absolute; inset-block-start: 110px; left: 50%; inline-size: 240px; block-size: 380px; margin-left: -120px; transform-origin: 50% 60%; transition: transform 1.35s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 1.35s cubic-bezier(0.45, 0.05, 0.25, 1); will-change: transform, opacity; backface-visibility: hidden; }
#hv-picks .hv-st .spc { block-size: 100%; }
#hv-picks .hv-st[data-d='0'] { z-index: 3; opacity: 1; transform: translate3d(0, 0, 0) scale(1.12); }
#hv-picks .hv-st[data-d='-1'] { z-index: 2; opacity: 0.85; transform: translate3d(240px, 0, 0) scale(0.9); }
#hv-picks .hv-st[data-d='1'] { z-index: 2; opacity: 0.85; transform: translate3d(-240px, 0, 0) scale(0.9); }
#hv-picks .hv-st[data-d='-2'] { z-index: 1; opacity: 0.5; transform: translate3d(430px, 0, 0) scale(0.78); }
#hv-picks .hv-st[data-d='2'] { z-index: 1; opacity: 0.5; transform: translate3d(-430px, 0, 0) scale(0.78); }
#hv-picks .hv-st[data-d='3'] { z-index: 0; opacity: 0; pointer-events: none; transform: translate3d(-570px, 0, 0) scale(0.6); }
#hv-picks .hv-st[data-d='-3'] { z-index: 0; opacity: 0; pointer-events: none; transform: translate3d(570px, 0, 0) scale(0.6); }
#hv-picks .hv-arw { position: absolute; inset-block-start: 276px; z-index: 9; display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; }
#hv-picks .hv-arw svg { inline-size: 20px; block-size: 20px; }
#hv-picks .hv-arw:hover, #hv-picks .hv-arw:focus-visible { background: rgba(255, 255, 255, 0.16); }
#hv-picks .hv-arw--l { left: 0; }
#hv-picks .hv-arw--r { right: 0; }
#hv-picks .hv-pfade { position: absolute; inset-block: 90px 40px; z-index: 5; inline-size: 120px; pointer-events: none; }
#hv-picks .hv-pfade--l { left: 0; background: linear-gradient(90deg, #0b0b0f, rgba(11, 11, 15, 0)); }
#hv-picks .hv-pfade--r { right: 0; background: linear-gradient(270deg, #0b0b0f, rgba(11, 11, 15, 0)); }

/* ------------------------------------------------------------------ category rows (storefront v2 pages/40) */
/* ~60px above and below; a soft radial glow in the category colour (~11%) behind the title; one tile per product. */
.hv-row { position: relative; padding-block: 60px; background: #0b0b0f; }
.hv-row-glow { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: min(900px, 100%); block-size: 260px; pointer-events: none; background: radial-gradient(520px 200px at 85% 30%, color-mix(in srgb, var(--hv-c) 11%, transparent), transparent 70%); }
.hv-row-in { position: relative; z-index: 1; inline-size: var(--sph-wrap); margin-inline: auto; }
.hv-row-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hv-row-tt { display: flex; align-items: center; gap: 14px; min-inline-size: 0; }
.hv-row-ic { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: color-mix(in srgb, var(--hv-c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hv-c) 33%, transparent); }
.hv-row-ic svg { inline-size: 26px; block-size: 26px; }
.hv-row-tt h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.25; }
.hv-row-tt h2 a { color: inherit; text-decoration: none; }
.hv-row-tt p { margin: 0; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.hv-rw { position: relative; margin-block-start: 24px; container-type: inline-size; }
.hv-tiles { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.hv-tiles::-webkit-scrollbar { display: none; }
.hv-tile { flex: 0 0 calc((100% - 72px) / 4.5); box-sizing: border-box; min-inline-size: 0; padding: 10px 10px 14px; border-radius: 20px; background: #14151b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; scroll-snap-align: start; }
.hv-tile:hover, .hv-tile:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hv-c) 50%, transparent); }
/* The whole landscape image at its own ratio: never cropped. */
.hv-tile img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 290 / 183; object-fit: contain; border-radius: 13px; }
.hv-tile b { display: block; overflow: hidden; margin-block-start: 12px; padding-inline: 6px; font-size: 16.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hv-tile small { display: block; margin-block-start: 2px; padding-inline: 6px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.hv-tile small i { font-style: normal; font-weight: 700; color: #fff; }
/* Endless loop (home.js, wider than 640px): the track moves one tile per step, like «مختارات سبيكتر»; clones at both
   ends make it wrap. Without JavaScript the row stays a scroll strip. */
.hv-rwv { position: relative; }
.hv-rw.is-loop .hv-rwv { overflow: hidden; }
.hv-rw.is-loop .hv-tiles { overflow: visible; scroll-snap-type: none; transform: translate3d(var(--hv-x, 0px), 0, 0); transition: transform 1.35s cubic-bezier(0.45, 0.05, 0.25, 1); will-change: transform; backface-visibility: hidden; }
.hv-rw.is-loop .hv-tiles.is-jump { transition: none; }
.hv-rw:not(.is-loop) .hv-edge { display: none; }
/* Round arrows on the row edges, centred on the images (shown only with more than four products). */
.hv-edge { position: absolute; inset-block-start: calc(10px + ((100cqi - 72px) / 4.5 - 20px) * 0.3155 - 22px); z-index: 2; display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0b0b0f; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8); cursor: pointer; }
.hv-edge svg { inline-size: 18px; block-size: 18px; }
.hv-edge--prev { inset-inline-start: -22px; }
.hv-edge--next { inset-inline-end: -22px; }
.hv-edge:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.45); box-shadow: none; cursor: default; }

/* ------------------------------------------------------------------ «آراء عملائنا» */
#hv-reviews { block-size: 620px; }
#hv-reviews .hv-sb { position: absolute; inset-inline-start: 0; inset-block-start: 110px; z-index: 2; inline-size: 300px; block-size: 470px; box-sizing: border-box; padding: 34px 30px; border-radius: 24px; background: #15161c; box-shadow: -40px 0 40px 10px #0b0b0f, inset 0 0 0 1px rgba(169, 184, 255, 0.2); }
#hv-reviews .hv-sb-big { font-size: 80px; font-weight: 800; line-height: 1; }
#hv-reviews .hv-sb-cnt { margin: 8px 0 26px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
#hv-reviews .hv-stars { display: inline-flex; gap: 2px; }
#hv-reviews .hv-stars span { display: flex; inline-size: 16px; block-size: 16px; }
#hv-reviews .hv-stars--lg span { inline-size: 22px; block-size: 22px; }
#hv-reviews .hv-stars svg { inline-size: 100%; block-size: 100%; }
#hv-reviews .hv-stars .is-on { color: #fbbf24; }
#hv-reviews .hv-stars .is-off { color: rgba(255, 255, 255, 0.15); }
#hv-reviews .hv-bar { display: flex; align-items: center; gap: 10px; margin-block-end: 11px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
#hv-reviews .hv-bar i { position: relative; flex: 1; overflow: hidden; block-size: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
#hv-reviews .hv-bar b { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: #fbbf24; }
#hv-reviews .hv-bar span:last-child { min-inline-size: 34px; }
#hv-reviews .hv-rvp { position: absolute; inset-inline-start: 144px; inset-inline-end: 0; block-size: 228px; overflow: hidden; contain: paint; }
#hv-reviews .hv-rvp--1 { inset-block-start: 110px; }
#hv-reviews .hv-rvp--2 { inset-block-start: 352px; }
#hv-reviews .hv-rtr { display: flex; gap: 16px; inline-size: max-content; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; animation: hvRun 60s linear infinite; }
#hv-reviews .hv-rtr--r { animation-name: hvRunBack; }
#hv-reviews .hv-rvp:hover .hv-rtr { animation-play-state: paused; }
#hv-reviews .hv-rfade { position: absolute; inset-inline-end: 0; inset-block-start: 100px; z-index: 2; inline-size: 110px; block-size: 500px; pointer-events: none; background: linear-gradient(90deg, #0b0b0f, rgba(11, 11, 15, 0)); }
#hv-reviews .hv-rc { flex: none; inline-size: 360px; box-sizing: border-box; padding: 22px 24px; border-radius: 22px; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); backface-visibility: hidden; }
#hv-reviews .hv-rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hv-reviews .hv-rc-pr { display: flex; align-items: center; overflow: hidden; max-inline-size: 190px; block-size: 24px; padding: 0 10px; border-radius: 12px; background: rgba(169, 184, 255, 0.12); color: var(--sph-accent); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
#hv-reviews .hv-rc p { display: -webkit-box; overflow: hidden; margin: 14px 0 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; font-weight: 600; line-height: 1.65; color: rgba(255, 255, 255, 0.9); }
#hv-reviews .hv-rc-who { display: flex; align-items: center; gap: 12px; }
#hv-reviews .hv-rc-av { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 50%; font-size: 18px; font-weight: 800; }
#hv-reviews .hv-rc-who b { display: block; font-size: 15px; font-weight: 800; }
#hv-reviews .hv-rc-who span { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #4ade80; }
#hv-reviews .hv-rc-who svg { inline-size: 15px; block-size: 15px; }

/* ------------------------------------------------------------------ trust tiles */
#hv-trust { block-size: 330px; }
#hv-trust .hv-tiles { position: absolute; inset-inline: 0; inset-block-start: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#hv-trust .hv-tl { position: relative; overflow: hidden; block-size: 250px; box-sizing: border-box; padding: 32px; border-radius: 26px; background: #15161c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
#hv-trust .hv-tl-ic { display: flex; align-items: center; justify-content: center; inline-size: 78px; block-size: 78px; margin-block-end: 22px; border-radius: 22px; background: rgba(169, 184, 255, 0.12); }
#hv-trust .hv-tl-ic svg { inline-size: 40px; block-size: 40px; }
#hv-trust .hv-tl b { display: block; font-size: 25px; font-weight: 800; line-height: 1.3; }
#hv-trust .hv-tl > span:last-child { display: block; margin-block-start: 6px; font-size: 16px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
#hv-trust .hv-tl::after { content: ''; position: absolute; left: -70px; top: -70px; inline-size: 220px; block-size: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(169, 184, 255, 0.14), rgba(169, 184, 255, 0)); }

/* ------------------------------------------------------------------ the six banners' own art (verbatim, scoped) */
/* ===== banner b1 ===== */
@keyframes up__b1{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes runL__b1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-7653px,0,0)}}
@keyframes runR__b1{from{transform:translate3d(-7398px,0,0)}to{transform:translate3d(0,0,0)}}
#hv-b1 .hb-strip, #hv-b3 .hb-strip, #hv-b7 .hb-strip{will-change:transform;backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){#hv-b1 *, #hv-b3 *, #hv-b7 *{animation:none !important}}

/* ===== banner b2 ===== */
@keyframes slideIn__b2{from{transform:skewX(-30deg) translate3d(0,110%,0)}to{transform:skewX(-30deg) translate3d(0,0,0)}}
@keyframes sweep__b2{0%,44%{transform:skewX(-30deg) translate3d(-400px,0,0)}58%,100%{transform:skewX(-30deg) translate3d(1100px,0,0)}}
@keyframes a1__b2{0%,8%{opacity:1;transform:scale(1)}13%,82%{opacity:0;transform:scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes a2__b2{0%,16%{opacity:1;transform:scale(1)}21%,82%{opacity:0;transform:scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes a3__b2{0%,24%{opacity:1;transform:scale(1)}29%,82%{opacity:0;transform:scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes a4__b2{0%,32%{opacity:1;transform:scale(1)}37%,82%{opacity:0;transform:scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes a5__b2{0%,40%{opacity:1;transform:scale(1)}45%,82%{opacity:0;transform:scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes b1__b2{0%,8%{opacity:0;transform:translate3d(0,46px,0)}13%,82%{opacity:1;transform:translate3d(0,0,0)}88%,100%{opacity:0;transform:translate3d(0,46px,0)}}
@keyframes b2__b2{0%,16%{opacity:0;transform:translate3d(0,46px,0)}21%,82%{opacity:1;transform:translate3d(0,0,0)}88%,100%{opacity:0;transform:translate3d(0,46px,0)}}
@keyframes b3__b2{0%,24%{opacity:0;transform:translate3d(0,46px,0)}29%,82%{opacity:1;transform:translate3d(0,0,0)}88%,100%{opacity:0;transform:translate3d(0,46px,0)}}
@keyframes b4__b2{0%,32%{opacity:0;transform:translate3d(0,46px,0)}37%,82%{opacity:1;transform:translate3d(0,0,0)}88%,100%{opacity:0;transform:translate3d(0,46px,0)}}
@keyframes b5__b2{0%,40%{opacity:0;transform:translate3d(0,46px,0)}45%,82%{opacity:1;transform:translate3d(0,0,0)}88%,100%{opacity:0;transform:translate3d(0,46px,0)}}
#hv-b2 .hb-pan{position:absolute;top:-20px;bottom:-20px;width:140px;border-radius:6px;overflow:hidden;will-change:transform;animation:slideIn__b2 .9s cubic-bezier(.2,.8,.2,1) both}
#hv-b2 .hb-up{position:absolute;inset:0;transform:skewX(30deg)}
#hv-b2 .hb-A,#hv-b2 .hb-B{position:absolute;inset:0;will-change:opacity,transform}
#hv-b2 .hb-B{opacity:0}
#hv-b2 .hb-a1{animation:a1__b2 12s ease-in-out infinite}
#hv-b2 .hb-a2{animation:a2__b2 12s ease-in-out infinite}
#hv-b2 .hb-a3{animation:a3__b2 12s ease-in-out infinite}
#hv-b2 .hb-a4{animation:a4__b2 12s ease-in-out infinite}
#hv-b2 .hb-a5{animation:a5__b2 12s ease-in-out infinite}
#hv-b2 .hb-b1{animation:b1__b2 12s ease-in-out infinite}
#hv-b2 .hb-b2{animation:b2__b2 12s ease-in-out infinite}
#hv-b2 .hb-b3{animation:b3__b2 12s ease-in-out infinite}
#hv-b2 .hb-b4{animation:b4__b2 12s ease-in-out infinite}
#hv-b2 .hb-b5{animation:b5__b2 12s ease-in-out infinite}
#hv-b2 .hb-coin{position:absolute;left:28px;top:200px;width:112px;height:112px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
#hv-b2 .hb-lab{position:absolute;left:-35px;width:140px;top:330px;text-align:center;font-size:18px;font-weight:800;white-space:nowrap}
#hv-b2 .hb-photo{position:absolute;top:0;bottom:0;left:-170px;width:480px;background-size:100% 100%;background-repeat:no-repeat}
#hv-b2 .hb-name{position:absolute;left:-130px;width:140px;bottom:40px;display:flex;justify-content:center;z-index:2}
#hv-b2 .hb-name span{padding:3px 10px;border-radius:12px;background:rgba(8,8,12,.6);color:#fff;font-size:13px;font-weight:800;letter-spacing:.5px;white-space:nowrap}
@media (prefers-reduced-motion: reduce){#hv-b2 *{animation:none !important}
#hv-b2 .hb-pan{transform:skewX(-30deg)}}

/* ===== banner b3 ===== */

/* ===== banner b4 ===== */
@keyframes run__b4{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
#hv-b4 .hb-shelf{position:absolute;left:-60px;top:70px;width:1000px;height:420px;perspective:900px;perspective-origin:20% 50%}
#hv-b4 .hb-rot{position:absolute;inset:0;transform:rotateY(-34deg);transform-origin:0 50%;transform-style:preserve-3d}
#hv-b4 .hb-track{position:absolute;left:0;top:0;display:flex;gap:18px;will-change:transform;animation:run__b4 60s linear infinite}
#hv-b4 .hb-cv{flex:none;position:relative}
#hv-b4 .hb-cv img{box-shadow:0 30px 40px -20px rgba(0,0,0,.9)}
#hv-b4 .hb-rf{position:relative;margin-top:8px;transform:scaleY(-1)}#hv-b4 .hb-rf img{opacity:.22}#hv-b4 .hb-rf::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,15,0),#0b0b0f 45%)}
@media (prefers-reduced-motion: reduce){#hv-b4 *{animation:none !important}}

/* ===== banner b5 ===== */
@keyframes cube6__b5{0%,11%{transform:rotateX(-14deg) rotateY(0deg)}16.6%,27.6%{transform:rotateX(-14deg) rotateY(-90deg)}33.3%,44.3%{transform:rotateX(-14deg) rotateY(-180deg)}50%,61%{transform:rotateX(-14deg) rotateY(-270deg)}66.6%,77.6%{transform:rotateX(-90deg) rotateY(-360deg)}83.3%,94.3%{transform:rotateX(90deg) rotateY(-360deg)}100%{transform:rotateX(-14deg) rotateY(-360deg)}}
@keyframes halo6__b5{0%,100%{opacity:.5}50%{opacity:.85}}
#hv-b5 .hb-scene{position:absolute;left:190px;top:115px;width:270px;height:270px;perspective:1100px}
#hv-b5 .hb-cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;animation:cube6__b5 18s cubic-bezier(.7,0,.2,1) infinite}
#hv-b5 .hb-fc{position:absolute;inset:0;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -40px 60px rgba(0,0,0,.18)}
#hv-b5 .hb-fc b{font-family:Changa,sans-serif;font-weight:800;font-size:24px;color:#fff}
#hv-b5 .hb-halo{position:absolute;left:75px;top:20px;width:500px;height:460px;border-radius:50%;background:radial-gradient(closest-side,rgba(169,184,255,.22),rgba(169,184,255,0));animation:halo6__b5 4s ease-in-out infinite}
#hv-b5 .hb-floor{position:absolute;left:150px;top:425px;width:350px;height:50px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,0))}
@media (prefers-reduced-motion: reduce){#hv-b5 *{animation:none !important}}

/* ===== banner b6 ===== */
@keyframes deal__b6{0%{opacity:0;transform:translate3d(70px,50px,0) rotate(7deg)}2.6%,11.8%{opacity:1;transform:translate3d(0,0,0) rotate(-3deg)}14.3%,100%{opacity:0;transform:translate3d(-90px,-70px,0) rotate(-12deg)}}
@keyframes shine__b6{0%,100%{transform:translate3d(-140%,0,0) skewX(-20deg)}50%{transform:translate3d(260%,0,0) skewX(-20deg)}}
#hv-b6 .hb-deck{position:absolute;left:120px;top:130px;width:420px;height:265px}
#hv-b6 .hb-gh{position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,#1b1c22,#101014);box-shadow:0 30px 50px -20px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.08)}
#hv-b6 .hb-mc{position:absolute;inset:0;border-radius:22px;overflow:hidden;opacity:0;box-shadow:0 30px 50px -20px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.14);will-change:transform,opacity;animation:deal__b6 21s cubic-bezier(.5,0,.2,1) infinite}
#hv-b6 .hb-mc .hb-lg{position:absolute;left:30px;top:30px}
#hv-b6 .hb-mc .hb-pl{position:absolute;right:30px;top:34px;font-family:Changa,sans-serif;font-weight:800;font-size:22px;letter-spacing:2px}
#hv-b6 .hb-mc .hb-nm{position:absolute;left:30px;top:100px;font-family:Changa,sans-serif;font-weight:800;font-size:28px}
#hv-b6 .hb-mc .hb-fx{position:absolute;left:30px;bottom:28px;font-family:Changa,sans-serif;font-weight:700;font-size:19px;opacity:.9}
#hv-b6 .hb-mc .hb-ft{position:absolute;right:26px;top:50%;width:150px;height:150px;margin-top:-75px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#hv-b6 .hb-mc .hb-chip{position:absolute;right:30px;bottom:30px;width:52px;height:38px;border-radius:8px;background:linear-gradient(135deg,#f7e2a6,#c9a24d);opacity:.9}
#hv-b6 .hb-mc .hb-sh{position:absolute;top:-20%;bottom:-20%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));animation:shine__b6 3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){#hv-b6 *{animation:none !important}}

/* ------------------------------------------------------------------ reduced motion: first banner, still rows */
@media (prefers-reduced-motion: reduce) {
  .hv-sl, .hv-dots b, #hv-best .hv-track, #hv-reviews .hv-rtr { animation: none !important; }
  .hv-sl:first-child { opacity: 1; visibility: visible; }
  .hv-sl:not(:first-child), .hv-dots { display: none; }
  #hv-picks .hv-st, .hv-rw.is-loop .hv-tiles { transition: none; }
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  #hv-trust .hv-tl { padding: 24px; }
  #hv-trust .hv-tl b { font-size: 21px; }
}
@media (max-width: 900px) {
  #hv-trust { block-size: auto; padding-block: 24px 40px; }
  #hv-trust .hv-tiles { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hv-trust .hv-tl { block-size: auto; }
}

/* ------------------------------------------------------------------ phones: banners stack text over a shorter art area */
@media (max-width: 760px) {
  .hv-h { position: static; padding-block-start: 24px; font-size: 26px; }
  .hv-hero { aspect-ratio: auto; margin-block-start: 16px; }
  .hv-hero, .hvb, .hvb-in { block-size: 600px; }
  .hv-sl > .hvb { position: relative; right: auto; inline-size: auto; transform: none; }
  .hvb-txt { position: absolute; inset: 0 0 auto 0; inline-size: auto !important; gap: 10px !important; padding: 28px 16px 0; justify-content: flex-start; }
  .hvb-h { font-size: 34px; }
  .hvb-p, #hv-b1 .hvb-p, #hv-b3 .hvb-p, #hv-b7 .hvb-p { font-size: 15px; line-height: 1.6; }
  .hvb-cta { margin-block-start: 4px; }
  .hvb-btn { block-size: 46px; padding: 0 22px; font-size: 16px; }
  .hvb-art { --hv-k: 0.54; inset: auto; left: 50%; bottom: 0; inline-size: 720px; block-size: 520px; margin-left: -360px; transform: scale(var(--hv-k)); transform-origin: 50% 100%; }
  .hv-dots { inset-inline-end: 50%; transform: translateX(-50%); inset-block-end: 12px; }
  #hv-picks .hv-pfade { inline-size: 40px; }

  #hv-best { block-size: auto; padding-block-end: 24px; }
  #hv-best .hv-one { position: relative; inset: auto; inline-size: auto; block-size: 280px; margin-block-start: 16px; }
  #hv-best .hv-one-im { inline-size: 156px; block-size: 156px; inset-block-start: 22px; inset-inline-end: 16px; }
  #hv-best .hv-one-r { inset-inline-start: 18px; inset-block-start: 14px; font-size: 84px; }
  #hv-best .hv-one-tag { inset-inline-start: 18px; inset-block-start: 104px; font-size: 13px; }
  #hv-best .hv-one-x { inset-inline-start: 18px; inset-block-start: 126px; inline-size: calc(100% - 200px); gap: 4px; }
  #hv-best .hv-one-t { font-size: 17px; }
  #hv-best .hv-one-o { font-size: 12.5px; }
  #hv-best .hv-one-p { inset-inline-start: 18px; inset-block-end: 20px; }
  #hv-best .hv-one-p .spc-p { font-size: 22px; }
  #hv-best .hv-one .spc-add, #hv-best .hv-one .spc-out { inset-inline-end: 16px; inset-block-end: 18px; }
  #hv-best .hv-one .spc-add { block-size: 44px; padding: 0 14px; font-size: 14px; }
  #hv-best .hv-vp { position: relative; inset: auto; block-size: 290px; margin-block-start: 16px; }
  #hv-best .hv-fade { display: none; }
  #hv-best .hv-track.is-still { padding-inline-start: 0; }

  #hv-picks { block-size: 500px; }
  #hv-picks .hv-st { inset-block-start: 80px; inline-size: 210px; block-size: 340px; margin-left: -105px; }
  #hv-picks .hv-st[data-d='0'] { transform: translate3d(0, 0, 0) scale(1); }
  #hv-picks .hv-st[data-d='-1'] { transform: translate3d(150px, 0, 0) scale(0.8); }
  #hv-picks .hv-st[data-d='1'] { transform: translate3d(-150px, 0, 0) scale(0.8); }
  #hv-picks .hv-st[data-d='-2'] { opacity: 0; transform: translate3d(260px, 0, 0) scale(0.6); }
  #hv-picks .hv-st[data-d='2'] { opacity: 0; transform: translate3d(-260px, 0, 0) scale(0.6); }
  #hv-picks .hv-st[data-d='3'] { transform: translate3d(-300px, 0, 0) scale(0.6); }
  #hv-picks .hv-st[data-d='-3'] { transform: translate3d(300px, 0, 0) scale(0.6); }
  #hv-picks .hv-arw { inset-block-start: 430px; }
  #hv-picks .hv-arw--l { left: calc(50% - 56px); }
  #hv-picks .hv-arw--r { right: calc(50% - 56px); }


  #hv-reviews { block-size: auto; padding-block-end: 24px; }
  #hv-reviews .hv-sb { position: relative; inset: auto; inline-size: auto; block-size: auto; margin-block-start: 16px; padding: 22px; box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.2); }
  #hv-reviews .hv-sb-big { font-size: 56px; }
  #hv-reviews .hv-rmove { position: relative; block-size: 472px; margin-block-start: 16px; }
  #hv-reviews .hv-rvp { inset-inline: 0; }
  #hv-reviews .hv-rvp--1 { inset-block-start: 0; }
  #hv-reviews .hv-rvp--2 { inset-block-start: 244px; }
  #hv-reviews .hv-rc { inline-size: 290px; padding: 18px; }
  #hv-reviews .hv-rc p { font-size: 15px; }
  #hv-reviews .hv-rfade { display: none; }

  #hv-trust { padding-block: 16px 32px; }
  #hv-trust .hv-tiles { gap: 12px; }
  #hv-trust .hv-tl { padding: 18px; border-radius: 20px; }
  #hv-trust .hv-tl-ic { inline-size: 52px; block-size: 52px; margin-block-end: 14px; border-radius: 16px; }
  #hv-trust .hv-tl-ic svg { inline-size: 28px; block-size: 28px; }
  #hv-trust .hv-tl b { font-size: 18px; }
  #hv-trust .hv-tl > span:last-child { font-size: 13px; }
}
@media (min-width: 480px) and (max-width: 760px) { .hvb-art { --hv-k: 0.66; } }
@media (min-width: 600px) and (max-width: 760px) { .hvb-art { --hv-k: 0.8; } }

/* ------------------------------------------------------------------ category rows on phones: a swipe strip of ~2.2 tiles */
@media (max-width: 640px) {
  .hv-row { padding-block: 30px; }
  .hv-row-ic { inline-size: 40px; block-size: 40px; border-radius: 12px; }
  .hv-row-ic svg { inline-size: 22px; block-size: 22px; }
  .hv-row-tt { gap: 10px; }
  .hv-row-tt h2 { font-size: 20px; }
  .hv-row-tt p { font-size: 12.5px; }
  .hv-rw { margin-block-start: 16px; }
  .hv-tiles { gap: 12px; scroll-behavior: auto; }
  .hv-tile { flex-basis: calc((100% - 24px) / 2.2); padding: 8px 8px 12px; border-radius: 16px; }
  .hv-tile img { border-radius: 10px; }
  .hv-tile b { margin-block-start: 9px; padding-inline: 4px; font-size: 14px; }
  .hv-tile small { padding-inline: 4px; font-size: 12px; }
  .hv-edge { display: none; }
}

/* ------------------------------------------------------------------ phones (pages/50): swipe hero + dots, category icons */
@media (max-width: 760px) {
  .hv-hero { block-size: 440px; border-radius: 18px; }
  .hv-hero .hvb, .hv-hero .hvb-in { block-size: 440px; }
  .hv-slides { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hv-slides::-webkit-scrollbar { display: none; }
  .hv-slides > .hv-sl { position: relative; flex: 0 0 100%; opacity: 1; visibility: visible; animation: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .hv-hero .hvb-art { --hv-k: 0.44; }
  .hv-dots { inset-inline-end: auto; left: 50%; transform: translateX(-50%); inset-block-end: 12px; }
  .hv-dots i { inline-size: 18px; transition: inline-size 0.2s; }
  .hv-dots i.is-on { inline-size: 26px; }
  .hv-dots b { animation: none; }
  .hv-dots i.is-on b { inline-size: 100%; }
  .hv-cats { display: flex; gap: 12px; inline-size: var(--sph-wrap); margin: 18px auto 0; padding-block-end: 4px; overflow-x: auto; scrollbar-width: none; }
  .hv-cats::-webkit-scrollbar { display: none; }
  .hv-cat { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; min-inline-size: 64px; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
  .hv-cat span { display: flex; align-items: center; justify-content: center; inline-size: 58px; block-size: 58px; border-radius: 16px; background: color-mix(in srgb, var(--hv-c) 12%, #111218); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hv-c) 35%, transparent); color: var(--hv-c); }
  .hv-cat b { font-weight: 700; white-space: nowrap; }
  .hv-cat .spv-soontag { position: absolute; inset-block-start: -6px; inset-inline-start: -4px; block-size: 18px; padding: 0 6px; font-size: 10px; font-style: normal; }
}
@media (min-width: 480px) and (max-width: 760px) { .hv-hero .hvb-art { --hv-k: 0.5; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hv-dots i { transition: none; }
  .hv-sl:not(:first-child) { display: block; }
  .hv-dots { display: flex; }
}

/* Round 4: the owner's own hero banner (dashboard «الصفحة الرئيسية»): his image behind the design's text block. */
.hvb--own { background: #0a0a0d; }
.hvb--own .hvb-img { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: contain; }
.hvb--own .hvb-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(270deg, rgba(10, 10, 13, .94) 0%, rgba(10, 10, 13, .7) 38%, rgba(10, 10, 13, .1) 70%, rgba(10, 10, 13, 0) 100%); }
/* Final round A8.13: no dark box behind a card's picture in «الأكثر مبيعاً» and the bands — the card stands on its own. */
#hv-best .hv-one-im, .spc-im { background: transparent; }
.hv-tile { background: transparent; box-shadow: none; }
.hv-tile:hover, .hv-tile:focus-visible { background: rgba(255, 255, 255, 0.03); box-shadow: none; }
.hv-tile img, .hv-tile .spk { filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }