:root {
  --canvas: #ffffff;
  --ink: #111111;
  --muted: #777777;
  --line: #e4e4e4;
  --soft: #f4f4f1;
  --signal: #8b1a1a;
  --signal-soft: #d9bfbb;
  --black: #151515;
  --technical-face: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --fast: 160ms;
  --normal: 240ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.ss-skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: #fff; transform: translateY(-200%); }
.ss-skip-link:focus { transform: translateY(0); }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.site-shell { width: min(100%, 1440px); margin: 0 auto; padding: 0 36px; }
.site-header { position: sticky; top: 0; z-index: 30; isolation: isolate; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 94%, transparent); backdrop-filter: blur(12px); }
.header-control, .bag-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; background: transparent; color: var(--ink); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.header-control:hover, .bag-trigger:hover { color: var(--signal); }
.menu-trigger { justify-self: start; }.menu-trigger .icon { width: 23px; height: 23px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.wordmark { font-family: var(--technical-face); font-size: 17px; font-weight: 500; letter-spacing: .16em; }
.wordmark-dot { color: var(--signal); }
.bag-trigger { position: relative; justify-self: end; padding-right: 0; }
.bag-count { position: absolute; top: 1px; right: -5px; display: none; min-width: 16px; height: 16px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--signal); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1; transform: translate(25%, -25%); }
.bag-count.has-items { display: inline-flex; }
.bag-icon { width: 24px; height: 24px; stroke-width: 1.35; }

