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

/* Hero: words on the left, the monitor on the right standing on the band's
   edge. The empty canvas above the monitor in its file is trimmed. */
@media (min-width: 1024px) {
  .page-products-commodities .p-hero--split .p-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .page-products-commodities .p-hero__media img { aspect-ratio: 2000 / 1800; object-fit: cover; object-position: 50% 100%; }
}

/* ---- What is commodity trading on SAHI? ----------------------------------------
   sahi.com pinned this paragraph for two screen-heights of scrolling with its
   words at 28% opacity until scrolled past. Here it sits in the page at full
   contrast; when it first arrives its four phrases light up in turn, once. */
.p-quote { text-align: center; }
.p-quote__label { font: 500 clamp(16px, 1.3vw, 18px)/1.5 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.p-quote__row { display: grid; justify-items: center; margin-top: clamp(14px, 2vw, 28px); }
.p-quote__mark { width: 48px; height: auto; opacity: .9; }
.p-quote__row .p-quote__mark { display: none; }
.p-quote__mark--solo { margin: 0 auto 14px; }
:root[data-theme="dark"] .p-quote__mark { opacity: .28; }
.p-quote__text { max-width: 31ch; color: var(--ink); font: 400 clamp(24px, 3vw, 40px)/1.42 var(--disp); letter-spacing: -.01em; text-wrap: pretty; }
html.js.motion .p-quote__text > span { opacity: .28; transition: opacity .7s var(--ease); }
html.js.motion .p-quote__text.is-in > span { opacity: 1; }
html.js.motion .p-quote__text > span:nth-child(1) { transition-delay: .3s; }
html.js.motion .p-quote__text > span:nth-child(2) { transition-delay: .85s; }
html.js.motion .p-quote__text > span:nth-child(3) { transition-delay: 1.4s; }
html.js.motion .p-quote__text > span:nth-child(4) { transition-delay: 1.95s; }
@media (min-width: 860px) {
  .p-quote__mark--solo { display: none; }
  .p-quote__row { grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: start; gap: clamp(24px, 4vw, 56px); max-width: 1080px; margin-inline: auto; }
  .p-quote__row .p-quote__mark { display: block; width: 64px; }
}

/* ---- Start at 1 gram: the wide still life stands on the band's edge ------- */
.p-gram { background: linear-gradient(180deg, var(--bg) 20%, var(--bg-soft)); }
.p-gram .head { margin-bottom: clamp(16px, 2.4vw, 32px); max-width: 820px; }
.p-gram__media { display: block; }
.p-gram__media img { width: 100%; margin-inline: auto; }
@media (max-width: 639px) { .p-gram__media img { width: min(100%, 360px); } }
/* The wide still life carries a white spotlight in its own pixels (a third of
   the file is half-transparent white), which shows as a grey dome on the dark
   theme. Dark uses the phone-width still life, which has none. */
.p-gram__dark { display: none; }
:root[data-theme="dark"] .p-gram__media { display: none; }
:root[data-theme="dark"] .p-gram__dark { display: block; width: min(100%, 400px); margin-inline: auto; }

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


/* "Start at 1 gram": the new Commodities tab over the phone in sahi.com's art (desktop, light).
   The phone art sits at 36–64% across; ours is drawn a touch wider so no old edge shows. */
.p-gram__art { position: relative; overflow: hidden; }
.p-gram__phone { position: absolute; left: 50%; top: 0; width: 29%; transform: translateX(-50%); filter: drop-shadow(0 18px 30px color-mix(in srgb, #0A0A0A 22%, transparent)); }
@media (max-width: 639px) { .p-gram__phone { display: none; } }
:root[data-theme="dark"] .p-gram__art { display: none; }