/*!
 * Pelagos — tebex group (tebex/index, tebex/product, tebex/cart, tebex/login)
 * Tebex pages are rendered in the browser by Alpine + tebex_store.js; these rules style the containers and the
 * Alpine templates. Band tokens only; tone/brand colours come from pelagos.css.
 */

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

/* ---- skeleton loaders (replace skeloading) ---------------------------------- */
.ss-tbx-skel { display: block; height: .85rem; max-width: 100%; border-radius: var(--ss-r-xs); background: linear-gradient(90deg, var(--band-sunk) 0%, color-mix(in oklab, var(--band-sunk), var(--band-card) 65%) 45%, var(--band-sunk) 90%); background-size: 220% 100%; animation: ss-tbx-shimmer 1.3s linear infinite; }
.ss-tbx-skel + .ss-tbx-skel { margin-top: .7rem; }
.ss-tbx-skel--title { height: 2rem; width: 55%; }
.ss-tbx-skel--h1 { display: inline-block; vertical-align: middle; height: .72em; width: min(9ch, 70vw); background-color: rgba(238, 233, 224, .12); background-image: linear-gradient(90deg, rgba(238, 233, 224, .08), rgba(238, 233, 224, .2) 45%, rgba(238, 233, 224, .08) 90%); }
.ss-tbx-skel--block { height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.ss-tbx-skel--btn { height: 2.4rem; margin-top: 1.2rem !important; }
.ss-tbx-skel--avatar { width: 40px; height: 40px; flex: none; }
@keyframes ss-tbx-shimmer { to { background-position: -220% 0; } }
.ss-tbx-skel-card { overflow: hidden; }
.ss-tbx-skel-card .ss-panel-body { padding: 1.1rem 1.2rem 1.25rem; }
.ss-tbx-loading { display: grid; place-items: center; min-height: 10rem; color: var(--band-muted); }

/* ---- aside: auth card, section title, category nav ------------------------- */
.ss-tbx-auth .ss-tebex-auth { margin: 0 !important; box-shadow: var(--ss-shadow-card), inset 3px 0 0 var(--ss-accent); }
.ss-tbx-auth .ss-tebex-auth .ss-panel-title { font-size: 1.45rem; margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tbx-auth .ss-tebex-auth a.small, .ss-tbx-auth .ss-tebex-auth .btn-link { font-weight: 700; font-size: .86rem; color: var(--band-fg); text-decoration: underline; text-decoration-color: var(--ss-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ss-tbx-auth .ss-tebex-auth .btn-link { --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; }
.ss-tbx-auth .ss-count { background: var(--ss-ink); border: 2px solid var(--band-card); }
[data-bs-theme="dark"] .ss-tbx-auth .ss-count { background: var(--ss-bone); color: var(--ss-ink); }
.ss-tbx-auth-skel { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; }
.ss-tbx-auth-skel > div { flex: 1; }

.ss-tbx-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.ss-tbx-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-tbx-nav { background: var(--band-card); border: 1px solid var(--band-card-line); border-radius: var(--ss-r); box-shadow: var(--ss-shadow-card); overflow: hidden; }
.ss-tbx-nav-skel { padding: 1rem 1.1rem; }
.ss-tbx-nav-skel .ss-tbx-skel { height: 1.6rem; }
.ss-tbx-nav-group + .ss-tbx-nav-group { border-top: 1px solid var(--band-card-line); }
.ss-tbx-nav-item { display: flex; align-items: stretch; }
.ss-tbx-nav-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .72rem .95rem; font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--band-fg); cursor: pointer; transition: background-color .15s var(--ss-ease); }
.ss-tbx-nav-link:hover { background: var(--band-sunk); color: var(--band-fg); }
.ss-tbx-nav-link > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tbx-dot { width: 12px; height: 12px; flex: none; background: var(--tone, var(--ss-tone-navy)); border-radius: 50%; }
.ss-tbx-nav-toggle { flex: none; width: 44px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--band-card-line); background: transparent; color: var(--band-muted); font-size: 1rem; }
.ss-tbx-nav-toggle:hover { background: var(--band-sunk); color: var(--band-fg); }
.ss-tbx-nav-toggle :is(.ph-bold, .ph-fill) { transition: transform .2s var(--ss-ease); }
.ss-tbx-nav-toggle[aria-expanded="true"] :is(.ph-bold, .ph-fill) { transform: rotate(180deg); }
.ss-tbx-nav-item.active .ss-tbx-nav-link { background: var(--ss-ink); color: var(--ss-paper); }
.ss-tbx-nav-item.active .ss-tbx-nav-toggle { background: var(--ss-ink); color: color-mix(in oklab, var(--ss-paper) 62%, transparent); border-left-color: rgba(238, 233, 224, .12); }
[data-bs-theme="dark"] .ss-tbx-nav-item.active .ss-tbx-nav-link, [data-bs-theme="dark"] .ss-tbx-nav-item.active .ss-tbx-nav-toggle { background: var(--ss-bone); color: var(--ss-ink); }
[data-bs-theme="dark"] .ss-tbx-nav-item.active .ss-tbx-nav-toggle { border-left-color: rgba(14, 26, 36, .12); }
.ss-tbx-nav-sub { display: none; padding: .3rem 0 .45rem; background: color-mix(in oklab, var(--band-sunk) 45%, transparent); border-top: 1px solid var(--band-card-line); }
.ss-tbx-nav-sub.active { display: block; }
.ss-tbx-nav-sub:not(:has(a)) { display: none !important; }
.ss-tbx-nav-subitem { position: relative; display: block; padding: .48rem .95rem .48rem 2.35rem; font-size: .9rem; font-weight: 600; color: var(--band-muted); cursor: pointer; }
.ss-tbx-nav-subitem::before { content: ""; position: absolute; left: 1.35rem; top: 50%; width: .55rem; height: 2px; background: var(--band-line); transform: translateY(-50%); }
.ss-tbx-nav-subitem:hover { color: var(--band-fg); }
.ss-tbx-nav-subitem.active { color: var(--band-fg); }
.ss-tbx-nav-subitem.active::before { background: var(--ss-accent); width: .7rem; height: 4px; }
/* the nav box clips overflow: draw focus rings inside it */
.ss-tbx-nav-link:focus-visible, .ss-tbx-nav-toggle:focus-visible, .ss-tbx-nav-subitem:focus-visible { outline-offset: -3px; }

/* ---- mobile category chips + subcategory chips ------------------------------ */
.ss-tbx-chips { margin-bottom: 1.5rem; }
.ss-tbx-chips a, .ss-tbx-subnav a { cursor: pointer; }
.ss-tbx-chips .ss-tbx-dot { width: 10px; height: 10px; }
.ss-tbx-subnav { margin: -.25rem 0 1.5rem; }
.ss-tbx-subnav a :is(.ph-bold, .ph-fill) { font-size: 1rem; color: var(--band-muted); }

/* ---- section heads inside the store column ----------------------------------- */
.ss-tbx-block + .ss-tbx-block { margin-top: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); }
.ss-tbx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ss-tbx-head .ss-title-sm { font-size: clamp(1.48rem, 1.11rem + 1.036vw, 2.035rem); overflow-wrap: anywhere; }
.ss-tbx-head-text { color: var(--band-muted); font-size: 1rem; line-height: 1.6; max-width: 40rem; margin-top: .55rem; }
.ss-tbx-head-text > :last-child { margin-bottom: 0; }
.ss-tbx-head-text:empty { display: none; }
.ss-tbx-head-meta { color: var(--band-muted); font-weight: 600; font-size: .92rem; white-space: nowrap; }

