/*!
 * Pelagos — store group (store/*, orders/*, payment/*)
 * Reads band tokens only; tone/brand colours come from pelagos.css.
 */

[x-cloak] { display: none !important; }

/* ---- aside: section title, category nav, cart box -------------------------- */
.ss-store-side-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.073rem; line-height: var(--ss-display-lh); letter-spacing: -.02em; margin: 0 0 .85rem; }
.ss-store-catnav .list-group-item { gap: .75rem; padding: .7rem .9rem; font-size: .95rem; }
.ss-store-catnav .list-group-item.active { z-index: 1; }
/* icons sit on a small ink tile so pale pixel art (stars, shields) stays visible on paper; the Tabler icon matches */
.ss-store-catnav-ico { width: 28px; height: 28px; flex: none; object-fit: contain; image-rendering: pixelated; display: grid; place-items: center; font-size: 1rem; padding: 3px; border-radius: var(--ss-r-xs); background: var(--ss-ink); color: #EEE9E0; }
.ss-store-catnav-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-store-catnav-go { flex: none; color: var(--band-muted); font-size: 1rem; transition: transform .2s var(--ss-ease); }
.ss-store-catnav .list-group-item:hover .ss-store-catnav-go { transform: translateX(3px); color: var(--band-fg); }
.ss-store-catnav .list-group-item.active .ss-store-catnav-go { color: var(--ss-accent); }
.ss-store-catnav .is-sub { padding-left: 1.4rem; font-size: .9rem; font-weight: 600; }
.ss-store-catnav .is-sub .ss-store-catnav-ico { width: 24px; height: 24px; }

.ss-store-cartbox { overflow: hidden; box-shadow: var(--ss-shadow-card), inset 0 3px 0 var(--ss-accent); }
.ss-store-cartbox .ss-panel-body { padding: 1.2rem 1.25rem 1.3rem; }
.ss-store-cartbox-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.ss-store-cartbox-head .ss-store-side-title { margin: 0; }
.ss-store-cartbox-empty { color: var(--band-muted); font-size: .92rem; margin: .25rem 0 1rem; }
.ss-store-cartbox-lines { list-style: none; margin: 0 0 .25rem; padding: 0; }
.ss-store-cartbox-line { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--band-card-line); font-size: .88rem; }
.ss-store-cartbox-line img, .ss-store-cartbox-line .ss-store-cartbox-ico { width: 34px; height: 34px; flex: none; object-fit: contain; image-rendering: pixelated; padding: 4px; border-radius: var(--ss-r-xs); background: var(--band-sunk); display: grid; place-items: center; color: var(--ss-accent); font-size: 1.15rem; }
.ss-store-cartbox-line .t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ss-store-cartbox-line .t b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-store-cartbox-line .t span { color: var(--band-muted); font-size: .8rem; }
.ss-store-cartbox-line .p { flex: none; font-weight: 700; white-space: nowrap; }
/* summary rows (subtotal / discount + its reasons / tax), filled by pages/store/_cartbar.php like the cart page summary */
.ss-store-cartbox-sum { display: grid; gap: .45rem; margin: .75rem 0 0; font-size: .88rem; }
.ss-store-cartbox-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ss-store-cartbox-sum-row > span { min-width: 0; color: var(--band-muted); font-weight: 600; }
.ss-store-cartbox-sum-row small { display: block; margin-top: .1rem; font-size: .78rem; font-weight: 500; overflow-wrap: anywhere; }
.ss-store-cartbox-sum-row b { flex: none; font-weight: 700; white-space: nowrap; }
.ss-store-cartbox-sum-row b.is-minus { color: var(--ss-live); }
.ss-store-cartbox-sum + .ss-store-cartbox-total { padding-top: .8rem; border-top: 1px solid var(--band-card-line); }
/* amounts never split from their currency sign: a long total moves under its label as a whole */
.ss-store-cartbox-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; margin: .85rem 0 1rem; font-weight: 600; color: var(--band-muted); }
.ss-store-cartbox-total b { font-family: var(--ss-display); font-weight: 800; font-size: 1.554rem; line-height: 1; color: var(--band-fg); white-space: nowrap; margin-left: auto; }
.ss-store-balance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--band-card-line); }
.ss-store-balance small { display: block; color: var(--band-muted); font-size: .78rem; font-weight: 600; }
.ss-store-balance b { font-family: var(--ss-display); font-weight: 800; font-size: 1.073rem; line-height: 1; white-space: nowrap; }
.ss-store-balance .btn { white-space: nowrap; }
/* narrow aside (lg, 992–1199px): drop line thumbnails, smaller total */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ss-store-cartbox-line img, .ss-store-cartbox-line .ss-store-cartbox-ico { display: none; }
	.ss-store-cartbox-total b { font-size: 1.7rem; }
}
/* aside narrower than balance + button (992–1399px): the balance row stacks with a full-width button */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.ss-store-balance { flex-direction: column; align-items: stretch; }
	.ss-store-balance .btn { width: 100%; }
}

