:root {
    --sp-bg: #f3eee4;
    --sp-ink: #1c1917;
    --sp-ink-60: rgba(28, 25, 23, 0.6);
    --sp-ink-50: rgba(28, 25, 23, 0.5);
    --sp-ink-40: rgba(28, 25, 23, 0.4);
    --sp-clay: #9a6b4a;
    --sp-border: #ddd4c6;
    --sp-secondary: #e9e1d4;
}

body.sp-body {
    margin: 0;
    background: var(--sp-bg);
    color: var(--sp-ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    line-height: 1.6;
}

.sp-body .public-main {
    max-width: none;
    padding: 8rem 0 4rem;
    background: transparent;
}
.sp-body .public-main-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    background: transparent;
}

.sp-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--sp-bg); }
.sp-main { flex: 1; }
.sp-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .sp-container { padding: 0 2.5rem; } }

.sp-kicker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-clay);
}

.sp-heading {
    font-family: Fraunces, Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--sp-ink);
}

.sp-btn {
    display: inline-block;
    border: 1px solid var(--sp-ink);
    background: var(--sp-ink);
    color: var(--sp-bg);
    padding: 0.85rem 1.5rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sp-btn:hover { background: transparent; color: var(--sp-ink); }
.sp-btn-ghost {
    background: transparent;
    color: var(--sp-ink);
}
.sp-btn-ghost:hover { background: var(--sp-ink); color: var(--sp-bg); }

.sp-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: transparent;
    transition: background 0.3s;
}
.sp-header.is-solid { background: var(--sp-bg); border-bottom: 1px solid var(--sp-border); }
.sp-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.15rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 768px) { .sp-header-inner { padding: 1.15rem 2.5rem; } }

.sp-logo {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sp-ink);
    text-decoration: none;
}

.sp-nav { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 900px) { .sp-nav { display: flex; } }

.sp-nav-link,
.sp-nav-btn {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sp-ink-60);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.sp-nav-link:hover,
.sp-nav-btn:hover { color: var(--sp-clay); }

.sp-shop-wrap { position: relative; }
.sp-mega {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2.2rem;
    width: min(72rem, 88vw);
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    padding: 2rem 2.25rem;
    z-index: 60;
    box-shadow: 0 18px 50px rgba(28, 25, 23, 0.08);
}
.sp-shop-wrap:hover .sp-mega,
.sp-shop-wrap:focus-within .sp-mega { display: block; }
.sp-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: 2rem;
}
.sp-mega h3 {
    margin: 0 0 1rem;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-ink-40);
}
.sp-mega a {
    display: block;
    color: var(--sp-ink);
    text-decoration: none;
    padding: 0.3rem 0;
    font-size: 0.95rem;
}
.sp-mega a:hover { color: var(--sp-clay); }
.sp-mega-featured img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; }
.sp-mega-featured span { display: block; margin-top: 0.65rem; font-family: Fraunces, Georgia, serif; font-size: 1.1rem; }

.sp-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.sp-basket-btn {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sp-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.sp-header .shop-dropdown {
    right: 0;
    left: auto;
}

.sp-menu-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--sp-border);
    background: transparent;
    color: var(--sp-ink);
}
@media (min-width: 900px) { .sp-menu-toggle { display: none; } }

.sp-mobile-nav {
    display: none;
    border-top: 1px solid var(--sp-border);
    background: var(--sp-bg);
    padding: 1rem 1.5rem 1.5rem;
}
.sp-mobile-nav.is-open { display: block; }
.sp-mobile-nav a,
.sp-mobile-nav button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--sp-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sp-border);
}

