/*
 * Storefront polish, September 2026.
 * Loaded last (after customer-hub.css). Sections:
 *   1. Header: joined currency / cart / account control
 *   2. Chips: one badge style for status, delivery and merchant badges
 *   3. Duration picker: gliding selection bar, radio pop, price roll
 *   4. Collection card art: sharper, unwashed thumbnails
 *   5. Hero Discord button
 */

/* 1. Header ------------------------------------------------------------ */

.sa-nav-cluster {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid #544554;
  border-radius: 9px;
  background: #252027;
}

.sa-nav-cluster-currency {
  position: relative;
  border-right: 1px solid #463a47;
}

.sa-nav-cluster .sa-preference-trigger {
  height: 100%;
  min-width: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 8px 0 0 8px;
  background: transparent;
}

.sa-nav-cluster .sa-preference-trigger:hover,
.sa-nav-cluster .sa-preference-trigger[aria-expanded='true'] {
  background: #312532;
}

.sa-nav-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cfc3d3;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.sa-nav-icon-btn + .sa-nav-icon-btn { border-left: 1px solid #463a47; }
.sa-nav-icon-btn:hover { background: #312532; color: #fff; }
.sa-nav-icon-btn:active svg { transform: scale(.94); }
.sa-nav-icon-btn svg { width: 19px; height: 19px; transition: transform 120ms ease; }
.sa-nav-cluster > :last-child { border-radius: 0 8px 8px 0; }

.sa-nav-cluster :is(.sa-nav-icon-btn, .sa-preference-trigger):focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: -2px;
}

/* 1200-1319px: with Tickets in the menu, tighten link padding so the menu keeps
   clear space before the language and currency controls. */
@media (min-width: 1200px) and (max-width: 1319px) {
  .sa-navbar--floating-pill .sa-desktop-links .sa-navbar-link { padding-inline: 6px; }
}

/* refinement.css gives the cart a 42px minimum size; inside the 38px group its
   hover highlight spilled past the border. Keep every segment the group's height. */
.sa-nav-cluster .sa-nav-icon-btn { min-width: 0; min-height: 0; }

/* Wide screens: links centred on the header, language + group just in from the right edge. */
@media (min-width: 1200px) {
  .sa-navbar--floating-pill > div > div > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .sa-navbar--floating-pill .sa-navbar-logo { justify-self: start; }
  .sa-navbar--floating-pill .sa-desktop-links { justify-self: center; margin-left: 0; margin-right: 0; }
  .sa-navbar--floating-pill .sa-nav-actions { justify-self: end; margin-left: 0; margin-right: 26px; }
}

/* Below 1200px the currency moves into the menu, so the cart becomes the left end. */
@media (max-width: 1199px) {
  .sa-nav-cluster .sa-nav-cluster-currency { display: none; }
  .sa-nav-cluster .sa-navbar-cart { border-radius: 8px 0 0 8px; }
  .sa-nav-cluster > .sa-navbar-cart:last-child { border-radius: 8px; }
}

.sa-nav-cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-on-accent));
  font-size: 9.5px;
  font-weight: 750;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px #252027;
}

/* Signed in: a small green mark on the profile icon. */
.sa-nav-account-dot {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5de49c;
  box-shadow: 0 0 0 2px #252027;
}

.currency-selector .sa-preference-menu { width: 262px; }
.currency-selector .sa-preference-options { max-height: 300px; }
.sa-currency-option-text { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.sa-currency-option-text b { color: #f4eef5; font-size: 12px; font-weight: 750; }
.sa-currency-option-text em {
  overflow: hidden;
  color: #a99bad;
  font-size: 10.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .sa-nav-cluster { height: 36px; }
  .sa-nav-icon-btn { width: 38px; }
}

/* 2. Chips ------------------------------------------------------------- */
/* Neutral dark body, muted label; colour only in the dot or icon. One light
   sweep when the page settles and again on hover, never looping. */

.sa-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sa-chip.sa-chip {
  --chip: rgb(var(--cl-accent));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 25px;
  max-width: 100%;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background-color: rgba(34, 28, 36, .85);
  background-image: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .085) 50%, transparent 60%);
  background-position: 130% 0;
  background-repeat: no-repeat;
  background-size: 220% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-chip > i,
.sa-chip > svg {
  flex: none;
  color: color-mix(in srgb, var(--chip) 62%, #fff);
  font-size: 11px;
}
.sa-chip > svg { width: 12px; height: 12px; }

.sa-chip-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 20%, transparent);
}

