/* Merchant storefront skin. Every value here comes from --st-* custom properties emitted per
   request by StorefrontThemeCss.Build, so a merchant's theme choices change the page without any
   merchant-authored CSS. Loaded only on /s/* and /store/* browse routes (see App.razor) so none of
   this can reach the checkout surface. */

.storefront-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--st-bg);
    color: var(--st-text);
    font-family: var(--st-font-body);

    /* Shared components inside the storefront (EmptyState, alerts, ProductGallery) are styled
       against the app-wide bootstrap/phoenix variables. Re-point those at the merchant's tokens so
       they inherit the theme instead of the Settld dark shell. */
    --bs-body-bg: var(--st-bg);
    --bs-body-color: var(--st-text);
    --bs-border-color: var(--st-border);
    --bs-secondary-color: var(--st-muted);
    --bs-emphasis-color: var(--st-text);
    --bs-primary: var(--st-primary);
    --bs-link-color: var(--st-primary);
    --bs-link-hover-color: var(--st-primary);
    --phoenix-surface: var(--st-surface);
    --phoenix-border: var(--st-border);
    --phoenix-muted: var(--st-muted);
    --phoenix-accent: var(--st-primary);
    --phoenix-accent-text: var(--st-primary);
    --phoenix-hover: color-mix(in srgb, var(--st-text) 5%, transparent);
}

.storefront-root [hidden] {
    display: none !important;
}

/* border-box is load-bearing, not tidiness: width:100% plus 1.5rem of padding under content-box makes
   the shell 48px wider than the viewport, so every storefront scrolled sideways on a phone. It also
   reconciles the CSS with StorefrontThemeCss.AvailableRowWidth, which already subtracts a 48px
   ShellPadding from --st-width - i.e. the C# has always treated --st-width as the outer width. */
.sf-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--st-width);
    margin: 0 auto;
    padding-inline: 1.5rem;
}

.storefront-root h1,
.storefront-root h2,
.storefront-root h3 {
    font-family: var(--st-font-heading);
    text-transform: var(--st-heading-case);
    letter-spacing: var(--st-heading-tracking);
    color: var(--st-text);
    margin: 0;
}

/* Header */

.sf-header {
    border-bottom: 1px solid var(--st-border);
    background: var(--st-surface);
}

.sf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: calc(var(--st-gap) * 1.1);
}

.sf-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sf-brand__logo {
    max-height: 2.4rem;
    max-width: 12rem;
    object-fit: contain;
}

/* The merchant's initials when they have no logo - their identity, so never Settld's glyph. Neutral
   rather than the action colour, so the only primary-coloured thing on the page is the button. */
.sf-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 auto;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: color-mix(in srgb, var(--st-text) 6%, var(--st-surface));
    color: var(--st-text);
    font-family: var(--st-font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* Settld's own weave, shown only when there is no merchant context at all. */
.sf-brand__glyph {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 auto;
}

.sf-brand__name {
    font-family: var(--st-font-heading);
    font-size: calc(1.15rem * var(--st-heading-scale));
    text-transform: var(--st-heading-case);
    letter-spacing: var(--st-heading-tracking);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.sf-nav__link,
.sf-nav__cart {
    color: var(--st-text);
    text-decoration: none;
    font-size: 0.92rem;
    cursor: pointer;
}

.sf-nav__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
}

.sf-nav__cart-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.sf-nav__cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--st-primary);
    color: var(--st-primary-text);
    font-size: 0.68rem;
    line-height: 1;
}

.storefront-root[data-cart-display="text"] .sf-nav__cart-icon,
.storefront-root[data-cart-display="icon"] .sf-nav__cart-label {
    display: none;
}

/* Subscription, service and single-product stores buy in one action, so a basket is a dead end that
   invites shoppers to collect things they can never check out together. Removing the basket means
   removing every route into it - the add-to-cart form and the running cart summary as well as the
   two cart buttons - otherwise shoppers fill a cart the store then refuses to show them. Buy now
   and Subscribe are untouched: those are the one-action paths this setting exists to leave behind. */
.storefront-root[data-cart-style="hidden"] .sf-nav__cart,
.storefront-root[data-cart-style="hidden"] .sf-mobile-cart-dock,
.storefront-root[data-cart-style="hidden"] .sf-cart-summary,
.storefront-root[data-cart-style="hidden"] .sf-product__actions form {
    display: none;
}

.storefront-root[data-cart-style="outline"] .sf-nav__cart,
.storefront-root[data-cart-style="solid"] .sf-nav__cart {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--st-primary);
    border-radius: var(--st-radius);
}

.storefront-root[data-cart-style="solid"] .sf-nav__cart {
    background: var(--st-primary);
    color: var(--st-primary-text);
}

.storefront-root[data-cart-style="solid"] .sf-nav__cart-count {
    background: var(--st-primary-text);
    color: var(--st-primary);
}

.sf-nav__cart:hover,
.sf-nav__link:hover {
    color: var(--st-primary);
}

.sf-currency {
    position: relative;
}

.sf-currency > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sf-currency > summary::-webkit-details-marker {
    display: none;
}

.sf-currency > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.sf-currency__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 6rem;
    padding: 0.35rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
    box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.45);
}

.sf-currency__option {
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--st-radius) * 0.6);
    color: var(--st-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.sf-currency__option:hover {
    background: var(--phoenix-hover);
}

.storefront-root[data-header="centered"] .sf-header__inner {
    flex-direction: column;
    gap: 0.85rem;
}

.storefront-root[data-header="minimal"] .sf-header {
    background: transparent;
    border-bottom-color: transparent;
}

.storefront-root[data-header="minimal"] .sf-brand__name {
    font-size: 1rem;
}

.sf-banner {
    width: 100%;
    height: min(var(--st-banner-height), 40vw);
    overflow: hidden;
    background: var(--st-surface);
}

.sf-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main + hero */

.sf-main {
    flex: 1 0 auto;
    padding-block: var(--st-section-gap) calc(var(--st-section-gap) * 1.2);
}

.sf-hero {
    max-width: 46rem;
    margin-bottom: var(--st-section-gap);
}

.sf-hero--with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    max-width: none;
}