.sp-hero { position: relative; min-height: 100vh; color: var(--sp-ink); overflow: hidden; }
.sp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-hero-veil { position: absolute; inset: 0; background: rgba(243, 238, 228, 0.28); }
.sp-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 11rem 1.5rem 5rem;
}
@media (min-width: 768px) { .sp-hero-copy { padding: 13rem 2.5rem 6rem; } }
.sp-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); max-width: 14ch; margin: 0.8rem 0 1.2rem; }
.sp-hero p { max-width: 34rem; font-size: 1.2rem; color: var(--sp-ink-60); }
.sp-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.sp-section { padding: 5rem 0; }
.sp-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.sp-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
@media (min-width: 900px) { .sp-product-grid { grid-template-columns: repeat(4, 1fr); gap: 3.5rem 2.5rem; } }
.sp-card { display: block; text-decoration: none; color: inherit; }
.sp-card-media { overflow: hidden; background: var(--sp-secondary); }
.sp-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; transition: transform 0.7s; }
.sp-card:hover img { transform: scale(1.03); }
.sp-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-top: 1px solid var(--sp-border);
    padding-top: 1rem;
    margin-top: 1.15rem;
}
.sp-card-id { font-family: Fraunces, Georgia, serif; font-size: 0.875rem; color: rgba(28, 25, 23, 0.35); padding-top: 0.2rem; }
.sp-card-name { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; display: block; }
.sp-card:hover .sp-card-name { color: var(--sp-clay); }
.sp-card-short { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--sp-ink-50); }
.sp-card-price { font-family: Fraunces, Georgia, serif; font-size: 1.15rem; color: var(--sp-ink); white-space: nowrap; }
.sp-card-num { font-size: 11px; letter-spacing: 0.2em; color: var(--sp-ink-40); margin-bottom: 0.35rem; }

.sp-theme-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--sp-border); }
@media (min-width: 700px) { .sp-theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sp-theme-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-theme-card { display: block; background: var(--sp-bg); text-decoration: none; color: inherit; }
.sp-theme-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sp-theme-card div { padding: 1.25rem 1.25rem 1.5rem; }
.sp-theme-card h3 { margin: 0.35rem 0 0.25rem; font-family: Fraunces, Georgia, serif; font-size: 1.35rem; }
.sp-theme-card p { margin: 0; color: var(--sp-ink-60); font-size: 0.9rem; }

.sp-promo-grid { display: grid; gap: 1px; background: var(--sp-border); }
@media (min-width: 900px) { .sp-promo-grid { grid-template-columns: 1.3fr 1fr; } }
.sp-promo { background: var(--sp-bg); padding: 3rem 2rem; }
.sp-promo h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0.6rem 0 1rem; max-width: 12ch; }

.sp-studio-grid { display: grid; gap: 1px; background: var(--sp-border); }
@media (min-width: 800px) { .sp-studio-grid { grid-template-columns: repeat(3, 1fr); } }
.sp-studio-card { background: var(--sp-bg); padding: 2rem; }
.sp-studio-card h3 { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; margin: 0.8rem 0 0.4rem; }

.sp-footer { padding-top: 5rem; }
.sp-footer-grid { display: grid; gap: 2rem; border-top: 1px solid var(--sp-border); padding: 3rem 0 2rem; }
@media (min-width: 800px) { .sp-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.sp-footer a { color: var(--sp-ink-60); text-decoration: none; }
.sp-footer a:hover { color: var(--sp-clay); }
.sp-footer ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.sp-footer li { margin: 0.4rem 0; }
.sp-footer-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--sp-border);
    padding: 1.5rem 0 2rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-ink-40);
}

.sp-page { padding: 8rem 0 4rem; }
.sp-page h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 0.5rem 0 1rem; }

body.sp-body .shop-wrap,
body.sp-body .shop-product,
body.sp-body .shop-checkout-wrap,
body.sp-body .public-main-inner > .shop-basket,
body.sp-body .public-main-inner > form,
body.sp-body .public-main-inner > h1 {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
body.sp-body .public-main { padding-top: 6.5rem; }
body.sp-body .public-header,
body.sp-body .public-footer { display: none; }
body.sp-body .alert-success,
body.sp-body .alert-error { max-width: 1400px; margin: 0 auto 1rem; }

.sp-back {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sp-ink-50);
    text-decoration: none;
}
.sp-back:hover { color: var(--sp-clay); }