/* lazy images: LeaderOS's generic loader picture never shows — the tone/ink tile stays until the real image arrives
   (icons keep their ink square: only the picture inside is moved out of view) */
.ss-store-promo-art img.lazyload:not(.loaded), .ss-store-tier-media img.lazyload:not(.loaded), .ss-store-pd-media img.lazyload:not(.loaded) { opacity: 0; }
.ss-store-tier-media img.lazyload, .ss-store-pd-media img.lazyload { transition: opacity .3s; }
.ss-store-catnav img.lazyload:not(.loaded), .ss-store-chips img.lazyload:not(.loaded) { object-position: -999px 0; opacity: 1; }

/* ---- category chips (phones, tier page) ------------------------------------ */
.ss-store-chips { margin-bottom: 1.5rem; }
.ss-store-chips a img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; padding: 3px; border-radius: var(--ss-r-xs); background: var(--ss-ink); }

/* ---- section heads inside the store column --------------------------------- */
.ss-store-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ss-store-head .ss-title-sm { font-size: clamp(1.48rem, 1.11rem + 1.036vw, 2.035rem); }
.ss-store-head-meta { color: var(--band-muted); font-weight: 600; font-size: .92rem; }
.ss-store-block + .ss-store-block { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }

/* ---- featured promo (store index) ------------------------------------------ */
.ss-store-promo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--ss-r); background: var(--tone, var(--ss-tone-plum)); color: var(--ss-paper); min-height: 300px; padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; box-shadow: var(--ss-shadow-card); }
.ss-store-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 78% 55%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(115deg, transparent 56%, rgba(255, 255, 255, .04) 56%, rgba(255, 255, 255, .04) 70%, transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 16px); }
.ss-store-promo::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ss-accent); }
.ss-store-promo-body { position: relative; }
.ss-store-promo-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.924rem, 1.184rem + 2.072vw, 3.108rem); line-height: var(--ss-display-lh); margin: .9rem 0 .7rem; overflow-wrap: anywhere; }
.ss-store-promo-text { color: color-mix(in oklab, var(--ss-paper) 82%, transparent); max-width: 30rem; margin: 0 0 1.2rem; font-size: 1rem; }
.ss-store-promo-price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ss-store-promo-price b { font-family: var(--ss-display); font-weight: 800; font-size: 1.924rem; line-height: .9; }
.ss-store-promo-price s { color: color-mix(in oklab, var(--ss-paper) 62%, transparent); font-weight: 600; }
.ss-store-promo-art { position: relative; display: grid; place-items: center; min-height: 220px; }
.ss-store-promo-art::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .28), transparent 68%); transform: translateY(42%) scaleY(.22); }
.ss-store-promo-art img { position: relative; width: min(240px, 80%); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .4)); transform: rotate(-6deg); transition: opacity .3s, transform .4s var(--ss-ease); }
.ss-store-promo:hover .ss-store-promo-art img { transform: rotate(-2deg) translateY(-6px) scale(1.04); }
.ss-store-promo .ss-chip--light { --chip-bg: rgba(0, 0, 0, .28); --chip-fg: var(--ss-paper); }

/* ---- category tiles (store index, subcategories) --------------------------- */
.ss-store-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 1rem; }
.ss-store-cats > .ss-tile { --tile-py: 1.35rem; --tile-px: 1.4rem; grid-column: auto; grid-row: auto; padding: var(--tile-py) var(--tile-px); }
.ss-store-cats > .ss-tile.is-xl { grid-column: span 2; grid-row: span 2; padding: 1.9rem; }
.ss-store-cats > .ss-tile.is-xl .ss-tile-name { font-size: clamp(2.22rem, 1.48rem + 1.48vw, 2.96rem); max-width: 11ch; overflow-wrap: normal; word-break: normal; }
.ss-store-cats > .ss-tile.is-xl .ss-tile-art { width: 210px; height: 210px; right: 1.6rem; bottom: 1.4rem; }
.ss-store-cats > .ss-tile.is-w2 { grid-column: span 2; }
.ss-store-cats > .ss-tile.is-w3 { grid-column: 1 / -1; }
.ss-store-cats--sub { grid-auto-rows: 150px; }
/* small tiles: the art sits in the top-right corner and the name flows around a float of the same size, so a word that
   does not fit beside the art drops below it instead of running underneath. Words never split mid-word. */
.ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 72px; }
.ss-store-cats > .ss-tile:not(.is-xl) .ss-tile-art { top: var(--tile-py); right: var(--tile-px); bottom: auto; width: var(--art); height: var(--art); }
.ss-store-cats > .ss-tile:not(.is-xl) .ss-tile-name { max-width: none; font-size: 1.184rem; overflow-wrap: normal; word-break: normal; }
.ss-store-cats > .ss-tile:not(.is-xl) .ss-tile-name::before { content: ""; float: right; width: calc(var(--art) + .55rem); height: var(--art); }
/* sizes follow the tile's own width (container query), not the viewport: the aside, the column count and the tile span
   all change the width. --ss-word (longest word, set per tile in PHP) sizes the name so that word fits beside the art. */
@supports (container-type: inline-size) {
	.ss-store-cats > .ss-tile:not(.is-xl) { container: ss-cat / inline-size; }
	.ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 52px; }
	@container ss-cat (min-width: 170px) { .ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 64px; } }
	@container ss-cat (min-width: 220px) { .ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 80px; } }
	@container ss-cat (min-width: 260px) { .ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 96px; } }
	@container ss-cat (min-width: 340px) { .ss-store-cats > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 112px; } }
	@container ss-cat (min-width: 220px) { .ss-store-cats--sub > .ss-tile:not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 80px; } }
	.ss-store-cats > .ss-tile:not(.is-xl) .ss-tile-name { --cap: clamp(1.5rem, 14cqi, 2.1rem); font-size: max(1.1rem, min(var(--cap), calc((100cqi - var(--art) - .55rem) / (var(--ss-word, 10) * .64)))); }
	/* shorter subcategory tiles: a lower ceiling keeps two lines clear of the arrow */
	.ss-store-cats--sub > .ss-tile:not(.is-xl) .ss-tile-name { --cap: clamp(1.4rem, 12cqi, 1.85rem); }
	/* narrow tiles (small art): one long word keeps a normal size and takes the full width below the art */
	@container ss-cat (max-width: 259.98px) {
		.ss-store-cats:not(.ss-store-cats--sub) > .ss-tile.is-long:not(.is-xl) .ss-tile-name { font-size: min(var(--cap), 1.75rem, calc(100cqi / (var(--ss-word, 12) * .64))); }
	}
	@container ss-cat (max-width: 169.98px) {
		.ss-store-cats:not(.ss-store-cats--sub) > .ss-tile:not(.is-xl) .ss-tile-name { font-size: min(var(--cap), calc(100cqi / (var(--ss-word, 10) * .64))); }
	}
}

/* ---- community goal -------------------------------------------------------- */
.ss-store-goal { padding: 1.4rem 1.5rem 1.5rem; }
.ss-store-goal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.1rem; }
.ss-store-goal-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.406rem; line-height: var(--ss-display-lh); margin: 0 0 .4rem; }
.ss-store-goal-text { color: var(--band-muted); font-size: .95rem; }
.ss-store-goal-text > :last-child { margin-bottom: 0; }
.ss-store-goal-pct { font-family: var(--ss-display); font-weight: 800; font-size: 2.368rem; line-height: .85; color: var(--ss-accent-ink); flex: none; }
.ss-store-goal .progress { --bs-progress-height: 16px; }