.sf-hero__media {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--st-radius-lg);
    background: var(--st-surface);
}

.sf-hero__media img {
    display: block;
    width: 100%;
    height: min(var(--st-hero-image-height), 65vh);
    object-fit: cover;
}

.storefront-root[data-header="centered"] .sf-hero {
    margin-inline: auto;
    text-align: center;
}

.sf-hero__eyebrow {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--st-accent);
    font-family: var(--st-font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sf-hero__title {
    font-size: calc(clamp(2rem, 4.5vw, 3.25rem) * var(--st-heading-scale));
    line-height: 1.08;
}

.sf-hero__text {
    margin: 1.1rem 0 0;
    color: var(--st-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 42rem;
}

.storefront-root[data-header="centered"] .sf-hero__text {
    margin-inline: auto;
}

.storefront-root[data-header="centered"] .sf-hero--with-image {
    text-align: left;
}

/* Sections */

.sf-sections {
    display: flex;
    flex-direction: column;
    gap: var(--st-section-gap);
}

.storefront-root[data-section-order="subscriptionsfirst"] .sf-section--plans {
    order: -1;
}

/* Scoped through .storefront-root so it out-specifies the h1/h2/h3 margin reset above — without
   that the heading loses its bottom margin and the rule collides with the first product. */
.storefront-root .sf-section__title {
    font-size: calc(1.4rem * var(--st-heading-scale));
    margin-bottom: calc(var(--st-gap) * 1.25);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--st-border);
}

/* Product grid */

/* Products per row is exact: N tracks, every product one Nth of the row. Card width is a
   consequence of the count, never a constraint that overrides it — when the configured minimum
   product width cannot fit at that count, the theme editor warns the merchant rather than the grid
   silently dropping a column. Only the device breakpoints below step the count down.

   The count cannot live in repeat()'s first argument: a var() there is not substituted by every
   engine, which makes the whole declaration invalid and silently collapses the grid to one implicit
   column. Hence data-columns and one literal rule per count; the count is clamped to 1-6. */
.sf-grid {
    --sf-grid-gap: calc(var(--st-gap) * 1.5);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Every card in a row is the same height, so a product without an image does not sit short next
       to one with a gallery. .sf-product distributes its own content to match. */
    align-items: stretch;
    gap: var(--sf-grid-gap);
}

.storefront-root[data-columns="2"] .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-root[data-columns="3"] .sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-root[data-columns="4"] .sf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-root[data-columns="5"] .sf-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.storefront-root[data-columns="6"] .sf-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Named compositions own their structure. The manual data-columns setting is exclusively an
   override for Custom, so a saved stale value cannot turn every preset into the same one-column
   feed. These mirror familiar marketplace patterns: 4-up standard/tall grids, 5-up dense grids,
   compact rows, promotional tiles and a horizontal recommendation shelf. */
.storefront-root[data-layout="grid"] .sf-grid,
.storefront-root[data-layout="featured"] .sf-grid,
.storefront-root[data-layout="mosaic"] .sf-grid,
.storefront-root[data-layout="gallery"] .sf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-root[data-layout="editorial"] .sf-grid,
.storefront-root[data-layout="showcase"] .sf-grid,
.storefront-root[data-layout="minimal"] .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-root[data-layout="list"] .sf-grid {
    grid-template-columns: minmax(0, 1fr);
}

.storefront-root[data-layout="dense"] .sf-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.storefront-root[data-layout="pricing"] .sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-root[data-layout="posters"] .sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-root[data-layout="quickshop"] .sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-root[data-layout="splitcards"] .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-root[data-layout="spotlight"] .sf-grid {
    grid-template-columns: minmax(0, 1fr);
}

.storefront-root[data-layout="shelf"] .sf-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(14rem, 24vw, 19rem);
    align-items: stretch;
    padding: 0.2rem 0.15rem 0.9rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
}

.storefront-root[data-layout="shelf"] .sf-grid > .sf-product {
    scroll-snap-align: start;
}

.storefront-root[data-layout="splitcards"] .sf-product--with-media {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: var(--st-gap);
}

.storefront-root[data-layout="splitcards"] .sf-media {
    margin: 0;
}

.storefront-root[data-layout="splitcards"] .sf-media .store-gallery__thumbs {
    display: none;
}

/* Uniform cards: the media box is reserved whether or not the product has an image, and the price
   and buttons sit on the baseline of the card so they line up across the row. */
.sf-grid > .sf-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sf-grid > .sf-product__body,
.sf-grid > .sf-product > .sf-product__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Fixed slots. The copy blocks reserve their space from the top and the price/buttons cluster is
   pinned to the bottom, so a long title, a missing description or an absent tax note changes what a
   card says and never where anything on it sits. */
.sf-grid > .sf-product .sf-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.3em);
    overflow: hidden;
}

.sf-grid > .sf-product .sf-product__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-height: calc(3 * 1.55em);
    overflow: hidden;
}

.sf-grid > .sf-product .sf-price {
    margin-top: auto;
    min-height: calc(1.35em + 1rem);
}

.storefront-root[data-layout="grid"] .sf-grid > .sf-product--without-media::before,
.storefront-root[data-layout="featured"] .sf-grid > .sf-product--without-media::before,
.storefront-root[data-layout="mosaic"] .sf-grid > .sf-product--without-media::before {
    content: "";
    display: block;
    margin-bottom: var(--st-gap);
    border-radius: var(--st-radius-lg);
    background: color-mix(in srgb, var(--st-text) 6%, transparent);
    aspect-ratio: var(--st-ratio);
    max-height: var(--st-product-image-max);
}

