.basket-page{background:var(--concept-bg)}.basket-shell{width:min(calc(100% - 30px),1120px);min-height:70vh;margin-inline:auto;padding:clamp(2.5rem,7vw,6rem) 0}.basket-hero{max-width:720px;margin-bottom:clamp(2rem,5vw,3.5rem)}.basket-hero h1{margin:.8rem 0;font-size:clamp(3.2rem,9vw,6.5rem);letter-spacing:-.05em}.basket-hero p{color:var(--concept-muted);font-size:1.05rem}.basket-layout{display:grid;gap:1.5rem}.basket-list{display:grid;gap:1rem}.basket-item{display:grid;grid-template-columns:100px minmax(0,1fr);gap:1rem;padding:1rem;border:1px solid var(--concept-line);border-radius:20px;background:var(--concept-surface);box-shadow:0 16px 42px rgba(38,29,21,.06)}.basket-item__image{width:100px;height:100px;border-radius:14px;object-fit:cover;background:var(--paper-deep)}.basket-item__body{min-width:0}.basket-item__heading{display:flex;justify-content:space-between;gap:1rem}.basket-item__heading h2{font-size:1.4rem}.basket-item__heading strong{white-space:nowrap;color:var(--concept-brand)}.basket-item__config{display:flex;flex-wrap:wrap;gap:.35rem .8rem;margin:.7rem 0}.basket-item__config div{display:flex;gap:.25rem;font-size:.72rem}.basket-item__config dt{color:var(--concept-muted)}.basket-item__config dd{margin:0;font-weight:700}.basket-item__controls{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.8rem}.quantity-control{height:44px;display:flex;align-items:center;border:1px solid var(--concept-line);border-radius:12px;overflow:hidden;background:white}.quantity-control button{width:44px;height:44px;border:0;background:none;cursor:pointer}.quantity-control span{min-width:36px;text-align:center;font-weight:750}.basket-item__remove{min-height:44px;padding:0 .65rem;border:0;background:none;color:#8a3d32;text-decoration:underline;cursor:pointer}.basket-item__line{margin-inline-start:auto;display:grid;text-align:end}.basket-item__line small{color:var(--concept-muted)}.basket-summary{height:max-content;padding:1.4rem;border:1px solid var(--concept-line);border-radius:20px;background:var(--concept-surface);box-shadow:var(--concept-shadow)}.basket-summary__eyebrow{margin:0;color:var(--concept-brand);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.basket-summary h2{margin:.35rem 0 1.2rem;font-size:2rem}.basket-summary__totals{margin:0}.basket-summary__totals div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--concept-line)}.basket-summary__totals dd{margin:0;font-weight:700}.basket-summary__total{margin-top:.4rem;font-size:1.1rem}.basket-summary__note,.basket-checkout-status{color:var(--concept-muted);font-size:.75rem}.basket-checkout{width:100%;margin-top:.5rem}.basket-checkout:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}.basket-continue{min-height:44px;margin-top:.5rem;display:flex;align-items:center;justify-content:center;color:var(--concept-brand);font-weight:700}.basket-empty{padding:clamp(2rem,6vw,4rem);border:1px solid var(--concept-line);border-radius:24px;background:var(--concept-surface);text-align:center}.basket-empty__mark{width:58px;height:58px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;background:#e8f1f2;color:var(--concept-brand);font-size:1.5rem}.basket-empty h2{font-size:clamp(2rem,6vw,3.2rem)}.basket-empty p{max-width:50ch;margin:1rem auto;color:var(--concept-muted)}.basket-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem}.quantity-control button:hover,.basket-item__remove:hover,.basket-continue:hover{background:var(--paper-deep)}.quantity-control button:focus-visible,.basket-item__remove:focus-visible,.basket-continue:focus-visible,.basket-checkout:focus-visible{outline:3px solid color-mix(in srgb,var(--concept-brand) 45%,transparent);outline-offset:2px}.quantity-control button:disabled{opacity:.35;cursor:not-allowed}@media(min-width:850px){.basket-layout{grid-template-columns:minmax(0,1fr) 330px}.basket-summary{position:sticky;top:100px}.basket-item{grid-template-columns:150px minmax(0,1fr);padding:1.25rem}.basket-item__image{width:150px;height:150px}}@media(max-width:520px){.basket-item{grid-template-columns:76px minmax(0,1fr)}.basket-item__image{width:76px;height:76px}.basket-item__heading{display:grid;gap:.2rem}.basket-item__controls{margin-inline-start:-92px;margin-top:1rem}.basket-item__line{width:100%;margin-inline-start:0;text-align:start}.basket-empty__actions{display:grid}.basket-empty__actions a{width:100%}}[dir=rtl] .basket-item__line{text-align:start}

/* Edit and Remove read as one pair of controls. Remove used to be a bare
   underlined word next to a 44px quantity stepper, which made the only
   destructive action on the page the lightest thing on it. Both are pills now:
   Edit carries the brand outline because it is the one you want, Remove stays
   quiet until hover and only then turns red. */
.basket-item__actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.basket-item__edit,.basket-item__remove{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;border-radius:12px;border:1px solid transparent;background:none;font:inherit;font-size:.85rem;font-weight:750;text-decoration:none;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.basket-item__edit{color:var(--concept-brand);border-color:var(--concept-line);background:white}
.basket-item__edit:hover{border-color:var(--concept-brand);background:color-mix(in srgb,var(--concept-brand) 8%,white)}
.basket-item__remove{color:var(--concept-muted)}
.basket-item__remove:hover{color:#8a3d32;border-color:color-mix(in srgb,#8a3d32 25%,transparent);background:color-mix(in srgb,#8a3d32 6%,white)}
.basket-item__edit:focus-visible,.basket-item__remove:focus-visible{outline:3px solid color-mix(in srgb,var(--concept-brand) 45%,transparent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.basket-item__edit,.basket-item__remove{transition:none}}