/* ---- webstore intro (Tebex store description) ------------------------------- */
.ss-tbx-intro { overflow: hidden; box-shadow: var(--ss-shadow-card), inset 4px 0 0 var(--ss-accent); }
.ss-tbx-intro .ss-panel-body { padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem) clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.ss-tbx-intro .ck-content { font-size: 1rem; }
.ss-tbx-intro .ck-content > :first-child { margin-top: 0; }
.ss-tbx-intro .ck-content h1, .ss-tbx-intro .ck-content h2, .ss-tbx-intro .ck-content h3 { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.406rem, 1.11rem + .74vw, 1.85rem); line-height: var(--ss-display-lh); margin-bottom: .2em; }
.ss-tbx-intro .ck-content ul { list-style: none; padding-left: 0; }
.ss-tbx-intro .ck-content ul li { position: relative; padding-left: 1.7rem; margin: .35rem 0; }
.ss-tbx-intro .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-tbx-intro:has(.ck-content:empty) { display: none !important; }
.ss-tbx-intro + .ss-tbx-intro { margin-top: 0; }

/* ---- category tiles (store home) -------------------------------------------- */
.ss-tbx-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(184px, auto); gap: 1rem; }
.ss-tbx-cats > .ss-tile { grid-column: auto; padding: 1.35rem 1.4rem 1.3rem; cursor: pointer; }
.ss-tbx-cats > .ss-tile.is-w2 { grid-column: span 2; }
.ss-tbx-cats > .ss-tile.is-w3 { grid-column: 1 / -1; }
.ss-tbx-cats .ss-tile-name { font-size: 1.517rem; max-width: 12ch; overflow-wrap: normal; }
.ss-tbx-cats .ss-tile.is-w2 .ss-tile-name, .ss-tbx-cats .ss-tile.is-w3 .ss-tile-name { max-width: none; }
.ss-tbx-cats .ss-tile-desc { max-width: 22rem; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-tbx-cats .ss-tile-desc > * { margin: 0; display: inline; }
.ss-tbx-cats .ss-tile-desc code { color: inherit; background: rgba(0, 0, 0, .2); padding: 0 .25rem; border-radius: 2px; }
.ss-tbx-cats .ss-tile-foot { padding-top: 1rem; gap: .6rem; }
.ss-tbx-tile-subs { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: calc(100% - 52px); }
.ss-tbx-tile-subs > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tbx-tile-ghost { position: absolute; right: 3.6rem; bottom: -2.3rem; z-index: -1; font-family: var(--ss-display); font-weight: 800; font-size: 7.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .1); pointer-events: none; user-select: none; transition: transform .35s var(--ss-ease); }
.ss-tbx-cats > .ss-tile:hover .ss-tbx-tile-ghost { transform: translateY(-6px); }
.ss-tbx-intro:not([style*="none"]):not(:has(.ck-content:empty)) ~ .ss-tbx-home-cats,
.ss-tbx-intro:not([style*="none"]):not(:has(.ck-content:empty)) ~ .ss-tbx-nocats { margin-top: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); }
.ss-tbx-cats .ss-tile-desc img, .ss-tbx-cats .ss-tile-desc iframe, .ss-tbx-cats .ss-tile-desc table { display: none !important; }