.sp-collection { padding: 7.5rem 0 0; }
.sp-collection-intro { padding-bottom: 2.5rem; }
.sp-collection-intro h1 {
    font-size: clamp(3rem, 8vw, 4.5rem);
    margin: 1.15rem 0 1.25rem;
}
.sp-collection-intro p { max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: var(--sp-ink-60); margin: 0; }
.sp-collection-hero { width: 100%; }
.sp-collection-hero img { width: 100%; height: 55vh; object-fit: cover; display: block; }
@media (min-width: 768px) { .sp-collection-hero img { height: 72vh; } }
.sp-collection-list { padding: 5rem 0 6rem; }
@media (min-width: 768px) { .sp-collection-list { padding: 7rem 0 7rem; } }
.sp-collection-count {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    border-bottom: 1px solid var(--sp-border);
    padding-bottom: 1.5rem;
}
.sp-collection-count h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); }
.sp-stagger-grid { display: grid; gap: 5rem 2.5rem; }
@media (min-width: 768px) {
    .sp-stagger-grid { grid-template-columns: 1fr 1fr; }
    .sp-stagger-grid .sp-card:nth-child(even) { margin-top: 6rem; }
}
.sp-stagger-grid .sp-card-name { font-size: 1.6rem; }
.sp-stagger-grid .sp-card-price { font-size: 1.25rem; }

.sp-more { padding: 0 0 6rem; }
.sp-more h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 2rem; }
.sp-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sp-border); }
@media (min-width: 768px) { .sp-more-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-more-card { position: relative; display: block; background: var(--sp-bg); overflow: hidden; }
.sp-more-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform 0.7s; }
.sp-more-card:hover img { transform: scale(1.04); }
.sp-more-card span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 4rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(28, 25, 23, 0.85), rgba(28, 25, 23, 0.25), transparent);
    color: var(--sp-bg);
    font-family: Fraunces, Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
}

.sp-pdp { padding: 7.5rem 0 0; }
.sp-pdp-hero { width: 100%; margin-top: 2rem; position: relative; }
.sp-pdp-hero img { width: 100%; height: 60vh; object-fit: cover; display: block; }
@media (min-width: 768px) { .sp-pdp-hero img { height: 85vh; } }
.sp-pdp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(233, 225, 212, 0.12);
    pointer-events: none;
}
.sp-pdp-body {
    display: grid;
    gap: 3.5rem;
    border-bottom: 1px solid var(--sp-border);
    padding: 4rem 0;
}
@media (min-width: 1000px) {
    .sp-pdp-body { grid-template-columns: 1.5fr 1fr; gap: 6rem; padding: 4rem 0; }
}
.sp-pdp-body h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); margin: 1.15rem 0 1.5rem; }
.sp-pdp-blurb { max-width: 36rem; font-size: 1.25rem; line-height: 1.65; color: var(--sp-ink-60); margin: 0; }
.sp-finishes { margin-top: 2.5rem; }
.sp-finish-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.sp-finish {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--sp-border);
    background: transparent;
    color: var(--sp-ink-60);
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.sp-finish.is-on { border-color: var(--sp-ink); background: var(--sp-ink); color: var(--sp-bg); }
.sp-finish i { width: 1rem; height: 1rem; border: 1px solid rgba(0,0,0,0.1); display: block; }
.sp-finish-note { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--sp-ink-50); }

.sp-buy { border: 1px solid var(--sp-border); }
.sp-buy-prices { display: flex; justify-content: space-between; align-items: flex-end; padding: 1.5rem; }
.sp-buy-prices dt { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-ink-40); }
.sp-buy-prices dd { margin: 0.5rem 0 0; font-family: Fraunces, Georgia, serif; font-weight: 600; }
.sp-buy-solo { font-size: 2.25rem; }
.sp-buy-bundle { font-size: 1.5rem; color: var(--sp-clay); text-align: right; }
.sp-buy-specs { margin: 0; border-top: 1px solid var(--sp-border); }
.sp-buy-specs div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--sp-border);
}
.sp-buy-specs dt { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-ink-40); }
.sp-buy-specs dd { margin: 0; font-size: 0.9rem; font-weight: 600; }
.sp-buy-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.sp-buy-actions .sp-btn { text-align: center; }
.sp-qty {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--sp-border);
    background: var(--sp-bg);
}
.sp-qty-btn {
    width: 3.25rem;
    border: 0;
    background: transparent;
    color: var(--sp-ink);
    font-family: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.sp-qty-btn:hover { background: rgba(0,0,0,0.04); }
.sp-qty input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-left: 1px solid var(--sp-border);
    border-right: 1px solid var(--sp-border);
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sp-ink);
    padding: 0.85rem 0;
    -moz-appearance: textfield;
}
.sp-qty input::-webkit-outer-spin-button,
.sp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sp-bundle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: 2.5rem;
    align-items: start;
}
.sp-bundle-rules { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 2rem; }
.sp-bundle-rule {
    border: 1px solid var(--sp-border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.sp-bundle-card { display: flex; flex-direction: column; border: 1px solid var(--sp-border); }
.sp-bundle-card-media { aspect-ratio: 1; overflow: hidden; background: #efe8dc; }
.sp-bundle-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bundle-card-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.sp-bundle-card-name { font-family: Fraunces, Georgia, serif; font-size: 1.15rem; font-weight: 600; margin: 0; }
.sp-bundle-card-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--sp-ink-50); font-size: 0.8125rem; }
.sp-bundle-tray { border: 1px solid var(--sp-border); padding: 1.5rem; position: sticky; top: 6.5rem; }
.sp-bundle-tray h2 { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; margin: 0 0 0.75rem; }
.sp-bundle-tray ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.sp-bundle-tray li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--sp-border); font-size: 0.875rem; }
.sp-bundle-progress { font-size: 0.9rem; color: var(--sp-ink-60); margin: 0 0 1rem; }
.sp-bundle-totals { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.25rem; font-size: 0.9rem; }
.sp-bundle-totals strong { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; }
@media (max-width: 900px) {
    .sp-bundle-layout { grid-template-columns: 1fr; }
    .sp-bundle-tray { position: static; }
}

