:root {
    --store-bg: #f6f6f6;
    --store-surface: #ffffff;
    --store-subtle: #f2f2f2;
    --store-text: #171717;
    --store-muted: #6b6b6b;
    --store-line: #e3e3e3;
    --store-line-strong: #c9c9c9;
    --store-black: #0a0a0a;
    --store-blue: #2563eb;
    --store-green: #16733a;
    --store-red: #c92929;
    --store-warning: #946200;
    --store-radius: 6px;
    --store-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --store-speed: 180ms;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--store-bg);
    color: var(--store-text);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

a,
button,
input,
select,
textarea,
summary {
    transition: color var(--store-speed) var(--store-ease), background-color var(--store-speed) var(--store-ease), border-color var(--store-speed) var(--store-ease), opacity var(--store-speed) var(--store-ease), transform var(--store-speed) var(--store-ease);
}

:focus-visible {
    outline: 2px solid var(--store-blue);
    outline-offset: 2px;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
video {
    max-width: 100%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.store-page {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.store-header {
    position: sticky;
    z-index: 30;
    top: 0;
    background: var(--store-black);
    color: #fff;
}

.store-header__inner {
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 22px;
}

.store-menu-button {
    justify-self: start;
}

.store-menu-button > img {
    width: 19px;
    height: 19px;
}

.store-brand {
    /* The logo is the full lockup, 3.84:1, so the box follows the artwork
       instead of forcing it into a square. The header grid is 1fr auto 1fr,
       so a wider middle column still sits centred. */
    width: auto;
    height: 40px;
    display: grid;
    place-items: center;
}

.store-brand > img {
    width: auto;
    height: 30px;
    display: block;
    object-fit: contain;
    transition: opacity var(--store-speed) var(--store-ease);
}

.store-brand:hover > img {
    opacity: 0.78;
}

.store-menu-search input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #343434;
    border-radius: 5px;
    outline: 0;
    background: #171717;
    color: #fff;
    font-size: 11px;
}

.store-menu-search input::placeholder {
    color: #777;
}

.store-menu-search input:focus {
    border-color: #666;
}

.header-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.header-icon:hover {
    background: #1f1f1f;
}

.header-icon > img {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);
    opacity: 0.86;
}

.store-header__actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 1px;
}

.header-cart > span {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 8px;
    font-weight: 750;
}

.header-cart > span[hidden] {
    display: none;
}


.store-menu-layer {
    position: fixed;
    z-index: 60;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.store-menu-layer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.store-menu-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms var(--store-ease);
}

.store-menu-layer.is-open .store-menu-backdrop {
    opacity: 1;
}

.store-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(320px, calc(100vw - 28px));
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    background: #101010;
    color: #fff;
    transform: translateX(-100%);
    transition: transform 240ms var(--store-ease);
}

.store-menu-layer.is-open .store-menu-panel {
    transform: translateX(0);
}

.store-menu-panel__head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #a5a5a5;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-menu-search {
    margin-bottom: 10px;
}

.store-menu-nav {
    display: grid;
    padding: 3px 0 10px;
}

.store-menu-nav a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 8px;
    border-radius: 4px;
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
}

.store-menu-nav a:hover,
.store-menu-nav a.is-active {
    background: #1e1e1e;
    color: #fff;
}

.store-menu-nav a.is-active::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    content: '';
}

.store-menu-nav__tree {
    display: grid;
    gap: 3px;
    margin: -2px 0 5px 8px;
    padding: 3px 0 4px 10px;
    border-left: 1px solid #2b2b2b;
}

.store-menu-nav__tree > span {
    padding: 2px 7px;
    color: #666;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-menu-nav__tree > div {
    display: grid;
}

.store-menu-nav__tree a {
    min-height: 30px;
    padding: 0 7px;
    color: #858585;
    font-size: 10px;
    font-weight: 550;
}

.store-menu-nav__tree a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-menu-nav__tree a > small {
    margin-left: auto;
    color: #666;
    font-size: 8px;
    font-variant-numeric: tabular-nums;
}

.store-menu-nav__tree a.is-active::after {
    display: none;
}

.store-menu-tools {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #292929;
}

.store-menu-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
}

.store-menu-account,
.store-menu-logout button {
    min-height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
}

.store-menu-account:hover,
.store-menu-account.is-active,
.store-menu-logout button:hover {
    background: #1e1e1e;
    color: #fff;
}

.store-menu-account img,
.store-menu-logout img {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

.store-menu-logout {
    margin: 0;
}

.store-menu-account-row .store-menu-logout button {
    width: auto;
}

.store-menu-language {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.store-menu-language a {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 4px;
    background: #171717;
    color: #777;
    font-size: 9px;
    font-weight: 650;
}

.store-menu-language a:hover,
.store-menu-language a.is-active {
    background: #242424;
    color: #fff;
}

.store-menu-language img {
    width: 15px;
    height: 10px;
    display: block;
    object-fit: cover;
}

.store-cart-layer {
    position: fixed;
    z-index: 61;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.store-cart-layer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.store-cart-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms var(--store-ease);
}

.store-cart-layer.is-open .store-cart-backdrop {
    opacity: 1;
}

.store-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(380px, calc(100vw - 28px));
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--store-surface);
    color: var(--store-text);
    transform: translateX(100%);
    transition: transform 240ms var(--store-ease);
}

.store-cart-layer.is-open .store-cart-panel {
    transform: translateX(0);
}

.store-cart-panel__head {
    min-height: 54px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--store-line);
}

.store-cart-panel__head strong {
    font-size: 12px;
}

.store-cart-panel .header-icon:hover,
.store-size-panel .header-icon:hover {
    background: var(--store-subtle);
}

.store-cart-panel .header-icon > img,
.store-size-panel .header-icon > img {
    filter: none;
    opacity: 0.72;
}

.store-cart-panel__body {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    transition: opacity var(--store-speed) var(--store-ease);
}

.store-cart-panel__body.is-updating {
    pointer-events: none;
    opacity: 0.55;
}

.store-cart-panel__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: auto;
    color: var(--store-muted);
    font-size: 9px;
}

.store-cart-panel__loading > span {
    width: 12px;
    height: 12px;
    border: 1px solid var(--store-line-strong);
    border-top-color: var(--store-black);
    border-radius: 50%;
    animation: store-spin 700ms linear infinite;
}

.cart-drawer-form {
    width: 100%;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.cart-drawer-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cart-drawer-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
}

.cart-drawer-item + .cart-drawer-item {
    border-top: 1px solid var(--store-line);
}

.cart-drawer-item__image {
    width: 60px;
    height: 75px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--store-subtle);
}