/* ---- product grid (Alpine copy of partials/product-card) --------------------- */
.ss-tbx-products .ss-product-media img { image-rendering: pixelated; }
.ss-tbx-products .ss-product-name { text-wrap: balance; }
.ss-tbx-products .ss-product-media img.ss-cover { image-rendering: auto; }
@media (min-width: 1200px) {
	.ss-tbx-dense .ss-product-foot { flex-direction: column; align-items: stretch; gap: .7rem; }
	.ss-tbx-dense .ss-product-name { font-size: 1.147rem; }
}

/* ---- tier comparison table -------------------------------------------------- */
.ss-tbx-tiers { overflow: hidden; }
.ss-tbx-tiers .table { min-width: 680px; }
.ss-tbx-tiers .table > thead > tr > th { background: transparent; 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-tbx-tiers .table > thead > tr > th:first-child { padding-left: 1.35rem; width: 28%; }
.ss-tbx-tiers .table > thead > tr > th:last-child { padding-right: 1.1rem; }
.ss-tbx-tiers-intro b { display: block; font-family: var(--ss-display); font-weight: 800; font-size: 1.406rem; line-height: var(--ss-display-lh); }
.ss-tbx-tiers-intro span { display: block; color: var(--band-muted); font-weight: 500; font-size: .88rem; margin-top: .45rem; max-width: 15rem; }
.ss-tbx-tier { position: relative; display: flex; flex-direction: column; text-align: center; min-width: 150px; border-radius: var(--ss-r); overflow: hidden; background: var(--band-sunk); border: 1px solid var(--band-card-line); }
.ss-tbx-tier-media { position: relative; background: var(--tone, var(--ss-tone-navy)); padding: 1.6rem .8rem 1rem; display: grid; place-items: center; isolation: isolate; }
.ss-tbx-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-tbx-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-tbx-tier-media img.ss-cover { width: 100%; height: 96px; object-fit: cover; filter: none; image-rendering: auto; }
.ss-tbx-tier-media .ss-chip { position: absolute; top: .6rem; left: 0; }
.ss-tbx-tier-body { padding: .9rem .8rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ss-tbx-tier-name { font-family: var(--ss-display); font-weight: 800; font-size: 1.11rem; line-height: var(--ss-display-lh); overflow-wrap: anywhere; text-wrap: balance; }
.ss-tbx-tier-price { line-height: 1; min-height: 2.7rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ss-tbx-tier-price .ss-price { font-size: 1.184rem; }
.ss-tbx-tier-price .ss-price-old { display: block; margin-bottom: .25rem; font-size: .8rem; }
.ss-tbx-tier-body .btn { margin-top: .35rem; width: 100%; }
.ss-tbx-tier-body .btn:focus-visible { outline-offset: -3px; }
.ss-tbx-tiers .table > tbody > tr > td { padding: .8rem .6rem; text-align: center; font-weight: 600; font-size: .92rem; }
.ss-tbx-tiers .table > tbody > tr > td:first-child { text-align: left; padding-left: 1.35rem; color: var(--band-fg); }
.ss-tbx-tiers .table > tbody > tr > td:first-child :is(.ph-bold, .ph-fill) { color: var(--band-muted); margin-left: .35rem; cursor: help; vertical-align: -2px; }
.ss-tbx-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-tbx-yes, .ss-tbx-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; }
.ss-tbx-yes { background: color-mix(in oklab, var(--ss-live) 22%, transparent); color: color-mix(in oklab, var(--ss-live), black 32%); }
[data-bs-theme="dark"] .ss-tbx-yes { color: var(--ss-live); }
.ss-tbx-no { color: var(--band-muted); opacity: .7; }
@media (max-width: 991.98px) {
	.ss-tbx-tiers .table > thead > tr > th:first-child, .ss-tbx-tiers .table > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 2; background: var(--band-card); box-shadow: 1px 0 0 var(--band-card-line); min-width: 150px; }
	.ss-tbx-tiers-intro b { font-size: 1.5rem; }
}

/* ---- reassurance strip ------------------------------------------------------- */
.ss-tbx-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
/* columns follow the item count so a row never ends with an orphan (same rule as the regular store strip) */
@media (min-width: 576px) { .ss-tbx-trust[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ss-tbx-trust[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-tbx-trust-item { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--band-card); border: 1px solid var(--band-card-line); border-radius: var(--ss-r); }
.ss-tbx-trust-item > :is(.ph-bold, .ph-fill) { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 1.3rem; background: var(--ss-accent-soft); color: var(--ss-accent-ink); border-radius: var(--ss-r-sm); }
.ss-tbx-trust-item b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ss-tbx-trust-item span { display: block; color: var(--band-muted); font-size: .86rem; line-height: 1.45; margin-top: .15rem; }
.ss-tbx-trust-item a { color: var(--band-fg); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ss-accent); text-underline-offset: 3px; }

/* ---- summary rows (product, cart) ------------------------------------------- */
.ss-tbx-sum { display: grid; gap: .55rem; }
.ss-tbx-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.ss-tbx-sum-row > span:first-child { color: var(--band-muted); font-weight: 600; }
.ss-tbx-sum-row > span:last-child { font-weight: 700; text-align: right; white-space: nowrap; }
.ss-tbx-sum-row .is-minus { color: color-mix(in oklab, var(--ss-live), black 32%); }
[data-bs-theme="dark"] .ss-tbx-sum-row .is-minus { color: var(--ss-live); }
.ss-tbx-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-tbx-sum-total > span:first-child { font-weight: 700; padding-bottom: .2rem; }
.ss-tbx-sum-total > span:last-child { font-family: var(--ss-display); font-weight: 800; font-size: 1.702rem; line-height: .9; white-space: nowrap; text-align: right; }
.ss-tbx-sum-note { margin: .45rem 0 0; text-align: right; color: var(--band-muted); font-size: .84rem; font-weight: 600; }
.ss-tbx-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-tbx-fine li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.ss-tbx-fine :is(.ph-bold, .ph-fill) { color: var(--band-fg); font-size: 1.05rem; margin-top: .05rem; }

/* ---- page grid (product, cart): main / aside / below-main, aside second on phones ---- */
.ss-tbx-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-tbx-grid-a { grid-area: a; min-width: 0; }
.ss-tbx-grid-b { grid-area: b; align-self: stretch; min-width: 0; }
.ss-tbx-grid-c { grid-area: c; min-width: 0; }
.ss-tbx-grid--cart { grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); }
.ss-tbx-grid-c > .ss-tbx-trust { margin-top: .5rem; }
.ss-tbx-pd { overflow: hidden; }
.ss-tbx-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-tbx-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-tbx-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-tbx-pd-media img.ss-cover { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; image-rendering: auto; }
.ss-tbx-pd-media .ss-product-flags { top: 1.1rem; }
.ss-tbx-pd-body { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1.1rem 1.4rem 1.2rem; }
.ss-tbx-pd-cat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; color: var(--band-muted); }
.ss-tbx-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-tbx-pd-details .ck-content ul { list-style: none; padding-left: 0; }
.ss-tbx-pd-details .ck-content ul li { position: relative; padding-left: 1.7rem; margin: .35rem 0; }
.ss-tbx-pd-details .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-tbx-pd-details .ck-content > :first-child { margin-top: 0; }
.ss-tbx-buy .ss-panel-body { padding: 1.35rem 1.4rem 1.45rem; }
.ss-tbx-buy .btn-arena { width: 100%; }
.ss-tbx-buy-hint { display: flex; gap: .45rem; align-items: flex-start; margin: .75rem 0 0; color: var(--band-muted); font-size: .84rem; font-weight: 600; line-height: 1.4; }
.ss-tbx-buy-hint :is(.ph-bold, .ph-fill) { font-size: 1rem; margin-top: .05rem; color: var(--band-fg); }
.ss-tbx-pd-skel { aspect-ratio: 16 / 8; }
@media (max-width: 991.98px) {
	.ss-tbx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; gap: 1.25rem; }
	.ss-tbx-grid-b .ss-aside { position: static; }
}
@media (max-width: 767.98px) {
	.ss-tbx-pd-media, .ss-tbx-pd-skel { aspect-ratio: 4 / 3; }
	.ss-tbx-pd-body { padding: 1rem 1.1rem; }
	.ss-tbx-sum-total > span:last-child { font-size: 2.05rem; }
}