.sp-related { padding: 5rem 0 6rem; }
.sp-related h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 2.5rem; }

.sp-basket .sp-back { display: inline-block; margin-bottom: 1.5rem; }
.sp-basket-empty { max-width: 32rem; font-size: 1.15rem; color: var(--sp-ink-60); }
.sp-basket-empty a { color: var(--sp-ink); }
.sp-basket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    gap: 3rem;
    align-items: start;
    margin-top: 2.5rem;
}
.sp-basket-lines { display: flex; flex-direction: column; }
.sp-basket-line {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 8.5rem auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--sp-border);
}
.sp-basket-thumb {
    width: 7.5rem;
    height: 7.5rem;
    overflow: hidden;
    background: #efe8dc;
    border: 1px solid var(--sp-border);
}
.sp-basket-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-basket-line-info h2 {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}
.sp-basket-line-info p { margin: 0 0 0.35rem; font-size: 0.875rem; color: var(--sp-ink-50); }
.sp-basket-unit { font-weight: 600; color: var(--sp-ink) !important; }
.sp-basket-remove {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sp-ink-40);
    cursor: pointer;
}
.sp-basket-remove:hover { color: var(--sp-clay); }
.sp-basket-qty-form .sp-qty { min-width: 8.5rem; }
.sp-basket-line-total {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}
.sp-basket-aside {
    border: 1px solid var(--sp-border);
    padding: 1.75rem 1.5rem 1.5rem;
    position: sticky;
    top: 6.5rem;
}
.sp-basket-aside h2 { font-size: 2rem; margin: 0.4rem 0 1.25rem; }
.sp-basket-rows { display: flex; flex-direction: column; }
.sp-basket-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.9375rem;
}
.sp-basket-row--muted { color: var(--sp-ink-50); font-size: 0.8125rem; }
.sp-basket-row--total {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 0;
    padding-top: 1rem;
}
.sp-basket-delivery { margin: 1.25rem 0; display: flex; flex-direction: column; gap: 0.65rem; }
.sp-field {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sp-border);
    background: transparent;
    color: var(--sp-ink);
    font: inherit;
    font-weight: 600;
    padding: 0.85rem 1rem;
}
.sp-field:focus { outline: none; border-color: var(--sp-ink); }
.sp-basket-delivery .sp-btn { text-align: center; }
.sp-basket-options {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
.sp-basket-options legend { margin-bottom: 0.65rem; }
.sp-basket .shop-delivery-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.9rem;
    cursor: pointer;
}
.sp-basket .shop-delivery-option input { margin-top: 0.25rem; accent-color: var(--sp-ink); }
.sp-basket .shop-delivery-option-text { flex: 1; min-width: 0; line-height: 1.35; }
.sp-basket .shop-delivery-option-title { display: block; font-weight: 600; }
.sp-basket .shop-delivery-option-sub { display: block; font-size: 0.75rem; color: var(--sp-ink-50); margin-top: 0.2rem; }
.sp-basket .shop-delivery-option .price { font-family: Fraunces, Georgia, serif; font-weight: 600; white-space: nowrap; }
.sp-basket-msg {
    font-size: 0.8125rem;
    color: var(--sp-ink-60);
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--sp-border);
}
.sp-basket-msg.is-error { color: #7f1d1d; border-color: #e8c4c4; }
.sp-basket-checkout { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sp-basket-checkout .sp-btn { text-align: center; }
.sp-basket-checkout p { margin: 0; font-size: 0.875rem; color: var(--sp-ink-60); }

.sp-account-wrap { position: relative; }
.sp-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    min-width: 13.5rem;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    padding: 0.45rem 0;
    z-index: 80;
    box-shadow: 0 18px 50px rgba(28, 25, 23, 0.08);
}
.sp-account-menu a,
.sp-account-menu button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 0.65rem 1rem;
    border: 0;
    background: none;
    color: var(--sp-ink);
    text-decoration: none;
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}
.sp-account-menu a:hover,
.sp-account-menu button:hover { color: var(--sp-clay); background: var(--sp-secondary); }
.sp-account-menu form { margin: 0; border-top: 1px solid var(--sp-border); }