.sf-media .store-gallery__main,
.sf-media > img {
    max-height: var(--st-product-image-max);
}

.sf-media .store-gallery__main img,
.sf-media > img {
    max-height: var(--st-product-image-max);
}

/* Catalog compositions are structural, but they compose with products per row rather than compete
   with it: the count always sets the track grid, and each composition arranges itself inside that
   count. A feature tile spans two of the merchant's tracks; at one per row there is no second track
   to span into, so it is simply the full-width card every other product already is. */
.storefront-root[data-layout="featured"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child {
    grid-column: span 2;
}

.storefront-root[data-layout="featured"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child .sf-media .store-gallery__main,
.storefront-root[data-layout="featured"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child .sf-media > img {
    aspect-ratio: 2 / 1;
}

.storefront-root[data-layout="featured"] .sf-hero {
    max-width: none;
    padding: clamp(1.5rem, 4vw, 4rem);
    border-radius: var(--st-radius-lg);
    background: var(--st-primary);
}

.storefront-root[data-layout="featured"] .sf-hero__eyebrow,
.storefront-root[data-layout="featured"] .sf-hero__title,
.storefront-root[data-layout="featured"] .sf-hero__text {
    color: var(--st-primary-text);
}

/* Editorial sets an image against its copy as one spread, which reads only when the product owns the
   whole row. At two or more per row the track is too narrow for that split, so the spread stacks and
   the composition carries on through its typography and spacing — the count is never overridden. */
.storefront-root[data-layout="editorial"][data-columns="1"] .sf-product--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.storefront-root[data-layout="editorial"][data-columns="1"] .sf-product--with-media:nth-child(even) .sf-media {
    order: 2;
}

.storefront-root[data-layout="editorial"] .sf-product__title {
    font-size: calc(clamp(1.4rem, 3vw, 2.35rem) * var(--st-heading-scale));
}

.storefront-root[data-layout="editorial"] .sf-media {
    margin-bottom: 0;
}

/* The editorial lead is a bounded image-and-copy split; the remaining catalog stays a useful
   two-column grid instead of every item becoming a full-width story. */
.storefront-root[data-layout="editorial"] .sf-grid > .sf-product--with-media:first-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
}

.storefront-root[data-layout="editorial"] .sf-grid > .sf-product--with-media:first-child .sf-product__title,
.storefront-root[data-layout="editorial"] .sf-grid > .sf-product--with-media:first-child .sf-product__text,
.storefront-root[data-layout="editorial"] .sf-grid > .sf-product--with-media:first-child .sf-price {
    display: block;
    min-height: 0;
}

/* Pricing table. Software is not sold from a catalog row - the buyer is comparing a handful of tiers
   side by side, so the card is reordered around that decision: name, then the price as the headline
   number, then what you get, then one action. The DOM order that suits a product card (title, blurb,
   trial note, price, buttons) is re-sequenced with flex `order` rather than by giving plans their own
   markup, so a merchant can still switch this composition off and get an ordinary card back.
   Deliberately absent: a "Most Popular" badge. It is the strongest device on a real pricing page, but
   it is a claim about the merchant's own sales that Settld has no basis to invent for them - it needs
   a merchant-set flag on the plan, not a stylesheet. The middle tier of three gets visual emphasis
   only, which is presentation rather than an assertion. */
.storefront-root[data-layout="pricing"] .sf-media {
    display: none;
}

.storefront-root[data-layout="pricing"] .sf-grid > .sf-product .sf-product__title {
    order: 1;
    -webkit-line-clamp: initial;
    min-height: 0;
}

/* The price is the element the whole card exists to deliver, and the cadence belongs under it rather
   than trailing the amount on one line. */
.storefront-root[data-layout="pricing"] .sf-grid > .sf-product .sf-price {
    order: 2;
    margin: 0.85rem 0 0;
    min-height: 0;
    font-size: calc(2.4rem * var(--st-heading-scale));
    line-height: 1.05;
}

.storefront-root[data-layout="pricing"] .sf-price__unit,
.storefront-root[data-layout="pricing"] .sf-price__tax {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Truncating a feature list defeats the comparison the page is for, so the clamp comes off. Equal
   card heights still hold: .sf-grid stretches its items and the action block takes up the slack. */
.storefront-root[data-layout="pricing"] .sf-grid > .sf-product .sf-product__text {
    order: 3;
    -webkit-line-clamp: initial;
    min-height: 0;
    margin-top: 1.2rem;
}

.storefront-root[data-layout="pricing"] .sf-product__actions {
    order: 4;
    margin-top: auto;
    padding-top: 1.5rem;
}

.storefront-root[data-layout="pricing"] .sf-product__actions .sf-btn {
    width: 100%;
    justify-content: center;
}

/* Trial and tax notes sit under the button, where the buyer asks "what happens if I click this". */
.storefront-root[data-layout="pricing"] .sf-product__meta {
    order: 5;
    margin-top: 0.7rem;
    text-align: center;
}

/* Only some plans carry a trial note, and the note sits below the button - so without this the one
   tier that has it gets its CTA pushed up and the buttons stop lining up across the row. Reserve the
   same slot on the cards that have no note. */
.storefront-root[data-layout="pricing"] .sf-product__body:not(:has(.sf-product__meta))::after {
    content: "";
    order: 5;
    margin-top: 0.7rem;
    min-height: 1.4em;
}

/* :nth-child(2):nth-last-child(2) matches the second card only when it is also second from the end,
   i.e. only in a set of exactly three. Four tiers or two get no arbitrary hero. */
.storefront-root[data-layout="pricing"] .sf-grid > .sf-product:nth-child(2):nth-last-child(2) {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 1px var(--st-primary), 0 18px 42px -30px rgb(0 0 0 / 0.5);
}

@media (max-width: 900px) {
    .storefront-root[data-layout="pricing"] .sf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Spotlight. A store that sells one thing has no row to line up against, so the card stops behaving
   like a tile: the image takes half the page, the copy sits beside it at reading width, and none of
   the fixed slots that keep a grid tidy apply. Everything below is undoing card geometry rather than
   adding decoration, which is why it reads as a list of resets. */
.storefront-root[data-layout="spotlight"] .sf-product--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--st-gap) * 2);
}

.storefront-root[data-layout="spotlight"] .sf-media {
    margin: 0;
}

/* The single product is the page, so the image is allowed past the catalog cap that keeps grid rows
   even - anything smaller reads as a thumbnail floating in white space. */
.storefront-root[data-layout="spotlight"] .sf-media .store-gallery__main,
.storefront-root[data-layout="spotlight"] .sf-media .store-gallery__main img,
.storefront-root[data-layout="spotlight"] .sf-media > img {
    max-height: min(60vh, 34rem);
}

.storefront-root[data-layout="spotlight"] .sf-grid > .sf-product .sf-product__body {
    flex: 0 1 auto;
    justify-content: center;
}

/* Clamps and min-heights exist to make neighbouring cards match. There are no neighbours. */
.storefront-root[data-layout="spotlight"] .sf-grid > .sf-product .sf-product__title {
    display: block;
    -webkit-line-clamp: initial;
    min-height: 0;
    font-size: calc(2rem * var(--st-heading-scale));
    line-height: 1.15;
}

.storefront-root[data-layout="spotlight"] .sf-grid > .sf-product .sf-product__text {
    display: block;
    -webkit-line-clamp: initial;
    min-height: 0;
    margin-top: 1rem;
    max-width: 40ch;
    font-size: 1rem;
}

.storefront-root[data-layout="spotlight"] .sf-grid > .sf-product .sf-price {
    margin-top: 1.4rem;
    min-height: 0;
    font-size: calc(1.8rem * var(--st-heading-scale));
    line-height: 1.1;
}

.storefront-root[data-layout="spotlight"] .sf-price__unit,
.storefront-root[data-layout="spotlight"] .sf-price__tax {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
}

.storefront-root[data-layout="spotlight"] .sf-product__actions {
    margin-top: 1.6rem;
}

/* One buying action, sized like the decision it is - but not stretched across half a desktop page. */
.storefront-root[data-layout="spotlight"] .sf-product__actions .sf-btn {
    justify-content: center;
    min-width: 12rem;
    padding-block: 0.85rem;
}

@media (max-width: 820px) {
    .storefront-root[data-layout="spotlight"] .sf-product--with-media {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--st-gap);
    }

    .storefront-root[data-layout="spotlight"] .sf-grid > .sf-product .sf-product__title {
        font-size: calc(1.6rem * var(--st-heading-scale));
    }

    .storefront-root[data-layout="spotlight"] .sf-product__actions .sf-btn {
        width: 100%;
    }
}

