html body .shopping-grid{grid-template-columns:minmax(0,1fr);gap:24px;margin-block:16px}
html body .shopping-grid>.summary-card{position:static;border-radius:12px;padding:16px}
html body .checkout-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
html body .checkout-sections fieldset{width:100%;max-width:720px;border-radius:12px;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
html body .checkout-sections fieldset>p,html body .checkout-sections fieldset>div,html body .checkout-sections .choice-card{grid-column:1/-1}
html body .checkout-sections label:not(.choice-card){font-size:12px;font-weight:600;gap:4px;margin:0}
html body .checkout-sections input:not([type=checkbox]):not([type=radio]),html body .checkout-sections textarea{width:100%;max-width:420px;min-height:40px;border-radius:8px}
html body .checkout-sections textarea{max-width:640px}
html body .cart-product{display:flex;gap:12px;align-items:center;min-width:0}
.cart-product img,.cart-product .cart-placeholder{width:64px;height:64px;flex:none;border-radius:8px}
.checkout-steps{display:flex;flex-wrap:wrap;gap:12px 32px;padding-inline-start:24px;margin-block:16px;color:var(--muted);font-size:12px}
.cart-lines{min-width:0}
.cart-product h2,.cart-product p{overflow-wrap:anywhere}
.cart-table{table-layout:auto}
.cart-table th{white-space:nowrap;font-size:12px}
.cart-table td{vertical-align:middle;padding:12px 8px}
.cart-table td:last-child,.cart-table th:last-child{text-align:right}
.cart-table .numeric{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(min-width:1024px){
html body .shopping-grid{grid-template-columns:minmax(0,1fr) 340px}
html body .shopping-grid>.summary-card{position:sticky;top:72px}
}
@media(max-width:767px){
.cart-table thead{display:none}
.cart-table tbody{display:grid}
.cart-table .cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--border);padding-block:8px}
.cart-table td{border:0;padding:4px}
.cart-table td:first-child{grid-column:1/-1}
.cart-table td:last-child{grid-column:2}
.cart-table td.numeric{grid-column:2;grid-row:2}
}
.order-detail-layout{display:grid;gap:24px;margin-block:16px;align-items:start}
.order-detail-main{min-width:0}
.order-timeline{display:grid;gap:12px;padding:16px 16px 16px 32px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.order-timeline li{padding:4px}
@media(min-width:1024px){.order-detail-layout{grid-template-columns:minmax(0,1fr) 320px}}
.account-layout,.reading-layout{display:grid;gap:24px;margin-block:16px;align-items:start}
.account-content{min-width:0;display:grid;gap:16px;align-content:start}
.account-content>form,.proportional-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;width:100%;max-width:720px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.account-content label,.proportional-form label{display:grid;gap:4px;font-size:12px;font-weight:600;min-width:0}
.account-content input:not([type=checkbox]),.account-content select,.account-content textarea,.proportional-form input,.proportional-form select{width:100%;max-width:420px;min-height:40px;border-radius:8px}
.account-content textarea{max-width:640px}
.account-content label:has(textarea),.account-content form>p,.account-content form>button,.account-content label:has([type=checkbox]){grid-column:1/-1}
.account-content label:has([type=checkbox]){display:flex;align-items:center;gap:8px}
.account-content form>button,.proportional-form button{justify-self:start;border-radius:8px}
.account-content>article{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--border)}
.account-menu nav{display:flex;gap:8px;overflow:auto;white-space:nowrap}
.account-menu nav a{padding:12px;border-radius:8px}
.account-menu nav a:hover{background:var(--primary-soft);color:var(--primary-text)}
.reading-layout>.prose{max-width:72ch;margin:0}
.reading-main{min-width:0;overflow-wrap:anywhere}
.reading-panel{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;display:grid;gap:12px}
.reading-panel p{margin:0;color:var(--muted)}
@media(min-width:1024px){.account-layout{grid-template-columns:220px minmax(0,1fr)}.account-menu{position:sticky;top:104px}.account-menu nav{display:grid}.reading-layout{grid-template-columns:minmax(0,1fr) 320px}.reading-panel{position:sticky;top:104px}.account-content{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}.account-content>h2,.account-content>p{grid-column:1/-1}}
/* Account area: menu card beside one content card (marketplace account pattern). */
@media(max-width:1023px){.account-layout{grid-template-columns:minmax(0,1fr)}}
.account-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px}
.account-head h1{margin:0;font-size:22px}
.account-head p{margin:0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.account-notice{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:var(--primary-soft);color:var(--primary-text);font-weight:600}
.account-menu{min-width:0;display:grid;gap:4px;align-content:start;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.account-menu nav{gap:4px;scrollbar-width:none}
.account-menu nav::-webkit-scrollbar{display:none}
.account-menu nav a{display:inline-flex;align-items:center;gap:10px;flex:none;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.account-menu nav a svg{width:18px;height:18px;flex:none;color:var(--muted)}
.account-menu nav a[aria-current=page]{background:var(--primary-soft);color:var(--primary-text)}
.account-menu nav a[aria-current=page] svg{color:currentColor}
.account-menu form{margin:0;border-top:1px solid var(--border);padding-top:4px}
.account-menu .account-logout{display:block;width:100%;min-height:40px;padding:8px 12px;text-align:left;text-decoration:none;color:var(--muted);font-weight:600}
.account-menu .account-logout:hover{color:var(--primary-text)}
@media(max-width:1023px){.account-menu{padding:6px}.account-menu form{display:none}}
.account-content{grid-template-columns:minmax(0,1fr)!important;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
@media(max-width:600px){.account-content{padding:14px}}
.account-content>h2{margin:10px 0 0;font-size:17px;line-height:1.3}
.account-content>h2:first-child{margin-top:0}
.account-content>h2+.account-lead{margin-top:-8px}
.account-lead,.field-hint{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.account-content>form{padding:0;background:none;border:0;border-radius:0;max-width:760px;gap:12px 16px}
.account-content form>button{min-height:42px;padding:0 20px;font-weight:700}
.account-content label.check-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.account-content input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--primary)}
.account-list{display:grid;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.account-row{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
.account-row:last-child{border-bottom:0}
a.account-row:hover,.account-row>a.account-row-main:hover strong{color:var(--primary-text)}
a.account-row:hover{background:var(--primary-soft)}
.account-row-main{flex:1;min-width:0;display:grid;gap:2px;color:inherit;text-decoration:none}
.account-row-main h3{margin:0;display:flex;align-items:center;gap:8px;font-size:14px}
.account-row-main p,.account-row-main small{margin:0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.account-row form{margin:0;flex:none}
.account-row .text-button{padding:6px 8px}
.account-row>.badge{flex:none}
.account-tag{padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);font-size:11px;font-weight:700}
.order-row-total{flex:none;min-width:110px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:600px){.order-row{flex-wrap:wrap}.order-row .account-row-main{flex-basis:100%}.order-row-total{margin-left:auto;min-width:0}}
.account-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.account-photos img{width:64px;height:64px;object-fit:cover;border:1px solid var(--border);border-radius:8px}
.account-empty{display:grid;justify-items:start;gap:10px;margin:0;padding:16px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:14px}
.account-empty p{margin:0}
.region-field{display:grid;gap:6px;min-width:0}
.region-field [data-region-results]{display:grid;gap:4px}
.region-field [data-region-results]:empty{display:none}
.account-content .region-chosen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:14px}
.region-error:empty{display:none}
.region-error{margin:0;color:var(--danger,#b42318);font-size:13px}
.file-picker{position:relative;grid-column:1/-1}
.file-picker input[type=file]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0;overflow:hidden}
.file-picker-box{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;overflow-wrap:anywhere}
.file-picker-button{flex:none;padding:7px 14px;border-radius:8px;background:var(--primary-soft);color:var(--primary-text);font-weight:700}
.file-picker:hover .file-picker-box{border-color:var(--primary)}
.file-picker:focus-within .file-picker-box{outline:3px solid var(--primary);outline-offset:2px}
/* Notification settings panel (account profile, payment and tracking pages). */
.notify-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.account-content>.notify-panel{margin-top:6px;padding-top:18px;border-top:1px solid var(--border)}
main>.notify-panel{margin-block:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.notify-head h2{margin:0;font-size:17px}
.notify-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.notify-panel>[role=status]{margin:0;color:var(--primary-text);font-size:13px}
.notify-panel>[role=status]:empty,.notify-devices:empty,.notify-preferences:empty{display:none}
.notify-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.notify-panel .btn-primary{min-height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--primary);color:var(--on-primary);font-weight:700}
.notify-devices{display:grid;gap:4px}
.notify-device{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;margin:0;color:var(--muted);font-size:13px}
.notify-device .text-button{padding:4px 6px}
.notify-preferences{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0 24px;max-width:760px}
.notify-preferences h3{grid-column:1/-1;margin:0 0 4px;font-size:14px}
.notify-panel label.notify-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;font-weight:500}
.notify-switch input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:38px!important;height:22px!important;margin:0;border-radius:999px;background:var(--border);cursor:pointer;transition:background .15s}
.notify-switch input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0/.25);transition:transform .15s}
.notify-switch input[role=switch]:checked{background:var(--primary)}
.notify-switch input[role=switch]:checked::after{transform:translateX(16px)}
.notify-switch input[role=switch]:disabled{opacity:.6}