/* /sahi/products/stocks/. Loaded after products-options.css, which holds the
   parts the three product pages share (hero, carousel tray, panels, FAQ,
   price cards). */

/* Hero: the desktop screen centred under the words, its stand on the band's edge. */
@media (min-width: 1024px) { .page-products-stocks .p-hero__media img { width: min(100%, 1180px); } }

/* ---- 20+ real-time scanners: a tab row and the phone rising from a grid floor */
.p-scan__row { margin-inline: auto; }
.p-scan__row .chips { padding: 4px 2px; }
.p-scan__row .arrow { flex: none; }
/* Wide screens: all six scanners in view (sahi.com cut the row at "Golden/Deat"). */
@media (min-width: 860px) {
  .p-scan__row { justify-content: center; }
  .p-scan__row .chips { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.p-scan__stage { position: relative; isolation: isolate; display: grid; justify-items: center; margin-top: clamp(28px, 4vw, 48px); overflow: hidden; }
.p-scan__shot { width: min(74vw, 400px); margin: 0; }
.p-scan__shot:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
/* The phone sinks into the floor rather than being cut off by the band. */
.p-scan__shot img { width: 100%; -webkit-mask-image: linear-gradient(180deg, #0F0F0F 64%, transparent 97%); mask-image: linear-gradient(180deg, #0F0F0F 64%, transparent 97%); }
.p-scan__floor { position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 0; height: 46%; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 64px 44px; background-position: center bottom; transform: perspective(420px) rotateX(52deg); transform-origin: 50% 100%; -webkit-mask-image: radial-gradient(ellipse 55% 95% at 50% 100%, #0F0F0F 25%, transparent 78%); mask-image: radial-gradient(ellipse 55% 95% at 50% 100%, #0F0F0F 25%, transparent 78%); }
:root[data-theme="dark"] .p-scan__floor { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }

/* Steps carousel: the phone crops are square. */
.page-products-stocks .p-steps { --step-ratio-sm: 1; }

/* GTT: the footnote is readable (sahi.com set it at 10px). */
.p-note { margin-top: 20px; max-width: 48ch; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
@media (max-width: 860px) { .p-note { margin-inline: auto; } }

/* ---- More scanners in the SAHI app (owner's screenshots, 27 Oct 2026) --------
   A row of real app screens under the scanner tabs: four whole phones on a wide
   screen, three on a tablet, one and a faded peek of the next on a phone, with
   the page's carousel arrows. When the row arrives the phones rise one after
   another, once; with reduced motion or no script they are simply there. */
.p-lib .head { margin-bottom: clamp(24px, 3vw, 44px); }
.p-lib__carousel .carousel__track { --slide: min(62%, 250px); gap: 16px; padding: 8px 14px 28px; scroll-padding-inline: 14px; outline-offset: 6px; border-radius: var(--radius-sm); -webkit-mask-image: linear-gradient(90deg, #0F0F0F calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #0F0F0F calc(100% - 40px), transparent); }
.p-lib__carousel:has([data-next]:disabled) .carousel__track { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 640px) { .p-lib__carousel .carousel__track { --slide: calc((100% - 2 * 20px) / 3); gap: 20px; -webkit-mask-image: none; mask-image: none; } }
@media (min-width: 1024px) { .p-lib__carousel .carousel__track { --slide: calc((100% - 3 * 24px) / 4); gap: 24px; } }
.p-lib__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-lib__item img { width: min(100%, 236px); }
.p-lib__item h3 { margin-top: 18px; font: 500 clamp(18px, 1.5vw, 20px)/1.25 var(--sans); letter-spacing: -.01em; }
.p-lib__item p { margin-top: 6px; max-width: 26ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.p-lib__carousel .carousel__nav { margin-top: 12px; }
html.js.motion .p-lib__item { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease), transform 1s var(--ease); }
html.js.motion .p-lib__carousel.is-in .p-lib__item { opacity: 1; transform: none; }
html.js.motion .p-lib__item:nth-child(2) { transition-delay: 90ms; }
html.js.motion .p-lib__item:nth-child(3) { transition-delay: 180ms; }
html.js.motion .p-lib__item:nth-child(n+4) { transition-delay: 270ms; }

/* ---- The SAHI app today (owner's screenshots, 27 Oct 2026) ------------------ */
/* Scanner tabs with a current screen: the framed phone, cut and faded like sahi.com's. */
.p-scan__shot--app { display: grid; justify-items: center; height: clamp(420px, 44vw, 560px); overflow: hidden; }
.p-scan__shot--app img { width: min(100%, 300px); -webkit-mask-image: linear-gradient(180deg, #0F0F0F 70%, transparent 98%); mask-image: linear-gradient(180deg, #0F0F0F 70%, transparent 98%); }
/* An order screen: drawn a little larger on phones, so the card shows the order form and stops
   above the test account's "Insufficient funds" bar. */
@media (max-width: 639px) { .p-step__media--order img { width: 60%; } }
/* The GTT screen's point (Validity: Day or GTT) sits two-thirds down: on phones the phone is drawn
   smaller so that row stays inside the panel. */
@media (max-width: 860px) { .p-show__media--tall img { width: min(100%, 220px); } }