/* The list rule between products is its composition, so it holds at any count: rows still butt up
   against each other, columns still get the grid gap between them. */
.storefront-root[data-layout="list"] .sf-grid {
    gap: 0 var(--sf-grid-gap);
    border-top: 1px solid var(--st-border);
}

.storefront-root[data-layout="list"] .sf-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1rem;
    border: 0;
    border-bottom: 1px solid var(--st-border);
    border-radius: 0;
    background: transparent;
}

/* A thumbnail beside the copy needs about a 26rem track, which only exists at one or two per row.
   Past that the row keeps its rules and spacing and the thumbnail sits above the copy. */
.storefront-root[data-layout="list"][data-columns="1"] .sf-product--with-media,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product--with-media {
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
}

.storefront-root[data-layout="list"] .sf-media {
    margin: 0;
}

.storefront-root[data-layout="list"] .sf-media .store-gallery__thumbs {
    display: none;
}

/* Price and actions ride to the right of the copy only while the row is wide enough for two columns
   of content; the same one- and two-per-row range as the thumbnail. */
.storefront-root[data-layout="list"][data-columns="1"] .sf-product__body,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    column-gap: 1.5rem;
}

.storefront-root[data-layout="list"][data-columns="1"] .sf-product__text,
.storefront-root[data-layout="list"][data-columns="1"] .sf-product__meta,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product__text,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product__meta {
    grid-column: 1;
}

.storefront-root[data-layout="list"][data-columns="1"] .sf-price,
.storefront-root[data-layout="list"][data-columns="1"] .sf-product__actions,
.storefront-root[data-layout="list"][data-columns="2"] .sf-price,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
}

.storefront-root[data-layout="list"][data-columns="1"] .sf-product__actions,
.storefront-root[data-layout="list"][data-columns="2"] .sf-product__actions {
    grid-row: 3;
    justify-content: flex-end;
}

/* The horizontal compositions size their rows from the copy rather than to a card, so the fixed card
   slots are released wherever they are actually laid out side by side. */
.storefront-root[data-layout="editorial"][data-columns="1"] .sf-grid > .sf-product .sf-product__title,
.storefront-root[data-layout="editorial"][data-columns="1"] .sf-grid > .sf-product .sf-product__text,
.storefront-root[data-layout="list"][data-columns="1"] .sf-grid > .sf-product .sf-product__title,
.storefront-root[data-layout="list"][data-columns="1"] .sf-grid > .sf-product .sf-product__text,
.storefront-root[data-layout="list"][data-columns="2"] .sf-grid > .sf-product .sf-product__title,
.storefront-root[data-layout="list"][data-columns="2"] .sf-grid > .sf-product .sf-product__text {
    display: block;
    min-height: 0;
    overflow: visible;
}

.storefront-root[data-layout="editorial"][data-columns="1"] .sf-grid > .sf-product .sf-price,
.storefront-root[data-layout="list"][data-columns="1"] .sf-grid > .sf-product .sf-price,
.storefront-root[data-layout="list"][data-columns="2"] .sf-grid > .sf-product .sf-price {
    min-height: 0;
}