/* ---- cart reassurance: one inline row of icon + label pairs ----------------- */
.ss-store-trust { list-style: none; margin: 1.1rem 0 0; padding: 0 .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.5rem; color: var(--band-muted); font-size: .86rem; font-weight: 600; line-height: 1.35; }
.ss-store-trust li { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.ss-store-trust :is(.ph-bold, .ph-fill) { flex: none; font-size: 1.1rem; color: var(--band-fg); }
.ss-store-trust a { color: var(--band-fg); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* below 1400px the row would wrap 3 + 1 (cart column too narrow for four labels): an even two-column grid instead */
@media (max-width: 1399.98px) { .ss-store-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .6rem 1.25rem; } }

/* ---- mobile cart bar (element also carries .band-ink) ---------------------- */
.ss-store-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem max(1rem, env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom)); background: var(--band-bg); color: var(--band-fg); border-top: 3px solid var(--ss-accent); box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .5); }
.ss-store-cartbar-info { min-width: 0; line-height: 1.15; }
.ss-store-cartbar-info > span { display: block; font-size: .8rem; color: var(--band-muted); font-weight: 600; white-space: nowrap; }
.ss-store-cartbar-info b { font-family: var(--ss-display); font-weight: 800; font-size: 1.184rem; line-height: 1; white-space: nowrap; }
.ss-store-cartbar .btn { --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; flex: none; }
/* product page variant: name over price (+ struck old price) */
.ss-store-pdbar .ss-store-cartbar-info > span { overflow: hidden; text-overflow: ellipsis; }
.ss-store-pdbar-price { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.ss-store-pdbar-price s { color: var(--band-muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 991.98px) { body:has(.ss-store-cartbar:not([style*="none"]):not([hidden])) { padding-bottom: 80px; } }
@media (min-width: 992px) { .ss-store-cartbar { display: none !important; } }

/* ---- dense product grids (4 per row, bestsellers): price over a full-width button */
@media (min-width: 1200px) {
	.ss-store-dense .ss-product-foot { flex-direction: column; align-items: stretch; gap: .7rem; }
	.ss-store-dense .ss-product-name { font-size: 1.147rem; }
}

/* ---- bestseller ranking (category page): compact horizontal cards with a rank chip */
.ss-store-ranking { list-style: none; padding-left: 0; margin-bottom: 0; }
.ss-product--rank { flex-direction: row; min-height: 132px; }
.ss-product--rank .ss-product-media { flex: 0 0 132px; aspect-ratio: auto; }
.ss-product--rank .ss-product-media img { width: 64%; height: auto; max-height: 72%; aspect-ratio: 1; }
.ss-product--rank .ss-product-media img.ss-cover { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.ss-product--rank .ss-product-flags { top: .55rem; }
.ss-product--rank .ss-product-flags .ss-chip { font-size: .72rem; padding: .28rem .5rem .26rem .45rem; }
.ss-product--rank .ss-product-stock { top: auto; bottom: .5rem; right: .5rem; font-size: .72rem; }
.ss-product--rank .ss-product-body { padding: .85rem 1rem .9rem; min-width: 0; }
.ss-product--rank .ss-product-rank { align-self: flex-start; margin-bottom: .35rem; font-size: .86rem; }
.ss-product--rank .ss-product-name { font-size: 1.45rem; margin: .1rem 0 .6rem; }
.ss-product--rank .ss-product-foot { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: .5rem .75rem; }
.ss-product--rank .ss-product-price .ss-price { font-size: 1.184rem; }
.ss-product--rank .ss-product-price .ss-price-old { margin-bottom: .15rem; }
/* tablets and narrow laptops, and the three-up row: one layout for every card — price stacked over the button, both at the
   foot so the buttons of a row line up */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.ss-product--rank .ss-product-foot { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: .6rem; }
}
@media (min-width: 1200px) {
	.ss-store-ranking > .col-xl-4 .ss-product--rank .ss-product-foot { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: .6rem; }
}
@media (max-width: 575.98px) {
	.ss-product--rank .ss-product-media { flex-basis: 108px; }
	.ss-product--rank .ss-product-name { font-size: 1.3rem; }
}

/* ---- product page: media / buy box / details (buy box second on phones) ---- */
.ss-store-pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "a b" "c b"; gap: 1.5rem 2rem; align-items: start; }
.ss-store-pd-a { grid-area: a; min-width: 0; }
.ss-store-pd-b { grid-area: b; align-self: stretch; min-width: 0; }
.ss-store-pd-c { grid-area: c; min-width: 0; }
.ss-store-pd { overflow: hidden; }
.ss-store-pd-media { position: relative; background: var(--tone, var(--ss-tone-navy)); aspect-ratio: 16 / 8; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.ss-store-pd-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 50% 52%, rgba(255, 255, 255, .22), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px); }
.ss-store-pd-media img { width: auto; height: 62%; max-width: 60%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .38)); }
.ss-store-pd-media img.ss-cover { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; image-rendering: auto; }
.ss-store-pd-media .ss-product-flags { top: 1.1rem; }
.ss-store-pd-media.is-out { filter: grayscale(1) brightness(.85); }
.ss-store-pd-body { padding: 1.5rem 1.6rem 1.75rem; }
.ss-store-pd-cat { font-weight: 700; font-size: .85rem; color: var(--band-muted); }
a.ss-store-pd-cat:hover { color: var(--band-fg); text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ss-store-pd .ck-content ul { list-style: none; padding-left: 0; }
.ss-store-pd .ck-content ul li { position: relative; padding-left: 1.7rem; margin: .35rem 0; }
.ss-store-pd .ck-content ul li::before { content: "\e182"; font-family: "Phosphor-Bold"; position: absolute; left: 0; top: .05rem; color: var(--ss-accent-ink); font-size: 1.15rem; line-height: 1.5; }
.ss-store-buy .ss-panel-body { padding: 1.35rem 1.4rem 1.45rem; }
.ss-store-buy-fine { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--band-card-line); display: grid; gap: .45rem; color: var(--band-muted); font-size: .88rem; font-weight: 600; }
.ss-store-buy-fine li { display: flex; align-items: center; gap: .5rem; }
.ss-store-buy-fine :is(.ph-bold, .ph-fill) { color: var(--band-fg); font-size: 1.05rem; }
@media (max-width: 991.98px) {
	.ss-store-pd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; gap: 1.25rem; }
	.ss-store-pd-b .ss-aside { position: static; }
	.ss-store-pd-media { aspect-ratio: 16 / 9; }
}

