:root {
    --bs-primary-rgb: 17, 17, 17;
    --bs-secondary-color: var(--color-muted);
}

.store-intro { padding-block: clamp(62px, 7vw, 104px) clamp(36px, 4vw, 58px); }

.store-intro--compact { padding-bottom: 34px; }
.store-intro h1 { margin-bottom: 17px; font-size: clamp(48px, 6.3vw, 88px); text-transform: uppercase; }
.store-intro > p:last-child { max-width: 650px; margin: 0; color: var(--color-muted); font-size: clamp(16px, 1.3vw, 19px); }
.store-page { padding-bottom: clamp(80px, 9vw, 140px); }
.store-page--product { padding-top: clamp(34px, 5vw, 72px); }
.store-page--confirmation { padding-top: clamp(68px, 8vw, 110px); }

.sprocket-storefront {
    --color-primary: var(--color-action);
    --color-primary-dark: var(--color-action-hover);
    --color-primary-soft: var(--color-surface);
    --color-background-subtle: var(--color-surface);
    --color-secondary-light: var(--color-surface);
    --color-heading: var(--color-text);
    --color-white: #fff;
    --color-success: #222222;
    --color-danger: #222222;
    --color-danger-soft: #f2f2f2;
    --sp-store-navy: var(--color-action);
    --sp-store-navy-dark: var(--color-action-hover);
    --sp-store-ink: var(--color-text);
    --sp-store-heading: var(--color-text);
    --sp-store-muted: var(--color-muted);
    --sp-store-border: var(--color-border);
    --sp-store-media-bg: var(--color-surface);
    --sp-store-placeholder: var(--color-surface);
    --sp-store-soft: var(--color-surface);
    font-family: var(--font-body);
}

.sprocket-storefront h1,
.sprocket-storefront h2,
.sprocket-storefront h3,
.sprocket-storefront .sprocket-product-title,
.sprocket-storefront .sprocket-cart__title,
.sprocket-storefront .sprocket-checkout-success__title {
    font-family: var(--font-display);
    font-weight: 700 !important;
    letter-spacing: -.04em;
}

.sprocket-storefront .sprocket-panel,
.sprocket-storefront .sprocket-control,
.sprocket-storefront .sprocket-choice,
.sprocket-storefront .sprocket-button-primary,
.sprocket-storefront .sprocket-button-secondary,
.sprocket-storefront .sprocket-payment-choice,
.sprocket-storefront .sprocket-quantity,
.sprocket-storefront .sprocket-product-card,
.sprocket-storefront .select2-selection--single { border-radius: 0 !important; }

.sprocket-storefront .sprocket-button-primary,
.sprocket-storefront .sprocket-button-secondary {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sprocket-storefront .sprocket-control:focus,
.sprocket-storefront .select2-container--focus .select2-selection--single {
    border-color: var(--color-action) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .18) !important;
}

.sprocket-storefront .sprocket-category-nav__item:hover,
.sprocket-storefront .sprocket-category-nav__item:focus-visible { background: var(--color-surface); }
.sprocket-storefront .sprocket-category-nav__item.is-active { background: var(--color-surface); color: var(--color-text); }
.sprocket-storefront .sprocket-product-price { font-family: var(--font-body); }
.sprocket-storefront .sprocket-breadcrumb { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.sprocket-storefront.sprocket-product-details .sprocket-product-title { font-size: clamp(38px, 4vw, 60px); }
.sprocket-storefront .sprocket-product-details .sprocket-product-price { font-size: 21px; }
.sprocket-storefront .sprocket-product-list .sprocket-panel__title { font-family: var(--font-body); font-size: 12px; font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase; }

.thread-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 46px) clamp(14px, 2vw, 30px); }
.thread-product { min-width: 0; }
.thread-product a { display: block; height: 100%; }
.thread-product__image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-surface); }
.thread-product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.thread-product a:hover img { transform: scale(1.035); }
.thread-product__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--color-muted); font-family: var(--font-brand); font-size: clamp(14px, 2vw, 22px); font-weight: 800; letter-spacing: .12em; }
.thread-product__badge { position: absolute; top: 12px; left: 12px; padding: 6px 9px; background: #fff; color: var(--color-text); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.thread-product__badge--right { left: auto; right: 12px; }
.thread-product__details { display: flex; justify-content: space-between; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--color-border); }
.thread-product a:hover .thread-product__details { border-color: var(--color-text); }
.thread-product__details .section-label { margin: 0 0 7px; color: var(--color-muted); font-size: 10px; }
.thread-product__details h2 { margin: 0; font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.03em; }
.thread-product__price { flex: 0 0 auto; margin: 2px 0 0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.thread-product__price span, .thread-product__price del { color: var(--color-muted); font-size: 11px; font-weight: 400; }
.thread-product__price del { display: block; text-align: right; }

.thread-sign-in { margin-top: 32px; padding: clamp(24px, 3vw, 38px); background: var(--color-surface); }
.thread-sign-in h2 { font-size: clamp(30px, 3vw, 42px); }
.thread-sign-in p:not(.section-label) { max-width: 410px; color: var(--color-muted); }
.thread-sign-in__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button--outline { border: 1px solid var(--color-text); }
.button--outline:hover { background: var(--color-text); color: #fff; }

.account-page { min-height: 65vh; padding-block: clamp(70px, 9vw, 130px); }
.account-page--form { max-width: 610px; }
.account-page h1 { margin-bottom: 20px; font-size: clamp(48px, 6vw, 78px); text-transform: uppercase; }
.account-page__intro { max-width: 490px; margin-bottom: 32px; color: var(--color-muted); font-size: 18px; }
.account-page__switch { margin-top: 28px; color: var(--color-muted); font-size: 14px; }
.account-page__switch a, .account-recovery summary { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.account-form { display: grid; gap: 10px; }
.account-form label { margin-top: 9px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.account-form input:not([type="checkbox"]) { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 0; background: #fff; font: inherit; }
.account-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.account-form__check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 400 !important; }
.account-form .button { width: 100%; margin-top: 16px; border: 0; }
.account-recovery { margin-top: 22px; font-size: 14px; }
.account-recovery summary { cursor: pointer; }
.account-recovery .account-form { margin-top: 18px; }
.account-links { display: grid; max-width: 600px; border-top: 1px solid var(--color-border); }
.account-links a, .account-links button { display: flex; justify-content: space-between; width: 100%; padding: 19px 0; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.account-links a:hover, .account-links button:hover { color: var(--color-muted); }

@media (max-width: 800px) {
    .thread-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .store-intro { padding-block: 54px 35px; }
    .thread-products { grid-template-columns: 1fr; }
    .thread-product__image { aspect-ratio: 1; }
    .thread-product__details h2 { font-size: 23px; }
    .account-page { padding-block: 65px; }
}

@media (prefers-reduced-motion: reduce) {
    .thread-product__image img { transition: none; }
}