.section-heading, .site-footer { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 0 0 19px; color: var(--signal); font-size: 10px; font-weight: 600; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 700px; margin-bottom: 28px; font-size: clamp(58px, 8vw, 126px); font-weight: 500; letter-spacing: -.085em; line-height: .86; }
h1 em, h2 em { font-style: normal; font-weight: 400; }
.text-action { display: inline-flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding: 0 0 9px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: gap var(--fast) var(--ease-out), color var(--fast) ease; }
.text-action:hover { gap: 20px; color: var(--signal); border-color: var(--signal); }
.suvice-drop-page { padding: 1.25rem 0 7rem; }
.section-heading { align-items: flex-end; margin-bottom: 26px; }.section-heading h1, .section-heading h2 { max-width: none; margin: 0; font-size: clamp(11px, 1vw, 13px); font-weight: 400; letter-spacing: .16em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.section-tools { display: flex; align-items: center; gap: 18px; }.section-count { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.circle-button, .panel-close { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: transparent; transition: color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease-out); }.circle-button:hover { background: var(--ink); color: #fff; }.circle-button:active, .panel-close:active, .add-button:active { transform: scale(.96); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.family-stack { display: grid; gap: 76px; }
.family-carousel { min-width: 0; }
.family-carousel--accessories .card-media { aspect-ratio: 1; }
.family-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 19px; }
.family-heading h2, .family-heading h3 { margin: 0 0 6px; font-size: 28px; font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.family-eyebrow { margin: 0 0 12px; color: var(--signal); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.family-description { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.family-count { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.carousel-controls { position: relative; display: flex; align-items: center; gap: 10px; }
.circle-button.is-unavailable { visibility: hidden; pointer-events: none; }
.circle-button.is-disabled { opacity: .28; cursor: not-allowed; }
.circle-button.is-disabled:hover { background: transparent; color: var(--ink); }
.rail-end-message { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; max-width: 230px; color: var(--muted); font-size: 9px; letter-spacing: .04em; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--fast) ease, transform var(--fast) var(--ease-out); }
.rail-end-message.is-visible { opacity: 1; transform: translateY(0); }
.icon-reverse { transform: rotate(180deg); }
.carousel-viewport { min-width: 0; overflow: hidden; }
.family-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.family-rail::-webkit-scrollbar { display: none; }
.family-rail:focus-visible { outline: 1px solid var(--signal); outline-offset: 8px; }
.family-rail .product-card { scroll-snap-align: start; }
.product-card { display: block; min-width: 0; }.card-media { position: relative; aspect-ratio: .76; overflow: hidden; border: 1px solid #c8c8c8; border-radius: 24px; background: var(--soft); }
.product-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.card-badge { position: absolute; top: 18px; right: 18px; z-index: 3; border: 1px solid #777; padding: 6px 8px 5px; background: rgba(255, 255, 255, .98); color: var(--ink); font-family: var(--technical-face); font-size: 9px; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.card-badge--sold-out { border-color: #666; color: #6f6f6f; }
.product-card { position: relative; }
.product-card > .ss-product-card__brand-verified { position: absolute; top: 12px; right: -7px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 6px 9px 5px; border: 1px solid rgba(179,145,87,.58); border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(17,17,17,.12); color: #b39157; font-family: var(--technical-face); font-size: 8px; font-weight: 500; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
.ss-product-card__brand-verified-name { min-width: 0; overflow: hidden; color: #d1b47a; text-overflow: ellipsis; white-space: nowrap; }
.ss-product-card__brand-verified-label { color: #b39157; white-space: nowrap; }
.ss-product-card__brand-verified-icon { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.media-index, .media-note { position: absolute; z-index: 2; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.18); }.media-index { top: 18px; left: 18px; }.media-note { right: 18px; bottom: 18px; writing-mode: vertical-rl; transform: rotate(180deg); }
.card-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 2px 0; }.card-kicker { margin-bottom: 7px; color: var(--muted); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }.card-body h3 { margin-bottom: 7px; color: var(--muted); font-family: var(--technical-face); font-size: 13px; font-weight: 400; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }.card-price { margin: 0; color: var(--muted); font-size: 12px; }.card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }.save-button { display: grid; width: 28px; height: 28px; place-items: center; background: transparent; color: var(--muted); }.save-button:hover, .save-button.is-saved { color: var(--signal); }.save-button.is-saved svg { fill: currentColor; }.save-button .icon { width: 16px; height: 16px; }.add-button { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink); padding: 0 0 6px; background: transparent; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color var(--fast) ease, border-color var(--fast) ease; }.add-button:hover { color: var(--signal); border-color: var(--signal); }.add-button span { font-size: 15px; font-weight: 400; }
.ss-free-shipping { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #999; font-family: var(--technical-face); font-size: 10px; font-weight: 500; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.ss-free-shipping__icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.ss-free-shipping__text { display: inline-block; color: #999; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) { .ss-free-shipping__text { color: transparent; background: linear-gradient(110deg, #7d111a 8%, #ff6546 50%, #7d111a 92%) 0 0 / 240% 100%; background-clip: text; -webkit-background-clip: text; animation: ss-red-shimmer 4s linear infinite alternate; } }
@keyframes ss-red-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ss-product-card__meta-copy { display: grid; min-width: 0; }
.ss-product-card__shipping { margin-top: 8px; color: #bcbcbc; }
.ss-free-shipping--product { display: flex; }
@media (prefers-reduced-motion: reduce) { .ss-free-shipping__text { animation: none; background-position: 50% 0; } }
.rail-empty { min-height: 120px; display: grid; place-items: center start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.product-code-locator { display: grid; justify-items: center; border-bottom: 1px solid var(--line); padding: clamp(2rem, 5vw, 4rem) 0 clamp(.75rem, 1.5vw, 1.25rem); text-align: center; }
.product-code-locator__intro { display: grid; gap: .65rem; }
.product-code-locator__eyebrow, .product-code-locator__form label { color: var(--muted); font-family: var(--technical-face); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.product-code-locator__eyebrow { margin: 0; }
.product-code-locator h1 { max-width: none; margin: 0; font-family: var(--technical-face); font-size: clamp(1.65rem, 3.5vw, 3.4rem); font-weight: 400; letter-spacing: .05em; line-height: 1; text-transform: uppercase; }
.product-code-locator__arrow { margin: 1.25rem 0 1rem; color: var(--ink); font-family: var(--technical-face); font-size: 1.5rem; line-height: 1; }
.product-code-locator__form { width: min(100%, 34rem); text-align: left; }
.product-code-locator__form label { display: block; margin-bottom: .5rem; }
.product-code-locator__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--ink); }
.product-code-locator__field:focus-within { border-bottom-color: var(--signal); }
.product-code-locator__field input { min-width: 0; border: 0; outline: 0; padding: .7rem 0; background: transparent; color: var(--ink); font-family: var(--technical-face); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.product-code-locator__field input::placeholder { color: var(--muted); opacity: 1; }
.product-code-locator__field input:focus-visible { outline: 0; outline-offset: 0; }
.product-code-locator__field button { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 0 .7rem .85rem; background: transparent; color: var(--ink); font-family: var(--technical-face); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.product-code-locator__field button:hover:not(:disabled), .product-code-locator__field button:focus-visible { color: var(--signal); }
.product-code-locator__field button:disabled { cursor: not-allowed; opacity: .35; }
.product-code-locator__status { min-height: 1.25rem; margin: .65rem 0 0; color: var(--signal); font-family: var(--technical-face); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }

.site-footer { border-top: 1px solid var(--line); padding: 22px 0 28px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.site-footer a:hover { color: var(--ink); }.site-footer-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }.site-footer-nav a:hover { color: var(--ink); }

.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(17,17,17,.32); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }.scrim.is-visible { opacity: 1; pointer-events: auto; }
.side-panel { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(100%, 430px); display: flex; flex-direction: column; background: var(--canvas); transform: translateX(102%); transition: transform 360ms var(--ease-drawer); }.side-panel.is-open { transform: translateX(0); }.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid var(--line); padding: 0 30px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.panel-head b { color: var(--signal); font-weight: 600; }.panel-close { width: 38px; height: 38px; border-color: var(--line); }.panel-close:hover { border-color: var(--ink); background: var(--ink); color: #fff; }.main-nav { display: flex; flex: 1; flex-direction: column; padding: 20px 30px; }.main-nav a { display: flex; align-items: baseline; gap: 17px; border-bottom: 1px solid var(--line); padding: 19px 0; font-size: 27px; font-weight: 500; letter-spacing: -.05em; }.main-nav a span { color: var(--signal); font-size: 10px; letter-spacing: .1em; }.main-nav a:hover { color: var(--signal); }.panel-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 22px 30px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.menu-panel { inset: 0 auto 0 0; transform: translateX(-102%); }
.cart-empty { display: grid; flex: 1; align-content: center; justify-items: center; gap: 12px; color: var(--muted); text-align: center; }.empty-mark { color: var(--ink); font-size: 54px; font-weight: 300; line-height: 1; }.cart-empty p { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: -.04em; }.cart-empty span { font-size: 11px; }.cart-items { padding: 0 30px; }.cart-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 18px 0; }.cart-item-info { display: grid; gap: 5px; }.cart-item-name { font-size: 13px; font-weight: 600; }.cart-item-price { color: var(--muted); font-size: 11px; }.cart-item-quantity { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 11px; }.cart-item-quantity button { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 13px; line-height: 1; }.cart-item-quantity button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }.cart-item-quantity button:disabled { cursor: not-allowed; opacity: .28; }.cart-item-remove { width: 28px; height: 28px; background: transparent; color: var(--muted); font-size: 18px; }.cart-item-remove:hover { color: var(--signal); }.cart-footer { display: grid; gap: 18px; border-top: 1px solid var(--line); padding: 22px 30px 28px; }.cart-footer > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.cart-footer strong { color: var(--ink); font-size: 14px; }.checkout-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 18px; background: var(--ink); color: #fff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: background var(--fast) ease, transform var(--fast) var(--ease-out); }.checkout-button:hover { background: var(--signal); }.checkout-button:active { transform: scale(.98); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; background: var(--ink); color: #fff; transform: translateY(12px); opacity: 0; pointer-events: none; padding: 12px 16px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: opacity 180ms ease, transform 180ms var(--ease-out); }.toast.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 800px) { .site-shell { padding: 0 20px; }.site-header { height: 64px; }.header-control span { display: none; }.side-panel { inset: 0 0 0 auto; }.menu-panel { inset: 0 auto 0 0; }.suvice-drop-page { padding-top: .75rem; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; }.carousel-controls { display: none; }.family-rail { grid-auto-columns: calc(100% - 34px); gap: 14px; }.family-stack { gap: 60px; } }
@media (max-width: 800px) { .product-code-locator__field input { font-size: 16px; } }
@media (max-width: 800px) { .ss-free-shipping { font-size: 9px; gap: 6px; } .ss-free-shipping__icon { width: 14px; height: 14px; } .ss-free-shipping__text { animation: none; background: linear-gradient(90deg, #999 0 48%, #a6a6a6 55%, #f7a144 70%, #e14a24 84%, #b40000 100%); background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } }
@media (max-width: 420px) { .site-shell { padding: 0 16px; }.header-actions { gap: 10px; }.wordmark { font-size: 16px; }.suvice-drop-page { padding-top: .5rem; padding-bottom: 78px; }.section-heading { align-items: flex-start; margin-bottom: 22px; }.section-heading h1, .section-heading h2 { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }.section-count { display: none; }.family-heading { align-items: flex-start; gap: 14px; }.family-heading h2, .family-heading h3 { font-size: 25px; }.family-description { max-width: 180px; }.family-heading .section-tools { flex-direction: column; align-items: flex-end; gap: 10px; }.family-rail { grid-auto-columns: calc(100% - 34px); gap: 12px; padding-bottom: 6px; }.card-media { aspect-ratio: .78; }.card-body { display: block; }.product-code-locator { padding: 2.25rem 0 1rem; }.product-code-locator h1 { font-size: 1.5rem; }.product-code-locator__form { width: 100%; }.site-footer { align-items: flex-start; flex-direction: column; gap: 18px; padding: 30px 0 46px; }.site-footer-nav { gap: 14px 14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.site-header, .side-panel, .scrim, .toast, .text-action, .circle-button, .panel-close, .checkout-button { transition-duration: 0.01ms !important; } }

.product-card--sold-out { cursor: default; }
.product-card--sold-out .product-photo { filter: grayscale(1); opacity: .62; }
.product-card--sold-out .card-media::after { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .16); content: ''; pointer-events: none; }
.card-stock { margin: 10px 0 0; color: var(--muted); font-family: var(--technical-face); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.card-stock--sold-out { color: #8a8a8a; }

/* Cart drawer: populated state starts at the top and keeps the same technical register. */
.bag-count { background: var(--ink); font-family: var(--technical-face); font-variant-numeric: tabular-nums; }
.cart-panel { width: min(100%, 520px); }
.cart-panel .panel-head,
.cart-panel .cart-empty,
.cart-panel .cart-items,
.cart-panel .cart-footer,
.cart-panel .checkout-button {
  font-family: var(--technical-face);
}
.cart-panel .panel-head { min-height: 82px; padding: 0 28px; font-size: 10px; font-weight: 500; letter-spacing: .14em; }
.cart-panel .cart-empty[hidden],
.cart-panel .cart-footer[hidden] { display: none !important; }
.cart-panel .cart-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 28px 34px;
}
.cart-panel .cart-items:empty { display: none; }
.cart-panel .cart-empty { flex: 1; min-height: 0; padding: 30px; }
.cart-panel .empty-mark { font-family: var(--technical-face); font-size: 42px; font-weight: 400; }
.cart-panel .cart-empty p { font-family: var(--technical-face); font-size: 16px; font-weight: 400; letter-spacing: .02em; }
.cart-panel .cart-empty span { font-size: 10px; letter-spacing: .04em; }
.cart-panel .cart-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin: 0 0 26px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
}
.cart-panel .cart-item:last-child { margin-bottom: 0; }
.cart-item-media {
  aspect-ratio: auto;
  overflow: hidden;
  background: transparent;
}
.cart-item-media img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: center; }
.cart-item-media--empty { display: grid; place-items: center; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.cart-item-main { min-width: 0; display: flex; min-height: 100%; flex-direction: column; }
.cart-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cart-item-name { margin: 0; color: var(--ink); font-family: var(--technical-face); font-size: 12px; font-weight: 500; letter-spacing: .05em; line-height: 1.45; text-transform: uppercase; }
.cart-item-variation { margin: 8px 0 0; color: var(--muted); font-family: var(--technical-face); font-size: 9px; letter-spacing: .04em; line-height: 1.55; text-transform: uppercase; }
.cart-item-line-total { flex: 0 0 auto; color: var(--ink); font-family: var(--technical-face); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 34px; }
.cart-panel .cart-item-quantity { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); font-family: var(--technical-face); font-variant-numeric: tabular-nums; }
.cart-panel .cart-item-quantity button { width: 31px; height: 31px; border: 0; border-radius: 0; background: transparent; font-family: var(--technical-face); font-size: 14px; }
.cart-panel .cart-item-quantity button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.cart-panel .cart-item-quantity button:disabled { opacity: .25; }
.cart-panel .cart-item-quantity span { min-width: 31px; color: var(--ink); font-size: 10px; text-align: center; }
.cart-item-unit-price { color: var(--muted); font-family: var(--technical-face); font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.cart-panel .cart-item-remove { align-self: flex-start; width: auto; height: auto; margin-top: 18px; padding: 0 0 4px; border-bottom: 1px solid var(--muted); background: transparent; color: var(--muted); font-family: var(--technical-face); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.cart-panel .cart-item-remove:hover { border-color: var(--ink); color: var(--ink); }
.cart-panel .cart-footer { gap: 18px; padding: 22px 28px 28px; }
.cart-panel .cart-footer > div { font-family: var(--technical-face); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cart-panel .cart-footer strong { font-family: var(--technical-face); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 500; }
.cart-panel .checkout-button { min-height: 54px; font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.cart-panel .checkout-button:hover { background: #303030; }
.cart-panel .cart-items,
.cart-panel .cart-footer { border-color: var(--line); }

@media (max-width: 520px) {
  .cart-panel { width: min(100%, 100vw); }
  .cart-panel .cart-items { padding-right: 20px; padding-left: 20px; }
  .cart-panel .cart-footer { padding-right: 20px; padding-left: 20px; }
  .cart-panel .cart-item { grid-template-columns: 96px minmax(0, 1fr); gap: 15px; }
  .cart-item-controls { align-items: flex-start; flex-direction: column; gap: 10px; padding-top: 24px; }
  .cart-item-unit-price { order: 2; }
}

/* Mobile footer: give the identity and navigation their own rows instead of a cramped wrap. */
@media (max-width: 700px) {
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity back" "navigation navigation";
    align-items: start;
    gap: 26px 20px;
    padding: 42px 0 64px;
    font-size: 10px;
    line-height: 1.4;
  }

  .site-footer > span { grid-area: identity; }

  .site-footer > a:last-child {
    grid-area: back;
    justify-self: end;
    white-space: nowrap;
  }

  .site-footer-nav {
    display: grid;
    grid-area: navigation;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    width: 100%;
    padding-top: 4px;
  }

  .site-footer-nav a {
    padding: 4px 0;
    line-height: 1.4;
  }
}

/* Keep the page underneath a drawer fixed while the drawer owns the gesture. */
html.surface-open,
body.surface-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.cart-panel,
.cart-panel .cart-items {
  overscroll-behavior: contain;
}

.cart-panel { touch-action: pan-y; }