/* ---- cart -------------------------------------------------------------------- */
.ss-tbx-count { font-size: .85rem; font-weight: 700; color: var(--band-muted); }
.ss-tbx-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-tbx-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-tbx-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-tbx-thumb img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .35)); }
.ss-tbx-row-main { grid-area: main; min-width: 0; }
.ss-tbx-row-name { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--band-fg); overflow-wrap: anywhere; }
.ss-tbx-row-meta { display: flex; align-items: center; gap: .35rem .6rem; flex-wrap: wrap; margin-top: .3rem; font-size: .86rem; color: var(--band-muted); }
.ss-tbx-row-meta b { color: var(--band-fg); font-weight: 700; }
.ss-tbx-row-meta .ss-chip { font-size: .74rem; }
.ss-tbx-row-qty { grid-area: qty; }
.ss-tbx-row-total { grid-area: total; font-family: var(--ss-display); font-weight: 800; font-size: 1.147rem; line-height: 1; white-space: nowrap; min-width: 7.5rem; text-align: right; }
.ss-tbx-row-act { grid-area: act; display: flex; gap: .35rem; }
.ss-tbx-qty { flex-wrap: nowrap; width: auto; }
.ss-tbx-qty .btn { --bs-btn-padding-x: 0; width: 34px; height: 36px; }
.ss-tbx-qty .form-control { width: 46px; flex: none; text-align: center; padding-inline: 0; height: 36px; font-weight: 700; }
.ss-tbx-qty .form-control:disabled { background: var(--band-input); color: var(--band-fg); }
.ss-tbx-qty .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ss-tbx-qty .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ss-tbx-qty .checkoutItemQuantitySpinner { display: flex; justify-content: center; align-items: center; width: 46px; height: 36px; background-color: var(--band-input); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.ss-tbx-summary .ss-panel-body { padding: 1.35rem 1.4rem 1.45rem; }
.ss-tbx-summary .ss-tbx-sum-total { border-top: 0; padding-top: 0; margin-top: 0; }
.ss-tbx-code .input-group .form-control { font-weight: 700; letter-spacing: .03em; }
.ss-tbx-code .input-group .form-control::placeholder { font-weight: 500; letter-spacing: 0; }
.ss-tbx-code .input-group .btn { border-radius: 0 var(--ss-r-sm) var(--ss-r-sm) 0; clip-path: none; min-width: 5.5rem; }
.ss-tbx-code small { display: block; margin-top: .35rem; font-weight: 600; }
.ss-tbx-code small:empty { display: none; }
.ss-tbx-codes { display: grid; gap: .5rem; margin-top: .75rem; }
.ss-tbx-codeitem { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .75rem; border: 1px dashed var(--band-line); border-radius: var(--ss-r-sm); background: var(--band-sunk); font-size: .9rem; }
.ss-tbx-codeitem .couponCodesItemCode { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.ss-tbx-codeitem .couponCodesItemCode b { letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tbx-codeitem .removeCouponCodesItemSpinner { width: 34px; display: grid; place-items: center; }
.ss-tbx-divider { border: 0; border-top: 1px solid var(--band-card-line); margin: 1.25rem -1.4rem; opacity: 1; }
@media (max-width: 767.98px) {
	.ss-tbx-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-tbx-thumb { width: 56px; height: 56px; }
	.ss-tbx-row-total { min-width: 0; font-size: 1.4rem; }
}

/* ---- login ------------------------------------------------------------------- */
.ss-tbx-login { overflow: hidden; height: 100%; }
.ss-tbx-login .ss-panel-body { padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.ss-tbx-login-who { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; }
.ss-tbx-login-head { width: 72px; height: 72px; flex: none; border-radius: var(--ss-r-sm); background: var(--band-sunk); image-rendering: pixelated; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); }
.ss-tbx-login-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.48rem, 1.184rem + .888vw, 1.998rem); line-height: var(--ss-display-lh); margin: 0 0 .45rem; }
.ss-tbx-login-text { color: var(--band-muted); margin: 0; max-width: 34rem; }
.ss-tbx-login-form { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.ss-tbx-login-form .form-control { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.ss-tbx-login-form .btn-arena { flex: none; }
.ss-tbx-login-note { display: flex; gap: .55rem; align-items: flex-start; margin: 1.25rem 0 0; padding: .8rem .95rem; border: 1px dashed var(--band-line); border-radius: var(--ss-r-sm); background: var(--band-sunk); font-size: .9rem; font-weight: 600; }
.ss-tbx-login-note :is(.ph-bold, .ph-fill) { color: var(--ss-accent-ink); font-size: 1.15rem; margin-top: .05rem; }
.ss-tbx-how { height: 100%; }
.ss-tbx-how .ss-panel-body { padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.ss-tbx-how-title { font-family: var(--ss-display); font-weight: 800; font-size: 1.406rem; line-height: var(--ss-display-lh); margin: 0 0 1.25rem; }
.ss-tbx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ss-tbx-steps li { display: flex; gap: .9rem; align-items: flex-start; }
.ss-tbx-steps li > :is(.ph-bold, .ph-fill) { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 1.25rem; background: var(--ss-accent); color: var(--ss-on-accent); border-radius: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .22); }
.ss-tbx-steps b { display: block; font-weight: 700; line-height: 1.3; }
.ss-tbx-steps span { display: block; color: var(--band-muted); font-size: .9rem; line-height: 1.45; margin-top: .15rem; }

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.ss-tbx-side.ss-aside { position: static; }
}
@media (max-width: 767.98px) {
	.ss-tbx-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); gap: .75rem; }
	.ss-tbx-cats > .ss-tile, .ss-tbx-cats > .ss-tile.is-w2 { grid-column: auto; padding: 1.1rem; }
	.ss-tbx-cats > .ss-tile.is-w3, .ss-tbx-cats > .ss-tile.is-odd-last { grid-column: 1 / -1; }
	.ss-tbx-cats .ss-tile-name { font-size: 1.184rem; overflow-wrap: anywhere; }
	.ss-tbx-cats .ss-tile-desc { display: none; }
	.ss-tbx-tile-ghost { font-size: 4.6rem; }
}
@media (max-width: 575.98px) {
	.ss-tbx-login-who { flex-direction: column; align-items: flex-start; gap: .9rem; }
	.ss-tbx-login-head { width: 56px; height: 56px; }
	.ss-tbx-login-form .btn-arena { width: 100%; }
}