.sa-chip--link.sa-chip { transition: color 200ms ease, border-color 200ms ease; }
.sa-chip--link.sa-chip > svg { color: rgb(var(--cl-t-muted)); }
.sa-chip--link.sa-chip:hover { border-color: rgba(255, 255, 255, .22); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .sa-chip.sa-chip { animation: sa-chip-shine 1.6s cubic-bezier(.22, 1, .36, 1) .6s 1 both; }
  .sa-chip.sa-chip:hover { animation: sa-chip-shine-again 1.1s cubic-bezier(.22, 1, .36, 1) 1 both; }
}
@keyframes sa-chip-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes sa-chip-shine-again { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* Product page placement */
.sa-buybox-badges .sa-chip-row { margin-top: -2px; }
.sa-mobile-product-badges .sa-chip-row { gap: 5px; }

/* On small phones the category chip is the least useful, so it steps aside. */
@media (max-width: 420px) {
  .sa-mobile-product-badges .sa-chip--link { display: none; }
}

/* Cards use a slightly smaller chip */
.sa-product-card-chips .sa-chip.sa-chip,
.sa-group-card-heading .sa-chip.sa-chip,
.sa-product-card .sa-chip.sa-chip {
  height: 22px;
  padding: 0 8px;
  gap: 5px;
  font-size: 10.5px;
}
.sa-product-card .sa-chip-dot { width: 6px; height: 6px; }
.sa-product-card-chips { gap: 5px; }

/* 3. Duration picker ----------------------------------------------------- */
/* Joined list at every width. The accent bar glides between rows, the radio
   fills with a small overshoot and the check draws in just after. */

.sa-page-product .sa-variant-options {
  position: relative;
  gap: 0;
  overflow: hidden;
  border: 1px solid #594756;
  border-radius: 12px;
  background: #241d24;
}

.sa-page-product .sa-variant-options .sa-variant-card {
  min-height: 68px;
  padding: .8rem 1rem .8rem 1.2rem;
  border: 0;
  border-bottom: 1px solid #493c48;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 280ms ease;
}
.sa-page-product .sa-variant-options .sa-variant-card:last-child { border-bottom: 0; }
.sa-page-product .sa-variant-options .sa-variant-card:hover:not(:disabled) { background: #2c222c; }
.sa-page-product .sa-variant-options .sa-variant-card[aria-pressed='true'],
.sa-page-product--classic-split .sa-variant-options .sa-variant-card[aria-pressed='true'],
.sa-page-product--classic-split .sa-variant-options .sa-variant-card[aria-pressed='true']:hover {
  background: #352439;
  box-shadow: none;
}

.sa-variant-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgb(var(--cl-accent));
  pointer-events: none;
}
.sa-variant-bar.is-ready {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), height 420ms cubic-bezier(.22, 1, .36, 1);
}

.sa-page-product .sa-variant-card p.text-sm { color: #cfc5d1; font-weight: 700; transition: color 250ms ease; }
.sa-page-product .sa-variant-card[aria-pressed='true'] p.text-sm { color: #fff; }
.sa-page-product .sa-variant-price > span.font-medium { font-weight: 800; transition: color 250ms ease; }
.sa-page-product .sa-variant-card[aria-pressed='true'] .sa-variant-price > span.font-medium {
  color: color-mix(in srgb, rgb(var(--cl-accent)) 60%, #fff);
}

.sa-variant-radio.sa-variant-radio {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: border-color 200ms ease;
}
.sa-variant-radio.sa-variant-radio::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: rgb(var(--cl-accent));
  opacity: 0;
  transform: scale(.4);
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), opacity 200ms ease;
}
.sa-variant-radio.sa-variant-radio::after { content: none; }
.sa-variant-radio svg {
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), opacity 150ms ease;
}
.sa-variant-radio.is-selected { border-color: transparent; }
.sa-variant-radio.is-selected::before { opacity: 1; transform: scale(1); }
.sa-variant-radio.is-selected svg {
  opacity: 1;
  transform: scale(1);
  transition-delay: 60ms;
}

