/* Desktop account workspace. Shared heading/state rules are at the end. */
@media (min-width: 1024px) {
  html:root body:has(> main.view > :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos):not(.hidden) > .accountBlocks) {padding-top: 0 !important;}
  html:root body > main.view:has(> :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos):not(.hidden) > .accountBlocks) {padding-top: 0 !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountDeskShell.accountBlocks {
    --ab-bg: var(--ds-card, var(--card, #fff));
    --ab-text: var(--ds-text, var(--text, #111827));
    --ab-muted: var(--ds-muted, var(--muted, #64748b));
    --ab-line: var(--ds-line, var(--border, #e5e7eb));
    --ab-radius: var(--ds-radius-lg, 20px);
    --ab-small-radius: var(--ds-radius-sm, 10px);
    --ab-active: var(--primary, #111827);
    --ab-active-text: #fff;
    --ab-soft: color-mix(in srgb, var(--ab-text) 3%, var(--ab-bg));
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(28px, 4vw, 64px) !important;
    padding: 24px 0 56px !important;
    background: transparent !important;
    color: var(--ab-text);
  }
  html:root[data-desktop-template="tilda"] body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountDeskShell.accountBlocks {
    --ab-bg: var(--desktop-template-background, #fff);
    --ab-text: var(--desktop-template-text, #111);
    --ab-muted: color-mix(in srgb, var(--ab-text) 56%, var(--ab-bg));
    --ab-line: var(--desktop-template-line, #d8d8d8);
    --ab-radius: 0px;
    --ab-small-radius: 0px;
    --ab-active: var(--desktop-template-text, #111);
    --ab-active-text: var(--desktop-template-background, #fff);
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks > .accountDeskAside {
    padding: 0 20px 24px 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ab-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    top: calc(var(--desktop-header-h, 72px) + 28px) !important;
    max-height: calc(100dvh - var(--desktop-header-h, 72px) - 44px);
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskAsideTitle {font-size: 12px !important; text-transform: uppercase; letter-spacing: .1em !important; color: var(--ab-muted) !important; margin-bottom: 20px !important; font-weight: 600 !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton {
    display: grid !important; grid-template-columns: 42px minmax(0, 1fr); gap: 12px;
    align-items: center; width: 100%; padding: 14px 10px !important;
    margin: 0 0 24px !important; text-align: left; font: inherit; cursor: pointer;
    border: 1px solid var(--ab-line) !important; border-radius: var(--ab-small-radius) !important;
    background: var(--ab-bg) !important; color: var(--ab-text) !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton > :is(img, span) {display: grid; place-items: center; width: 42px !important; height: 42px !important; object-fit: cover; border-radius: var(--ab-small-radius) !important; background: var(--ab-soft); overflow: hidden;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton svg {width: 26px; height: 26px;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton > div {min-width: 0;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton b {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ab-text) !important; font-size: 13px !important; font-weight: 600 !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskProfileButton small {display: block; margin-top: 5px; color: var(--ab-muted); font-size: 11px; line-height: 1.4;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNav {gap: 8px !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem {
    grid-template-columns: 28px minmax(0, 1fr) !important; gap: 10px !important;
    min-height: 58px !important; padding: 12px 10px !important; text-align: left;
    border: 1px solid transparent !important; border-radius: var(--ab-small-radius) !important;
    color: var(--ab-text) !important; background: transparent !important;
    transition: background .16s ease, border-color .16s ease;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem b {font-size: 13px !important; font-weight: 600 !important; color: inherit !important; line-height: 1.4 !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem em {font-size: 11px !important; font-weight: 400 !important; color: var(--ab-muted) !important; line-height: 1.4 !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavIcon {width: 26px !important; height: 26px !important; border: 0 !important; background: transparent !important; color: inherit !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem:hover {background: var(--ab-soft) !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem.active {background: var(--ab-active) !important; color: var(--ab-active-text) !important; border-color: var(--ab-active) !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem.active em {color: inherit !important; opacity: .75;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskRecent {margin-top: 28px !important; padding-top: 24px !important; border-color: var(--ab-line) !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskRecentTitle {font-weight: 600 !important; color: var(--ab-text) !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskRecentEmpty {color: var(--ab-muted); font-size: 12px; line-height: 1.6;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskRecentItem {border-radius: var(--ab-small-radius) !important; border-color: var(--ab-line) !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks :is(button, select):focus-visible {outline: 2px solid var(--ab-active) !important; outline-offset: 4px;}
  html:root body #viewOrders .accountBlocks .accountDeskMain {display: flex !important; flex-direction: column; gap: 20px !important; min-width: 0;}
  html:root body #viewOrders .accountBlocks .accountOrdersHeading {
    display: grid !important; grid-template-columns: 1fr auto; gap: 10px 24px;
    min-height: 0 !important; padding: 0 0 8px !important; margin: 0 !important;
    border: 0 !important; box-shadow: none !important; background: transparent !important;
  }
  html:root body #viewOrders .accountBlocks .accountOrdersHeading .h1 {font-size: clamp(28px, 2.5vw, 38px) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 !important; color: var(--ab-text) !important;}
  html:root body #viewOrders .accountBlocks .accountOrdersCount {grid-column: 1; color: var(--ab-muted); font-size: 14px;}
  html:root body #viewOrders .accountBlocks .accountOrdersSort {grid-column: 2; grid-row: 1 / 3; align-self: center; max-width: 210px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--ab-line); border-radius: var(--ab-small-radius); background: var(--ab-bg); color: var(--ab-text); font: inherit; font-size: 13px; cursor: pointer;}
  html:root body #viewOrders .accountBlocks .accountOrdersList {display: grid; gap: 18px;}
  html:root body #viewOrders .accountBlocks .accountOrderCard {
    display: grid !important; grid-template-columns: 112px minmax(0, 1fr) minmax(130px, auto);
    grid-template-areas: "cover head status" "cover thumbs total" "cover thumbs action";
    align-items: start; gap: 12px 22px; padding: 22px !important; margin: 0 !important;
    min-height: 194px !important; border: 1px solid var(--ab-line) !important;
    border-radius: var(--ab-radius) !important; background: var(--ab-bg) !important;
    box-shadow: none !important; clip-path: none !important; overflow: visible !important;
    transition: border-color .18s ease, background .18s ease;
  }
  html:root body #viewOrders .accountBlocks .accountOrderCard::before,
  html:root body #viewOrders .accountBlocks .accountOrderCard::after {content: none !important;}
  html:root body #viewOrders .accountBlocks .accountOrderCard:hover {border-color: color-mix(in srgb, var(--ab-text) 40%, var(--ab-line)) !important; background: var(--ab-soft) !important;}
  html:root body #viewOrders .accountBlocks .accountOrderCover {grid-area: cover; width: 112px; height: 150px; object-fit: cover; border-radius: var(--ab-small-radius); background: var(--ab-soft);}
  html:root body #viewOrders .accountBlocks .accountOrderHead {grid-area: head; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; min-width: 0;}
  html:root body #viewOrders .accountBlocks .accountOrderHead .h1 {font-size: 17px !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--ab-text) !important; overflow-wrap: anywhere;}
  html:root body #viewOrders .accountBlocks .accountOrderDate {color: var(--ab-muted) !important; font-size: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;}
  html:root body #viewOrders .accountBlocks .accountOrderMeta {display: contents !important;}
  html:root body #viewOrders .accountBlocks .accountOrderStatus {grid-area: status; justify-self: end;}
  html:root body #viewOrders .accountBlocks .statusPillFixed {width: auto !important; min-width: 0 !important; max-width: 100%; min-height: 0 !important; padding: 7px 10px !important; border-radius: var(--ab-small-radius) !important; font-size: 10px !important; line-height: 1.4 !important; letter-spacing: .02em !important; white-space: normal !important; text-align: center;}
  html:root body #viewOrders .accountBlocks .accountOrderTotal {grid-area: total; justify-self: end; align-self: end; color: var(--ab-text) !important; font-size: 20px !important; font-weight: 600 !important; white-space: nowrap;}
  html:root body #viewOrders .accountBlocks .accountOrderThumbs {grid-area: thumbs; display: flex !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; min-width: 0; flex-wrap: wrap;}
  html:root body #viewOrders .accountBlocks .accountOrderThumbs .thumb,
  html:root body #viewOrders .accountBlocks .accountOrderMore {width: 42px !important; height: 54px !important; flex: 0 0 42px; object-fit: cover; border: 0 !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-soft); display: grid; place-items: center; font-size: 12px; color: var(--ab-muted);}
  html:root body #viewOrders .accountBlocks .accountOrderOpen {grid-area: action; justify-self: end; align-self: end; display: flex !important; align-items: center; gap: 14px; min-height: 32px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ab-muted) !important; font: inherit; font-size: 12px !important; font-weight: 400 !important; cursor: pointer;}
  html:root body #viewOrders .accountBlocks .accountOrderOpen span {font-size: 21px; color: var(--ab-text);}
  html:root body #viewOrders .accountBlocks .accountDetailBack {width: fit-content !important; padding: 0 !important; margin: 0 0 2px !important; min-height: 30px !important; background: transparent !important; border: 0 !important; color: var(--ab-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 400 !important;}
  html:root body #viewOrders .accountBlocks .accountDetailTitle {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin-bottom: 8px;}
  html:root body #viewOrders .accountBlocks .accountDetailTitle .h1 {font-size: clamp(25px, 2.3vw, 34px) !important; line-height: 1.3; margin: 0 !important; font-weight: 600 !important; overflow-wrap: anywhere;}
  html:root body #viewOrders .accountBlocks .accountDetailTitle > .p {margin: 0 !important; font-size: 13px; color: var(--ab-muted);}
  html:root body #viewOrders .accountBlocks .accountDetailTitle > .p:first-of-type {grid-column: 1; grid-row: 2;}
  html:root body #viewOrders .accountBlocks .accountDetailTitle > .p:last-child {grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 0;}
  html:root body #viewOrders .accountBlocks .accountDetailPanel {padding: 24px !important; margin: 0 !important; border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important; background: var(--ab-bg) !important; box-shadow: none !important; color: var(--ab-text);}
  html:root body #viewOrders .accountBlocks .accountDetailPanel > :is(h2, .h1) {font: inherit; font-size: 18px !important; font-weight: 600 !important; margin: 0 0 18px !important; color: var(--ab-text) !important;}
  html:root body #viewOrders .accountBlocks .accountDetailProducts .orderItemCard {margin: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid var(--ab-line) !important; box-shadow: none !important; background: transparent !important;}
  html:root body #viewOrders .accountBlocks .accountDetailProducts .orderItemCard:last-child {border-bottom: 0 !important; padding-bottom: 0 !important;}
  html:root body #viewOrders .accountBlocks .orderItemRow {display: grid !important; grid-template-columns: 76px minmax(0, 1fr) auto !important; gap: 20px !important; align-items: center;}
  html:root body #viewOrders .accountBlocks .orderThumb {width: 76px !important; height: 98px !important; object-fit: cover; border-radius: var(--ab-small-radius) !important;}
  html:root body #viewOrders .accountBlocks .orderTitle {font-size: 15px !important; line-height: 1.45; font-weight: 600 !important; color: var(--ab-text) !important;}
  html:root body #viewOrders .accountBlocks .orderSub {font-size: 12px !important; line-height: 1.6; margin-top: 6px; color: var(--ab-muted) !important;}
  html:root body #viewOrders .accountBlocks .orderPrices {text-align: right;}
  html:root body #viewOrders .accountBlocks .orderNow {font-size: 17px !important; color: var(--ab-text) !important;}
  html:root body #viewOrders .accountBlocks .accountDetailDelivery > .p {display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; margin: 0 !important; border-bottom: 1px solid var(--ab-line); color: var(--ab-muted); font-size: 13px; line-height: 1.6;}
  html:root body #viewOrders .accountBlocks .accountDetailDelivery > .p b {max-width: 65%; text-align: right; font-weight: 500; overflow-wrap: anywhere; color: var(--ab-text) !important;}
  html:root body #viewOrders .accountBlocks .accountDetailDelivery > div[style^="height:"] {display: none;}
  html:root body #viewOrders .accountBlocks .orderSummaryPriceBlock {background: var(--ab-soft) !important;}
  html:root body #viewOrders .accountBlocks .osRow {display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; color: var(--ab-muted); font-size: 14px;}
  html:root body #viewOrders .accountBlocks .osTotal {border-top: 1px solid var(--ab-line); margin-top: 10px; padding-top: 20px; color: var(--ab-text); font-size: 22px; font-weight: 600;}
  html:root body #viewOrders .accountBlocks .accountOrderHead {grid-area: head !important;}
  html:root body #viewOrders .accountBlocks .accountOrderStatus {grid-area: status !important;}
  html:root body #viewOrders .accountBlocks .accountOrderTotal {grid-area: total !important;}
  html:root body #viewOrders .accountBlocks .accountOrderThumbs {grid-area: thumbs !important;}
  html:root body #viewOrders .accountBlocks .accountOrderOpen {grid-area: action !important;}
  html:root body #viewOrders .accountBlocks .statusPillFixed {background: var(--ab-soft) !important; color: var(--ab-muted) !important;}
  html:root body #viewOrders .accountBlocks .statusPillFixed.st_pending {background: #fff2e3 !important; color: #92520b !important;}
  html:root body #viewOrders .accountBlocks .statusPillFixed:is(.st_paid, .st_confirmed, .st_delivered, .st_completed) {background: #e9f7ef !important; color: #216c44 !important;}
  html:root body #viewOrders .accountBlocks .statusPillFixed:is(.st_new, .st_picking, .st_shipped) {background: #edf3fb !important; color: #315e95 !important;}
  html:root body #viewOrders .accountBlocks .statusPillFixed:is(.st_cancelled, .st_refunded) {background: #fbecec !important; color: #983f3f !important;}
}
@media (min-width: 1024px) and (max-width: 1200px) {
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountDeskShell.accountBlocks {grid-template-columns: 218px minmax(0, 1fr) !important; gap: 26px !important;}
  html:root body #viewOrders .accountBlocks .accountOrderCard {grid-template-columns: 90px minmax(0, 1fr) 130px; padding: 18px !important; gap: 12px 16px;}
  html:root body #viewOrders .accountBlocks .accountOrderCover {width: 90px; height: 132px;}
  html:root body #viewOrders .accountBlocks .accountOrderHead .h1 {font-size: 15px !important;}
}
@media (prefers-reduced-motion: reduce) {
  .accountBlocks .accountDeskNavItem, .accountBlocks .accountOrderCard {transition: none !important;}
}

/* Compact notification feed, using the same theme tokens as order cards. */
.notificationEmptyIcon {display: none;}
@media (min-width: 1024px) {
  html:root body #viewNotifications .notificationWorkspace .notificationEmptyState {display: grid !important; justify-items: center; align-content: center !important; text-align: center; gap: 14px; min-height: 280px !important; padding: 40px !important; border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important; background: var(--ab-bg) !important; box-shadow: none !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationEmptyIcon {display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--ab-small-radius); color: var(--ab-muted); background: var(--ab-soft);}
  html:root body #viewNotifications .notificationWorkspace .notificationEmptyState .h1 {font-size: 24px !important; margin: 0 !important; color: var(--ab-text) !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationEmptyState .p {max-width: 420px; margin: 0 !important; color: var(--ab-muted) !important; font-size: 13px !important; line-height: 1.6 !important;}
  html:root body #viewNotifications .notificationWorkspace #backCatNotif2 {width: auto !important; min-height: 40px !important; padding: 10px 20px !important; font-size: 11px !important;}
  html:root body #viewNotifications .accountBlocks .notificationWorkspace {display: flex !important; flex-direction: column; gap: 20px !important; width: 100% !important; max-width: none !important; min-width: 0;}
  html:root body #viewNotifications .notificationWorkspace .notificationHeading {display: block !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationHeading .h1 {margin: 0 !important; font-size: clamp(28px, 2.5vw, 38px) !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--ab-text) !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationIntro {margin: 12px 0 0 !important; color: var(--ab-muted) !important; font-size: 13px !important; line-height: 1.6 !important; font-weight: 400 !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationToolbar {display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 18px; border-bottom: 1px solid var(--ab-line);}
  html:root body #viewNotifications .notificationWorkspace .notificationFilters {display: flex; flex-wrap: wrap; gap: 6px;}
  html:root body #viewNotifications .notificationWorkspace .notificationFilter {display: inline-flex; gap: 8px; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid var(--ab-line) !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-bg) !important; color: var(--ab-muted) !important; font: inherit; font-size: 12px; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;}
  html:root body #viewNotifications .notificationWorkspace .notificationFilter span {font-size: 11px; opacity: .7; font-weight: 400;}
  html:root body #viewNotifications .notificationWorkspace .notificationFilter[aria-pressed="true"] {background: var(--ab-active) !important; color: var(--ab-active-text) !important; border-color: var(--ab-active) !important;}
  html:root body #viewNotifications .notificationWorkspace #markAllRead {width: auto !important; min-height: 38px !important; padding: 6px 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--ab-muted) !important; font-size: 11px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer;}
  html:root body #viewNotifications .notificationWorkspace #markAllRead:hover {color: var(--ab-text) !important; text-decoration: underline; text-underline-offset: 4px;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed {display: grid; gap: 12px; min-width: 0;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > :is(.orderEventCard, .looseNotif) {
    --nf-status-bg: var(--ab-soft); --nf-status-text: var(--ab-muted);
    width: 100% !important; min-height: 104px !important; max-height: none !important;
    margin: 0 !important; padding: 18px 20px !important; box-sizing: border-box;
    border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important;
    background: var(--ab-bg) !important; box-shadow: none !important; clip-path: none !important;
    overflow: hidden !important; color: var(--ab-text) !important;
  }
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > :is(.orderEventCard, .looseNotif)[hidden],
  html:root body #viewNotifications .notificationWorkspace .notificationFilterEmpty[hidden] {display: none !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > :is(.orderEventCard, .looseNotif)::before,
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > :is(.orderEventCard, .looseNotif)::after {content: none !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > .orderEventCard {display: grid !important; grid-template-columns: minmax(0, 1fr) auto 120px !important; grid-template-rows: auto !important; grid-template-areas: "copy media actions" "history history history" !important; align-items: center !important; gap: 0 20px !important; cursor: pointer;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard:hover {border-color: color-mix(in srgb, var(--ab-text) 30%, var(--ab-line)) !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard > .orderEventCopy {grid-area: copy !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; width: auto !important; min-width: 0 !important; align-items: baseline !important; gap: 8px 5px !important; padding: 0 !important; margin: 0 !important; position: static !important; background: transparent !important; border: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventKicker {margin: 0 !important; font-size: 15px !important; color: var(--ab-text) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventNumber {margin: 0 !important; color: var(--ab-text) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; overflow-wrap: anywhere; white-space: normal !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMeta {grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; gap: 8px 12px !important; flex-wrap: wrap !important; margin: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventDot {display: none !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventStatus {display: inline-block; padding: 4px 7px; border-radius: var(--ab-small-radius) !important; background: var(--nf-status-bg) !important; color: var(--nf-status-text) !important; font-size: 10px !important; line-height: 1.5 !important; font-weight: 500 !important; white-space: normal !important; overflow-wrap: anywhere;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard[data-status="pending"] {--nf-status-bg: #fff2e3; --nf-status-text: #92520b;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard:is([data-status="new"], [data-status="picking"], [data-status="shipped"]) {--nf-status-bg: #edf3fb; --nf-status-text: #315e95;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard:is([data-status="paid"], [data-status="confirmed"], [data-status="delivered"], [data-status="completed"]) {--nf-status-bg: #e9f7ef; --nf-status-text: #216c44;}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard:is([data-status="cancelled"], [data-status="refunded"]) {--nf-status-bg: #fbecec; --nf-status-text: #983f3f;}
  html:root body #viewNotifications .notificationWorkspace :is(.orderEventDate, .looseNotifDate) {font-size: 11px !important; font-weight: 400 !important; color: var(--ab-muted) !important; white-space: nowrap !important; margin: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMedia {grid-area: media !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; width: auto !important; max-width: 164px !important; padding: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMedia :is(.orderEventThumb, .orderEventMore) {width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; flex: 0 0 40px !important; object-fit: cover !important; border-radius: var(--ab-small-radius) !important; border: 0 !important; background: var(--ab-soft) !important; color: var(--ab-muted);}
  html:root body #viewNotifications .notificationWorkspace .orderEventMore {display: grid; place-items: center; font-size: 11px;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMediaEmpty {min-width: 40px; color: var(--ab-muted); opacity: .5;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMediaEmpty svg {width: 24px; height: 24px;}
  html:root body #viewNotifications .notificationWorkspace .notificationOrderActions {grid-area: actions !important; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;}
  html:root body #viewNotifications .notificationWorkspace .notificationOrderActions :is(.notificationOpenOrder, .orderEventToggle) {display: inline-flex !important; justify-content: flex-end !important; align-items: center !important; gap: 7px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; padding: 4px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ab-muted) !important; font: inherit !important; font-size: 11px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer;}
  html:root body #viewNotifications .notificationWorkspace .notificationOrderActions .notificationOpenOrder {color: var(--ab-text) !important; font-weight: 500 !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationOrderActions button:hover {text-decoration: underline; text-underline-offset: 4px;}
  html:root body #viewNotifications .notificationWorkspace .orderEventToggle svg {width: 16px !important; height: 16px !important; transition: transform .18s ease;}
  html:root body #viewNotifications .notificationWorkspace .orderEventToggle[aria-expanded="true"] svg {transform: rotate(180deg);}
  html:root body #viewNotifications .notificationWorkspace .orderEventCard > .orderEventHistory {grid-area: history !important; display: none !important; width: 100% !important; margin: 16px 0 0 !important; padding: 16px 0 0 !important; border: 0 !important; border-top: 1px solid var(--ab-line) !important; background: transparent !important; border-radius: 0 !important; cursor: default;}
  html:root body #viewNotifications .notificationWorkspace .orderEventHistory.histOpen {display: grid !important; gap: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .histRow {position: relative; display: grid !important; grid-template-columns: 155px minmax(0, 1fr) !important; align-items: start; gap: 18px !important; padding: 10px 0 14px 20px !important; margin: 0 !important; min-height: 0 !important; border: 0 !important; border-left: 1px solid var(--ab-line) !important; background: transparent !important; border-radius: 0 !important;}
  html:root body #viewNotifications .notificationWorkspace .histRow::before {content: ""; position: absolute; left: -4px; top: 16px; width: 7px; height: 7px; border-radius: var(--ab-small-radius); background: var(--ab-line);}
  html:root body #viewNotifications .notificationWorkspace .histRow:first-child::before {background: var(--ab-text);}
  html:root body #viewNotifications .notificationWorkspace .histDt {font-size: 11px !important; line-height: 1.6 !important; color: var(--ab-muted) !important; font-weight: 400 !important;}
  html:root body #viewNotifications .notificationWorkspace .histSt {font-size: 12px !important; line-height: 1.6 !important; color: var(--ab-text) !important; font-weight: 500 !important; overflow-wrap: anywhere;}
  html:root body #viewNotifications .notificationWorkspace .histReason {margin-top: 5px; color: var(--ab-muted); font-size: 12px; font-weight: 400;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > .looseNotif {display: grid !important; grid-template-columns: 36px minmax(0, 1fr) auto !important; align-items: start !important; gap: 14px !important;}
  html:root body #viewNotifications .notificationWorkspace .looseNotifIcon {display: grid; place-items: center; width: 36px !important; height: 36px !important; border: 0 !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-soft) !important; color: var(--ab-text) !important;}
  html:root body #viewNotifications .notificationWorkspace .looseNotifIcon svg {width: 20px; height: 20px;}
  html:root body #viewNotifications .notificationWorkspace .looseNotifTitle {font-size: 15px !important; line-height: 1.5 !important; font-weight: 600 !important; color: var(--ab-text) !important; overflow-wrap: anywhere;}
  html:root body #viewNotifications .notificationWorkspace .looseNotifBody {margin-top: 6px !important; font-size: 13px !important; line-height: 1.7 !important; font-weight: 400 !important; color: var(--ab-muted) !important; white-space: pre-wrap; overflow-wrap: anywhere; max-height: none !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationFilterEmpty {padding: 32px 24px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-bg); color: var(--ab-muted); font-size: 14px; text-align: center;}
  html:root body #viewNotifications .notificationWorkspace .notificationFooterActions {display: flex !important; justify-content: flex-start !important; padding: 0 !important; margin: 4px 0 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;}
  html:root body #viewNotifications .notificationWorkspace #backCatNotif3 {width: auto !important; min-height: 40px !important; padding: 10px 18px !important; font-size: 11px !important;}
}
@media (min-width: 1024px) and (max-width: 1200px) {
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > .orderEventCard {grid-template-columns: minmax(0, 1fr) 110px !important; grid-template-areas: "copy actions" "media media" "history history" !important; padding: 16px !important; gap: 10px 12px !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMedia {justify-content: flex-start !important;}
  html:root body #viewNotifications .notificationWorkspace .orderEventMediaEmpty {display: none !important;}
  html:root body #viewNotifications .notificationWorkspace .notificationFeed > .looseNotif {grid-template-columns: 36px minmax(0, 1fr) !important;}
  html:root body #viewNotifications .notificationWorkspace .looseNotifDate {grid-column: 2;}
}
@media (prefers-reduced-motion: reduce) {
  .notificationWorkspace .orderEventToggle svg {transition: none !important;}
}

/* Account page contract: independent of list contents, network timing and theme.
   Scope to the desktop workspace; storefront/catalog and mobile are untouched. */
@media (min-width: 1024px) {
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks button {appearance: none !important; -webkit-appearance: none !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountDeskNavItem {transition: none !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountUnifiedMain {
    display: flex !important; flex-direction: column; gap: 24px !important;
    min-width: 0; padding: 0 !important; font-family: inherit !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; overflow: visible !important; clip-path: none !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountPageHeading {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 20px !important; align-content: start !important;
    min-height: 78px !important; width: 100% !important; box-sizing: border-box;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountUnifiedMain .accountPageTitle {
    grid-column: 1; grid-row: 1; font-family: inherit !important;
    font-size: clamp(28px, 2.5vw, 38px) !important; font-weight: 600 !important;
    line-height: 1.2 !important; letter-spacing: -.025em !important;
    color: var(--ab-text) !important; margin: 0 !important; padding: 0 !important;
    text-transform: none !important; transition: none !important; animation: none !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountPageSubtitle {
    grid-column: 1; grid-row: 2; font-family: inherit !important;
    font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important;
    letter-spacing: 0 !important; color: var(--ab-muted) !important;
    margin: 0 !important; padding: 0 !important; max-width: 680px;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks :is(.accountPageHeading, .accountPageTitle)::before,
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks :is(.accountPageHeading, .accountPageTitle)::after {content: none !important;}
  html:root body #viewOrders .accountBlocks .accountPageHeading .accountOrdersCount {display: none !important;}
  html:root body #viewOrders .accountBlocks .accountPageHeading .accountOrdersSort {grid-column: 2; grid-row: 1 / 3;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountUnifiedMain .accountStatePanel {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    justify-content: center !important; gap: 14px !important; box-sizing: border-box;
    width: 100% !important; max-width: none !important; min-height: 280px !important; padding: 36px 24px !important;
    margin: 0 !important; text-align: center !important; color: var(--ab-text) !important;
    border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important;
    background: var(--ab-bg) !important; box-shadow: none !important;
    clip-path: none !important; mask: none !important; overflow: visible !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStatePanel::before,
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStatePanel::after {content: none !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStateIcon {
    display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
    background: var(--ab-soft); color: var(--ab-muted); border-radius: var(--ab-small-radius);
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountUnifiedMain .accountStatePanel .accountStateTitle {
    display: block; font-family: inherit !important; font-size: 22px !important;
    line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: -.015em !important;
    margin: 0 !important; padding: 0 !important; color: var(--ab-text) !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStatePanel > :is(.p, span) {
    font-size: 13px !important; font-weight: 400 !important; line-height: 1.65 !important;
    color: var(--ab-muted) !important; max-width: 480px; margin: 0 !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStatePanel > div[style^="height:"] {display: none !important;}
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountStatePanel .btn {
    width: auto !important; min-width: 160px; min-height: 42px !important; margin: 8px 0 0 !important;
    padding: 12px 20px !important; border-radius: var(--ab-small-radius) !important;
    font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important;
    background: var(--ab-active) !important; color: var(--ab-active-text) !important;
  }
  html:root body :is(#viewOrders, #viewFavorites, #viewNotifications, #viewPromos) .accountBlocks .accountPageLoading {
    min-height: 180px !important; margin: 0 !important; padding: 24px !important;
    border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important;
    background: var(--ab-soft) !important; box-shadow: none !important;
    color: var(--ab-muted) !important; font: inherit !important; font-size: 13px !important;
    display: grid !important; place-items: center !important;
  }
  /* The old promo grid clipped square cards through a rounded, overflow-hidden
     parent. Reset the complete container chain, not only the card itself. */
  html:root body #viewPromos .accountBlocks :is(.accountPromosPanel, .accountPromosGrid) {
    width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; overflow: visible !important; clip-path: none !important; mask: none !important;
  }
  html:root body #viewPromos .accountBlocks .accountPromosGrid {display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch;}
  html:root body #viewPromos .accountBlocks .promoWalletCard {
    display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 22px !important; margin: 0 !important;
    border: 1px solid var(--ab-line) !important; border-radius: var(--ab-radius) !important;
    background: var(--ab-bg) !important; color: var(--ab-text) !important;
    box-shadow: none !important; clip-path: none !important; mask: none !important; overflow: visible !important;
  }
  html:root body #viewPromos .accountBlocks .promoWalletCard::before,
  html:root body #viewPromos .accountBlocks .promoWalletCard::after {content: none !important; display: none !important;}
  html:root body #viewPromos .accountBlocks .promoWalletTop {gap: 14px; flex-wrap: wrap;}
  html:root body #viewPromos .accountBlocks .promoWalletTop > div {min-width: 0; flex: 1;}
  html:root body #viewPromos .accountBlocks .promoWalletTop span {font-size: 10px !important; font-weight: 500 !important; letter-spacing: .08em !important; color: var(--ab-muted) !important;}
  html:root body #viewPromos .accountBlocks .promoCodeCopy {display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 0 !important; border: 0 !important; background: transparent !important; color: var(--ab-text) !important; cursor: pointer; text-align: left;}
  html:root body #viewPromos .accountBlocks .promoCodeCopy b {font: inherit !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: .025em !important; overflow-wrap: anywhere;}
  html:root body #viewPromos .accountBlocks .promoCodeCopy small {padding: 6px 8px !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-soft) !important; color: var(--ab-muted) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0 !important;}
  html:root body #viewPromos .accountBlocks .promoCodeCopy:hover small {color: var(--ab-text) !important;}
  html:root body #viewPromos .accountBlocks .promoWalletTop strong {padding: 8px 10px !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-soft) !important; color: var(--ab-text) !important; font-size: 18px !important; font-weight: 600 !important; max-width: 100%; overflow-wrap: anywhere;}
  html:root body #viewPromos .accountBlocks .promoWalletCondition {font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; padding: 14px 0 20px !important; gap: 6px !important; color: var(--ab-muted) !important; overflow-wrap: anywhere; flex: 1;}
  html:root body #viewPromos .accountBlocks .promoWalletApply {min-height: 42px !important; padding: 12px !important; margin-top: auto !important; font-size: 11px !important; font-weight: 600 !important; border-radius: var(--ab-small-radius) !important; background: var(--ab-active) !important; color: var(--ab-active-text) !important;}
}
@media (min-width: 1024px) and (max-width: 1200px) {
  html:root body #viewPromos .accountBlocks .accountPromosGrid {grid-template-columns: minmax(0, 1fr) !important;}
}