.storefront-root[data-layout="mosaic"] .sf-grid {
    grid-auto-flow: dense;
}

/* The feature tiles only make sense on a card that has an image to fill them — spanning a text-only
   card leaves a large empty box — and only where the count leaves a second track to spill into. */
.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child,
.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(5n) {
    grid-column: span 2;
}

.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child .sf-media .store-gallery__main,
.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:first-child .sf-media > img,
.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(5n) .sf-media .store-gallery__main,
.storefront-root[data-layout="mosaic"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(5n) .sf-media > img {
    aspect-ratio: 16 / 9;
}

/* Gallery is image-first for both products and subscriptions. Titles, prices and actions stay
   visible; secondary copy is removed from the fast scanning surface. */
.storefront-root[data-layout="gallery"] .sf-product__text,
.storefront-root[data-layout="gallery"] .sf-product__meta {
    display: none;
}

.storefront-root[data-layout="gallery"] .sf-product__body {
    padding-top: 0.65rem;
}

.storefront-root[data-layout="gallery"] .sf-product__title,
.storefront-root[data-layout="gallery"] .sf-price {
    min-height: 0;
}

.storefront-root[data-layout="gallery"] .sf-price {
    margin-top: 0.35rem;
    font-size: calc(1rem * var(--st-heading-scale));
}

.storefront-root[data-layout="dense"] .sf-product__text,
.storefront-root[data-layout="dense"] .sf-product__meta,
.storefront-root[data-layout="dense"] .sf-price__tax {
    display: none;
}

.storefront-root[data-layout="dense"] .sf-product__title,
.storefront-root[data-layout="dense"] .sf-price {
    min-height: 0;
    font-size: calc(0.9rem * var(--st-heading-scale));
}

.storefront-root[data-layout="dense"] .sf-price {
    margin-top: 0.35rem;
}

/* Marketplace cards prioritize identification, price and purchase. Long marketing copy belongs on
   the detail page and is what made four-up grids look like oversized single-product panels. */
.storefront-root[data-layout="grid"] .sf-product__text,
.storefront-root[data-layout="featured"] .sf-grid > .sf-product:not(:first-child) .sf-product__text,
.storefront-root[data-layout="mosaic"] .sf-product__text,
.storefront-root[data-layout="gallery"] .sf-product__text,
.storefront-root[data-layout="dense"] .sf-product__text,
.storefront-root[data-layout="posters"] .sf-product__text,
.storefront-root[data-layout="shelf"] .sf-product__text {
    display: none;
    min-height: 0;
}

.storefront-root[data-layout="quickshop"] .sf-product__text,
.storefront-root[data-layout="quickshop"] .sf-product__meta {
    display: none;
    min-height: 0;
}

.storefront-root[data-layout="grid"] .store-gallery__thumbs,
.storefront-root[data-layout="featured"] .sf-grid > .sf-product:not(:first-child) .store-gallery__thumbs,
.storefront-root[data-layout="mosaic"] .store-gallery__thumbs,
.storefront-root[data-layout="gallery"] .store-gallery__thumbs,
.storefront-root[data-layout="dense"] .store-gallery__thumbs,
.storefront-root[data-layout="posters"] .store-gallery__thumbs,
.storefront-root[data-layout="quickshop"] .store-gallery__thumbs,
.storefront-root[data-layout="shelf"] .store-gallery__thumbs {
    display: none;
}

/* Showcase creates recurring full-width cinematic beats instead of looking like another grid. */
.storefront-root[data-layout="showcase"] .sf-grid {
    grid-auto-flow: dense;
}

.storefront-root[data-layout="showcase"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(3n + 1) {
    grid-column: span 2;
}

.storefront-root[data-layout="showcase"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(3n + 1) .sf-media .store-gallery__main,
.storefront-root[data-layout="showcase"]:not([data-columns="1"]) .sf-grid > .sf-product--with-media:nth-child(3n + 1) .sf-media > img {
    aspect-ratio: 16 / 7;
}

/* Overlay cards require a contained image canvas; horizontal editorial/list layouts use normal
   document flow so every title, price and action stays readable for any option combination. */
.storefront-root[data-layout="editorial"][data-cards="overlay"] .sf-product--with-media .sf-product__body,
.storefront-root[data-layout="list"][data-cards="overlay"] .sf-product--with-media .sf-product__body {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--st-text);
}

.storefront-root[data-layout="editorial"][data-cards="overlay"] .sf-product__title,
.storefront-root[data-layout="editorial"][data-cards="overlay"] .sf-price,
.storefront-root[data-layout="list"][data-cards="overlay"] .sf-product__title,
.storefront-root[data-layout="list"][data-cards="overlay"] .sf-price {
    color: var(--st-text);
}

.storefront-root[data-layout="editorial"][data-cards="overlay"] .sf-product__text,
.storefront-root[data-layout="list"][data-cards="overlay"] .sf-product__text {
    display: block;
}

.sf-product {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.storefront-root[data-cards="card"] .sf-product {
    padding: var(--st-card-pad);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    background: var(--st-surface);
}

.storefront-root[data-cards="overlay"] .sf-product {
    position: relative;
    border-radius: var(--st-radius-lg);
    overflow: hidden;
    background: var(--st-surface);
}

.storefront-root[data-cards="overlay"] .sf-product--with-media .sf-product__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0));
    color: #fff;
}

.storefront-root[data-cards="overlay"] .sf-product__title,
.storefront-root[data-cards="overlay"] .sf-price {
    color: #fff;
}

.storefront-root[data-cards="overlay"] .sf-product__text {
    display: none;
}

.storefront-root[data-cards="overlay"] .sf-product--without-media {
    padding: var(--st-card-pad);
    border: 1px solid var(--st-border);
}

.storefront-root[data-cards="overlay"] .sf-product--with-media .sf-price__tax,
.storefront-root[data-cards="overlay"] .sf-product--with-media .sf-price__unit,
.storefront-root[data-cards="overlay"] .sf-product--with-media .sf-product__meta {
    color: rgb(255 255 255 / 0.78);
}