.sp-account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    margin: 0 0 1.5rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--sp-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.sp-account-nav a { color: var(--sp-ink-60); text-decoration: none; }
.sp-account-nav a:hover,
.sp-account-nav a.is-current { color: var(--sp-ink); }

.sp-account-form {
    display: grid;
    gap: 0.95rem;
    margin-top: 1.25rem;
    max-width: 32rem;
}
.sp-account-form label {
    display: grid;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sp-account-form .sp-btn { justify-self: start; }
.sp-check {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: none;
}
.sp-check input { accent-color: var(--sp-ink); }

.sp-address-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sp-address-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-top: 1px solid var(--sp-border);
}
.sp-address-list p { margin: 0.35rem 0 0; color: var(--sp-ink-60); font-size: 0.9375rem; }
.sp-tag {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-clay);
}

.sp-checkout-grid {
    display: grid;
    gap: 2.5rem;
    margin-top: 2rem;
}
@media (min-width: 960px) {
    .sp-checkout-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.sp-checkout-title {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 1rem;
}
.sp-address-pick { display: grid; gap: 0.65rem; margin: 0 0 0.85rem; }
.sp-address-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border: 1px solid var(--sp-border);
    cursor: pointer;
}
.sp-address-option:has(input:checked) { border-color: var(--sp-ink); background: var(--sp-secondary); }
.sp-address-option input { margin-top: 0.3rem; accent-color: var(--sp-ink); }
.sp-address-option strong { display: block; }
.sp-address-option em { display: block; font-style: normal; color: var(--sp-ink-60); font-size: 0.875rem; margin-top: 0.2rem; }
.sp-checkout-lines { list-style: none; margin: 0; padding: 0; }
.sp-checkout-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--sp-border);
}
.sp-checkout-lines li div:first-child { color: var(--sp-ink-60); font-size: 0.9rem; }
.sp-checkout-lines strong { display: block; color: var(--sp-ink); font-size: 1rem; }
.sp-checkout-totals { margin-top: 1rem; }
.sp-checkout-totals div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    font-size: 0.9375rem;
}
.sp-checkout-totals .is-total {
    font-family: Fraunces, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    padding-top: 1rem;
}
.sp-payment-box {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--sp-border);
    background: var(--sp-secondary);
}
.sp-checkout-errors {
    display: none;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e8c4c4;
    color: #7f1d1d;
    font-size: 0.875rem;
}
.sp-checkout-errors.is-visible { display: block; }
.sp-back { margin: 0 0 1rem; }
.sp-back a { color: var(--sp-ink-60); text-decoration: none; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.sp-back a:hover { color: var(--sp-clay); }
@media (max-width: 900px) {
    .sp-basket-layout { grid-template-columns: 1fr; }
    .sp-basket-aside { position: static; }
    .sp-basket-line {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas:
            "thumb info"
            "qty total";
    }
    .sp-basket-thumb { grid-area: thumb; width: 5.5rem; height: 5.5rem; }
    .sp-basket-line-info { grid-area: info; }
    .sp-basket-qty-form { grid-area: qty; }
    .sp-basket-line-total { grid-area: total; align-self: center; }
}