/* Option B (value ladder): saving tag beside the name, per-day price under it. */
.sa-variant-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.sa-variant-save {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(var(--cl-accent), .14);
  color: color-mix(in srgb, rgb(var(--cl-accent)) 70%, #fff);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sa-variant-save.is-best { background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); }
.sa-page-product .sa-variant-sub .is-rate { color: rgb(var(--cl-t-muted)); font-weight: 500; font-variant-numeric: tabular-nums; }
.sa-page-product .sa-variant-sub .text-success { font-weight: 600; }

/* Total rolls up softly when the price changes. */
.sa-total-value { display: inline-block; }
.sa-total-value.is-bump { animation: sa-total-roll 420ms cubic-bezier(.22, 1, .36, 1); }
@keyframes sa-total-roll {
  from { opacity: .25; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 480px) {
  .sa-page-product .sa-variant-options .sa-variant-card { min-height: 62px; padding: .7rem .85rem .7rem 1rem; }
}

/* 4. Collection card art ------------------------------------------------- */
/* The 1920x1080 art is shown at roughly 230-290px wide. Three things were
   softening it: a desaturating filter, a dark bottom wash, a light glare wash,
   plus a 1.9 crop of 16:9 art. Show it as uploaded, full frame. */

.sa-product-card img,
.sa-product-card:hover img { filter: none; }

.sa-products .sa-group-card-art::after,
.sa-page-products .sa-group-card-art::after,
.sa-product-card--group .sa-product-card-media::after { content: none; }

html[data-scheme='dark'] .sa-products .sa-product-card--group .sa-product-card-media img,
html[data-scheme='dark'] .sa-page-products .sa-product-card--group .sa-product-card-media img {
  aspect-ratio: 16 / 9;
}

@media (hover: hover) {
  /* Lift without scaling the whole card, which resamples the art and text while hovered. */
  html[data-scheme='dark'] .sa-products .sa-product-card--group:hover { transform: translateY(-5px); }
  .sa-products .sa-product-card--group:hover .sa-group-card-art img { filter: brightness(1.08); }
}

/* 5. Hero Discord button -------------------------------------------------- */
.sa-hero .sa-btn .fa-discord { font-size: 1.12em; }

/* 6. Game popup ----------------------------------------------------------- */
/* The backdrop is a fixed layer earlier in the markup. The panel must be positioned
   too, or once its enter transform ends the backdrop paints over the heading. */
.sa-group-modal .sa-group-modal-panel { position: relative; z-index: 1; }

/* Panel rises and fades in 250ms, then the cards fade up 60ms apart (capped),
   so a full popup is on screen in about half a second. */
.sa-gm-enter { transition: opacity 250ms ease-out, transform 250ms cubic-bezier(.22, 1, .36, 1); }
.sa-gm-leave { transition: opacity 180ms ease-in, transform 180ms ease-in; }
.sa-gm-enter-start { opacity: 0; transform: translateY(14px) scale(.975); }
.sa-gm-enter-end { opacity: 1; transform: none; }
.sa-gm-leave-end { opacity: 0; transform: translateY(10px) scale(.975); }

.sa-gm-fade { transition: opacity 200ms ease-out; }
.sa-gm-fade-out { transition: opacity 180ms ease-in; }
.sa-group-modal-product {
  animation: sa-gm-card-in 350ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 60ms);
}
@keyframes sa-gm-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Phone: the popup is a bottom sheet that is only as tall as its products, so the
   faded page stays visible above it (tap there to close). Big games still scroll
   inside the sheet, which stops a little below the top of the screen. */
@media (max-width: 640px) {
  .sa-group-modal > div { align-items: flex-end; }
  html[data-scheme] .sa-group-modal .sa-group-modal-panel {
    height: auto;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);
  }
  .sa-group-modal .sa-gm-enter { transition: opacity 200ms ease-out, transform 320ms cubic-bezier(.22, 1, .36, 1); }
  .sa-group-modal .sa-gm-leave { transition: opacity 200ms ease-in, transform 220ms ease-in; }
  .sa-group-modal .sa-gm-enter-start { opacity: 0; transform: translateY(48%); }
  .sa-group-modal .sa-gm-leave-end { opacity: 0; transform: translateY(40%); }
}

/* Phone home page: games sit two to a row so the whole catalog fits in about
   two screens. The last game spans the row when the count is odd (not while
   searching, when hidden cards would throw the count off). */
@media (max-width: 639px) {
  .sa-products .sa-products-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-scheme] .sa-products .sa-product-card--group { border-radius: 14px; }
  html[data-scheme] .sa-products .sa-product-card--group .sa-product-card-media img { aspect-ratio: 4 / 3; }
  html[data-scheme] .sa-products .sa-group-card-body { gap: .35rem; padding: .6rem .7rem .7rem; }
  .sa-products .sa-group-card-heading .sa-product-card-title { font-size: .84rem; }
  .sa-products .sa-group-card-details { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .sa-products .sa-product-card--group .sa-group-card-price .sa-product-card-price { font-size: .86rem !important; }
  .sa-products .sa-group-card-count { font-size: .68rem; }
  .sa-products .sa-group-card-count i { font-size: .62rem; }
  .sa-products .sa-group-card-arrow { display: none; }
  .sa-products .sa-products-items:not(.is-filtering) > .sa-products-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-scheme] .sa-products .sa-products-items:not(.is-filtering) > .sa-products-item:last-child:nth-child(odd) .sa-product-card-media img { aspect-ratio: 21 / 9; }
  .sa-products .sa-products-items:not(.is-filtering) > .sa-products-item:last-child:nth-child(odd) .sa-group-card-details { flex-direction: row; align-items: center; }
}