/* ---- summary rows (product, cart, order) ----------------------------------- */
.ss-store-sum { display: grid; gap: .55rem; }
.ss-store-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.ss-store-sum-row > span:first-child { color: var(--band-muted); font-weight: 600; }
.ss-store-sum-row > span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ss-store-sum-row .is-minus { color: color-mix(in oklab, var(--ss-live) 68%, var(--band-fg)); }
[data-bs-theme="dark"] .ss-store-sum-row .is-minus, .band-ink .ss-store-sum-row .is-minus { color: var(--ss-live); }
.ss-store-sum-row .is-plus { color: var(--ss-danger); }
.ss-store-sum-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: .9rem; margin-top: .35rem; border-top: 1px dashed var(--band-line); }
.ss-store-sum > .ss-store-sum-total:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ss-store-sum-total > span:first-child { font-weight: 700; padding-bottom: .2rem; }
.ss-store-sum-total > span:last-child { font-family: var(--ss-display); font-weight: 800; font-size: 1.776rem; line-height: .9; white-space: nowrap; }

/* ---- tier comparison ------------------------------------------------------- */
.ss-store-tiers { overflow: hidden; }
.ss-store-tiers .table { min-width: 760px; }
/* height: 1px lets every tier head fill the row (height: 100%), so heads of different content heights line up */
.ss-store-tiers .table > thead > tr > th { background: transparent; height: 1px; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--band-fg); padding: 1.25rem .6rem 1rem; vertical-align: bottom; white-space: normal; border-bottom: 1px solid var(--band-card-line); }
.ss-store-tiers .table > thead > tr > th:first-child { padding-left: 1.35rem; width: 26%; }
.ss-store-tiers-intro b { display: block; font-family: var(--ss-display); font-weight: 800; font-size: 1.406rem; line-height: var(--ss-display-lh); }
.ss-store-tiers-intro span { display: block; color: var(--band-muted); font-weight: 500; font-size: .88rem; margin-top: .45rem; max-width: 15rem; }
.ss-store-tier { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center; min-width: 150px; border-radius: var(--ss-r); overflow: hidden; background: var(--band-sunk); border: 1px solid var(--band-card-line); height: 100%; }
.ss-store-tier.is-current { box-shadow: inset 0 0 0 2px var(--ss-accent); }
.ss-store-tier-media { position: relative; background: var(--tone, var(--ss-tone-navy)); padding: 2.3rem .8rem 1rem; display: grid; place-items: center; isolation: isolate; }
.ss-store-tier-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 55%, rgba(255, 255, 255, .2), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px); }
.ss-store-tier-media img { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); }
.ss-store-tier-media img.ss-cover { width: 100%; height: 96px; object-fit: cover; filter: none; image-rendering: auto; }
.ss-store-tier-media .ss-chip { position: absolute; top: .6rem; left: 0; }
.ss-store-tier-body { padding: .9rem .8rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ss-store-tier-name { font-family: var(--ss-display); font-weight: 800; font-size: 1.184rem; line-height: var(--ss-display-lh); overflow-wrap: anywhere; }
.ss-store-tier-price { line-height: 1; min-height: 2.8rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ss-store-tier-price .ss-price { font-size: 1.295rem; }
.ss-store-tier-price .ss-price-old { display: block; margin-bottom: .2rem; font-size: .82rem; }
.ss-store-tier-stock { font-size: .78rem; font-weight: 700; min-height: 1.2em; }
/* upgrade price caption (tier head, product buy box) */
.ss-store-upgrade-note { display: block; margin: 0; color: var(--band-muted); font-size: .78rem; font-weight: 600; line-height: 1.35; }
.ss-store-sum .ss-store-upgrade-note { text-align: right; font-size: .82rem; margin-top: -.15rem; }
/* in the comparison table the caption must not widen its column (auto table layout sizes columns by content) */
.ss-store-tier .ss-store-upgrade-note { max-width: 9.5rem; margin-inline: auto; text-wrap: balance; }
.ss-store-tiercard .ss-store-upgrade-note { text-align: left; max-width: none; margin-inline: 0; }
.ss-store-tier-body .btn { margin-top: auto; width: 100%; }
.ss-store-tiers .table > tbody > tr > td { padding: .8rem .6rem; text-align: center; font-weight: 600; font-size: .92rem; }
.ss-store-tiers .table > tbody > tr > td:first-child { text-align: left; padding-left: 1.35rem; color: var(--band-fg); }
.ss-store-tiers .table > tbody > tr > td:first-child :is(.ph-bold, .ph-fill) { color: var(--band-muted); margin-left: .3rem; cursor: help; vertical-align: -2px; }
.ss-store-tiers tr.sep > td { background: var(--band-sunk) !important; font-weight: 800 !important; font-size: .95rem !important; text-align: left !important; padding-top: .7rem !important; padding-bottom: .7rem !important; box-shadow: inset 4px 0 0 var(--ss-accent); }
.ss-store-yes, .ss-store-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; }
.ss-store-yes { background: color-mix(in oklab, var(--ss-live) 22%, transparent); color: color-mix(in oklab, var(--ss-live) 68%, var(--band-fg)); }
[data-bs-theme="dark"] .ss-store-yes { color: var(--ss-live); }
.ss-store-no { color: var(--band-muted); opacity: .7; }
/* narrow laptops: the perk column stays put while a wide table scrolls under it */
@media (max-width: 1199.98px) {
	.ss-store-tiers .table > thead > tr > th:first-child, .ss-store-tiers .table > tbody > tr:not(.sep) > td:first-child { position: sticky; left: 0; z-index: 2; min-width: 150px; background: var(--band-card); box-shadow: 1px 0 0 var(--band-card-line), inset 0 0 0 9999px var(--bs-table-bg-state, transparent); }
	.ss-store-tiers-intro b { font-size: 1.5rem; }
}
/* phones and tablets (< 992px): one card per tier — the same head as the table, then its own perk list; two per row on tablets */
.ss-store-tiercards { display: grid; gap: 1.25rem; }
.ss-store-tiercards > .ss-panel + .ss-panel { margin-top: 0; }
@media (min-width: 768px) and (max-width: 991.98px) { .ss-store-tiercards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ss-store-tiercard { overflow: hidden; }
.ss-store-tiercard:has(.ss-store-tier.is-current) { box-shadow: var(--ss-shadow-card), inset 0 0 0 2px var(--ss-accent); }
.ss-store-tiercard .ss-store-tier { flex-direction: row; text-align: left; min-width: 0; height: auto; border: 0; border-radius: 0; background: transparent; }
.ss-store-tiercard .ss-store-tier.is-current { box-shadow: none; }
.ss-store-tiercard .ss-store-tier-media { flex: 0 0 40%; padding: 2.4rem .8rem 1.1rem; }
.ss-store-tiercard .ss-store-tier-media img { width: 76px; height: 76px; }
.ss-store-tiercard .ss-store-tier-media img.ss-cover { height: 100%; position: absolute; inset: 0; z-index: -1; }
.ss-store-tiercard .ss-store-tier-body { padding: 1rem 1.1rem 1.1rem; align-items: flex-start; min-width: 0; }
.ss-store-tiercard .ss-store-tier-price { align-items: flex-start; min-height: 0; }
.ss-store-tiercard .ss-store-tier-stock:not([style*="initial"]) { display: none; }
.ss-store-tiercard-perks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--band-card-line); }
.ss-store-tiercard-perks li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .62rem 1.1rem; font-size: .92rem; border-bottom: 1px solid var(--band-card-line); }
.ss-store-tiercard-perks li:last-child { border-bottom: 0; }
.ss-store-tiercard-perks .k { color: var(--band-muted); font-weight: 600; min-width: 0; }
.ss-store-tiercard-perks .k :is(.ph-bold, .ph-fill) { margin-left: .3rem; cursor: help; vertical-align: -2px; }
.ss-store-tiercard-perks .v { font-weight: 700; text-align: right; overflow-wrap: anywhere; flex: none; max-width: 55%; }
.ss-store-tiercard-perks .ss-store-yes, .ss-store-tiercard-perks .ss-store-no { width: 26px; height: 26px; }
.ss-store-tiercard-perks li.sep { display: block; background: var(--band-sunk); font-weight: 800; font-size: .9rem; padding-top: .55rem; padding-bottom: .55rem; box-shadow: inset 4px 0 0 var(--ss-accent); }