.cart-drawer-item__image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cart-drawer-item__info {
    min-width: 0;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-drawer-item__head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.cart-drawer-item__head > a {
    min-width: 0;
    flex: 1 1 auto;
}

.cart-drawer-item__head > a strong {
    overflow: hidden;
    display: block;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-drawer-item__variant,
.cart-drawer-item__price del {
    color: var(--store-muted);
    font-size: 8px;
}

.cart-drawer-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.cart-drawer-item__price {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.cart-drawer-item__price strong {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-drawer-item .cart-quantity {
    width: 78px;
    flex: 0 0 auto;
}

.cart-drawer-item .cart-remove {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.cart-drawer-summary {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--store-line);
    background: var(--store-surface);
}

.cart-drawer-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
}

.cart-drawer-summary > div strong {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.cart-drawer-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    margin: auto;
    padding: 20px;
    color: var(--store-muted);
    font-size: 10px;
    text-align: center;
}

.cart-drawer-empty > img {
    width: 20px;
    height: 20px;
    opacity: 0.55;
}

.cart-drawer-empty > strong {
    color: var(--store-text);
    font-size: 11px;
}

body.store-menu-open,
body.store-cart-open {
    overflow: hidden;
}

.store-main {
    --store-page-gutter: 22px;
    width: 100%;
    min-height: 0;
    flex: 1 0 auto;
    padding: 0 var(--store-page-gutter) 28px;
}

.store-section {
    width: 100%;
    padding-top: 24px;
}

.store-section--first {
    width: 100%;
    padding-top: 22px;
}

/* Order page: the stage the order is at, as a drawing beside two lines. */
.order-stage {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    padding: 10px 18px 10px 10px;
    border-radius: 8px;
    background: var(--store-subtle);
}

.order-stage__figure {
    width: 100%;
    aspect-ratio: 5 / 4;
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.order-stage__text {
    display: grid;
    gap: 4px;
}

.order-stage__text strong {
    color: var(--store-text);
    font-size: 14px;
    letter-spacing: -0.01em;
}

.order-stage__text span {
    color: var(--store-muted);
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .order-stage {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
    }
}

.store-section-heading,
.catalog-heading,
.account-heading,
.order-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.store-section-heading h2,
.catalog-heading h1,
.account-heading h1,
.order-detail-heading h1,
.legal-page h1 {
    margin: 0;
    color: var(--store-text);
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.store-section-heading p,
.catalog-heading p {
    margin: 2px 0 0;
    color: var(--store-muted);
    font-size: 11px;
}

.store-section-heading > a,
.store-section-heading > button,
.order-detail-heading > div > a {
    color: var(--store-blue);
    font-size: 10px;
    font-weight: 650;
}

.store-section-heading > a,
.store-section-heading > button {
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 9px;
}

.store-section-heading > a img {
    width: 12px;
    height: 12px;
    opacity: 0.58;
    transition: opacity 320ms var(--store-ease), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.store-section-heading > a:hover {
    border-color: var(--store-text);
}

.store-section-heading > a:hover img {
    opacity: 1;
    transform: translateX(2px);
}

.hero-grid {
    width: calc(100% + (var(--store-page-gutter) * 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    gap: 8px;
    margin-left: calc(var(--store-page-gutter) * -1);
}

.store-hero {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
    background: #222;
    opacity: 0;
    pointer-events: none;
    transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.store-hero[hidden] {
    display: none;
}

.store-hero.is-active {
    z-index: 2;
    opacity: 1;
}

.store-hero.is-leaving {
    z-index: 1;
    opacity: 0;
}

.store-hero img,
.store-hero video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Floating offers: the black ticket button itself grows into the panel
   (clip-path from the button's rect to the full panel), then shrinks back. */
.promo-floating {
    --promo-btn: 38px;
    --promo-speed: 340ms;
    position: fixed;
    z-index: 50;
    right: 14px;
    top: 50%;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.promo-floating__trigger {
    position: relative;
    z-index: 2;
    width: var(--promo-btn);
    height: var(--promo-btn);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--store-black);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    transition: transform var(--store-speed) var(--store-ease), opacity 120ms linear var(--promo-speed), background-color var(--store-speed);
}

.promo-floating__trigger:hover {
    background: #292929;
    transform: translateX(-2px);
}

.promo-floating.is-open .promo-floating__trigger {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms linear;
}

.promo-floating__trigger > img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.promo-floating__trigger > span {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--store-green);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.promo-floating__panel {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    width: min(340px, calc(100vw - 28px));
    max-height: min(460px, calc(100vh - 36px));
    overflow: hidden;
    border-radius: 6px;
    background: var(--store-black);
    transform: translateY(-50%);
    visibility: hidden;
    clip-path: inset(calc(50% - (var(--promo-btn) / 2)) 0 calc(50% - (var(--promo-btn) / 2)) calc(100% - var(--promo-btn)) round 4px);
    transition:
        clip-path var(--promo-speed) var(--store-ease),
        background-color 200ms linear 120ms,
        visibility 0s linear var(--promo-speed);
}

.promo-floating__panel > * {
    opacity: 0;
    transition: opacity 120ms linear;
}

.promo-floating.is-open .promo-floating__panel {
    visibility: visible;
    background: var(--store-surface);
    box-shadow: inset 0 0 0 1px var(--store-line-strong);
    clip-path: inset(0 0 0 0 round 6px);
    transition:
        clip-path var(--promo-speed) var(--store-ease),
        background-color 180ms linear 110ms,
        visibility 0s;
}

.promo-floating.is-open .promo-floating__panel > * {
    opacity: 1;
    transition: opacity 200ms linear 180ms;
}

.promo-floating__panel > header {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 7px 6px 10px;
    border-bottom: 1px solid var(--store-line);
    background: #fafafa;
}

.promo-floating__panel > header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-floating__panel > header > div > img {
    width: 15px;
    height: 15px;
    opacity: 0.7;
}

.promo-floating__panel > header span {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.promo-floating__panel > header strong {
    font-size: 11px;
}

.promo-floating__panel > header small {
    color: var(--store-muted);
    font-size: 8px;
}

.promo-floating__panel > header button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.promo-floating__panel > header button:hover {
    background: var(--store-subtle);
}

.promo-floating__panel > header button img {
    width: 13px;
    height: 13px;
}

.promo-floating__list {
    max-height: min(416px, calc(100vh - 80px));
    overflow-y: auto;
    padding: 5px;
}

.promo-floating__group + .promo-floating__group {
    margin-top: 6px;
}

.promo-floating__group > strong {
    display: block;
    padding: 3px 5px 5px;
    color: var(--store-muted);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.promo-floating__item {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 9px;
    border-radius: 4px;
    background: var(--store-subtle);
}

.promo-floating__item + .promo-floating__item {
    margin-top: 4px;
}

.promo-floating__item > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.promo-floating__item strong {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-floating__item span {
    flex: 0 0 auto;
    color: var(--store-green);
    font-size: 9px;
    font-weight: 700;
}

.promo-floating__item small {
    display: block;
    color: var(--store-muted);
    font-size: 8px;
    line-height: 1.45;
}

.collection-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.collection-showcase {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.collection-showcase__heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.collection-showcase__heading > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.collection-showcase__heading strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-showcase__heading small {
    flex: 0 0 auto;
    color: var(--store-muted);
    font-size: 9px;
}

.collection-showcase__heading > a {
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 9px;
    font-weight: 650;
}

.collection-showcase__heading > a:hover {
    border-color: var(--store-text);
}

.collection-showcase__heading > a > img {
    width: 12px;
    height: 12px;
    opacity: 0.58;
    transition: opacity 320ms var(--store-ease), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-showcase__heading > a:hover > img {
    opacity: 1;
    transform: translateX(2px);
}

.collection-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: var(--store-subtle);
}

.collection-showcase__banner {
    width: clamp(220px, 30vw, 380px);
    height: auto;
    flex: 0 0 clamp(220px, 30vw, 380px);
    min-height: 240px;
    scroll-snap-align: start;
}

.collection-card__media {
    position: absolute;
    inset: 0;
    display: block;
}

.collection-card__media > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-card:hover .collection-card__media > img {
    transform: scale(1.025);
}

.collection-products-rail {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 5px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--store-line-strong) transparent;
}

.collection-products-rail::-webkit-scrollbar {
    height: 4px;
}

.collection-products-rail::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--store-line-strong);
}

.collection-products-rail > .product-card {
    width: calc(25vw - 18.5px);
    flex: 0 0 calc(25vw - 18.5px);
    scroll-snap-align: start;
}

.collection-products-rail .product-card__media {
    aspect-ratio: 4 / 5;
}

.collection-products-rail .product-card__media > img {
    height: 100%;
    object-fit: contain;
}

.category-grid a:hover {
    background: var(--store-subtle);
    transform: translateY(-1px);
}

.category-grid strong {
    font-size: 11px;
}

.category-grid small {
    color: var(--store-muted);
    font-size: 9px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.category-grid a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 5px;
    background: var(--store-surface);
}

.category-grid a > span:first-child {
    display: grid;
    gap: 2px;
}

.category-grid a > img {
    width: 14px;
    height: 14px;
    opacity: 0.42;
    transition: opacity var(--store-speed) var(--store-ease), transform var(--store-speed) var(--store-ease);
}

.category-grid a:hover > img {
    opacity: 0.72;
    transform: translateX(2px);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.product-card {
    min-width: 0;
    background: transparent;
    transition: transform var(--store-speed) var(--store-ease);
}

.product-card:hover {
    transform: translateY(-2px);
}

.product-card__media-wrap {
    position: relative;
}

.product-card__media {
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: var(--store-subtle);
}

.product-card__media > img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.product-card__media--empty {
    aspect-ratio: 4 / 4.6;
}

.product-card__quick-add {
    display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
    .product-card__quick-add {
        position: absolute;
        right: 6px;
        bottom: 6px;
        left: 6px;
        display: grid;
        gap: 5px;
        padding: 7px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.96);
        opacity: 0;
        pointer-events: none;
        transform: translateY(5px);
        transition: opacity var(--store-speed) var(--store-ease), transform var(--store-speed) var(--store-ease);
    }

    .product-card:hover .product-card__quick-add,
    .product-card:focus-within .product-card__quick-add {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .product-card__quick-add > span {
        color: var(--store-muted);
        font-size: 8px;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .product-card__quick-add > div {
        max-height: 60px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        overflow-y: auto;
    }

    .product-card__quick-form {
        display: contents;
    }

    .product-card__quick-form button {
        min-width: 29px;
        height: 26px;
        padding: 0 7px;
        border: 1px solid var(--store-line-strong);
        border-radius: 4px;
        background: var(--store-surface);
        color: var(--store-text);
        cursor: pointer;
        font-size: 9px;
        font-weight: 650;
    }

    .product-card__quick-form button:hover,
    .product-card__quick-form button:focus-visible {
        border-color: var(--store-black);
        outline: 0;
        background: var(--store-black);
        color: #fff;
    }
}

.media-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--store-subtle);
}

.media-placeholder > img {
    width: 26px;
    height: 26px;
    opacity: 0.34;
}

.product-card__body {
    display: grid;
    gap: 4px;
    padding: 9px 2px 2px;
}

.product-card__context {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.product-card__category {
    overflow: hidden;
    color: var(--store-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--store-muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.product-rating > img {
    width: 11px;
    height: 11px;
    filter: invert(42%) sepia(80%) saturate(640%) hue-rotate(359deg) brightness(91%) contrast(92%);
}

.product-rating--card {
    flex: 0 0 auto;
    font-size: 8px;
}

.product-rating--card > img {
    width: 10px;
    height: 10px;
}

.product-rating--detail {
    color: var(--store-text);
    font-weight: 650;
}

.product-card__name {
    overflow: hidden;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.product-card__meta strong {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.promo-price {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-variant-numeric: tabular-nums;
}

.promo-price del,
.product-price del {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 450;
    text-decoration-thickness: 1px;
}

.promo-price--card {
    display: grid;
    gap: 0;
}

.promo-price--card del {
    font-size: 8px;
}

.product-card__availability {
    color: var(--store-muted);
    font-size: 8px;
    white-space: nowrap;
}

.product-card__meta .is-unavailable {
    color: var(--store-red);
}

.catalog-heading {
    align-items: end;
}

.collection-features {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -2px 0 14px;
    padding: 7px 9px;
    border-radius: 5px;
    background: var(--store-subtle);
}

.collection-features__label {
    flex: 0 0 auto;
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.collection-features ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.collection-features li {
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 9px;
    font-weight: 600;
}

.catalog-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalog-search input {
    width: 240px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    font-size: 11px;
}

.catalog-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: -4px 0 12px;
}

.catalog-sort label {
    color: var(--store-muted);
    font-size: 11px;
}

.catalog-sort select {
    height: 30px;
    padding: 0 26px 0 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font-family: inherit;
    font-size: 11px;
}

.catalog-sort select:focus {
    border-color: var(--store-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.catalog-search input::placeholder {
    color: #919191;
}

.catalog-search input:focus,
.store-form input:focus,
.store-form textarea:focus,
.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus,
.voucher-selector select:focus,
.cart-quantity input:focus {
    border-color: var(--store-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.store-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--store-black);
    border-radius: 4px;
    background: var(--store-black);
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}

/* [hidden] is a UA rule and loses to the display above, so a button marked
   hidden would still be drawn. Shared component, so the companion belongs
   here rather than at each call site. */
.store-button[hidden] {
    display: none;
}

.store-button > img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.store-button:hover {
    background: #292929;
    transform: translateY(-1px);
}

.store-button:active {
    transform: translateY(0);
}

.store-button:disabled {
    border-color: var(--store-line-strong);
    background: #aaa;
    cursor: not-allowed;
    transform: none;
}

.store-button--secondary {
    border-color: var(--store-line-strong);
    background: var(--store-surface);
    color: var(--store-text);
}

.store-button--secondary:hover {
    background: var(--store-subtle);
}

.store-button--secondary > img {
    filter: none;
}

.store-button--icon {
    width: 32px;
    min-width: 32px;
    padding: 0;
}

.store-button--block {
    width: 100%;
}

.store-empty-state {
    min-height: 170px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 22px;
    border-radius: var(--store-radius);
    background: var(--store-surface);
    text-align: center;
}

.store-empty-state > img {
    width: 23px;
    height: 23px;
    margin-bottom: 3px;
    opacity: 0.42;
}

.store-empty-state strong {
    font-size: 12px;
}

.store-empty-state span {
    margin-bottom: 6px;
    color: var(--store-muted);
    font-size: 10px;
}

/* The photo is sized by the screen, not the column: at most a screen tall,
   as wide as its 4:5 shape allows, so the whole garment shows at once and
   the buy box sits beside it. Photo and info stay together in the middle. */
.product-detail {
    display: grid;
    /* max-content, not auto: the gallery may not be squeezed narrower than
       its photo (the info column gives way instead), or the photo spills
       over the title and price. */
    grid-template-columns: max-content minmax(320px, 460px);
    justify-content: center;
    align-items: start;
    gap: 32px;
}

.product-info {
    min-width: 0;
}

.product-gallery {
    /* A screen tall at most, and never wider than the room the info column
       leaves: page gutters 44 + gap 32 + info min 320 + thumbs 76 + 18 spare. */
    --gallery-height: min(calc(100vh - 110px), 820px, calc((100vw - 490px) * 1.25));
    position: sticky;
    top: 70px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.product-gallery__main {
    flex: none;
    height: var(--gallery-height);
    aspect-ratio: 4 / 5;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--store-radius);
    background: var(--store-subtle);
}

.product-gallery__main > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* More than one photo: a strip of thumbnails down the left of the main one. */
.product-gallery__thumbs {
    order: -1;
    flex: none;
    width: 68px;
    max-height: var(--gallery-height);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    scrollbar-width: none;
}

.product-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.product-gallery__thumbs button {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--store-subtle);
    cursor: pointer;
    opacity: 0.72;
    transition: border-color var(--store-speed) var(--store-ease), opacity var(--store-speed) var(--store-ease);
}

.product-gallery__thumbs button:hover {
    opacity: 1;
}

.product-gallery__thumbs button.is-active {
    border-color: var(--store-black);
    opacity: 1;
}

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

.product-info {
    padding: 4px 0;
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--store-muted);
    font-size: 9px;
}

.product-breadcrumb a:hover,
.product-links a:hover {
    color: var(--store-blue);
}

.product-info h1 {
    margin: 10px 0 5px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.product-info__rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}

.product-info__rating > a {
    color: var(--store-muted);
    font-size: 9px;
}

.product-info__rating > a:hover {
    color: var(--store-text);
}

.product-price {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.product-price del {
    font-size: 11px;
}

.product-price [hidden] {
    display: none;
}

.product-description {
    max-width: 62ch;
    margin-top: 14px;
    color: #4f4f4f;
    font-size: 11px;
    line-height: 1.65;
}

.product-description p {
    margin: 0;
}

.product-info > .collection-features {
    margin: 12px 0 0;
}

.product-reviews {
    scroll-margin-top: 68px;
}

.product-reviews__heading {
    align-items: center;
}

.product-review-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.product-review-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
}

.product-review-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.product-review-card__head > div {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.product-review-card__head strong {
    font-size: 10px;
}

.product-review-card__head small,
.product-review-card__head time {
    color: var(--store-muted);
    font-size: 8px;
}

.reviewer-name {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.reviewer-name img {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
}

.product-review-card > p,
.product-reviews__empty {
    margin: 0;
    color: #4f4f4f;
    font-size: 10px;
    line-height: 1.55;
}

.product-reviews__empty {
    color: var(--store-muted);
}

.home-reviews {
    padding-bottom: 2px;
}

.home-statements-section,
.home-about-section {
    padding-bottom: 2px;
}

.home-statements {
    min-width: 0;
    min-height: 96px;
    display: grid;
    align-items: center;
    padding: 16px 2px;
    border-top: 1px solid var(--store-line);
    border-bottom: 1px solid var(--store-line);
}

.home-about-section .store-section-heading {
    margin-bottom: 8px;
}

.home-about-content {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 9px 20px;
    padding: 12px 2px;
    border-top: 1px solid var(--store-line);
    border-bottom: 1px solid var(--store-line);
}

.home-about__text {
    display: grid;
    justify-items: start;
    gap: 9px;
}

/* A moving line figure from size-guide-figures.js, plated in the panel grey. */
.figure-stage {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 8px;
    background: var(--store-subtle);
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.figure-stage > svg {
    max-width: none;
    height: 100%;
}

@media (max-width: 560px) {
    .home-about-content {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}

.home-about-content p {
    max-width: 900px;
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.65;
}

.home-about-more {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 9px;
    font-weight: 650;
}

.home-about-more:hover {
    border-color: var(--store-black);
}

.home-statement {
    width: 100%;
    max-width: 900px;
    grid-area: 1 / 1;
    justify-self: center;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translateY(4px);
    color: var(--store-text);
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-align: center;
    transition: opacity 500ms var(--store-ease), filter 500ms var(--store-ease), transform 500ms var(--store-ease), visibility 500ms var(--store-ease);
}

.home-statement.is-active {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0);
}

.home-statement.is-active.is-leaving {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(-4px) scale(0.985);
}

.home-statement__completed {
    color: var(--store-text);
}

.home-statement__current {
    display: inline-block;
    color: #b1b1b1;
    white-space: nowrap;
}

.home-statement__letter {
    display: inline-block;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(5px) scale(0.96);
    animation: statement-letter-in 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, filter, transform;
}

.home-statement__word {
    display: inline-block;
    animation: statement-word-complete 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-statement__current::after {
    width: 1px;
    height: 0.9em;
    display: inline-block;
    margin-left: 2px;
    background: var(--store-text);
    content: '';
    vertical-align: -0.08em;
    animation: statement-caret 760ms steps(1, end) infinite;
}

.home-statement.is-complete .home-statement__current::after {
    opacity: 0;
    animation: none;
}

.home-review-stage {
    display: grid;
    overflow: hidden;
}

.home-review-slide {
    min-width: 0;
    grid-area: 1 / 1;
    align-self: stretch;
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 500ms var(--store-ease), filter 500ms var(--store-ease), transform 500ms var(--store-ease), visibility 500ms var(--store-ease);
}

.home-review-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0);
    pointer-events: auto;
}

.home-review-slide.is-active.is-leaving {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(-4px) scale(0.985);
    pointer-events: none;
}

.home-review-slide > p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.review-card__product {
    width: fit-content;
    display: block;
    margin-top: 7px;
    color: var(--store-blue);
    font-size: 9px;
    font-weight: 650;
}

.review-card__product--snapshot {
    color: var(--store-muted);
}

.product-buy-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.variant-picker-block {
    display: grid;
    gap: 6px;
}

/* The size label and the size chart link share one line above the swatches. */
.variant-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.variant-picker-head > span {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.variant-picker {
    display: grid;
    gap: 6px;
    padding: 0;
    border: 0;
}

.variant-picker legend,
.product-buy-row label > span,
.store-form label > span,
.checkout-form label > span,
.voucher-selector label > span,
.cart-quantity > span {
    display: block;
    margin-bottom: 5px;
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.variant-picker > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.variant-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.variant-option span {
    min-width: 38px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: color var(--store-speed) var(--store-ease), background-color var(--store-speed) var(--store-ease), border-color var(--store-speed) var(--store-ease), transform var(--store-speed) var(--store-ease);
}

.variant-option:not(.is-disabled):hover span {
    border-color: #8b8b8b;
    transform: translateY(-1px);
}

.variant-option input:checked + span {
    border-color: var(--store-black);
    background: var(--store-black);
    color: #fff;
}

.variant-option.is-disabled span {
    border-color: var(--store-line);
    background: var(--store-subtle);
    color: #aaa;
    text-decoration: line-through;
    cursor: not-allowed;
}

.product-buy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 7px;
}

.product-buy-row input,
.cart-quantity input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    font-size: 11px;
}

.product-stock {
    color: var(--store-muted);
    font-size: 9px;
}

.product-delivery {
    position: relative;
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-subtle);
}

.product-delivery [hidden] {
    display: none;
}

.product-delivery__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.product-delivery__heading strong {
    font-size: 11px;
}

.product-delivery__heading span {
    color: var(--store-muted);
    font-size: 9px;
}

.product-delivery__search {
    position: relative;
}

.product-delivery__search > img {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 13px;
    height: 13px;
    opacity: 0.58;
    pointer-events: none;
}

.product-delivery__search input {
    width: 100%;
    height: 32px;
    padding: 0 32px 0 29px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 10px;
}

.product-delivery__search input:focus {
    border-color: var(--store-black);
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.08);
}

.product-delivery__spinner {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 13px;
    height: 13px;
    border: 1.5px solid #d2d2d2;
    border-top-color: var(--store-black);
    border-radius: 50%;
    animation: store-spin 600ms linear infinite;
}

.product-delivery__options {
    position: absolute;
    z-index: 12;
    top: 36px;
    right: 0;
    left: 0;
    max-height: 210px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
}

.product-delivery__option {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--store-text);
    text-align: left;
    cursor: pointer;
}

.product-delivery__option:hover,
.product-delivery__option:focus-visible {
    outline: 0;
    background: var(--store-subtle);
}

.product-delivery__option strong {
    font-size: 10px;
    font-weight: 600;
}

.product-delivery__option span {
    color: var(--store-muted);
    font-size: 8px;
}

.product-delivery__status {
    min-height: 13px;
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
}

.product-delivery__status:empty {
    display: none;
}

.product-delivery__result {
    display: grid;
    gap: 1px;
    padding: 7px 8px;
    border-radius: 4px;
    background: var(--store-surface);
}

.product-delivery__result strong {
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.25;
}

.product-delivery__result [data-delivery-detail] {
    color: var(--store-muted);
    font-size: 9px;
}

.product-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--store-line);
    font-size: 9px;
}

.product-links > span {
    margin-right: 4px;
    color: var(--store-muted);
}

.product-links a {
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--store-subtle);
}

.cart-layout,
.checkout-layout,
.order-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.cart-panel,
.checkout-panel,
.account-panel,
.order-detail-panel,
.order-summary {
    min-width: 0;
    border-radius: var(--store-radius);
    background: var(--store-surface);
}

.cart-panel {
    overflow: hidden;
}

.cart-layout__main {
    min-width: 0;
    display: grid;
    gap: 9px;
}

.cart-continue {
    width: max-content;
    color: var(--store-blue);
    font-size: 10px;
    font-weight: 650;
}

.cart-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(140px, 1fr) 74px 100px auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    transition: background-color var(--store-speed) var(--store-ease);
}

.cart-item:hover {
    background: #fafafa;
}

.cart-item + .cart-item {
    border-top: 1px solid var(--store-line);
}

.cart-item__image {
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--store-subtle);
}

.cart-item__image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cart-item__info {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cart-item__info strong {
    overflow: hidden;
    display: block;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-item__info span,
.cart-item__info small,
.cart-item__price > span:not(.promo-price) {
    color: var(--store-muted);
    font-size: 9px;
}

.cart-item__info small {
    color: var(--store-green);
}

.cart-quantity {
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: 24px minmax(18px, 1fr) 24px;
    overflow: hidden;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
}

.cart-quantity button {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--store-black);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.cart-quantity button:hover:not(:disabled) {
    background: var(--store-subtle);
}

.cart-quantity button:disabled {
    color: #b8b8b8;
    cursor: not-allowed;
}

.cart-quantity input[data-cart-quantity] {
    width: 100%;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.cart-quantity input[data-cart-quantity]::-webkit-inner-spin-button,
.cart-quantity input[data-cart-quantity]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cart-item__price {
    display: grid;
    justify-items: end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.cart-item__price strong {
    font-size: 11px;
}

.cart-item__price .promo-price {
    justify-content: end;
}

.cart-remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--store-red);
    cursor: pointer;
}

.cart-remove:hover {
    background: #fff0f0;
}

.cart-remove img {
    width: 14px;
    height: 14px;
    filter: invert(20%) sepia(79%) saturate(3358%) hue-rotate(348deg) brightness(90%) contrast(82%);
}

.hidden-form {
    display: none;
}

.order-summary {
    position: sticky;
    top: 70px;
    padding: 13px;
    transition: transform var(--store-speed) var(--store-ease);
}

.order-summary h2,
.order-detail-panel h2 {
    margin: 0 0 12px;
    font-size: 13px;
}

.order-summary dl {
    display: grid;
    gap: 7px;
    margin: 0 0 12px;
}

.order-summary dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--store-muted);
    font-size: 10px;
}

.order-summary dd {
    margin: 0;
    color: var(--store-text);
    font-variant-numeric: tabular-nums;
}

.order-summary .is-discount dd {
    color: var(--store-green);
}

.order-summary dl > .order-summary__total {
    margin-top: 3px;
    padding-top: 9px;
    border-top: 1px solid var(--store-line);
    color: var(--store-text);
    font-size: 12px;
    font-weight: 700;
}

.order-summary__submit {
    width: 100%;
}

.order-summary__note {
    display: block;
    margin-top: 7px;
    color: var(--store-muted);
    font-size: 9px;
    text-align: center;
}

.checkout-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.checkout-main {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.checkout-panel,
.account-panel,
.order-detail-panel {
    padding: 13px;
}

.checkout-panel .store-section-heading,
.account-panel .store-section-heading {
    margin-bottom: 10px;
}

.checkout-service-panel[hidden] {
    display: none;
}

.checkout-empty-note {
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
}

.voucher-selector select,
.store-form input,
.store-form textarea,
.checkout-form input,
.checkout-form textarea,
.checkout-form select {
    width: 100%;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 11px;
    transition: border-color var(--store-speed) var(--store-ease), background-color var(--store-speed) var(--store-ease), box-shadow var(--store-speed) var(--store-ease);
}

.voucher-selector select,
.store-form input,
.checkout-form input,
.checkout-form select {
    height: 34px;
    padding: 0 9px;
}

.store-form textarea,
.checkout-form textarea {
    min-height: 82px;
    padding: 8px 9px;
    resize: vertical;
}

.checkout-form,
.store-form {
    display: grid;
    gap: 10px;
}

.store-password-field {
    display: grid;
}

.store-password-control {
    position: relative;
}

.store-form .store-password-control input {
    padding-right: 36px;
}

.store-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.store-password-toggle:hover {
    background: var(--store-subtle);
}

.store-password-toggle:focus-visible {
    outline: 2px solid var(--store-blue);
    outline-offset: 1px;
}

.store-password-toggle img {
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.62;
}

.checkout-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-form__address,
.checkout-shipping,
.checkout-form .store-button,
.checkout-form > small {
    grid-column: 1 / -1;
}

.checkout-shipping {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 10px;
    border-radius: 5px;
    background: var(--store-subtle);
}

.checkout-shipping [hidden],
.order-summary [hidden] {
    display: none;
}

.checkout-shipping__fields {
    display: grid;
    gap: 7px;
}

.checkout-address-picker {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.checkout-address-picker__label {
    font-size: 10px;
    font-weight: 650;
}

.checkout-address-picker__trigger {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    text-align: left;
    cursor: pointer;
}

.checkout-address-picker__trigger:hover {
    border-color: var(--store-black);
}

.checkout-address-picker__trigger > span {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 1px;
}

.checkout-address-picker__trigger strong,
.checkout-address-picker__trigger small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-address-picker__trigger strong {
    font-size: 10px;
    font-weight: 650;
}

.checkout-address-picker__trigger small {
    color: var(--store-muted);
    font-size: 8px;
}

.checkout-address-picker__trigger b {
    flex: 0 0 auto;
    color: var(--store-blue);
    font-size: 9px;
    font-weight: 650;
}

.checkout-address-dialog {
    width: min(440px, calc(100vw - 28px));
    max-height: min(560px, calc(100vh - 40px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--store-line);
    border-radius: 6px;
    background: var(--store-surface);
    color: var(--store-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.checkout-address-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.checkout-address-dialog::backdrop {
    background: rgba(10, 10, 10, 0.38);
}

.checkout-address-dialog__header {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 11px;
    border-bottom: 1px solid var(--store-line);
}

.checkout-address-dialog__header strong {
    flex: 1;
    font-size: 11px;
    font-weight: 650;
}

.checkout-address-dialog__header button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.checkout-address-dialog__header button:hover {
    background: var(--store-subtle);
}

.checkout-address-dialog__header img {
    width: 14px;
    height: 14px;
}

.checkout-address-dialog__list {
    display: grid;
    gap: 2px;
    padding: 5px;
    overflow-y: auto;
}

.checkout-address-dialog__list > button {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--store-text);
    text-align: left;
    cursor: pointer;
}

.checkout-address-dialog__list > button:hover,
.checkout-address-dialog__list > button[aria-current="true"] {
    background: var(--store-subtle);
}

.checkout-address-dialog__list strong {
    font-size: 10px;
    font-weight: 650;
}

.checkout-address-dialog__list span,
.checkout-address-dialog__list small {
    color: var(--store-muted);
    font-size: 8px;
    line-height: 1.4;
}

.checkout-address-dialog__new {
    margin-top: 3px;
    border-top: 1px solid var(--store-line) !important;
    border-radius: 0 0 4px 4px !important;
}

.checkout-shipping__recipient {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.checkout-shipping__destination {
    font-size: 10px;
    font-weight: 650;
}

.checkout-shipping__search {
    position: relative;
}

.checkout-shipping__search > img {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 9px;
    width: 13px;
    height: 13px;
    opacity: 0.58;
    pointer-events: none;
}

.checkout-form .checkout-shipping__search input {
    padding-right: 32px;
    padding-left: 29px;
}

.checkout-shipping__spinner {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 13px;
    height: 13px;
    border: 1.5px solid #d2d2d2;
    border-top-color: var(--store-black);
    border-radius: 50%;
    animation: store-spin 600ms linear infinite;
}

.checkout-shipping__options {
    position: absolute;
    z-index: 12;
    top: 38px;
    right: 0;
    left: 0;
    max-height: 210px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
}

.checkout-shipping__option {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--store-text);
    text-align: left;
    cursor: pointer;
}

.checkout-shipping__option:hover,
.checkout-shipping__option:focus-visible {
    outline: 0;
    background: #fff;
}

.checkout-shipping__option strong {
    font-size: 10px;
    font-weight: 600;
}

.checkout-shipping__option span {
    color: var(--store-muted);
    font-size: 8px;
}

.checkout-shipping__option span[hidden] {
    display: none;
}

.checkout-shipping__status {
    min-height: 12px;
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
}

.checkout-shipping__status:empty {
    display: none;
}

.checkout-shipping__services {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.checkout-shipping__services legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 10px;
    font-weight: 650;
}

.checkout-shipping__services > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.checkout-shipping__service {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid var(--store-line);
    border-radius: 4px;
    background: var(--store-surface);
    cursor: pointer;
}

.checkout-shipping__service input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.checkout-shipping__courier-logo {
    width: 42px;
    height: 20px;
    flex: 0 0 42px;
    box-sizing: border-box;
    margin-right: 2px;
    padding-right: 10px;
    border-right: 1px solid var(--store-line-strong);
    object-fit: contain;
    object-position: left center;
}

.checkout-shipping__services[hidden] {
    display: none;
}

.checkout-shipping__service > span {
    min-width: 0;
    flex: 1;
    display: block;
}

.checkout-shipping__service strong {
    overflow: hidden;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-shipping__service small {
    display: block;
    margin-top: 2px;
    color: var(--store-muted);
    font-size: 8px;
    line-height: 1.2;
}

.checkout-shipping__service > b {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-shipping__service:hover,
.checkout-shipping__service:focus-within,
.checkout-shipping__service.is-active {
    border-color: var(--store-black);
}

.checkout-shipping__service.is-active {
    background: var(--store-subtle);
}

.checkout-shipping__address {
    display: grid;
    gap: 5px;
}

.phone-field > .phone-field__control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}

.phone-field__control input {
    min-width: 0;
    border-radius: 0 4px 4px 0;
}

.phone-field__prefix {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--store-line-strong);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

.phone-field__flag {
    width: 16px;
    flex: 0 0 16px;
    font-size: 13px;
    line-height: 1;
    text-align: center;
}

.store-form .phone-field__prefix input,
.checkout-form .phone-field__prefix input {
    width: 38px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--store-text);
    font-size: 10px;
    font-weight: 650;
    box-shadow: none;
}

.store-form .phone-field__prefix input:focus,
.checkout-form .phone-field__prefix input:focus {
    border: 0;
    box-shadow: none;
}

.checkout-form .store-button {
    justify-self: start;
}

.checkout-form > small {
    color: var(--store-muted);
    font-size: 9px;
}

.checkout-items {
    display: grid;
    gap: 7px;
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--store-line);
}

.checkout-items > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
}

.checkout-items span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-items small {
    display: block;
    color: var(--store-muted);
    font-size: 8px;
}

.promo-price--summary {
    flex: 0 0 auto;
    justify-content: end;
    font-size: 10px;
}

.promo-price--summary del {
    font-size: 8px;
}

.store-alert {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 10px;
}

.store-alert p {
    margin: 0;
}

.store-alert--error {
    background: #fff0f0;
    color: var(--store-red);
}

.signup-email-status {
    min-height: 13px;
    display: block;
    margin-top: 4px;
    color: var(--store-muted);
    font-size: 9px;
}

.signup-email-field.is-valid .signup-email-status {
    color: var(--store-green);
}

.signup-email-field.is-invalid .signup-email-status {
    color: var(--store-red);
}

.signup-email-field.is-invalid input {
    border-color: var(--store-red);
}

.account-auth {
    /* Two panels of equal weight: the brand on the left, the form on the
       right. Capped and centred as one block, and centred in the space the
       header and footer leave. */
    width: 100%;
    max-width: 880px;
    min-height: 62vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    align-items: stretch;
    gap: 0;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

.account-auth__brand {
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: var(--store-radius) 0 0 var(--store-radius);
    background: var(--store-black);
}

.account-auth__logo {
    display: block;
}

.account-auth__logo img {
    width: auto;
    max-width: 100%;
    height: 58px;
    display: block;
    object-fit: contain;
}

.account-auth__panel {
    width: 100%;
    max-width: none;
    padding: 28px 26px;
    border-radius: 0 var(--store-radius) var(--store-radius) 0;
    background: var(--store-surface);
}

.account-auth__panel h1 {
    margin: 12px 0 16px;
    font-size: 17px;
    text-align: center;
}

.account-google-auth {
    display: grid;
    gap: 7px;
    margin-bottom: 9px;
}

.account-google-auth__button {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--store-line-strong);
    border-radius: 5px;
    background: var(--store-surface);
    color: var(--store-text);
    font-size: 10px;
    font-weight: 650;
}

.account-google-auth__button:hover {
    background: var(--store-subtle);
}

.account-google-auth__button img {
    width: 15px;
    height: 15px;
}

.account-google-auth__divider {
    color: var(--store-muted);
    font-size: 8px;
    text-align: center;
}

.account-auth__lead {
    margin: 0 0 4px;
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.account-auth__forgot {
    display: block;
    margin-top: 2px;
    color: var(--store-muted);
    font-size: 10px;
    text-align: center;
    transition: color var(--store-speed) var(--store-ease);
}

.account-auth__forgot:hover {
    color: var(--store-text);
}

.account-auth__panel > p {
    margin: 12px 0 0;
    color: var(--store-muted);
    font-size: 10px;
    text-align: center;
}

.account-auth__panel > p a {
    color: var(--store-blue);
    font-weight: 650;
}

.account-auth__panel > .account-auth__legal {
    max-width: 270px;
    margin: 11px auto 0;
    color: var(--store-muted);
    font-size: 8px;
    line-height: 1.45;
    opacity: 0.78;
}

.account-auth__legal a {
    color: inherit;
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.account-heading {
    align-items: center;
}

.account-heading > div {
    display: grid;
    gap: 2px;
}

.account-heading span,
.order-detail-heading span {
    color: var(--store-muted);
    font-size: 10px;
}

.account-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.store-form--profile .store-button {
    justify-self: start;
}

/* The way through to the rest of the history, when the account page is only
   showing the newest few. */
.account-orders-all {
    width: 100%;
    display: block;
    border: 0;
    background: none;
    cursor: pointer;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--store-line);
    color: var(--store-muted);
    font-size: 10px;
    text-align: center;
    transition: color var(--store-speed) var(--store-ease);
}

.account-orders-all:hover {
    color: var(--store-text);
}

/* The history is a list, not a dashboard: same reading width as an order. */
.order-history-page > * {
    width: 100%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.order-list {
    overflow: hidden;
    border: 1px solid var(--store-line);
    border-radius: 5px;
}

.order-list > a {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    transition: background-color var(--store-speed) var(--store-ease), padding var(--store-speed) var(--store-ease);
}

.order-list > a + a {
    border-top: 1px solid var(--store-line);
}

.order-list > a:hover {
    background: var(--store-subtle);
    padding-right: 8px;
    padding-left: 12px;
}

.order-list > a > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.order-list > a > span:last-child {
    justify-items: end;
}

.order-list strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-list small {
    color: var(--store-muted);
    font-size: 8px;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 8px;
    font-weight: 700;
}

.order-status--paid,
.order-status--completed {
    background: #edf9f0;
    color: var(--store-green);
}

.order-status--review {
    gap: 4px;
    cursor: pointer;
}

.order-status--review img {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    filter: invert(42%) sepia(80%) saturate(640%) hue-rotate(359deg) brightness(91%) contrast(92%);
}

.order-status--review:hover,
.order-status--review:focus-visible {
    background: #fff6d8;
    color: #815f00;
}

.order-status--shipped {
    background: #eef5ff;
    color: #2868c7;
}

.order-status--pending,
.order-status--processing {
    background: #fff8d8;
    color: var(--store-warning);
}

.order-status--cancelled {
    background: #fff0f0;
    color: var(--store-red);
}

.order-detail-heading {
    align-items: center;
}

.order-detail-heading > div {
    display: grid;
    gap: 3px;
}

.order-detail-heading > div:first-child > a {
    width: max-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    padding: 4px 0;
}

.order-detail-heading > .order-detail-heading__state {
    justify-items: end;
    gap: 7px;
    text-align: right;
}

.order-tracking {
    width: 100%;
    margin: 10px 0 0;
    padding: 12px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
}

.order-tracking__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.order-tracking__header h2 {
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
    font-weight: 600;
}

.order-tracking__header h2::after {
    margin-left: 8px;
    color: var(--store-line-strong);
    content: '·';
}

.order-tracking__header > strong {
    min-width: 0;
    color: var(--store-text);
    font: 650 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.order-tracking__latest {
    display: grid;
    gap: 2px;
    margin: 10px 0 0;
}

.order-tracking__latest strong {
    color: var(--store-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.order-reviews {
    scroll-margin-top: 68px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
    outline: 0;
    transition: border-color var(--store-speed) var(--store-ease), background-color var(--store-speed) var(--store-ease);
}

.order-reviews:target,
.order-reviews.is-targeted {
    border-color: var(--store-black);
    background: #fffdf7;
}

.order-review-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.order-review-progress {
    min-width: 34px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 7px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order-review-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--store-line);
    border-radius: 4px;
}

.order-review-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.order-review-card__head > div {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.order-review-card__head strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-review-card__head span,
.order-review-card__head small {
    color: var(--store-muted);
    font-size: 8px;
}

.order-review-form {
    display: grid;
    gap: 8px;
}

.order-review-score {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
}

.order-review-score legend,
.order-review-text > span {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.order-review-score > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.order-review-score input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-review-score label > span {
    min-width: 34px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    cursor: pointer;
    font-size: 9px;
}

.order-review-score label > span img {
    width: 10px;
    height: 10px;
    opacity: 0.55;
}

.order-review-score input:checked + span {
    border-color: var(--store-black);
    background: var(--store-black);
    color: #fff;
}

.order-review-score input:checked + span img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.order-review-text {
    display: grid;
    gap: 5px;
}

.order-review-text textarea {
    width: 100%;
    min-height: 68px;
    resize: vertical;
    padding: 8px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font: inherit;
    font-size: 10px;
}

.order-review-text textarea:focus {
    border-color: var(--store-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.order-review-form .store-button {
    justify-self: start;
}

.order-tracking__latest small {
    color: var(--store-muted);
    font-size: 9px;
}

.order-detail-heading h1 {
    margin-top: 4px;
}

.order-payment {
    display: grid;
    gap: 11px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--store-line-strong);
    border-radius: 5px;
    background: var(--store-surface);
}

.order-payment__header,
.order-payment__upload-row,
.order-payment__proof {
    display: flex;
    align-items: center;
}

.order-payment__header {
    justify-content: space-between;
    gap: 10px;
}

.order-payment__header h2 {
    margin: 0;
    font-size: 12px;
}

.order-payment__header p {
    margin: 2px 0 0;
    color: var(--store-muted);
    font-size: 9px;
}

.order-payment__automatic-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 9px;
    border-top: 1px solid var(--store-line);
}

.order-payment__automatic-action p {
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
}

/* An order is a document, not a dashboard. Capped at the same 900px the other
   reading pages use, so a wide monitor does not stretch four lines of bank
   details across the whole screen. */
/* An order is a document, not a dashboard: every block on the page shares one
   reading width and sits centred, instead of four lines of bank details
   stretched across a wide monitor. Applied to the page rather than to each
   block, because the payment panel and the reviews live outside the two-column
   layout and were missed the first time. */
.order-detail-page > * {
    width: 100%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

/* Upload: one quiet line at rest, a thumbnail and a send button once a file
   is picked. The native input is off screen — it is the heaviest control a
   browser draws and none of its chrome is wanted here. */
.order-payment__pick {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px dashed var(--store-line-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--store-speed) var(--store-ease),
                background var(--store-speed) var(--store-ease);
}

.order-payment__pick:hover,
.order-payment__pick:focus-within {
    border-color: var(--store-text);
    background: var(--store-subtle);
}

.order-payment__pick[hidden] {
    display: none;
}

.order-payment__pick > img {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0.5;
}

.order-payment__pick span {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.order-payment__pick strong {
    font-size: 10px;
    font-weight: 650;
}

.order-payment__pick small {
    color: var(--store-muted);
    font-size: 8px;
}

.order-payment__chosen {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid var(--store-line);
    border-radius: 8px;
    background: var(--store-subtle);
}

.order-payment__chosen[hidden] {
    display: none;
}

.order-payment__chosen .order-payment__preview {
    width: 38px;
    height: 38px;
    flex: none;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: var(--store-surface);
}

.order-payment__chosen .order-payment__preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.order-payment__chosen-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-payment__clear {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    transition: background var(--store-speed) var(--store-ease);
}

.order-payment__clear:hover {
    background: var(--store-line);
}

.order-payment__clear img {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

.order-payment__number {
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-payment__copy {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    transition: background var(--store-speed) var(--store-ease);
}

.order-payment__copy:hover {
    background: var(--store-subtle);
}

.order-payment__copy img {
    width: 13px;
    height: 13px;
    display: block;
    opacity: 0.55;
    transition: opacity var(--store-speed) var(--store-ease);
}

.order-payment__copy:hover img,
.order-payment__copy.is-copied img {
    opacity: 1;
}

.order-payment__account dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.order-payment__account dl > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.order-payment__account dt {
    color: var(--store-muted);
    font-size: 8px;
    font-weight: 650;
    text-transform: uppercase;
}

.order-payment__account dd {
    overflow: hidden;
    margin: 0;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-payment__account .order-payment__amount dd {
    font-size: 13px;
}

.order-payment__account > p,
.order-payment__unavailable {
    margin: 8px 0 0;
    color: var(--store-muted);
    font-size: 9px;
}

.order-payment__proof {
    width: fit-content;
    gap: 8px;
    color: var(--store-text);
}

.order-payment__proof img,
.order-payment__preview img {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

.order-payment__proof > span {
    display: grid;
    gap: 2px;
}

.order-payment__proof strong {
    font-size: 10px;
}

.order-payment__proof small,
.order-payment__upload > small {
    color: var(--store-muted);
    font-size: 8px;
}

.order-payment__upload {
    display: grid;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--store-line);
}

.order-payment__upload > label {
    font-size: 10px;
    font-weight: 650;
}

.order-payment__upload-row {
    align-items: stretch;
    gap: 7px;
}

.order-payment__preview {
    width: fit-content;
}

.order-detail-items {
    display: grid;
}

.order-detail-items > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
}

.order-detail-items > div + div {
    border-top: 1px solid var(--store-line);
}

.order-detail-items > div > span:first-child {
    display: grid;
    gap: 2px;
}

.order-detail-items strong {
    font-size: 10px;
}

.order-detail-items small {
    color: var(--store-muted);
    font-size: 9px;
}

.order-detail-items small.is-promo {
    color: var(--store-green);
}

.order-voucher,
.delivery-address {
    display: grid;
    gap: 3px;
    padding-top: 10px;
    border-top: 1px solid var(--store-line);
}

.order-voucher span,
.delivery-address span {
    color: var(--store-muted);
    font-size: 8px;
    font-weight: 650;
    text-transform: uppercase;
}

.order-voucher strong,
.delivery-address strong {
    font-size: 10px;
}

.delivery-address {
    margin-top: 10px;
}

.delivery-address p {
    margin: 2px 0 0;
    color: var(--store-muted);
    font-size: 9px;
}

.legal-page {
    min-height: 460px;
}

/* "Garansi tukar ukuran": a small shield link beside the size choice, the
   homepage size section and the checkout total. */
.guarantee-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    color: var(--store-text);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.guarantee-link img {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

.guarantee-link:hover {
    text-decoration: underline;
}

.guarantee-link--product {
    margin-top: 8px;
}

.guarantee-link--summary {
    display: flex;
    justify-self: center;
    justify-content: center;
    margin-top: 9px;
}

.legal-page .status-figure--legal {
    max-width: 240px;
    margin-bottom: 14px;
}

.about-page {
    min-height: 460px;
}

.about-page h1 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.025em;
}

.about-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.about-step {
    display: grid;
    align-content: start;
    gap: 4px;
}

.about-step__figure {
    margin-bottom: 4px;
}

.about-step strong {
    color: var(--store-text);
    font-size: 11px;
}

.about-step span {
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .about-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-page__content,
.about-page__empty {
    max-width: 900px;
    margin-top: 14px;
    color: #343434;
    font-size: 11px;
    line-height: 1.8;
}

.about-page__empty {
    color: var(--store-muted);
}

.legal-content,
.legal-empty {
    margin-top: 14px;
    color: #343434;
    font-size: 11px;
    line-height: 1.7;
}

.legal-empty {
    color: var(--store-muted);
}

.store-footer {
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 22px 22px 14px;
    background: #e9e9e9;
}

/* Mitra Bisnis above the footer columns: one white card, its figure, words
   and button gathered in the middle. The figure is exactly as tall as the
   words beside it. */
.store-footer__b2b {
    margin-bottom: 20px;
    padding: 12px 16px;
    display: block;
    border-radius: var(--store-radius);
    background: var(--store-surface);
    color: var(--store-text);
}

.store-footer__b2b-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
}

.store-footer__b2b:hover .store-button {
    background: #292929;
}

.store-footer__b2b-figure {
    width: 70px;
    height: 56px;
    flex: 0 0 70px;
    display: block;
    --hairline-plate: #ffffff;
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.store-footer__b2b-figure > img,
.store-footer__b2b-figure > svg {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    object-fit: contain;
}

.store-footer__b2b-text {
    min-width: 0;
    max-width: 440px;
    min-height: 56px;
    display: grid;
    align-content: center;
    gap: 2px;
}

.store-footer__b2b-text small {
    color: var(--store-muted);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0.08em;
}

.store-footer__b2b-text strong {
    font-size: 12px;
    font-weight: 650;
}

.store-footer__b2b-text span {
    color: var(--store-muted);
    font-size: 9px;
}

.store-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.store-footer section {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 3px;
}

.store-footer section > strong {
    margin-bottom: 3px;
    font-size: 10px;
}

.store-footer section > span,
.store-footer section > a,
.store-footer section > p,
.store-footer__links a {
    margin: 0;
    overflow: hidden;
    color: var(--store-muted);
    font-size: 9px;
    text-overflow: ellipsis;
}

.store-footer section > a:hover,
.store-footer__links a:hover {
    color: var(--store-text);
    transform: translateX(1px);
}

.store-footer__brand {
    /* The footer sits on a light panel and the lockup is drawn white, the same
       trade the login panels make. */
    display: block;
    margin-bottom: 5px;
}

.store-footer__brand img {
    width: auto;
    height: 26px;
    display: block;
    object-fit: contain;
    filter: brightness(0);
}

.store-footer__links a img {
    width: 13px;
    height: 13px;
    display: block;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity var(--store-speed) var(--store-ease);
}

.store-footer__links a:hover img {
    opacity: 1;
}

.store-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.store-footer__bottom {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #d5d5d5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--store-muted);
    font-size: 9px;
}

.store-footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
}

.store-footer__legal a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.store-footer__legal a + a::before {
    content: "|";
    color: #b6b6b6;
}

.store-footer__legal a:hover {
    color: var(--store-text);
}

.public-toast-slot {
    position: fixed;
    z-index: 60;
    top: 66px;
    left: 50%;
    width: min(420px, calc(100vw - 28px));
    display: flex;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.public-toast-slot:empty {
    display: none;
}

.public-toast {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    background: var(--store-subtle);
    animation: store-toast-in 220ms var(--store-ease);
    transition: opacity 180ms var(--store-ease), transform 180ms var(--store-ease);
    pointer-events: auto;
}

.public-toast.is-leaving {
    opacity: 0;
    transform: translateY(-4px);
}

.public-toast--success {
    background: #edf9f0;
}

.public-toast--warning {
    background: #fff8d8;
}

.public-toast--error {
    background: #fff0f0;
}

.public-toast__content {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 1px;
}

.public-toast strong {
    font-size: 10px;
    font-weight: 650;
}

.public-toast span {
    color: var(--store-muted);
    font-size: 9px;
}

.public-toast button {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.public-toast button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.public-toast button img {
    width: 13px;
    height: 13px;
}

.store-loading {
    position: fixed;
    z-index: 70;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
    color: var(--store-muted);
    font-size: 9px;
}

.store-loading[hidden] {
    display: none;
}

.store-loading__spinner {
    width: 11px;
    height: 11px;
    border: 1.5px solid #d2d2d2;
    border-top-color: var(--store-black);
    border-radius: 50%;
    animation: store-spin 600ms linear infinite;
}

.store-inline-loading,
.store-partial-error {
    min-height: 92px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--store-muted);
    font-size: 9px;
}

@keyframes store-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes promo-panel-in {
    from { opacity: 0; transform: translate(8px, -50%) scale(0.985); }
    to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

@keyframes store-spin {
    to { transform: rotate(360deg); }
}

@keyframes statement-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@keyframes statement-letter-in {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(5px) scale(0.96);
    }
    55% {
        opacity: 0.82;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes statement-word-complete {
    0% {
        color: #a3a3a3;
        filter: blur(1px);
    }
    100% {
        color: var(--store-text);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 980px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .collection-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .collection-products-rail > .product-card {
        width: calc(33.333vw - 21.5px);
        flex-basis: calc(33.333vw - 21.5px);
    }

    .product-detail {
        grid-template-columns: max-content minmax(280px, 1fr);
        gap: 20px;
    }

    .product-gallery {
        /* gutters 44 + gap 20 + info min 280 + thumbs 76 + 18 spare */
        --gallery-height: min(calc(100vh - 110px), calc((100vw - 438px) * 1.25));
    }

    .cart-layout,
    .checkout-layout,
    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .order-tracking {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .order-payment__account dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-header__inner {
        gap: 8px;
        padding: 0 12px;
    }

    .store-main {
        --store-page-gutter: 14px;
    }

    .store-hero {
        aspect-ratio: 4 / 3;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .collection-showcase {
        gap: 8px;
    }

    .collection-showcase__banner {
        width: max(180px, 40vw);
        flex-basis: max(180px, 40vw);
    }

    .collection-products-rail > .product-card {
        width: calc(50vw - 19px);
        flex-basis: calc(50vw - 19px);
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail,
    .cart-layout,
    .checkout-layout,
    .account-layout,
    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-tracking {
        width: 100%;
    }

    .product-detail.store-section--first {
        width: calc(100% + (var(--store-page-gutter) * 2));
        margin-left: calc(var(--store-page-gutter) * -1);
        padding-top: 0;
        gap: 0;
    }

    /* Phone: the photo full width, the thumbnails a row to swipe under it. */
    .product-gallery {
        position: static;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .product-gallery__main {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .product-gallery__thumbs {
        order: 0;
        width: auto;
        max-height: none;
        flex-direction: row;
        gap: 6px;
        padding: 0 var(--store-page-gutter);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .product-gallery__thumbs button {
        width: 56px;
    }

    .product-info {
        margin: 16px var(--store-page-gutter) 0;
    }

    .order-summary {
        position: static;
    }

    .cart-item {
        grid-template-columns: 54px minmax(0, 1fr) 68px;
    }

    .cart-item__image {
        width: 54px;
        height: 54px;
    }

    .cart-item__price {
        grid-column: 2;
        justify-items: start;
    }

    .cart-remove {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .store-footer {
        padding-right: 14px;
        padding-left: 14px;
    }

    .store-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 520px) {
    .store-cart-panel {
        width: calc(100vw - 12px);
    }

    .checkout-shipping__services > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-review-list,
    .order-review-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .promo-floating {
        right: 8px;
    }

    .promo-floating__panel {
        width: min(340px, calc(100vw - 16px));
    }

    .order-payment__header,
    .order-payment__upload-row,
    .order-payment__automatic-action {
        align-items: stretch;
        flex-direction: column;
    }

    .order-payment__header .order-status {
        align-self: flex-start;
    }

    .order-payment__account dl {
        grid-template-columns: 1fr;
    }

    .store-hero {
        aspect-ratio: 4 / 5;
    }

    .store-section,
    .store-section--first {
        padding-top: 16px;
    }

    .catalog-heading,
    .account-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .account-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .account-heading > div {
        min-width: 0;
    }

    .account-heading span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-logout-form {
        margin: 0;
    }

    .account-logout-form .store-button {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 9px;
    }

    .catalog-search,
    .catalog-search input {
        width: 100%;
    }

    .product-grid {
        gap: 7px;
    }

    .product-card__body {
        padding: 8px 1px 1px;
    }

    .collection-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .collection-showcase {
        gap: 7px;
    }

    .collection-showcase__banner {
        width: max(175px, 58vw);
        flex-basis: max(175px, 58vw);
    }

    .collection-products-rail {
        gap: 7px;
    }

    .collection-products-rail > .product-card {
        width: calc(50vw - 17.5px);
        flex-basis: calc(50vw - 17.5px);
    }

    .collection-showcase__banner {
        min-height: 210px;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .product-info h1 {
        font-size: 19px;
    }

    .product-buy-row,
    .checkout-form {
        grid-template-columns: 1fr;
    }

    .checkout-form__address,
    .checkout-shipping,
    .checkout-form .store-button,
    .checkout-form > small {
        grid-column: auto;
    }

    .product-buy-row .store-button,
    .checkout-form .store-button {
        width: 100%;
    }

    .cart-continue {
        width: 100%;
    }

    .checkout-shipping__recipient {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 50px minmax(0, 1fr) 68px;
        gap: 8px;
        padding: 8px;
    }

    .cart-item__image {
        width: 50px;
        height: 50px;
    }

    .account-auth {
        min-height: 440px;
        padding-top: 24px;
    }

    .account-auth__panel {
        max-width: none;
        padding: 14px;
    }

    .store-footer__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .store-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .store-footer__b2b-inner {
        flex-direction: column;
        text-align: center;
    }

    .store-footer__b2b-text {
        min-height: 0;
    }

    .store-footer__legal {
        justify-content: flex-start;
    }
}

/* Size chart: trigger + panel */
.product-share {
    position: relative;
    margin-top: 8px;
}

.product-share__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--store-muted);
    font-size: 9px;
    cursor: pointer;
    transition: color var(--store-speed) var(--store-ease);
}

.product-share__trigger:hover {
    color: var(--store-text);
}

.product-share__trigger img {
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0.7;
}

/* The share dialog. Centred rather than anchored, because it carries the
   product it is about. Follows the same layer/backdrop shape as the size
   sheet, including the visibility hold that lets the close animate. */
.store-share-layer {
    position: fixed;
    z-index: 64;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--store-sheet-out);
}

.store-share-layer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.store-share-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    /* Softened as well as dimmed, so the page behind reads as set aside rather
       than merely darkened. The tint carries the whole job on browsers without
       backdrop-filter, which is why it is not lightened to compensate. */
    background: rgba(0, 0, 0, 0.36);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--store-sheet-out) var(--store-ease-sheet);
}

.store-share-layer.is-open .store-share-backdrop {
    opacity: 1;
    transition-duration: var(--store-sheet-in);
}

.store-share-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(340px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    display: grid;
    gap: 12px;
    padding: 14px;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--store-surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    transform: translate(-50%, -46%) scale(0.97);
    opacity: 0;
    transition: transform var(--store-sheet-out) var(--store-ease-sheet),
                opacity var(--store-sheet-out) var(--store-ease-sheet);
}

.store-share-layer.is-open .store-share-card {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-duration: var(--store-sheet-in);
}

/* The header icons are drawn white for the black header; this card is white,
   so the close button needs the same correction the size sheet makes. */
.store-share-card .header-icon:hover {
    background: var(--store-subtle);
}

.store-share-card .header-icon > img {
    filter: none;
    opacity: 0.72;
}

.store-share-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.store-share-card__product {
    display: grid;
    gap: 8px;
}

/* Shown the way a product card shows it: full width of the dialog, same 4/5
   frame, same contain, so a garment is never cropped. Nothing caps it here —
   the card's own max-height and scroll take care of a short screen. */
.store-share-card__media {
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--store-subtle);
    aspect-ratio: 4 / 5;
}

.store-share-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.store-share-card__name {
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
}

.store-share-card__channels {
    display: grid;
    gap: 1px;
}

.store-share-rule {
    height: 0;
    margin: 4px 9px;
    border: 0;
    border-top: 1px solid var(--store-line);
}

.store-share-channel {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--store-text);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: background var(--store-speed) var(--store-ease);
}

.store-share-channel:hover {
    background: var(--store-subtle);
}

.store-share-channel[hidden] {
    display: none;
}

.store-share-channel img {
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    opacity: 0.78;
}

.product-size-chart__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
    color: var(--store-black);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.product-size-chart__trigger:hover {
    border-color: var(--store-black);
}

.product-size-chart__trigger img {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.store-size-layer {
    position: fixed;
    z-index: 62;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.store-size-layer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.store-size-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity 200ms ease;
    cursor: pointer;
}

.store-size-layer.is-open .store-size-backdrop {
    opacity: 1;
}

.store-size-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    background: var(--store-surface);
    transform: translateX(100%);
    transition: transform 240ms ease;
}

.store-size-layer.is-open .store-size-panel {
    transform: translateX(0);
}

.store-size-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--store-line);
    font-size: 11px;
}

.store-size-panel__head small {
    color: var(--store-muted);
    font-weight: 400;
}

.store-size-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
}

.store-size-panel__scroll {
    overflow-x: auto;
    border: 1px solid var(--store-line);
    border-radius: var(--store-radius);
    -webkit-overflow-scrolling: touch;
}

/* A set shows the jacket table, then the trousers table. */
.store-size-panel__scroll + .store-size-panel__scroll {
    margin-top: 14px;
}

.store-size-panel__title {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--store-line);
    background: var(--store-subtle);
}


/* Measuring figure */
.size-figure {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px 12px;
    border-radius: 6px;
    background: var(--store-subtle);
}

.size-figure svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* The measuring figure fills its stage (the engine sizes it absolutely);
   the tape's size above must not apply to it. */
.size-figure__stage[data-hairline] > svg {
    max-width: none;
    height: 100%;
}

/* The stage holds the tape at first, then a measuring figure (Hairline). */
.size-figure__stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

.size-figure__stage[data-hairline] {
    display: block;
    /* Paint the figure's plates in the panel's grey, so a drawing cropped at
       the stage edge does not show as a white box; lines a step darker to
       keep their contrast on it. */
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.size-figure small {
    min-height: 2.6em;
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}

.size-chart-public th[data-measure-head] {
    cursor: pointer;
}

.size-figure__tape {
    fill: var(--store-surface);
    stroke: var(--store-line-strong);
    stroke-width: 1.5;
}

.size-figure__tick {
    stroke: var(--store-line-strong);
    stroke-width: 1.5;
}

.size-figure__tick--major {
    stroke: var(--store-muted);
    stroke-width: 2;
}

/* The span runs out along the tape, pauses, then starts over. */
.size-figure__span {
    fill: none;
    stroke: var(--store-black);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: size-figure-measure 4s ease-in-out infinite;
}

.size-figure__cap {
    fill: none;
    stroke: var(--store-black);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.size-figure__cap--moving {
    animation: size-figure-cap 4s ease-in-out infinite;
}

@keyframes size-figure-measure {
    0%        { stroke-dashoffset: 180; }
    45%, 80%  { stroke-dashoffset: 0; }
    100%      { stroke-dashoffset: 180; }
}

@keyframes size-figure-cap {
    0%        { transform: translateX(0); }
    45%, 80%  { transform: translateX(180px); }
    100%      { transform: translateX(0); }
}

.size-chart-public {
    width: 100%;
    /* Separate borders, because a sticky cell drops collapsed ones. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.size-chart-public th,
.size-chart-public td {
    padding: 9px 10px;
    text-align: center;
    border-bottom: 1px solid var(--store-line);
}

.size-chart-public td,
.size-chart-public tbody th {
    white-space: nowrap;
}

.size-chart-public tbody tr:last-child th,
.size-chart-public tbody tr:last-child td {
    border-bottom: 0;
}

/* The header has to read as a header, not as another row of values. */
.size-chart-public thead th {
    background: var(--store-subtle);
    color: var(--store-text);
    font-weight: 650;
    line-height: 1.35;
    white-space: normal;
    border-bottom: 1px solid var(--store-line-strong);
}

.size-chart-public thead th[data-measure-head] {
    cursor: default;
}

.size-chart-public thead th.is-active {
    color: var(--store-black);
}

/* The size stays in view while the measurements scroll sideways. */
.size-chart-public th:first-child,
.size-chart-public td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--store-surface);
    border-right: 1px solid var(--store-line);
    box-shadow: 4px 0 6px -4px rgba(10, 10, 10, 0.1);
}

.size-chart-public thead th:first-child {
    z-index: 2;
    background: var(--store-subtle);
}

.size-chart-public tbody th {
    color: var(--store-text);
    font-weight: 650;
}

.size-chart-public tbody tr:hover th,
.size-chart-public tbody tr:hover td {
    background: var(--store-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .size-figure__span {
        stroke-dashoffset: 0;
        animation: none;
    }

    .size-figure__cap--moving {
        transform: translateX(180px);
        animation: none;
    }

    .store-size-panel,
    .store-size-backdrop {
        transition: none;
    }
}

/* Holiday notice, shown above every store page while orders are paused. */
.store-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid var(--store-line-strong);
    border-radius: var(--store-radius);
    background: var(--store-subtle);
    color: var(--store-text);
    font-size: 12px;
    line-height: 1.6;
}

.store-notice__badge {
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--store-black);
    color: var(--store-surface);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The stand-in page shown while maintenance is on. */
.store-standby {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--store-bg);
}

.store-standby__panel {
    width: 100%;
    max-width: 380px;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 36px 28px;
    border: 1px solid var(--store-line);
    border-radius: var(--store-radius);
    background: var(--store-surface);
    text-align: center;
}

.store-standby__logo {
    width: 210px;
    height: auto;
    /* The brand mark is drawn white for the dark header; this panel is light. */
    filter: brightness(0);
}

.store-standby__panel h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
}

.store-standby__panel p {
    margin: 0;
    color: var(--store-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* Error pages share the standby panel, plus a status code and a way back. */
.store-standby__code {
    padding: 2px 9px;
    border-radius: 3px;
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.store-standby__link {
    margin-top: 4px;
    padding: 9px 18px;
    border-radius: var(--store-radius);
    background: var(--store-black);
    color: var(--store-surface);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--store-speed) var(--store-ease);
}

.store-standby__link:hover {
    opacity: 0.82;
}

.store-standby__detail {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--store-line);
    border-radius: var(--store-radius);
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
    overflow-x: auto;
}

.store-standby__detail strong {
    display: block;
    margin-bottom: 6px;
    color: var(--store-text);
}

.store-standby__detail p {
    margin: 0 0 6px;
    font-size: 11px;
}

.store-standby__detail pre {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    line-height: 1.7;
    white-space: pre;
}

/* One-time code entry: wide tracking so six digits read as six digits. */
.verify-code {
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.account-auth__note {
    margin: -4px 0 16px;
    color: var(--store-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.store-form--inline {
    margin-top: 10px;
    text-align: center;
}

.store-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--store-muted);
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.store-link-button:hover {
    color: var(--store-text);
}

/* The holiday banner shape, reused for a prompt that carries a link. */
.store-notice--action {
    justify-content: space-between;
}

.store-notice--action a {
    color: var(--store-black);
    font-weight: 600;
    white-space: nowrap;
}

/* Account addresses: the saved list and the panel that adds one */
/* Opens the address drawer. Quiet, because the list above it is the point. */
.address-add {
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px dashed var(--store-line-strong);
    border-radius: 8px;
    background: none;
    color: var(--store-muted);
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color var(--store-speed) var(--store-ease),
                background var(--store-speed) var(--store-ease),
                color var(--store-speed) var(--store-ease);
}

.address-add:hover {
    border-color: var(--store-text);
    background: var(--store-subtle);
    color: var(--store-text);
}

/* Above the header, like the other sheets, and above the account tabs. */
.store-address-layer {
    z-index: 66;
}

.address-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.address-card {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
}

.address-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.address-card__head strong {
    font-size: 10px;
    font-weight: 650;
}

.address-card__tag {
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--store-black);
    color: #fff;
    font-size: 8px;
    font-weight: 650;
}

.address-card__phone {
    color: var(--store-muted);
    font-size: 9px;
}

.address-card p {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.45;
}

.address-card small {
    color: var(--store-muted);
    font-size: 8px;
    line-height: 1.4;
}

.address-form .store-button {
    justify-self: start;
}

.address-form__destination {
    display: grid;
    gap: 5px;
}

.address-form__destination > label > span {
    display: block;
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.address-form__search {
    position: relative;
}

.address-form__search > img {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 9px;
    width: 13px;
    height: 13px;
    opacity: 0.58;
    pointer-events: none;
}

.address-form .address-form__search input {
    width: 100%;
    padding-left: 29px;
}

.address-form__options {
    position: absolute;
    z-index: 12;
    top: 38px;
    right: 0;
    left: 0;
    max-height: 210px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
    background: var(--store-surface);
}

.address-form__options[hidden] {
    display: none;
}

.address-form__options button {
    width: 100%;
    padding: 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--store-text);
    font: inherit;
    font-size: 10px;
    text-align: left;
    cursor: pointer;
}

.address-form__options button:hover,
.address-form__options button:focus-visible {
    outline: 0;
    background: #fff;
}

.address-form__status {
    min-height: 12px;
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
}

.address-form__status:empty {
    display: none;
}

/* Profile and addresses stack in the left column, so a long order list
   cannot push the addresses far down the page. */
/* Left is a nav, right is what it points at. On a phone the nav lies down
   into a scrolling tab strip above the content, because a sidebar that tall
   would push the content off the first screen. */
.account-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

.account-nav__rule {
    height: 0;
    margin: 6px 10px;
    border: 0;
    border-top: 1px solid var(--store-line);
}

.account-nav__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--store-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--store-speed) var(--store-ease),
                color var(--store-speed) var(--store-ease);
}

.account-nav__item:hover {
    background: var(--store-subtle);
    color: var(--store-text);
}

.account-nav__item.is-active {
    background: var(--store-surface);
    color: var(--store-text);
}

.account-nav__item img {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0.6;
}

.account-nav__item.is-active img {
    opacity: 1;
}

.account-nav__item > span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-nav__item > small {
    flex: none;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.account-nav__item.is-active > small {
    background: var(--store-line);
    color: var(--store-text);
}

.account-content {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
}

.account-section {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
}

/* Sets display, so it needs the companion or the attribute would do nothing. */
.account-section[hidden] {
    display: none;
}

.account-column {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

/* Profile reads as text until the edit icon is pressed */
.store-section-heading > button {
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
}

.store-section-heading > button[hidden] {
    display: none;
}

.store-section-heading > button img {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

/* Locked fields keep their shape and read as inert, so nothing shifts when
   editing starts. Email is disabled rather than read-only, so it is named too. */
.account-profile .store-form input[readonly],
.account-profile .store-form input[disabled] {
    border-color: var(--store-line);
    background: var(--store-subtle);
    color: var(--store-muted);
}

.account-profile .phone-field__prefix:has(input[readonly]) {
    border-color: var(--store-line);
}

.account-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-profile__actions[hidden] {
    display: none;
}

/* Choosing which saved address checkout should start from */
/* Sits on the name row, pushed to the far right, so the card reads as one
   block of address rather than address-then-button. */
.address-card__main {
    flex: none;
    margin-left: auto;
}

.address-card__main button {
    padding: 4px 9px;
    border: 1px solid var(--store-line);
    border-radius: 4px;
    background: var(--store-surface);
    color: var(--store-text);
    font: inherit;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.address-card__main button:hover {
    border-color: var(--store-black);
}

/* Fit advisor: shares the size drawer's shell, with its own form and bars */
.variant-picker-head__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.store-fit-panel__body {
    display: grid;
    gap: 10px;
    align-content: start;
}

.store-fit-intro {
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
}

.store-fit-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.store-fit-fields label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.store-fit-fields label > span {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.store-fit-fields input,
.store-fit-fields select {
    width: 100%;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--store-line-strong);
    border-radius: 4px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font: inherit;
    font-size: 11px;
}

.store-fit-fields input.is-invalid {
    border-color: var(--store-red);
}

.store-fit-status {
    min-height: 12px;
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
}

.store-fit-status:empty {
    display: none;
}

.store-fit-result[hidden] {
    display: none;
}

.store-fit-result {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--store-line);
    border-radius: 6px;
}

.store-fit-result__headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.store-fit-result__headline > span {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.store-fit-result__headline > strong {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.store-fit-note {
    margin: 0;
    color: var(--store-text);
    font-size: 10px;
    line-height: 1.45;
}

.store-fit-note[hidden] {
    display: none;
}

.store-fit-bars {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.store-fit-bars li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: 7px;
    font-size: 10px;
}

.store-fit-bars li > span {
    overflow: hidden;
    color: var(--store-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-fit-bars li.is-recommended > span {
    color: var(--store-text);
    font-weight: 650;
}

/* The bar itself; width is set inline from the API's percentage. */
.store-fit-bars li > i {
    height: 6px;
    border-radius: 99px;
    background: var(--store-line-strong);
}

.store-fit-bars li.is-recommended > i {
    background: var(--store-black);
}

.store-fit-bars li > b {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
    text-align: right;
}

.store-fit-disclaimer {
    margin: 0;
    color: var(--store-muted);
    font-size: 9px;
    line-height: 1.45;
}

.store-fit-panel [data-fit-apply][hidden] {
    display: none;
}

@media (max-width: 520px) {
    .store-fit-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-fit-fields label:last-child {
        grid-column: 1 / -1;
    }
}

/* The fit figure: Ionicons' body-outline standing in a viewfinder while a scan
   line sweeps it. The outline draws itself once, then the scan runs on a loop
   and speeds up while the API is being asked. */
.fit-figure {
    display: grid;
    justify-items: center;
    padding: 10px;
    border-radius: 6px;
    background: var(--store-subtle);
}

.fit-figure svg {
    width: 100%;
    max-width: 152px;
    height: auto;
}

/* The fitting room figure replaces the scanner: it fills its stage, plates
   in the panel grey (see .size-figure__stage). */
.fit-figure__stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
}

.fit-figure__stage[data-hairline] {
    display: block;
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.fit-figure__stage[data-hairline] > svg {
    max-width: none;
    height: 100%;
}

.fit-figure__frame path {
    fill: none;
    stroke: var(--store-line-strong);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fit-figure__body * {
    fill: none;
    stroke: var(--store-muted);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* pathLength="1" on both shapes, so one dash length fits either. */
.fit-figure__head,
.fit-figure__silhouette {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.fit-figure__head {
    animation: fit-figure-draw 0.7s ease-out 0.05s forwards;
}

.fit-figure__silhouette {
    animation: fit-figure-draw 1.1s ease-out 0.25s forwards;
}

/* The beam, and the haze it drags behind it. */
.fit-figure__scan-line {
    fill: none;
    stroke: var(--store-black);
    stroke-width: 12;
    stroke-linecap: round;
}

.fit-figure__scan-fade {
    stop-color: var(--store-black);
    stop-opacity: 0;
}

.fit-figure__scan-solid {
    stop-color: var(--store-black);
    stop-opacity: 0.16;
}

.fit-figure__scan {
    animation: fit-figure-scan 3.4s ease-in-out 1.1s infinite;
}

.store-fit-panel__body.is-working .fit-figure__scan {
    animation-duration: 1.2s;
    animation-delay: 0s;
}

.store-fit-panel__body.is-working .fit-figure__body * {
    stroke: var(--store-text);
    transition: stroke 200ms ease;
}

@keyframes fit-figure-draw {
    to { stroke-dashoffset: 0; }
}

/* Down the body, then back up, pausing at each end. */
@keyframes fit-figure-scan {
    0%, 8%    { transform: translateY(54px); }
    50%, 58%  { transform: translateY(506px); }
    100%      { transform: translateY(54px); }
}
/* Waiting for the answer: the shape of the result, without the numbers. */
.store-fit-loading {
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid var(--store-line);
    border-radius: 6px;
}

.store-fit-loading[hidden] {
    display: none;
}

.store-fit-loading__label {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.store-fit-loading__bar {
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--store-subtle) 0%, var(--store-line) 50%, var(--store-subtle) 100%);
    background-size: 220% 100%;
    animation: fit-loading-shimmer 1.2s linear infinite;
}

.store-fit-loading__bar:nth-child(2) { width: 100%; }
.store-fit-loading__bar:nth-child(3) { width: 74%; }
.store-fit-loading__bar:nth-child(4) { width: 48%; }

@keyframes fit-loading-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fit-figure__head,
    .fit-figure__silhouette {
        stroke-dashoffset: 0;
        animation: none;
    }

    .store-fit-loading__bar {
        animation: none;
    }

    /* Parked across the torso rather than at the very top edge. */
    .fit-figure__scan {
        transform: translateY(280px);
        animation: none;
    }
}

/* =========================================================================
   Motion
   Sheets, popovers and panels share one curve and one pair of durations, so
   everything on the storefront opens and closes with the same hand.
   ========================================================================= */
:root {
    /* Quick to commit, long gentle settle — the curve a sheet wants. */
    --store-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --store-sheet-in: 420ms;
    --store-sheet-out: 300ms;
    --store-pop: 220ms;
}

/* Every drawer used to vanish on close: visibility flipped the instant the
   class came off, so the slide-out never had a chance to run. Holding
   visibility until the transform has finished gives the close its animation. */
.store-menu-layer,
.store-cart-layer,
.store-size-layer {
    transition: visibility 0s linear var(--store-sheet-out);
}

.store-menu-layer.is-open,
.store-cart-layer.is-open,
.store-size-layer.is-open {
    transition: visibility 0s linear 0s;
}

.store-menu-backdrop,
.store-cart-backdrop,
.store-size-backdrop {
    transition: opacity var(--store-sheet-out) var(--store-ease-sheet);
}

.store-menu-layer.is-open .store-menu-backdrop,
.store-cart-layer.is-open .store-cart-backdrop,
.store-size-layer.is-open .store-size-backdrop {
    transition-duration: var(--store-sheet-in);
}

.store-menu-panel,
.store-cart-panel,
.store-size-panel {
    transition: transform var(--store-sheet-out) var(--store-ease-sheet);
}

.store-menu-layer.is-open .store-menu-panel,
.store-cart-layer.is-open .store-cart-panel,
.store-size-layer.is-open .store-size-panel {
    transition-duration: var(--store-sheet-in);
}

/* Anything that appears by losing `hidden` cannot be transitioned, but a
   keyframe animation does run when display changes, so they settle in
   instead of snapping. */
@keyframes store-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.checkout-shipping__options,
.address-form__options,
.store-fit-result,
.store-fit-loading,
.checkout-service-panel {
    animation: store-pop-in var(--store-pop) var(--store-ease-sheet);
}

/* A <details> cannot transition its own height, but its contents can arrive. */
@keyframes store-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Swatches, buttons and cards already transition; give them the same curve. */
.variant-option span,
.store-button,
.product-card__media img {
    transition-timing-function: var(--store-ease-sheet);
}

@media (prefers-reduced-motion: reduce) {
    .store-menu-panel,
    .store-cart-panel,
    .store-size-panel,
    .store-menu-backdrop,
    .store-cart-backdrop,
    .store-size-backdrop {
        transition-duration: 1ms;
    }

    .store-menu-layer,
    .store-cart-layer,
    .store-size-layer {
        transition-delay: 0s;
    }

    .checkout-shipping__options,
    .address-form__options,
    .store-fit-result,
    .store-fit-loading,
    .checkout-service-panel {
        animation: none;
    }

    .promo-floating__trigger,
    .promo-floating__panel,
    .promo-floating__panel > * {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }
}

/* Stands in for an image that failed to load: the same quiet icon a product
   with no image shows, so the two read alike. */
.media-broken {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--store-subtle);
}

/* A failed image has no intrinsic size, and these boxes take their height
   from the image, so the container would collapse. Borrow the shape the
   no-image state already uses. The <img> stays in the DOM because the
   gallery swaps its src when a thumbnail is clicked. */
.is-media-broken {
    position: relative;
}

.is-media-broken > img.is-broken {
    display: none;
}

/* A box with no picture in it has no height of its own, whether the image is
   missing from the product or simply failed to arrive. All three cases take
   the same shape so a page of products stays on its grid. */
.product-card__media.is-media-broken,
.product-gallery__main.is-media-broken,
.product-gallery__main--empty {
    aspect-ratio: 4 / 4.6;
}

.product-gallery__thumbs button.is-media-broken {
    aspect-ratio: 1;
}

@media (prefers-reduced-motion: reduce) {
}

/* Shop folds its categories away in the menu, so the list opens short. */
.store-menu-nav__group > summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 8px;
    border-radius: 4px;
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.store-menu-nav__group > summary::-webkit-details-marker {
    display: none;
}

.store-menu-nav__group > summary:hover,
.store-menu-nav__group[open] > summary {
    color: #fff;
}

.store-menu-nav__group > summary img {
    width: 13px;
    height: 13px;
    opacity: 0.5;
    /* Points right when shut, down when open. */
    transform: rotate(0deg);
    transition: transform var(--store-pop) var(--store-ease-sheet);
    filter: invert(1);
}

.store-menu-nav__group[open] > summary img {
    transform: rotate(90deg);
}

.store-menu-nav__group[open] > .store-menu-nav__tree {
    animation: store-reveal var(--store-pop) var(--store-ease-sheet);
}

@media (prefers-reduced-motion: reduce) {
    .store-menu-nav__group > summary img {
        transition: none;
    }

    .store-menu-nav__group[open] > .store-menu-nav__tree {
        animation: none;
    }
}


/* Promo countdown, rolled like an odometer. A pair of digits shares one
   housing so it reads as a number, and each digit is a 0-9 column sliding
   behind a one-digit window. */
.promo-countdown {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 4px;
}

.promo-countdown__label {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.promo-countdown__clock {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Keeps a pair packed together and clips the roll; no tile behind it. */
.promo-countdown__window {
    display: flex;
    overflow: hidden;
}

.promo-countdown__sep {
    color: var(--store-line-strong);
    font-size: 14px;
    line-height: 1;
}

/* The window onto one digit; everything above and below is clipped. */
.odo {
    width: 11px;
    height: 22px;
    overflow: hidden;
    color: var(--store-text);
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 22px;
    text-align: center;
}

.odo__strip {
    display: block;
    /* Ten cells stacked, so one step is 10% of the strip. */
    transform: translateY(0);
    transition: transform 420ms var(--store-ease-sheet);
}

.odo__strip > b {
    display: block;
    height: 22px;
    font-weight: inherit;
}

.promo-countdown.is-ended .odo {
    color: var(--store-muted);
}

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

@media (max-width: 560px) {
    .store-section-heading .promo-countdown {
        justify-items: start;
    }
}

/* The moment the selection is being swapped for a fresh one. */
.is-rotating [data-promo-grid] {
    opacity: 0.45;
    transition: opacity var(--store-pop) var(--store-ease-sheet);
}

/* A discontinued product: still browsable, visibly not for sale. */
.product-card--archived .product-card__media img {
    filter: grayscale(1);
    opacity: 0.72;
}

.product-card__flag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--store-black);
    color: #fff;
    font-size: 8px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-discontinued {
    margin: 0;
    padding: 9px 11px;
    border-radius: 5px;
    background: var(--store-subtle);
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.45;
}

/* Search drawer: the size panel's shell, with its own contents. */
.store-search-panel__body {
    display: grid;
    align-content: start;
    gap: 16px;
}

.store-search-form {
    position: relative;
}

.store-search-form > img {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

.store-search-form input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--store-line-strong);
    border-radius: 6px;
    outline: 0;
    background: var(--store-surface);
    color: var(--store-text);
    font: inherit;
    font-size: 12px;
}

.store-search-form input:focus-visible {
    border-color: var(--store-black);
}

/* Both of these set display, so the attribute alone would not hide them —
   [hidden] is a UA rule and loses to any author display. Same companion the
   share dialog needs. */
/* The searching state: a lens that breathes while a bar sweeps across it.
   Keyframes rather than transitions, because this appears by losing [hidden]
   and display is not animatable. */
.store-search-working {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: var(--store-muted);
    font-size: 10px;
}

.store-search-working[hidden] {
    display: none;
}

.search-scan {
    width: 26px;
    height: 26px;
    flex: none;
    display: block;
    overflow: visible;
}

.search-scan circle,
.search-scan line {
    fill: none;
    stroke: currentColor;
    stroke-width: 8;
    stroke-linecap: round;
}

.search-scan__lens {
    opacity: 0.75;
}

.search-scan__sweep {
    transform-origin: 52px 52px;
    animation: search-sweep 1.15s var(--store-ease-sheet) infinite;
}

.search-scan__sweep line {
    stroke-width: 6;
    opacity: 0.85;
}

.search-scan__pulse {
    transform-origin: 52px 52px;
    animation: search-pulse 1.6s ease-out infinite;
}

@keyframes search-sweep {
    0%   { transform: translateX(-17px); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateX(17px); opacity: 0; }
}

@keyframes search-pulse {
    0%   { transform: scale(1); opacity: 0.35; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .search-scan__sweep,
    .search-scan__pulse {
        animation: none;
    }

    .search-scan__pulse {
        opacity: 0;
    }
}

.store-search-answers[hidden],
.store-search-shortcuts[hidden] {
    display: none;
}

.store-search-answers {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.store-search-results {
    display: grid;
    gap: 1px;
}

.store-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px;
    border-radius: 9px;
    color: var(--store-text);
    transition: background var(--store-speed) var(--store-ease);
}

.store-search-result:hover {
    background: var(--store-subtle);
}

.store-search-result__media {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 7px;
    background: var(--store-subtle);
}

.store-search-result__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.store-search-result__blank {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.4;
}

.store-search-result__text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.store-search-result__text strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-search-result__text small {
    color: var(--store-muted);
    font-size: 9px;
}

.store-search-empty {
    margin: 0;
    padding: 10px 2px;
    color: var(--store-muted);
    font-size: 10px;
}

/* Above the results: a typo put right, or the might-like picks. */
.store-search-note {
    margin: 0 0 6px;
    padding: 6px 2px 0;
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.45;
}

.store-search-note strong {
    display: block;
    color: var(--store-text);
    font-size: 11px;
}

.store-search-all {
    padding: 8px 7px;
    border-top: 1px solid var(--store-line);
    color: var(--store-muted);
    font-size: 10px;
}

.store-search-all:hover {
    color: var(--store-text);
}

.store-search-shortcuts {
    display: grid;
    gap: 7px;
}

.store-search-shortcuts > span {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-search-shortcuts > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.store-search-shortcuts a {
    padding: 6px 10px;
    border: 1px solid var(--store-line);
    border-radius: 99px;
    color: var(--store-text);
    font-size: 10px;
}

.store-search-shortcuts a:hover {
    border-color: var(--store-black);
}

/* On a phone the menu already carries the account, so the header does not. */
@media (max-width: 760px) {
    .header-account {
        display: none;
    }
}

/* Security panel: the passkeys on an account. */
.account-security__intro,
.account-security__status {
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
    line-height: 1.5;
}

.account-security__status:empty {
    display: none;
}

.passkey-list {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.passkey-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--store-line);
    border-radius: 5px;
}

.passkey-card strong {
    display: block;
    font-size: 10px;
    font-weight: 650;
}

.passkey-card small {
    color: var(--store-muted);
    font-size: 9px;
}

.passkey-card__remove button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.passkey-card__remove button:hover {
    background: #fff0f0;
}

.passkey-card__remove img {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.store-passkey-status {
    margin: 0;
    color: var(--store-muted);
    font-size: 10px;
    text-align: center;
}

.store-passkey-status:empty {
    display: none;
}

@media (max-width: 980px) {
    .account-nav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .account-nav::-webkit-scrollbar {
        display: none;
    }

    .account-nav__item {
        flex: none;
        padding: 7px 11px;
        border: 1px solid var(--store-line);
        border-radius: 99px;
        background: var(--store-surface);
    }

    .account-nav__item.is-active {
        border-color: var(--store-black);
        background: var(--store-black);
        color: #fff;
    }

    .account-nav__item.is-active img {
        filter: brightness(0) invert(1);
    }

    .account-nav__item.is-active > small {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
    }

    .account-nav__item > span {
        flex: none;
    }
}

@media (max-width: 980px) {
    /* The strip runs sideways there, so the divider stands up with it. */
    .account-nav__rule {
        width: 0;
        height: auto;
        margin: 4px 2px;
        border-top: 0;
        border-left: 1px solid var(--store-line);
    }
}

@media (max-width: 720px) {
    .account-auth {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        /* Still one card, just stacked: a gap here would split it back into
           two floating blocks. */
        gap: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* A band, not a slab — it only has to say whose page this is. */
    .account-auth__brand {
        padding: 18px 20px;
        border-radius: var(--store-radius) var(--store-radius) 0 0;
    }

    .account-auth__logo img {
        height: 30px;
    }

    .account-auth__panel {
        padding: 20px 18px;
        border-radius: 0 0 var(--store-radius) var(--store-radius);
    }
}

/* Trouser number picker on a set (setelan). */
.product-pants-picker {
    margin-top: 14px;
}

.product-pants-picker__note {
    display: block;
    margin-top: 6px;
    color: var(--store-muted, #6b7280);
}

/* Fit advisor on a set: the trousers' answer sits under the jacket's. */
.store-fit-result__actions {
    display: grid;
    gap: 8px;
}

.store-fit-result__actions .store-button img {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -3px;
}

.store-fit-share-preview {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.store-fit-share-preview[hidden] {
    display: none;
}

.store-fit-result__pants {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--store-line);
}

/* Unsubscribe link from a campaign: one question, one button. */
.unsubscribe-page {
    max-width: 520px;
}

.unsubscribe-page p {
    margin: 14px 0 0;
    color: #343434;
    font-size: 12px;
    line-height: 1.7;
}

.unsubscribe-page .unsubscribe-page__note {
    margin-top: 4px;
    color: var(--store-muted);
    font-size: 11px;
}

.unsubscribe-page__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
}

/* Homepage size help, one band: the fitting room, the pitch, then the
   garment choice and the buttons that open the product page's own Fit
   Advisor and size guide panels. */
.size-help__card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 12px 28px 12px 12px;
    border-radius: 8px;
    background: var(--store-subtle);
}

.size-help__figure {
    width: 100%;
    aspect-ratio: 5 / 4;
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.size-help__figure > svg {
    max-width: none;
    height: 100%;
}

.size-help__text {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.size-help__text h2 {
    margin: 0;
    color: var(--store-text);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.size-help__text p {
    margin: 0;
    max-width: 46ch;
    color: var(--store-muted);
    font-size: 11px;
    line-height: 1.5;
}

.size-help__rating {
    margin-top: 0;
}

.size-help__controls {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.size-help__label {
    color: var(--store-muted);
    font-size: 9px;
    font-weight: 650;
}

.size-help__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.size-help__tabs button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--store-line-strong);
    border-radius: 99px;
    background: var(--store-surface);
    color: var(--store-text);
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
}

.size-help__tabs button[aria-checked="true"] {
    border-color: var(--store-black);
    background: var(--store-black);
    color: #fff;
}

/* Both buttons the same width, so the pair reads as one block. */
.size-help__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.size-help__actions .store-button {
    min-height: 36px;
}

.size-help__actions .store-button:only-child,
.size-help__actions.is-single .store-button {
    grid-column: 1 / -1;
}

/* The homepage's size guide holds one set of tables per garment. */
.store-size-panel__set {
    display: grid;
    gap: 14px;
}

.store-size-panel__set[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .size-help__card {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 12px 24px;
    }

    .size-help__figure {
        grid-row: span 2;
    }
}

@media (max-width: 640px) {
    .size-help__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 12px 14px 16px;
    }

    .size-help__figure {
        grid-row: auto;
        width: 100%;
        max-width: 240px;
        justify-self: center;
    }

    .size-help__controls {
        justify-items: stretch;
    }
}

/* Status figures (assets/js/status-figures.js): error, maintenance, coming
   soon and holiday pages, the holiday strip, and "no products found". */
.status-figure {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: var(--store-radius);
    background: var(--store-subtle);
    --hairline-plate: var(--store-subtle);
    --hairline-lo: #d2d2d7;
    --hairline-mid: #b4b4bc;
}

.status-figure > svg {
    max-width: none;
    height: 100%;
}

.store-standby__panel .status-figure {
    max-width: 260px;
}

.store-standby__panel .store-standby__logo {
    width: 150px;
}

.store-empty-state .status-figure {
    max-width: 200px;
    margin-bottom: 6px;
}

/* A small one beside a line of text: the holiday strip, a search heading. */
.status-figure--mini {
    flex: none;
    width: 84px;
    background: var(--store-surface);
    --hairline-plate: var(--store-surface);
}

.store-notice--figure {
    flex-wrap: nowrap;
    padding: 6px 14px 6px 6px;
}

.store-notice__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.catalog-heading__title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.catalog-heading__title .status-figure--mini {
    width: 96px;
    background: var(--store-subtle);
    --hairline-plate: var(--store-subtle);
}