.storefront-root[data-cards="overlay"] .sf-product--with-media .sf-btn--secondary {
    border-color: rgb(255 255 255 / 0.65);
    color: #fff;
}

.storefront-root[data-cards="overlay"] .sf-media {
    margin-bottom: 0;
}

.storefront-root[data-cards="overlay"] .sf-media .store-gallery__main {
    border-radius: 0;
    min-height: min(16rem, var(--st-product-image-max));
}

.storefront-root[data-cards="overlay"] .sf-media .store-gallery__thumbs {
    display: none;
}

/* ProductGallery is shared with the Settld-skinned pages and pins its own 4/3 cover image via
   scoped CSS. These selectors are one class deeper, so the merchant's ratio/fit wins here without
   touching the component. Thumbnails keep flowing underneath the main image. */
.storefront-root .sf-media {
    margin-bottom: var(--st-gap);
}

.storefront-root .sf-media .store-gallery__main,
.storefront-root .sf-media > img {
    display: block;
    width: 100%;
    aspect-ratio: var(--st-ratio);
    object-fit: var(--st-fit);
    border-radius: var(--st-radius);
    background: color-mix(in srgb, var(--st-text) 5%, transparent);
}

.storefront-root[data-ratio="natural"] .sf-media .store-gallery__main,
.storefront-root[data-ratio="natural"] .sf-media > img {
    aspect-ratio: auto;
    height: auto;
    max-height: var(--st-product-image-max);
}

.storefront-root .sf-media .store-gallery__thumbs {
    padding: 0.5rem 0 0;
}

.storefront-root .sf-media .store-gallery__thumb {
    border-radius: calc(var(--st-radius) * 0.5);
}

.storefront-root .sf-media .store-gallery__thumb.is-active,
.storefront-root .sf-media .store-gallery__thumb:hover {
    border-color: var(--st-primary);
}

.sf-product__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.sf-product__title {
    font-size: calc(1.05rem * var(--st-heading-scale));
    line-height: 1.3;
}

.sf-product__text {
    margin: 0.5rem 0 0;
    color: var(--st-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.sf-product__meta {
    margin: 0.4rem 0 0;
    color: var(--st-muted);
    font-size: 0.82rem;
}

.sf-price {
    margin: var(--st-gap) 0 0;
    font-family: var(--st-font-heading);
    font-size: calc(1.15rem * var(--st-heading-scale));
    font-weight: 600;
}

.sf-price__tax,
.sf-price__unit {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--st-muted);
}

.sf-product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--st-gap);
}

.sf-product__actions form {
    display: contents;
}

/* Buttons */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--st-radius);
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sf-btn--primary {
    background: var(--st-primary);
    border-color: var(--st-primary);
    color: var(--st-primary-text);
}

.sf-btn--secondary {
    background: transparent;
    border-color: var(--st-border);
    color: var(--st-text);
}

.sf-btn:hover {
    filter: brightness(0.94);
}

.sf-btn:focus-visible,
.sf-nav__cart:focus-visible,
.sf-nav__link:focus-visible,
.sf-brand:focus-visible,
.sf-currency__option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--st-primary) 55%, transparent);
    outline-offset: 3px;
}

.sf-btn:active,
.sf-nav__cart:active {
    transform: translateY(1px);
}

@media (hover: hover) {
    .storefront-root[data-cards="card"] .sf-product {
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .storefront-root[data-cards="card"] .sf-product:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--st-primary) 35%, var(--st-border));
        box-shadow: 0 1rem 2rem -1.5rem color-mix(in srgb, var(--st-text) 32%, transparent);
    }
}

.storefront-root[data-buttons="outline"] .sf-btn--primary {
    background: transparent;
    color: var(--st-primary);
}

.storefront-root[data-buttons="outline"] .sf-btn--primary:hover {
    background: var(--st-primary);
    color: var(--st-primary-text);
}

.storefront-root[data-buttons="soft"] .sf-btn--primary {
    background: color-mix(in srgb, var(--st-primary) 14%, transparent);
    border-color: transparent;
    color: var(--st-primary);
}

.storefront-root[data-buttons="soft"] .sf-btn--primary:hover {
    background: color-mix(in srgb, var(--st-primary) 22%, transparent);
}

/* Notices */

.sf-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: var(--st-gap);
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-surface);
}