/* ---- cart rows ------------------------------------------------------------- */
.ss-store-rows .ss-list-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; grid-template-areas: "thumb main qty total act"; gap: .9rem 1.1rem; align-items: center; padding: 1rem 1.35rem; }
.ss-store-row-thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: var(--ss-r-sm); background: var(--tone, var(--ss-tone-navy)); display: grid; place-items: center; overflow: hidden; position: relative; isolation: isolate; }
.ss-store-row-thumb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, .2), transparent 72%); }
.ss-store-row-thumb img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .35)); }
.ss-store-row-main { grid-area: main; min-width: 0; }
.ss-store-row-name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--band-fg); overflow-wrap: anywhere; }
.ss-store-row-vars { font-size: .84rem; color: var(--band-muted); margin-top: .15rem; }
.ss-store-row-unit { font-size: .86rem; color: var(--band-muted); margin-top: .3rem; display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.ss-store-row-unit .ss-price-old { font-size: .82rem; }
.ss-store-row-unit b { color: var(--band-fg); font-weight: 700; }
.ss-store-row-qty { grid-area: qty; }
.ss-store-row-total { grid-area: total; font-family: var(--ss-display); font-weight: 800; font-size: 1.184rem; line-height: 1; white-space: nowrap; min-width: 6.5rem; text-align: right; }
.ss-store-row-act { grid-area: act; display: flex; gap: .35rem; }
.ss-store-qty { flex-wrap: nowrap; width: auto; }
.ss-store-qty .btn { --bs-btn-padding-x: 0; width: 34px; height: 36px; }
.ss-store-qty .form-control { width: 46px; flex: none; text-align: center; padding-inline: 0; height: 36px; font-weight: 700; }
.ss-store-qty .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ss-store-qty .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.checkoutItemQuantitySpinner { display: flex; justify-content: center; align-items: center; width: 46px; height: 36px; text-align: center; background-color: var(--band-input); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.ss-store-loading { display: grid; place-items: center; padding: 3.5rem 1rem; color: var(--band-muted); }
.ss-store-cartcount { font-size: .85rem; font-weight: 700; color: var(--band-muted); }
@media (max-width: 767.98px) {
	.ss-store-rows .ss-list-item { grid-template-columns: 56px auto minmax(0, 1fr) auto; grid-template-areas: "thumb main main main" "qty qty total act"; padding: 1rem; gap: .8rem; }
	.ss-store-row-thumb { width: 56px; height: 56px; }
	.ss-store-row-total { min-width: 0; font-size: 1.45rem; }
}

/* ---- cart summary ---------------------------------------------------------- */
.ss-store-code .input-group .form-control { font-weight: 700; letter-spacing: .04em; }
.ss-store-code .input-group .btn { border-radius: 0 var(--ss-r-sm) var(--ss-r-sm) 0; clip-path: none; }
.ss-store-code .form-label { margin-bottom: .45rem; }
.ss-store-code small { display: block; margin-top: .35rem; font-weight: 600; }
.ss-store-summary .form-check { margin-bottom: .55rem; }
.ss-store-summary .form-check-label { font-size: .9rem; }
.ss-store-summary .form-check-label a { text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 600; }
.ss-store-summary #checkoutButton { width: 100%; margin-top: .4rem; }
.ss-store-summary.is-empty { opacity: .6; }
.ss-store-divider { border: 0; border-top: 1px solid var(--band-card-line); margin: 1.25rem -1.35rem; opacity: 1; }

/* ---- cart: featured products ----------------------------------------------- */
.ss-store-feat { height: 100%; display: flex; flex-direction: column; gap: .9rem; padding: 1rem; }
.ss-store-feat-top { display: flex; align-items: flex-start; gap: .9rem; }
.ss-store-feat .ss-store-row-thumb { width: 72px; height: 72px; flex: none; }
.ss-store-feat .ss-store-row-thumb img { width: 48px; height: 48px; }
.ss-store-feat-body { min-width: 0; flex: 1; }
.ss-store-feat-flags { margin-bottom: .35rem; }
.ss-store-feat-flags:not(:has(.ss-chip:not([style*="none"]))) { display: none; }
.ss-store-feat-name { font-weight: 700; line-height: 1.25; margin: 0 0 .3rem; font-size: 1rem; overflow-wrap: anywhere; }
.ss-store-feat-price { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.ss-store-feat-price b { font-family: var(--ss-display); font-weight: 800; font-size: 1.073rem; line-height: 1; }
.ss-store-feat-actions { margin-top: auto; display: flex; gap: .5rem; }
.ss-store-feat-actions .btn-primary { flex: 1 1 auto; }
.ss-store-feat-skel { height: 104px; display: grid; place-items: center; color: var(--band-muted); }

/* ---- add-cart -------------------------------------------------------------- */
.ss-store-pick { display: flex; align-items: center; gap: 1rem; }
.ss-store-pick .ss-store-row-thumb { width: 72px; height: 72px; }
.ss-store-pick .ss-store-row-thumb img { width: 48px; height: 48px; }
.ss-store-pick-name { font-family: var(--ss-display); font-weight: 800; font-size: 1.406rem; line-height: var(--ss-display-lh); margin: 0 0 .3rem; overflow-wrap: anywhere; }
.ss-store-pick-meta { color: var(--band-muted); font-weight: 600; font-size: .9rem; display: flex; gap: .3rem 1rem; flex-wrap: wrap; }

/* ---- order view ------------------------------------------------------------ */
.ss-store-order .table td:first-child { min-width: 220px; }
.ss-store-order-vars { margin-top: .3rem; display: grid; gap: .1rem; font-size: .84rem; color: var(--band-muted); font-weight: 500; }
.ss-store-order .table td.num, .ss-store-order .table th.num { text-align: right; white-space: nowrap; }
.ss-store-order .table td.num b { font-family: var(--ss-display); font-weight: 800; font-size: .999rem; }
.ss-store-status { font-size: .95rem; padding: .5rem .85rem .48rem .75rem; }
.ss-store-status :is(.ph-bold, .ph-fill) { font-size: 1.15rem; }

/* ---- result pages (payment / order) and step lists ------------------------- */
.ss-store-result { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; }
.ss-store-result:not(:has(.ss-store-result-steps)) { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.ss-store-result-main { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); align-self: center; }
.ss-store-result-mark { width: 76px; height: 76px; display: grid; place-items: center; font-size: 2.4rem; margin-bottom: 1.4rem; border-radius: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .22); background: var(--ss-live); color: var(--ss-ink); }
.ss-store-result--error .ss-store-result-mark { background: var(--ss-danger); color: var(--ss-paper); }
.ss-store-result-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.628rem, 1.184rem + 1.332vw, 2.368rem); line-height: var(--ss-display-lh); margin: 0 0 .8rem; }
.ss-store-result-text { color: var(--band-muted); font-size: 1.04rem; max-width: 30rem; margin-bottom: 1.6rem; }
.ss-store-result-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.ss-store-result-steps { background: var(--band-sunk); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); border-left: 1px solid var(--band-card-line); }
.ss-store-result-steps h2 { font-family: var(--ss-display); font-weight: 800; font-size: 1.184rem; line-height: var(--ss-display-lh); margin: 0 0 1rem; }
.ss-store-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ss-store-steps li { display: flex; gap: .85rem; align-items: flex-start; padding: .95rem 1rem; background: var(--band-card); border: 1px solid var(--band-card-line); border-radius: var(--ss-r); }
.ss-store-steps li > :is(.ph-bold, .ph-fill) { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 1.25rem; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); color: var(--ss-accent-ink); }
.ss-store-steps b { display: block; font-weight: 700; line-height: 1.3; }
.ss-store-steps span { display: block; color: var(--band-muted); font-size: .88rem; line-height: 1.45; margin-top: .15rem; }
.ss-store-steps a.ss-link { font-size: .88rem; display: inline-block; margin-top: .35rem; }
.ss-store-steps--plain { gap: 1.1rem; }
.ss-store-steps--plain li { padding: 0; background: none; border: 0; border-radius: 0; }
.ss-store-manual .ck-content { font-size: 1rem; }
@media (max-width: 767.98px) {
	.ss-store-result { grid-template-columns: 1fr; }
	.ss-store-result-steps { border-left: 0; border-top: 1px solid var(--band-card-line); }
}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
	.ss-store-cats > .ss-tile.is-xl .ss-tile-art { width: 170px; height: 170px; }
}
@media (max-width: 767.98px) {
	.ss-store-promo { grid-template-columns: 1fr; min-height: 0; padding-right: 1.5rem; }
	.ss-store-promo-art { position: absolute; right: -.5rem; top: 1rem; min-height: 0; width: 38%; opacity: .95; }
	.ss-store-promo-art img { width: 100%; }
	.ss-store-promo-art::before { display: none; }
	.ss-store-promo-title { max-width: 62%; }
	.ss-store-promo-text { max-width: 60%; }
	.ss-store-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: .75rem; }
	.ss-store-cats > .ss-tile, .ss-store-cats > .ss-tile.is-w2 { --tile-py: 1.1rem; --tile-px: 1.1rem; grid-column: auto; }
	.ss-store-cats > .ss-tile.is-xl, .ss-store-cats > .ss-tile.is-w3, .ss-store-cats > .ss-tile.is-odd-last { grid-column: 1 / -1; }
	.ss-store-cats > .ss-tile.is-xl { grid-row: span 2; padding: 1.4rem; }
	.ss-store-cats > .ss-tile.is-xl .ss-tile-name { font-size: 2.072rem; }
	.ss-store-cats > .ss-tile.is-xl .ss-tile-art { width: 120px; height: 120px; }
	.ss-store-goal-top { flex-direction: column-reverse; gap: .5rem; }
	.ss-store-goal-pct { font-size: 2.6rem; }
	.ss-store-pd-body { padding: 1.2rem; }
	.ss-store-sum-total > span:last-child { font-size: 2.1rem; }
}
@media (max-width: 575.98px) {
	.ss-store-promo-title { font-size: 1.702rem; }
	.ss-store-promo-price b { font-size: 1.628rem; }
	.ss-store-promo .btn-arena { width: 100%; }
	.ss-store-pick-name { font-size: 1.184rem; }
	.ss-store-cats { grid-auto-rows: 150px; }
	.ss-store-cats > .ss-tile { min-height: 0; }
	.ss-store-cats > .ss-tile:is(.is-w3, .is-odd-last):not(.is-xl) :is(.ss-tile-name, .ss-tile-art) { --art: 60px; }
	.ss-store-cats > .ss-tile.is-xl { grid-row: span 1; padding: var(--tile-py) var(--tile-px); }
	.ss-store-cats > .ss-tile.is-xl .ss-tile-name { font-size: 1.85rem; }
	.ss-store-cats > .ss-tile.is-xl .ss-tile-art { right: calc(var(--tile-px) + 48px); bottom: .7rem; width: 88px; height: 88px; }
	.ss-store-result-cta .btn { flex: 1 1 auto; }
}