/* Status page: summary chips double as a status filter; game filter row. */
.sa-status-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sa-status-sum {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 11px 0 9px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, .1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  color: #e9e3ea; font-size: 12px; font-weight: 600;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.sa-status-sum strong { color: #fff; font-variant-numeric: tabular-nums; }
.sa-status-sum:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.sa-status-sum.is-active { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.sa-status-sum-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sa-status-overview.is-warn .sa-status-live-mark { border-color: rgba(245, 180, 84, .35); background: rgba(245, 180, 84, .1); }
.sa-status-overview.is-warn .sa-status-live-dot { background: #f5b454; box-shadow: 0 0 0 6px rgba(245, 180, 84, .12); }
.sa-status-overview.is-bad .sa-status-live-mark { border-color: rgba(255, 122, 138, .35); background: rgba(255, 122, 138, .1); }
.sa-status-overview.is-bad .sa-status-live-dot { background: #ff7a8a; box-shadow: 0 0 0 6px rgba(255, 122, 138, .12); }
.sa-status-checked { display: grid; gap: 6px; padding-left: 25px; border-left: 1px solid rgba(255, 255, 255, .13); color: #aaa5b4; font-size: 11px; white-space: nowrap; }
.sa-status-checked i { margin-right: 3px; }
.sa-status-refresh { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #e9e3ea; font-size: 11px; font-weight: 650; transition: border-color 160ms ease, background-color 160ms ease; }
.sa-status-refresh:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); }
.sa-status-filters { display: flex; gap: 8px; margin-bottom: 22px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.sa-status-filters::-webkit-scrollbar { display: none; }
.sa-status-filter {
  display: inline-flex; flex: none; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  background: #16121a; color: #c9c2cc; font-size: 13px; font-weight: 600;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.sa-status-filter span { color: #8d808f; font-size: 11px; font-variant-numeric: tabular-nums; }
.sa-status-filter:hover { border-color: rgba(255, 255, 255, .24); color: #fff; }
.sa-status-filter.is-active { border-color: rgba(var(--cl-accent), .6); background: rgba(var(--cl-accent), .14); color: #fff; }
.sa-status-filter.is-active span { color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, #fff); }
.sa-status-sum:focus-visible, .sa-status-filter:focus-visible, .sa-status-refresh:focus-visible { outline: 2px solid rgb(var(--cl-accent)); outline-offset: 2px; }
.sa-status-none { padding: 28px; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 14px; color: #aaa5b4; font-size: 14px; text-align: center; }
.sa-status-none button { color: #ed8fe7; font-weight: 650; }
.sa-status-app [x-cloak] { display: none !important; }
.sa-page-status-items.is-filtered .sa-status-group-heading { margin-top: 1rem; }
@media (max-width: 767px) {
  .sa-status-overview-meta { flex-wrap: wrap; gap: 14px 20px; }
  .sa-status-checked { padding-left: 20px; }
  .sa-status-updates-link { width: 100%; }
  .sa-status-filters { margin-inline: -16px; padding-inline: 16px; }
}

/* Updates page: load the timeline 12 at a time. */
.hub-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; margin-top: 18px;
  border: 1px solid #3a2f3a; border-radius: 12px;
  background: #1d171d; color: #f4eef5; font-size: 14px; font-weight: 650;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hub-more:hover { border-color: rgba(var(--cl-accent), .55); background: #241d24; }
.hub-more:focus-visible { outline: 2px solid rgb(var(--cl-accent)); outline-offset: 2px; }
.hub-more-count { padding: 2px 8px; border-radius: 999px; background: rgba(var(--cl-accent), .14); color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, #fff); font-size: 12px; }

/* Product page: trust line under the buy buttons. */
.sa-buy-trust {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px;
  margin: 16px 0 0; padding: 14px 2px 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #afa4b0; font-size: 11.5px; font-weight: 550;
}
.sa-buy-trust li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sa-buy-trust i { color: color-mix(in srgb, rgb(var(--cl-accent)) 70%, #fff); font-size: 11px; }
@media (max-width: 480px) {
  .sa-buy-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-inline: 0; font-size: 11px; text-align: center; }
  .sa-buy-trust li { flex-direction: column; gap: 5px; white-space: normal; line-height: 1.25; }
  .sa-buy-trust i { font-size: 13px; }
}

/* Product tabs on phones: all three labels fit on one line. */
@media (max-width: 639px) {
  .sa-product-tabs-nav { gap: 0; padding-inline: .35rem; }
  .sa-product-tabs-nav button { flex: 1 1 auto; padding: .7rem .4rem; font-size: .78rem; line-height: 1.2; white-space: nowrap; }
}
@media (max-width: 374px) {
  .sa-product-tabs-nav button { padding-inline: .3rem; font-size: .72rem; }
}

/* Quick clicks on a duration were selecting the price text. */
.sa-page-product .sa-variant-options { -webkit-user-select: none; user-select: none; }

/* 7. Reduced-motion exceptions --------------------------------------------- */
/* refinement.css switches every transition off when the device asks for reduced
   motion (Windows "Animation effects" off). These few are short, small and
   explain a change the visitor just made, so they keep playing. Chip shine,
   card hover lifts and scroll reveals still switch off. */
@media (prefers-reduced-motion: reduce) {
  .sa-variant-bar.is-ready { transition-duration: 420ms, 420ms !important; }
  .sa-page-product .sa-variant-options .sa-variant-card { transition-duration: 280ms !important; }
  .sa-page-product .sa-variant-card p.text-sm,
  .sa-page-product .sa-variant-price > span.font-medium { transition-duration: 250ms !important; }
  .sa-variant-radio.sa-variant-radio::before { transition-duration: 320ms, 200ms !important; }
  .sa-variant-radio svg { transition-duration: 260ms, 150ms !important; }
  .sa-total-value.is-bump { animation-duration: 420ms !important; }

  .sa-gm-fade { transition-duration: 200ms !important; }
  .sa-gm-fade-out { transition-duration: 180ms !important; }
  .sa-gm-enter { transition-duration: 250ms, 250ms !important; }
  .sa-gm-leave { transition-duration: 180ms, 180ms !important; }
  .sa-group-modal-product { animation-duration: 350ms !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .sa-group-modal .sa-gm-enter { transition-duration: 200ms, 320ms !important; }
  .sa-group-modal .sa-gm-leave { transition-duration: 200ms, 220ms !important; }
}