.sf-notice--error {
    border-color: color-mix(in srgb, #d64545 45%, var(--st-border));
    color: #b03636;
}

.sf-crosslink {
    margin-bottom: var(--st-gap);
    font-size: 0.88rem;
}

.sf-crosslink a {
    color: var(--st-accent);
}

.sf-mobile-section-nav,
.sf-mobile-cart-dock {
    display: none;
}

/* Footer + merchant-of-record disclosure */

.sf-footer {
    flex-shrink: 0;
    padding-block: calc(var(--st-section-gap) * 0.6);
    border-top: 1px solid var(--st-border);
    background: var(--st-surface);
    color: var(--st-muted);
    font-size: 0.9rem;
}

.sf-footer__text {
    margin: 0 0 0.75rem;
    max-width: 46rem;
    line-height: 1.6;
    white-space: pre-line;
}

.sf-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.sf-footer__links a {
    color: var(--st-muted);
    text-decoration: none;
}

.sf-footer__links a:hover {
    color: var(--st-primary);
}

/* Never themeable: the merchant-of-record disclosure is Settld's statement, not the store's, so it
   is deliberately pinned to a neutral strip rather than the merchant's tokens. */
.sf-mor {
    flex-shrink: 0;
    padding-block: 0.9rem;
    background: #10131a;
    color: rgb(255 255 255 / 0.62);
    font-size: 0.76rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .sf-hero--with-image {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .sf-hero__media img {
        height: min(var(--st-hero-image-height), 58vh);
    }

    /* The only thing that overrides the merchant's count: a phone or small tablet cannot show six
       products across at any readable size. Everything wider honours the setting exactly. */
    .storefront-root[data-columns="3"] .sf-grid,
    .storefront-root[data-columns="4"] .sf-grid,
    .storefront-root[data-columns="5"] .sf-grid,
    .storefront-root[data-columns="6"] .sf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storefront-root[data-layout="grid"] .sf-grid,
    .storefront-root[data-layout="featured"] .sf-grid,
    .storefront-root[data-layout="editorial"] .sf-grid,
    .storefront-root[data-layout="mosaic"] .sf-grid,
    .storefront-root[data-layout="gallery"] .sf-grid,
    .storefront-root[data-layout="showcase"] .sf-grid,
    .storefront-root[data-layout="dense"] .sf-grid,
    .storefront-root[data-layout="posters"] .sf-grid,
    .storefront-root[data-layout="minimal"] .sf-grid,
    .storefront-root[data-layout="quickshop"] .sf-grid,
    .storefront-root[data-layout="splitcards"] .sf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storefront-root[data-layout="shelf"] .sf-grid {
        grid-template-columns: none;
        grid-auto-columns: clamp(14rem, 42vw, 18rem);
    }

    .storefront-root[data-layout="editorial"][data-columns] .sf-product--with-media {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .storefront-root[data-layout="editorial"][data-columns] .sf-product--with-media:nth-child(even) .sf-media {
        order: initial;
    }
}

@media (max-width: 600px) {
    .sf-header {
        position: sticky;
        top: 0;
        z-index: 50;
        box-shadow: 0 0.45rem 1.5rem -1.25rem rgb(0 0 0 / 0.55);
    }

    .storefront-root[data-header="minimal"] .sf-header {
        border-bottom-color: var(--st-border);
        background: color-mix(in srgb, var(--st-surface) 94%, transparent);
        backdrop-filter: blur(12px);
    }

    .sf-shell {
        padding-inline: 1rem;
    }

    .sf-header__inner,
    .storefront-root[data-header="centered"] .sf-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.6rem;
        padding-block: 0.65rem;
    }

    .sf-brand {
        max-width: 100%;
        gap: 0.55rem;
    }

    .sf-brand__logo {
        max-width: min(8rem, 42vw);
        max-height: 2rem;
    }

    .sf-brand__mark {
        width: 2rem;
        height: 2rem;
    }

    .sf-brand__name {
        font-size: calc(0.96rem * var(--st-heading-scale));
    }

    .sf-nav {
        justify-self: end;
        gap: 0.35rem;
    }

    .sf-nav__link,
    .sf-nav__cart {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 0.82rem;
    }

    .sf-currency > summary {
        justify-content: center;
        min-height: 2.75rem;
        padding-inline: 0.45rem;
    }

    .sf-currency__menu {
        top: calc(100% + 0.25rem);
        min-width: 7rem;
        padding: 0.4rem;
    }

    .sf-currency__option {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: 0.7rem;
    }

    .sf-nav__cart-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .sf-main {
        padding-block: 1.5rem 2.5rem;
    }

    .storefront-root[data-has-cart="true"] .sf-main {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
    }

    .sf-banner {
        height: min(var(--st-banner-height), 11rem);
    }

    .sf-hero {
        margin-bottom: 2.25rem;
    }

    .sf-hero--with-image {
        gap: 1rem;
    }

    .sf-hero__title {
        font-size: calc(clamp(1.75rem, 9vw, 2.4rem) * var(--st-heading-scale));
        line-height: 1.05;
    }

    .sf-hero__text {
        margin-top: 0.75rem;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .sf-hero__media img {
        height: min(var(--st-hero-image-height), 18rem);
    }

    .sf-sections {
        gap: 2.75rem;
    }

    .sf-section {
        scroll-margin-top: 8rem;
    }

    .sf-mobile-section-nav {
        position: sticky;
        top: 4rem;
        z-index: 35;
        display: flex;
        gap: 0.45rem;
        margin: 0 -1rem 1.5rem;
        padding: 0.55rem 1rem;
        overflow-x: auto;
        border-block: 1px solid color-mix(in srgb, var(--st-border) 78%, transparent);
        background: color-mix(in srgb, var(--st-bg) 94%, transparent);
        backdrop-filter: blur(12px);
        scrollbar-width: none;
        scroll-padding-inline: 1rem;
    }

    .sf-mobile-section-nav::-webkit-scrollbar {
        display: none;
    }

    .sf-mobile-section-nav a {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        flex: 0 0 auto;
        min-height: 2.75rem;
        padding: 0.45rem 0.75rem;
        border: 1px solid var(--st-border);
        border-radius: 999px;
        background: var(--st-surface);
        color: var(--st-text);
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 0.4rem 1rem -0.9rem rgb(0 0 0 / 0.6);
    }

    .sf-mobile-section-nav a:active {
        background: color-mix(in srgb, var(--st-primary) 10%, var(--st-surface));
        border-color: var(--st-primary);
    }

    .sf-mobile-section-nav a:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--st-primary) 55%, transparent);
        outline-offset: 2px;
    }

    .sf-mobile-section-nav a span {
        display: inline-grid;
        place-items: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding-inline: 0.28rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--st-primary) 12%, transparent);
        color: var(--st-primary);
        font-size: 0.68rem;
    }

    .storefront-root .sf-section__title {
        margin-bottom: 1rem;
        padding-bottom: 0.55rem;
        font-size: calc(1.18rem * var(--st-heading-scale));
    }

    .storefront-root[data-columns="2"] .sf-grid,
    .storefront-root[data-columns="3"] .sf-grid,
    .storefront-root[data-columns="4"] .sf-grid,
    .storefront-root[data-columns="5"] .sf-grid,
    .storefront-root[data-columns="6"] .sf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-root[data-layout="grid"] .sf-grid,
    .storefront-root[data-layout="featured"] .sf-grid,
    .storefront-root[data-layout="mosaic"] .sf-grid,
    .storefront-root[data-layout="gallery"] .sf-grid,
    .storefront-root[data-layout="dense"] .sf-grid,
    .storefront-root[data-layout="posters"] .sf-grid,
    .storefront-root[data-layout="quickshop"] .sf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .storefront-root[data-layout="editorial"] .sf-grid,
    .storefront-root[data-layout="showcase"] .sf-grid,
    .storefront-root[data-layout="minimal"] .sf-grid,
    .storefront-root[data-layout="splitcards"] .sf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-root[data-layout="shelf"] .sf-grid {
        grid-template-columns: none;
        grid-auto-columns: min(78vw, 18rem);
        margin-inline: -1rem;
        padding-inline: 1rem;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-root[data-layout="editorial"] .sf-grid > .sf-product--with-media:first-child {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One track, so nothing left for a feature tile to span into. The [data-columns] presence
       selector only matches the specificity of the :not([data-columns="1"]) it is unwinding. */
    .storefront-root[data-layout="showcase"][data-columns] .sf-grid > .sf-product--with-media:nth-child(3n + 1) {
        grid-column: auto;
        grid-row: auto;
    }

    .storefront-root[data-layout="featured"] .sf-grid > .sf-product--with-media:first-child,
    .storefront-root[data-layout="mosaic"] .sf-grid > .sf-product--with-media:first-child,
    .storefront-root[data-layout="mosaic"] .sf-grid > .sf-product--with-media:nth-child(5n) {
        grid-column: 1 / -1;
    }

    .storefront-root[data-layout="splitcards"] .sf-product--with-media {
        grid-template-columns: minmax(7.5rem, 0.85fr) minmax(0, 1.15fr);
    }

    .storefront-root[data-layout="grid"] .sf-product,
    .storefront-root[data-layout="mosaic"] .sf-product,
    .storefront-root[data-layout="gallery"] .sf-product,
    .storefront-root[data-layout="dense"] .sf-product,
    .storefront-root[data-layout="posters"] .sf-product,
    .storefront-root[data-layout="quickshop"] .sf-product {
        --st-card-pad: 0.7rem;
    }

    .sf-product__title {
        font-size: calc(0.92rem * var(--st-heading-scale));
    }

    .sf-product__text {
        font-size: 0.84rem;
    }

    .sf-price {
        font-size: calc(1rem * var(--st-heading-scale));
    }

    .sf-price__tax,
    .sf-price__unit {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.7rem;
    }

    .sf-product__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }

    .sf-product__actions .sf-btn {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.55rem 0.5rem;
        font-size: 0.8rem;
    }

    .storefront-root[data-cards="overlay"] .sf-product__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storefront-root[data-cards="overlay"] .sf-product__actions > :only-child {
        grid-column: 1 / -1;
    }

    .storefront-root[data-cards="overlay"] .sf-product__actions .sf-btn {
        padding-inline: 0.3rem;
        font-size: 0.72rem;
    }

    .sf-notice {
        align-items: stretch;
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .sf-notice .sf-btn {
        min-height: 2.75rem;
    }

    .sf-cart-summary {
        display: none;
    }

    .sf-mobile-cart-dock {
        position: fixed;
        right: calc(0.85rem + env(safe-area-inset-right));
        bottom: calc(0.85rem + env(safe-area-inset-bottom));
        left: calc(0.85rem + env(safe-area-inset-left));
        z-index: 70;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.7rem;
        min-height: 3.65rem;
        padding: 0.55rem 0.8rem;
        border: 1px solid color-mix(in srgb, var(--st-primary-text) 18%, transparent);
        border-radius: max(var(--st-radius), 1rem);
        background: var(--st-primary);
        color: var(--st-primary-text);
        text-decoration: none;
        box-shadow: 0 1.25rem 3rem -1rem rgb(0 0 0 / 0.55);
        transform: translateZ(0);
    }

    .sf-mobile-cart-dock:active {
        transform: scale(0.985);
    }

    .sf-mobile-cart-dock:focus-visible {
        outline: 3px solid var(--st-accent);
        outline-offset: 3px;
    }

    .sf-mobile-cart-dock__icon {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.75rem;
        background: color-mix(in srgb, var(--st-primary-text) 14%, transparent);
    }

    .sf-mobile-cart-dock__icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .sf-mobile-cart-dock__icon span {
        position: absolute;
        top: -0.2rem;
        right: -0.25rem;
        display: inline-grid;
        place-items: center;
        min-width: 1.15rem;
        height: 1.15rem;
        padding-inline: 0.2rem;
        border-radius: 999px;
        background: var(--st-accent);
        color: var(--st-text);
        font-size: 0.62rem;
        font-weight: 700;
    }

    .sf-mobile-cart-dock__label {
        overflow: hidden;
        font-size: 0.9rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sf-mobile-cart-dock > strong {
        font-family: var(--st-font-heading);
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .storefront-root[data-layout="list"][data-columns] .sf-product,
    .storefront-root[data-layout="list"][data-columns] .sf-product__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-root[data-layout="list"][data-columns] .sf-price,
    .storefront-root[data-layout="list"][data-columns] .sf-product__actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
        margin-top: var(--st-gap);
    }

    .sf-footer {
        padding-block: 2rem;
    }

    .sf-footer__links {
        gap: 0.75rem 1.15rem;
    }

    .sf-mor {
        padding-block: 1rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 380px) {
    .storefront-root[data-cart-display="iconandtext"] .sf-nav__cart-label {
        display: none;
    }

    .sf-brand__name {
        font-size: 0.88rem;
    }

    .storefront-root[data-layout="splitcards"] .sf-product--with-media {
        grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
    }

    .sf-mobile-cart-dock {
        gap: 0.5rem;
        padding-inline: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-btn {
        transition: none;
    }
}