.basket-page { --basket-ink:var(--ink,#f7f9ff); --basket-muted:var(--muted,#c6d0e5); --basket-edge:var(--glass-line,rgba(166,195,255,.4)); --basket-surface:var(--glass-deep,rgba(17,28,69,.74)); --basket-accent:var(--action,#5266ff); color:var(--basket-ink); }
.basket-page--private { --basket-ink:var(--customer-ink); --basket-muted:var(--customer-muted); --basket-edge:var(--customer-edge); --basket-surface:var(--customer-surface); --basket-accent:var(--customer-accent); }
.basket-skip { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.basket-skip:focus { position:fixed; top:8px; left:8px; z-index:10; width:auto; height:auto; clip-path:none; padding:12px; background:var(--basket-surface); }
.basket-mobile-next { display:none; }
.basket-shell { width:min(1160px,calc(100% - 48px)); margin:auto; padding:24px 0 32px; }
.basket-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 20px; background:var(--basket-surface); border:1px solid var(--basket-edge); border-radius:16px; }
.basket-nav img { display:block; width:146px; height:auto; }
.basket-nav>div { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.basket-nav a,.basket-nav button { font-size:.875rem; font-weight:700; }
.basket-nav button { background:transparent; color:inherit; border:1px solid var(--basket-edge); border-radius:8px; min-height:44px; padding:8px 12px; cursor:pointer; }
.basket-steps { display:flex; gap:24px; padding:0; margin:32px 0 24px; list-style:none; color:var(--basket-muted); font-size:.875rem; }
.basket-steps li { display:flex; align-items:center; gap:8px; }
.basket-steps span { display:grid; place-items:center; width:28px; height:28px; background:var(--basket-surface); border-radius:50%; font-weight:700; }
.basket-steps [aria-current=step] { color:var(--basket-ink); font-weight:750; }
.basket-steps [aria-current=step] span { background:var(--basket-accent); color:white; }
.basket-heading { margin-bottom:24px; }
.basket-heading h1 { font-size:clamp(1.75rem,3vw,2.25rem); line-height:1.2; letter-spacing:-.025em; margin:0 0 8px; }
.basket-heading p { color:var(--basket-muted); margin:0; max-width:68ch; }
.basket-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.basket-items { min-width:0; display:grid; gap:16px; }
.basket-item,.basket-summary,.basket-empty { background:var(--basket-surface); border:1px solid var(--basket-edge); border-radius:16px; padding:24px; }
.basket-item { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; position:relative; }
.basket-preview { align-self:start; }
.basket-preview img { width:100%; height:88px; object-fit:contain; display:block; border-radius:8px; background:rgba(255,255,255,.08); }
.basket-item-copy { min-width:0; }
.basket-kind { color:var(--basket-muted); font-size:.75rem; margin:0 0 4px; }
.basket-item h2 { font-size:1.125rem; line-height:1.35; margin:0 0 8px; }
.basket-item h2 a { text-decoration:none; }
.basket-item-copy>p:not(.basket-kind) { color:var(--basket-muted); font-size:.8125rem; line-height:1.5; margin:8px 0; overflow-wrap:anywhere; }
.basket-item-copy>strong { font-size:.875rem; }
.basket-item-total { grid-column:2; justify-self:end; font-size:1rem; }
.basket-item-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:16px 0 8px; font-size:.8125rem; }
.basket-item-actions label { display:flex; align-items:center; gap:8px; font-weight:700; }
.basket-item-actions input { width:72px; min-height:44px; padding:8px; font:inherit; color:var(--basket-ink); background:var(--basket-surface); border:1px solid var(--basket-edge); border-radius:8px; }
.basket-item-actions button { border:0; color:var(--basket-ink); padding:8px 0; min-height:44px; background:transparent; font:inherit; text-decoration:underline; cursor:pointer; }
.basket-custom { display:flex; gap:12px; padding:16px; margin-top:16px; background:rgba(113,121,230,.1); border-radius:12px; font-size:.8125rem; cursor:pointer; }
.basket-custom input { accent-color:var(--basket-accent); flex:none; width:20px; height:20px; margin:0; }
.basket-custom small { display:block; color:var(--basket-muted); line-height:1.5; margin-top:4px; }
.basket-summary { position:sticky; top:24px; }
.basket-summary h2 { font-size:1.125rem; margin:0 0 16px; }
.basket-summary dl { display:grid; gap:12px; margin:0 0 16px; }
.basket-summary dl>div { display:flex; justify-content:space-between; gap:16px; }
.basket-summary dt { color:var(--basket-muted); }
.basket-summary dd { margin:0; font-weight:700; text-align:right; }
.basket-summary .basket-total { font-size:1.25rem; padding-top:8px; }
.basket-total dt { color:var(--basket-ink); font-weight:750; }
.basket-summary>p { color:var(--basket-muted); font-size:.8125rem; line-height:1.5; margin:16px 0; }
.basket-summary>a:not(.basket-primary):not(.basket-secondary) { font-size:.8125rem; }
.basket-primary,.basket-secondary { display:flex; justify-content:center; align-items:center; min-height:48px; text-align:center; padding:12px 16px; width:100%; border-radius:10px; font:inherit; font-size:.875rem; font-weight:750; text-decoration:none; cursor:pointer; }
.basket-primary { background:var(--basket-accent); color:white; border:1px solid transparent; }
.basket-secondary { background:transparent; color:var(--basket-ink); border:1px solid var(--basket-edge); margin-top:12px; }
.basket-primary:hover { filter:brightness(1.12); }
.basket-page :focus-visible { outline:3px solid var(--focus,var(--customer-focus,#72dcff)); outline-offset:3px; }
.basket-summary form { display:grid; gap:12px; margin-top:20px; }
.basket-summary form label { display:grid; gap:6px; font-size:.8125rem; font-weight:700; }
.basket-summary form input:not([type=hidden]) { width:100%; min-height:44px; border:1px solid var(--basket-edge); border-radius:8px; background:var(--basket-surface); color:inherit; padding:10px 12px; font:inherit; }
.basket-summary form .basket-secondary { margin:0; }
.basket-feedback { color:var(--basket-muted); font-size:.875rem; margin:0; }
.basket-feedback:empty { display:none; }
.basket-empty { max-width:600px; }
.basket-empty h2 { margin:0 0 8px; }
.basket-empty .basket-primary { width:max-content; max-width:100%; margin-top:24px; }
.basket-footer { display:flex; justify-content:space-between; gap:16px; margin-top:32px; color:var(--basket-muted); font-size:.8125rem; }
.shop-categories button { color:inherit; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass-deep); padding:10px 14px; min-height:44px; font:inherit; font-weight:750; cursor:pointer; }
.shop-categories button[aria-pressed=true] { background:var(--action); color:white; }
.shop-categories a { display:inline-flex; align-items:center; color:inherit; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass-deep); padding:10px 14px; min-height:44px; font-weight:750; text-decoration:none; }
.shop-categories a[aria-current=page] { background:var(--action); color:white; }
.catalog-controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin-bottom:16px; }
.catalog-controls label { display:grid; gap:6px; font-size:.875rem; }
.catalog-controls input,.catalog-controls select { background:var(--glass-deep); color:var(--ink); border:1px solid var(--glass-line); border-radius:8px; min-height:44px; padding:8px 12px; font:inherit; }
.catalog-controls input { width:min(340px,100%); }
.product-card__buy-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.product-card__buy-actions a,.product-card__buy-actions button { min-height:44px; padding:10px 12px; border-radius:8px; border:1px solid var(--glass-line); background:var(--glass-deep); color:var(--ink); font:inherit; font-size:.8125rem; font-weight:750; cursor:pointer; text-decoration:none; }
.product-card__buy-actions a { background:var(--action); color:white; }
[data-product-card][hidden],[data-account-dashboard][hidden],[data-account-guest][hidden] { display:none!important; }
.basket-page [hidden] { display:none!important; }
@media(max-width:900px) { .basket-grid { grid-template-columns:minmax(0,1fr) 300px; gap:16px; } .basket-item { grid-template-columns:80px minmax(0,1fr); padding:16px; } }
@media(max-width:700px) { .basket-shell { width:calc(100% - 32px); padding-top:16px; } .basket-nav { gap:12px; padding:12px; } .basket-nav img { width:112px; } .basket-nav>div { gap:8px; justify-content:end; } .basket-nav a { font-size:.75rem; } .basket-nav button { width:44px; padding:4px; font-size:.625rem; } .basket-steps { gap:12px; font-size:.75rem; margin:24px 0 20px; } .basket-steps li { gap:4px; } .basket-steps span { width:24px; height:24px; } .basket-grid { grid-template-columns:1fr; } .basket-summary { position:static; padding:20px; } .basket-item { grid-template-columns:64px minmax(0,1fr); gap:12px; } .basket-preview img { height:64px; } .basket-custom { margin-left:-76px; } .basket-item-total { grid-column:1 / -1; } .basket-footer { display:grid; margin-top:24px; } .catalog-controls { display:grid; grid-template-columns:1fr; } .catalog-controls input { width:100%; } }
@media(prefers-reduced-motion:reduce) { .basket-page * { scroll-behavior:auto; } }
@media(max-width:700px) { .basket-page { padding-bottom:80px; } .basket-mobile-next { position:fixed; inset:auto 0 0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--basket-surface); backdrop-filter:blur(20px); box-shadow:0 -4px 24px rgba(0,0,0,.12); } .basket-mobile-next a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:8px; background:var(--basket-accent); color:white; text-decoration:none; font-size:.875rem; font-weight:750; } }

.shop-categories li { padding:0; border:0; }
@media(max-width:700px) {
 .page-hero--commerce { min-block-size:0; padding:16px; margin:12px 0; }
 .page-hero--commerce h1 { font-size:1.75rem; line-height:1.2; margin:0 0 8px; }
 .page-hero--commerce .lede { font-size:.9375rem; line-height:1.5; margin:0; }
 .page-hero--commerce .breadcrumbs { margin:0 0 12px; }
 .shop-categories ul { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
 .shop-categories li { flex:none; }
 .shop-categories a { white-space:nowrap; min-height:44px; }
 .catalog-controls { gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .catalog-controls input,.catalog-controls select { width:100%; min-width:0; }
 .catalog-controls [data-product-count] { grid-column:1 / -1; margin:0; }
}