/* Minification failed. Returning unminified contents.
(472,39): run-time error CSS1034: 
(472,39): run-time error CSS1042: Expected function, found ','
(472,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(477,39): run-time error CSS1034: 
(477,39): run-time error CSS1042: Expected function, found ','
(477,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(743,34): run-time error CSS1030: Expected identifier, found '.'
(743,45): run-time error CSS1031: Expected selector, found ')'
(743,45): run-time error CSS1025: Expected comma or open brace, found ')'
(760,27): run-time error CSS1030: Expected identifier, found '.'
(760,38): run-time error CSS1031: Expected selector, found ')'
(760,38): run-time error CSS1025: Expected comma or open brace, found ')'
(777,27): run-time error CSS1030: Expected identifier, found '.'
(777,38): run-time error CSS1031: Expected selector, found ')'
(777,38): run-time error CSS1025: Expected comma or open brace, found ')'
(782,27): run-time error CSS1030: Expected identifier, found '.'
(782,38): run-time error CSS1031: Expected selector, found ')'
(782,38): run-time error CSS1025: Expected comma or open brace, found ')'
(787,38): run-time error CSS1030: Expected identifier, found '.'
(787,49): run-time error CSS1031: Expected selector, found ')'
(787,49): run-time error CSS1025: Expected comma or open brace, found ')'
(1700,17): run-time error CSS1039: Token not allowed after unary operator: '-ship-to-fixed-right'
(1701,18): run-time error CSS1039: Token not allowed after unary operator: '-ship-to-fixed-bottom'
(1702,32): run-time error CSS1039: Token not allowed after unary operator: '-ship-to-fixed-bottom'
(1713,27): run-time error CSS1030: Expected identifier, found '.'
(1713,48): run-time error CSS1031: Expected selector, found ')'
(1713,48): run-time error CSS1025: Expected comma or open brace, found ')'
(1717,27): run-time error CSS1030: Expected identifier, found '.'
(1717,48): run-time error CSS1031: Expected selector, found ')'
(1717,48): run-time error CSS1025: Expected comma or open brace, found ')'
(1947,31): run-time error CSS1030: Expected identifier, found '.'
(1947,42): run-time error CSS1031: Expected selector, found ')'
(1947,42): run-time error CSS1025: Expected comma or open brace, found ')'
 */
.site-container {
    width: 100%;
    margin: 0 auto;
}

.site-header {
    height: 84px;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.11) 0px 4px 4px;
}

.site-search-results {
    min-height: 100vh;
}

.search-hits {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

    .search-hits > * {
        margin-top: 4px;
        margin-bottom: 34px;
    }

.site-search-results-container {
    display: flex;
}

.site-search-results-none {
    margin-top: 34px;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    padding-top: 40px;
}

.site-search-results-filters {
    margin-top: 10px;
    position: absolute;
    width: 100%;
    height: max-content;
    background-color: white;
    z-index: 50;
    padding-left: 8px;
    padding-right: 8px;
}

.site-search-mobile-filter-button {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.site-search-results-grid {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
}

    .site-search-results-grid h3 {
        margin-left: 8px;
    }

.site-search-desktop-paging {
    display: none;
}

.site-search-mobile-paging {
    display: block;
}



@media (max-width: 768px) {
    .site-hero {
        background-image: url(/content/images/hero/390_768.webp);
        background-repeat: repeat;
        background-position: center;
        width: 100%;
        height: 400px;
    }
}

@media (max-width: 391px) {
    .site-hero {
        background-image: url(/content/images/hero/320_390.webp);
        background-repeat: repeat;
        background-position: center;
        width: 100%;
        height: 400px;
    }
}

.bg-color-primary-3 {
    background-color: #d7ebff;
}

.badge-bg-color-primary-2 {
    background-color: #3F89BD;
}

.navbar-topbar {
    z-index: 400;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.navbar-topbar-left {
    padding-left: 5px;
}

.navbar-topbar-right {
    display: none;
}

.navbar-main-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
}

    .navbar-main-container .glyphicon {
        font-size: 16pt;
        line-height: 1.5;
    }

    .navbar-main-container .desktop-categories {
        display: none;
    }

    .navbar-main-container .navbar-logo {
    }

.navbar-main-container {
    margin-right: 10px;
}

.navbar-mobile-toggle:focus {
    outline: none !important;
}

.navbar-mobile-toggle:active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.navbar-mobile-toggle-menu {
    opacity: 98%;
    margin-top: 84px;
    padding: 12px 24px;
    padding-top: 0;
    position: fixed;
    z-index: 100;
    background-color: white;
    left: 0;
    top: 0;
    width: 100%;
    height: 72%;
    overflow-y: scroll;
    box-shadow: rgba(0, 0, 0, 0.11) 0px 12px 12px;
}

.navbar-hamburger-menu-header {
    position: fixed;
    left: 0;
    height: 29px;
    background-color: #eee;
    padding: 4px 24px;
    width: 100%;
    font-size: 12pt;
    font-weight: 600;
    text-align: center;
    opacity: 100%;
}

.navbar-mobile-toggle-menu li {
    padding-top: 10px;
    font-weight: 300;
}

.mobile-categories li:first-child {
    padding-top: 40px;
}

.navbar-search {
    width: 100%;
    margin-left: 8px;
    margin-right: 8px;
}

.navbar-search-box {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 0.4rem;
    border: 1px solid #aaa;
    padding: 3px 3px 4px 10px;
    height: 42px;
}

    .navbar-search-box input[type='search'] {
        border: 0;
        background: transparent;
        outline: none;
        float: left;
        padding: 0;
        color: #aaa;
        font-size: 14px;
        width: 100%;
    }

        .navbar-search-box input[type='search']:focus ~ .clear-btn {
            display: flex;
        }

    .navbar-search-box .navbar-search-btn {
        color: #5f5f5f;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3em;
        margin: 0;
        border-radius: 0.4rem;
        background-color: #D7EBFF;
        padding: 0;
        flex-shrink: 0;
        cursor: pointer;
    }

        .navbar-search-box .navbar-search-btn.clear-btn {

            
        }

.navbar-search .btn-success {
    color: #777;
    border: none;
    border-bottom: 1px solid #CCC;
    border-radius: 0;
    line-height: .8 !important;
}

.navbar-search .form-control,
.navbar-search .form-control:focus {
    border: none;
    border-bottom: 1px solid #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-search .btn.btn-success:hover,
.navbar-search .input-group-btn > .btn-success.invert:hover {
    background-color: inherit;
    border-color: inherit;
    color: black;
}

.navbar-cluster-mobile {
    margin-right: 14px !important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

    .navbar-cluster-mobile > li {
        float: left;
        font-size: 18pt;
    }

    .navbar-cluster-mobile li,
    .navbar-cluster-mobile button,
    .navbar-cluster-mobile button:focus,
    .navbar-cluster-mobile a,
    .navbar-cluster-mobile a:focus,
    .navbar-cluster-mobile span,
    .navbar-cluster-mobile span:focus {
        color: #ccc;
    }

.navbar-cluster {
    display: none;
}



.account-menu {
    height: unset;
    border-bottom: 1px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.11) 0px 12px 12px;
}

    .account-menu li {
        font-size: 14px;
        padding-top: 12px;
        font-weight: 300;
    }

        .account-menu li > a {
            color: #333;
        }

        .account-menu li.divider {
            border-top: 1px solid #eee;
            padding: 0;
            margin-top: 12px;
        }

.ship-to-toggle .navbar-dropdown-selector {
    font-size: 30px;
}

.ship-to-container {
    height: 300px;
    overflow-y: scroll;
}



.navbar-searchbox-prefix, .navbar-searchbox-suffix {
    display: inline;
}

.navbar-searchbox-prefix {
    padding-top: 8px;
    padding-right: 0;
    font-size: .75em;
    border: 1px solid #ccc !important;
    border-right: 0 !important;
    border-radius: 50px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.navbar-searchbox-suffix {
    padding-top: 8px;
    padding-left: 0;
    border: 1px solid #ccc !important;
    border-left: 0 !important;
    border-radius: 50px;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}

.mobile-menu {
    background-color: white;
}

.site-footer {
    margin-bottom: 68px !important;
}

.bwb-footer-column a {
    color: black;
}

.bwb-footer {
    position: relative;
    height: 725px;
    background-color: #DBEBFD;
    font-family: 'Montserrat';
}

.bwb-social {
    text-align: center;
}

.bwb-footer-info {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 10px;
}

.bwb-footer-info-item {
    color: #DBEBFD;
}

.bwb-social-links {
}

.bwb-email-signup {
    display: flex;
    justify-content: center;
}

.bwb-social-links .social {
    width: 100% !important;
    margin-bottom: 50px !important;
}

.bwb-footer-column {
    width: 50%;
}

.links-wrapper {
    display: flex;
    justify-content: center;
    margin-left: 50px;
}

.bwb-klaviyo-input {
    position: relative;
    max-width: 375px;
}

.mobile-control-bar-v1,
.mobile-control-bar-v2,
.mobile-control-bar-v3,
.mobile-control-bar-v4 {
    display: flex;
    position: fixed;
    background-color: #337ab7; /*#3F89BD;*/
    color: #fff;
    bottom: 0;
    left: 0;
    height: 72px;
    width: 100%;
    padding-top: 0px;
    z-index: 101;
    justify-content: space-evenly;
    align-items: center;
    font-size: 30px;
}

.mobile-control-bar-v2 {
    background-color: #fff;
    color: #333;
    height: 64px;
    width: calc(100% - 28px);
    margin-left: 14px;
    font-size: 28px;
    border-radius: 50px;
    border: 1px solid #ddd;
    bottom: 16px;
    box-shadow: rgba(0, 0, 0, .2) 0px 4px 11px;
}

.opaque {
    background-color: rgb(51, 122, 183, 0.9);
    transition: background-color .3s ease-in-out;
}

.transparent {
    background-color: rgb(51, 122, 183, 0.1);
    transition: background-color .1s ease-in-out;
}

.mobile-control-bar-v3 {
    background-color: #fff;
    border-top: 2px solid #337ab7;
    color: #337ab7;
    height: 62px;
    font-size: 30px;
}

    .mobile-control-bar-v3 .primary-control {
        font-size: 30px;
        display: block;
        background-color: #337ab7;
        color: white;
        padding: 20px;
        border-radius: 50px;
        position: absolute;
        bottom: 14px;
        outline-color: #2e6da4;
        outline-style: auto;
    }

    .mobile-control-bar-v3 .fa-heart {
        margin-right: 30px;
    }

    .mobile-control-bar-v3 .mobile-control-cart {
        margin-left: 30px;
    }

.mobile-control-bar-v1 .mobile-control-cart-count {
    display: flex;
    border-radius: 50px;
    background-color: #53bd2f;
    position: absolute;
    font-size: 16px;
    width: 26px;
    height: 24px;
    top: 4px;
    margin-left: 28px;
    margin-top: 2px;
    padding-top: 3px;
    align-items: center;
    justify-content: center;
}

.mobile-control-bar-v2 .mobile-control-cart-count,
.mobile-control-bar-v3 .mobile-control-cart-count {
    display: none;
}

.mobile-search-overlay {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    background-color: white;
    color: black;
    font-size: 14px;
    height: calc(100% - 68px);
    overflow-y: scroll;
}

.mobile-search-overlay-input {
    position: fixed;
    background-color: white;
    width: 100%;
}

    .mobile-search-overlay-input input[type=search] {
        border-radius: 50px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 56px);
        margin: 8px;
        font-size: 20px;
    }

.mobile-search-overlay .search-input .clear-btn {
    z-index: 102;
    margin: 22px 30px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1.42857143;
}

.mobile-search-overlay-results {
    margin-top: 55px;
    margin-left: 32px;
    margin-right: 32px;
    display: flex;
    flex-direction: column;
}

.mobile-search-overlay-results {
    margin-bottom: 26px;
}

    .mobile-search-overlay-results .keyword {
        margin-bottom: 8px;
    }

    .mobile-search-overlay-results .product {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 12px;
    }

        .mobile-search-overlay-results .product img {
            width: 36px;
            margin-right: 12px;
            float: left;
        }

    .mobile-search-overlay-results .no-results {
    }

.book-list-row {
    width: 100%;
    display: flex;
}

    .book-list-row > div {
        width: 100%;
        padding: 0px 5px;
    }

.bookvisionmap {
    min-height: 87vh;
    width: 100vw;
    z-index: 80;
}

/* Autocomplete Dropdown Styles */
.navbar-search {
    position: relative;
}

.autocomplete-dropdown {
    position: fixed;
    top: 84px;
    left: 0px;
    right: 0px;
    background: white;
    border: 1px solid #ddd;
    border-top: 1px solid #999;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

    .autocomplete-dropdown.active {
        display: block;
    }

.autocomplete-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .autocomplete-item .glyphicon {
        font-size: 10pt;
        color: #999;
    }

    .autocomplete-item:last-child {
        border-bottom: none;
    }

    .autocomplete-item:hover,
    .autocomplete-item.selected {
        background-color: #f5f5f5;
    }

.autocomplete-item-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}


.autocomplete-item-author {
    font-size: 0.9em;
    color: #666;
}

.autocomplete-loading {
    padding: 12px 16px;
    text-align: center;
    color: #999;
}

.autocomplete-no-results {
    padding: 12px 16px;
    text-align: center;
    color: #999;
}

/* Blog Search - mobile: full swap (back arrow + input only) */
.blog-search-badge {
    display: none;
}

.navbar-search-box.blog-mode .navbar-search-btn {
    display: none;
}

.blog-search-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #2EA477;
    font-size: 20px;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.blog-search-back:hover {
    color: #74C048;
}

.autocomplete-no-results {
    padding: 12px 16px;
    color: #999;
    font-size: 13px;
}

/* ============================================================
   Mobile Account Dropup v2 — HTMX-driven partial.
   Loaded via /headerui/mobileaccountdropup. Hosted inside the
   Vue control bar's slide-up container, but the content itself
   has no Vue dependencies (uses data-action / data-close-then-
   navigate handlers wired in _Layout_HTMX.cshtml).
   ============================================================ */
/* The dropup is anchored at bottom: 72px (above the tab bar) and grows
   upward only as far as its content needs. Capped just below the fixed
   site-header (84px) so it never overlaps the search bar.
   Uses 100dvh (dynamic viewport height) so the cap shrinks when mobile
   browser UI (URL bar, bottom toolbar) is visible — preventing the
   menu from clipping into the search bar on smaller phones. Falls back
   to 100vh on browsers without dvh support. Internal scroll on
   .drop-up-menu (overflow: scroll) handles overflow content.
   Scoped via :has(.drop-up-v2) so the V1 partial (feature-flag rollback)
   keeps its original viewport behavior. */
.drop-up-menu.account.active:has(.drop-up-v2) {
    top: auto !important;
    bottom: 72px;
    max-height: calc(100vh - 156px) !important;
    max-height: calc(100dvh - 156px) !important;
    min-height: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Sit above the .dropup-dim overlay (z-index 1098) but below the bottom
   tab bar (.mobile-control-bar-v1, z-index 1100) so the bar still paints
   over the dropup's bottom edge during the slide-up animation.
   Scoped to v2 so the V1 partial keeps its original stacking and
   .drop-up-heading visible. */
.drop-up-menu.account:has(.drop-up-v2) {
    z-index: 1099 !important;
    /* Park the closed menu just below the viewport instead of the base
       -2000px, so closing animates a single viewport of travel and glides
       off-screen at the same rate it slid in. The .active rule above pulls
       it back to bottom:72 (higher specificity wins). */
    bottom: -100vh;
    bottom: -100dvh;
    transition: bottom 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

/* The v2 dropup receives focus programmatically when it opens so screen
   readers announce "Account Menu, dialog". Suppressing the focus ring on
   this non-interactive container is allowed because (a) the element does
   nothing on Enter/Space, and (b) the visible slide-up animation already
   signals "menu appeared" to sighted users. Interactive children keep
   their own :focus-visible rings via .drop-up-v2 a:focus-visible etc. */
.drop-up-menu.account:has(.drop-up-v2):focus,
.drop-up-menu.account:has(.drop-up-v2):focus-visible {
    outline: none;
}

.drop-up-menu.account:has(.drop-up-v2) .drop-up-heading {
    display: none !important;
}

@media (orientation: landscape) {
    .drop-up-menu.account.active:has(.drop-up-v2) {
        max-height: 90vh !important;
        max-height: 90dvh !important;
    }
}

.drop-up-account-menu.drop-up-v2 {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Guest dropup has no sign-out row at the bottom; the sign-in hero
   owns its own margin, so the menu's stock padding-bottom would double-
   stack and leave more space below the card than on its sides. */
.drop-up-account-menu.drop-up-v2.drop-up-v2-guest {
    padding-bottom: 0;
}

/* WCAG 2.1 AA focus indicators for keyboard users. Default browser
   focus rings are inconsistent across cards/buttons; this gives every
   interactive control a clear 2px outline against any background. */
.drop-up-v2 a:focus-visible,
.drop-up-v2 button:focus-visible,
.drop-up-v2 [role="button"]:focus-visible,
.drop-up-v2 [role="menuitem"]:focus-visible {
    outline: 2px solid #0B69B1;
    outline-offset: 2px;
    border-radius: 8px;
}

.drop-up-v2 .dropup-reshelve-card:focus-visible {
    outline-color: #2E4A2A;
}

.drop-up-v2 .dropup-join-rewards-card:focus-visible {
    outline-color: #8C6A1A;
}

/* Sticky header — drag handle + identity row + pill rail stay pinned at
   the top of the menu while the body (hero, orders, rewards, offers,
   sign out) scrolls underneath on small viewports. The whole header is
   also a swipe-down dismiss surface (handled in JS). */
.drop-up-v2 .dropup-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-top: 0;
    padding-bottom: 6px;
    touch-action: pan-x;
}

.drop-up-v2 .dropup-drag-handle {
    display: block;
    width: 100%;
    padding: 8px 0 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-drag-handle-bar {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: #C8CED4;
}

.drop-up-v2 .dropup-tracking-hero {
    padding: 10px 12px 0;
}

/* Horizontal scrollable pill rail above the hero. BWB-blue pills with
   icon + label (Rewards also shows pts). Free-form scroll (no snap);
   the inner wrapper is rubber-banded by JS for an iOS-like overscroll. */
.drop-up-v2 .dropup-pill-rail {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.drop-up-v2 .dropup-pill-rail::-webkit-scrollbar {
    display: none;
}

.drop-up-v2 .dropup-pill-rail-inner {
    display: inline-flex;
    flex-direction: row;
    gap: 6px;
    padding: 3px 16px;
    will-change: transform;
}

.drop-up-v2 .dropup-rail-pill {
    flex: none;
    background: #D7EBFF;
    border: 1px solid #D7EBFF;
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0F6EA3 !important;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-rail-pill svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: #0B69B1;
}

.drop-up-v2 .dropup-rail-pill-label {
    font-weight: 500;
    font-size: 12.5px;
    white-space: nowrap;
}

.drop-up-v2 .dropup-rail-pill-sep {
    color: #4075AC;
}

.drop-up-v2 .dropup-rail-pill-meta {
    font-size: 11.5px;
    color: #4075AC;
    font-weight: 500;
    white-space: nowrap;
}

/* Full-width stacked sections: Rewards on top, Trade-in below. Each card
   spans the full width at its natural height. Margin/gutters live on the
   wrapper so the children stay layout-agnostic. */
.drop-up-v2 .dropup-bento {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 12px 0;
}

.drop-up-v2 .dropup-bento > * {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* Full-width Rewards card below the orders rail. Tier-tinted gradient
   background, points + tier name + progress-to-next, with the tier
   icon in a circle on the right. */
.drop-up-v2 .dropup-rewards-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #1F2D3A !important;
    border: 1px solid #E4E8EC;
    background: linear-gradient(135deg, #F7F9FB 0%, #EEF1F4 100%);
}

/* Guest-specific tweaks: re-layout the identity row so the welcome
   message stacks against the country flag, and give Sign In a primary
   button look that anchors the header. The pill rail and Join card
   below reuse the existing logged-in styles. */
.drop-up-v2.drop-up-v2-guest .dropup-guest-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.drop-up-v2.drop-up-v2-guest .dropup-identity-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.drop-up-v2.drop-up-v2-guest .dropup-hello {
    font-weight: 700;
    font-size: 18px;
    color: #1F2D3A;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Guest sign-in hero — the FOCAL CTA of the guest dropup. BWB-branded
   gradient (Light Blue #D7EBFF → Light Green #DCF2E5) pinned to the
   bottom of the menu so it anchors the user's eye. Frames sign-in as
   the high-value action by listing three short benefits above the
   button; rewards is one of those benefits (not its own competing
   surface). */
.drop-up-v2 .dropup-guest-signin-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 12px 12px;
    margin-top: auto; /* pushes the hero to the bottom when menu has slack */
    padding: 18px 18px 16px;
    border-radius: 14px;
    border: 1px solid #BBD6C2;
    background: linear-gradient(to top right, #CFE8FB 0%, #C8E8D0 100%);
    box-shadow: 0 1px 0 rgba(15, 58, 92, 0.05);
}

.drop-up-v2 .dropup-guest-signin-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.drop-up-v2 .dropup-guest-signin-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0F3A5C;
}

.drop-up-v2 .dropup-guest-signin-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drop-up-v2 .dropup-guest-signin-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1F4262;
    line-height: 1.3;
}

.drop-up-v2 .dropup-guest-signin-benefits li svg {
    color: #0B69B1;
    flex: none;
}

.drop-up-v2 .dropup-guest-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #0B69B1; /* BWB Primary Blue — matches the check icons, differentiates from the bottom navbar */
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(11, 105, 177, 0.22);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.drop-up-v2 .dropup-guest-signin-btn:hover,
.drop-up-v2 .dropup-guest-signin-btn:focus {
    background: #0959A0;
    color: #fff !important;
}

.drop-up-v2 .dropup-guest-signin-btn:active {
    transform: scale(0.99);
}

/* Join Rewards card — occupies the Rewards slot for logged-in users
   who aren't enrolled yet. Same dimensions as the populated Rewards
   card so the bento layout stays consistent. Subtle gold/cream gradient
   echoes the rewards brand without committing to a tier color. */
.drop-up-v2 .dropup-join-rewards-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #1F2D3A !important;
    border: 1px solid #E6D29B;
    background: linear-gradient(135deg, #FFF8E1 0%, #F6E4B0 100%);
    transition: transform 0.15s ease;
}

.drop-up-v2 .dropup-join-rewards-card:active {
    transform: scale(0.98);
}

.drop-up-v2 .dropup-join-rewards-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drop-up-v2 .dropup-join-rewards-title {
    font-weight: 700;
    font-size: 14px;
    color: #1F2D3A;
    line-height: 1.1;
}

.drop-up-v2 .dropup-join-rewards-sub {
    font-size: 11.5px;
    color: #4A5560;
    line-height: 1.2;
}

.drop-up-v2 .dropup-join-rewards-cta {
    font-size: 11.5px;
    font-weight: 700;
    color: #8C6A1A;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.drop-up-v2 .dropup-join-rewards-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(140, 106, 26, 0.12);
    color: #8C6A1A;
}

/* Reshelve tile — a feel-good companion to the Rewards card. Full-width
   button: book icon then label, centered together as a unit. */
.drop-up-v2 .dropup-reshelve-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #1F2D3A !important;
    border: 1px solid #B6D9F7;
    background: linear-gradient(160deg, #EAF4FB 0%, #D7EBFF 100%);
    box-shadow: 0 1px 0 rgba(31, 45, 58, 0.05);
    transition: transform 0.15s ease;
}

.drop-up-v2 .dropup-reshelve-card:active {
    transform: scale(0.98);
}

.drop-up-v2 .dropup-reshelve-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #1F2D3A;
    text-align: center;
}

.drop-up-v2 .dropup-reshelve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0B69B1;
    flex: none;
}

.drop-up-v2 .dropup-reshelve-icon svg {
    width: 30px;
    height: 30px;
}

.drop-up-v2 .dropup-rewards-card.dropup-rewards-tier-bronze {
    background: linear-gradient(135deg, #FFF3E5 0%, #F4D9B8 100%);
    border-color: #E2C39A;
}

.drop-up-v2 .dropup-rewards-card.dropup-rewards-tier-silver {
    background: linear-gradient(135deg, #F5F7F9 0%, #DDE2E7 100%);
    border-color: #C8CED4;
}

.drop-up-v2 .dropup-rewards-card.dropup-rewards-tier-gold {
    background: linear-gradient(135deg, #FFF6D6 0%, #F2DC8E 100%);
    border-color: #E0C76A;
}

.drop-up-v2 .dropup-rewards-card.dropup-rewards-tier-platinum {
    background: linear-gradient(135deg, #F0F4F8 0%, #BADCFE 100%);
    border-color: #BCC8D4;
}

.drop-up-v2 .dropup-rewards-text {
    flex: 1;
    min-width: 0;
}

.drop-up-v2 .dropup-rewards-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.drop-up-v2 .dropup-rewards-title {
    font-weight: 700;
    font-size: 14px;
    color: #1F2D3A;
}

.drop-up-v2 .dropup-rewards-sep {
    color: #6B7A87;
}

.drop-up-v2 .dropup-rewards-pts {
    font-size: 13px;
    color: #1F2D3A;
    font-weight: 500;
}

.drop-up-v2 .dropup-rewards-tier-name {
    font-size: 11.5px;
    color: #4A5560;
    font-weight: 600;
    margin-top: 1px;
    letter-spacing: 0.02em;
}

.drop-up-v2 .dropup-rewards-progress {
    margin-top: 8px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 30, 43, 0.08);
    overflow: hidden;
}

.drop-up-v2 .dropup-rewards-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #1F2D3A;
    transition: width 0.4s ease;
}

.drop-up-v2 .dropup-rewards-tier-bronze .dropup-rewards-progress-fill { background: #B07A3A; }
.drop-up-v2 .dropup-rewards-tier-silver .dropup-rewards-progress-fill { background: #6F7A87; }
.drop-up-v2 .dropup-rewards-tier-gold   .dropup-rewards-progress-fill { background: #B89225; }
.drop-up-v2 .dropup-rewards-tier-platinum .dropup-rewards-progress-fill { background: #4A6884; }

.drop-up-v2 .dropup-rewards-progress-label {
    font-size: 10.5px;
    color: #4A5560;
    margin-top: 4px;
    font-weight: 500;
}

.drop-up-v2 .dropup-rewards-tier-circle {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(15, 30, 43, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 30, 43, 0.08);
}

.drop-up-v2 .dropup-rewards-tier-circle img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.drop-up-v2 .dropup-rewards-tier-fallback {
    color: #6B7A87;
}

.drop-up-v2 .dropup-tracking-hero:empty {
    display: none;
}

.drop-up-v2 .dropup-hero-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    background: #BAF0C6;
    border: 1px solid #B9D6BF;
    border-radius: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: #1F3A24;
    margin-bottom: 0;
}

/* Text column — owns the eyebrow, title, meta, and progress bar.
   The progress bar's flex segments naturally fill this narrower column
   when the cover is rendered alongside. */
.drop-up-v2 .dropup-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Cover thumbnail pinned to the right at book aspect (~2:3). Fixed
   60x90 so the text column width is predictable and the image keeps
   its proportions. */
.drop-up-v2 .dropup-hero-cover {
    flex: none;
    width: 60px;
    height: 90px;
    align-self: center;
}

.drop-up-v2 .dropup-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: block;
}

.drop-up-v2 .dropup-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1E8A45;
    font-weight: 700;
}

.drop-up-v2 .dropup-hero-eyebrow-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2AB15A;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.drop-up-v2 .dropup-hero-progress {
    margin-top: 12px;
    display: flex;
    gap: 4px;
    height: 4px;
}

.drop-up-v2 .dropup-hero-seg {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: #DDEEDF;
}

.drop-up-v2 .dropup-hero-seg.done {
    background: #2AB15A;
}

.drop-up-v2 .dropup-hero-title {
    font-size: 15px;
    font-weight: 700;
    margin-top: 8px;
    /* Clamp long book titles to 2 lines with an ellipsis so the hero
       card height stays predictable. Full title remains available to
       assistive tech via the parent <a aria-label="Order {title}">. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

.drop-up-v2 .dropup-hero-meta {
    font-size: 12px;
    color: #4C6A52;
    margin-top: 2px;
}

.drop-up-v2 .dropup-identity-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.drop-up-v2 .dropup-identity-card .dropup-name-toggle-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.drop-up-v2 .dropup-name-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1F3A24 !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-name-toggle .dropup-name-caret {
    transition: transform 0.15s ease;
    color: #1F3A24;
}

.drop-up-v2 .dropup-name-toggle[aria-expanded="true"] .dropup-name-caret {
    transform: rotate(180deg);
}

.drop-up-v2 .dropup-name-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #E4E8EC;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 30, 43, 0.18);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 1200;
}

.drop-up-v2 .dropup-name-menu.hidden {
    display: none;
}

.drop-up-v2 .dropup-name-menu li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.drop-up-v2 .dropup-name-menu-divider {
    height: 1px;
    background: #EEF1F4;
    margin: 6px 0;
}

.drop-up-v2 .dropup-name-menu li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #1F2D3A;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.drop-up-v2 .dropup-name-menu li a:hover,
.drop-up-v2 .dropup-name-menu li a:focus {
    background: #F7F9FB;
}

.drop-up-v2 .dropup-name-menu li a svg {
    color: #1F3A24;
    flex: none;
}

.drop-up-v2 .dropup-name-menu-signout a {
    color: #1E8A45;
    font-weight: 600;
}

.drop-up-v2 .dropup-name-menu-signout a svg {
    color: #1E8A45;
}

.drop-up-v2 .dropup-name-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1F3A24 !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-name-toggle .dropup-name-caret {
    transition: transform 0.15s ease;
    color: #1F3A24;
}

.drop-up-v2 .dropup-name-toggle[aria-expanded="true"] .dropup-name-caret {
    transform: rotate(180deg);
}

.drop-up-v2 .dropup-name-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #B9D6BF;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 30, 43, 0.18);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 1200;
}

.drop-up-v2 .dropup-name-menu.hidden {
    display: none;
}

.drop-up-v2 .dropup-name-menu li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.drop-up-v2 .dropup-name-menu li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #1F2D3A;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.drop-up-v2 .dropup-name-menu li a:hover,
.drop-up-v2 .dropup-name-menu li a:focus {
    background: #F1F8F2;
}

.drop-up-v2 .dropup-name-menu li a svg {
    color: #1F3A24;
    flex: none;
}

.drop-up-v2 .dropup-settings-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #B9D6BF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1F3A24 !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-settings-btn:hover,
.drop-up-v2 .dropup-settings-btn:focus {
    background: #F1F8F2;
}

.drop-up-v2 .dropup-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    background: #fff;
    border: 1px solid #B9D6BF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #1F3A24;
}

.drop-up-v2 .dropup-identity-text {
    flex: 1;
    min-width: 0;
    display: block !important;
    text-decoration: none;
    color: #333;
}

.drop-up-v2 .dropup-hello {
    font-weight: 700;
    font-size: 20px;
    color: #1F3A24;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drop-up-v2 .dropup-subtle {
    font-size: 11px;
    color: #4C6A52;
    margin-top: 2px;
}

.drop-up-v2 .dropup-flag-chip {
    flex: none;
    margin: 0;
    position: relative;
}

.drop-up-v2 .dropup-flag-circle {
    width: 56px;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #B9D6BF;
    background: #fff;
    padding: 0 !important;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 0;
}

.drop-up-v2 .dropup-flag-circle .flag-icon {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center;
    border-radius: 0;
    margin: 0;
    display: block;
}

.drop-up-v2 .dropup-flag-circle .flag-icon:before {
    content: '';
    display: none;
}

/* Country picker overlay — drops down from the flag chip so the chip stays
   visible and the user can re-tap it to dismiss the menu. */
.drop-up-v2 .dropup-ship-to-overlay {
    position: absolute;
    top: 0;
    right: calc(100% + 8px);
    width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge / IE */
    background: #fff;
    border: 1px solid #B9D6BF;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 30, 43, 0.18);
    z-index: 1200;
    padding: 8px 0;
    margin: 0;
    list-style: none;
}

.drop-up-v2 .dropup-ship-to-overlay::-webkit-scrollbar {
    display: none; /* WebKit (Safari/Chrome) */
}

.drop-up-v2 .dropup-ship-to-overlay.hidden {
    display: none;
}

/* Short-menu mode: without the rewards/join-rewards card (non-rewards
   country, or reshelve-only bento, or body still loading) the dropup is
   short enough that the flag chip sits near the bottom of the menu. Flip
   the country picker to drop UP from the chip and lift it out of the
   scrolling .drop-up-menu parent via position: fixed — absolute would be
   clipped by the dropup's overflow:scroll. The class is owned by
   syncDropupNoBento() in the layouts' JS; coordinates are set on open
   (--ship-to-fixed-bottom / --ship-to-fixed-right) from the flag chip's
   getBoundingClientRect. */
.drop-up-v2--no-bento .dropup-ship-to-overlay {
    position: fixed;
    top: auto;
    left: auto;
    right: var(--ship-to-fixed-right, 12px);
    bottom: var(--ship-to-fixed-bottom, 120px);
    max-height: min(60vh, var(--ship-to-fixed-bottom, 60vh));
}

/* iOS WebKit clips position:fixed descendants to an overflow:scroll
   ancestor, so on Safari the drop-UP picker gets chopped by the menu's
   top edge instead of floating over the sheet + backdrop (Android lets
   fixed escape the scroller, which is why it only breaks on Apple). In
   no-bento the menu content is short and never needs to scroll, so drop
   the scroll clip — the picker then overlays the menu on every browser.
   overflow:visible no longer clips children to the sheet's border-radius,
   so round the sticky header to keep the rounded top corners. */
.drop-up-menu.account:has(.drop-up-v2--no-bento) {
    overflow: visible;
}

.drop-up-menu.account:has(.drop-up-v2--no-bento) .dropup-header {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.drop-up-v2 .dropup-ship-to-overlay > li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.drop-up-v2 .dropup-ship-to-overlay .text-muted {
    padding: 8px 16px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7A87;
    font-weight: 700;
}

.drop-up-v2 .dropup-ship-to-overlay .divider {
    height: 1px;
    background: #EEF1F4;
    margin: 6px 0;
}

.drop-up-v2 .dropup-ship-to-overlay li.flag-selector a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #1F2D3A;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.drop-up-v2 .dropup-ship-to-overlay li.flag-selector a:hover,
.drop-up-v2 .dropup-ship-to-overlay li.flag-selector a:focus {
    background: #F7F9FB;
}

.drop-up-v2 .dropup-ship-to-overlay li.flag-selector .flag-icon {
    width: 22px;
    height: 16px;
    background-size: cover !important;
    flex: none;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
}

/* Country name spans its own flex column so wrapped lines align with
   the first line of text instead of wrapping under the flag icon. */
.drop-up-v2 .dropup-ship-to-overlay li.flag-selector .flag-country-name {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.drop-up-v2 .dropup-ship-to-overlay li.flag-selector .flag-icon:before {
    content: '';
    display: none;
}

.drop-up-v2 .dropup-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 4px;
}

.drop-up-v2 .dropup-eyebrow {
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #176A35; /* WCAG AA on white */
    font-weight: 700;
}

/* Link variant — the "Your Orders" header text is itself a tap target
   (alongside the arrow button) so users can hit either to jump to the
   order history. Inherits all eyebrow styling and strips link defaults. */
.drop-up-v2 .dropup-eyebrow-link {
    text-decoration: none;
    color: #176A35 !important;
    padding: 4px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drop-up-v2 .dropup-eyebrow-link:hover,
.drop-up-v2 .dropup-eyebrow-link:focus {
    color: #0F4D26 !important;
    text-decoration: none;
}

.drop-up-v2 .dropup-arrow-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #BAF0C6;
    border: 1px solid #B9D6BF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1E8A45 !important;
    text-decoration: none;
}

.drop-up-v2 .dropup-arrow-btn svg {
    width: 16px;
    height: 16px;
}

.drop-up-v2 .dropup-orders-rail {
    padding: 0 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.drop-up-v2 .dropup-orders-rail:empty {
    display: none;
}

/* Skeleton placeholders shown while the deferred orders fragments load. */
.drop-up-v2 .dropup-skel {
    background: linear-gradient(90deg, #E4E8EC 0%, #EEF1F4 50%, #E4E8EC 100%);
    background-size: 200% 100%;
    animation: dropup-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.drop-up-v2 .dropup-skel-hero {
    height: 102px;
    border-radius: 12px;
}

.drop-up-v2 .dropup-skel-circle {
    background: linear-gradient(90deg, #E4E8EC 0%, #EEF1F4 50%, #E4E8EC 100%);
    background-size: 200% 100%;
    animation: dropup-shimmer 1.4s ease-in-out infinite;
    border: none !important;
}

.drop-up-v2 .dropup-rail-skel-row {
    display: flex;
    gap: 12px;
    overflow: hidden;
}

.drop-up-v2 .dropup-skel-cover {
    flex: none;
    width: 80px;
    height: 100px;
    border-radius: 4px;
}

/* Cover slot fallback glyph — used when a hero variant has no per-item
   cover (e.g., SFL cover lookup failed). Renders a mint book-stack icon
   centered in the 60x90 cover slot so the hero shape stays consistent
   across all variants. */
.drop-up-v2 .dropup-hero-cover-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #DDEEDF;
    color: #2E4A2A;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Find-your-next-read variant — no cover slot; a right-aligned chevron
   sits where the cover would, signaling "tap to navigate". The text
   column flexes to fill the gained space. */
.drop-up-v2 .dropup-hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: center;
    color: #2E4A2A;
    padding: 0 4px;
}

/* Without a 90px cover thumbnail forcing the card height, the discover
   variant collapsed to the natural height of its text — visibly shorter
   than the cart/SFL/recent-order heroes that all carry a cover. Match
   their height (padding 10 + cover 90 + padding 10 = 110px) and reflow
   the text + chevron to fill the extra vertical space gracefully. */
.drop-up-v2 .dropup-hero-card--discover {
    min-height: 110px;
}

.drop-up-v2 .dropup-hero-card--discover .dropup-hero-text {
    justify-content: center;
    gap: 4px;
}

.drop-up-v2 .dropup-hero-card--discover .dropup-hero-title {
    font-size: 17px;
    margin-top: 6px;
}

.drop-up-v2 .dropup-hero-card--discover .dropup-hero-meta {
    font-size: 13px;
    margin-top: 4px;
}

.dropup-dim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 1098;
}

.dropup-dim.active {
    opacity: 1;
    pointer-events: auto;
}

/* Honor reduced-motion: the v2 dropup open/close still works, it just
   snaps instead of sliding/fading. */
@media (prefers-reduced-motion: reduce) {
    .drop-up-menu.account:has(.drop-up-v2) {
        transition: none;
    }

    .dropup-dim {
        transition: none;
    }
}

body.dropup-scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.drop-up-v2 .dropup-hero-card--discover .dropup-hero-arrow {
    padding: 0 8px;
}

@keyframes dropup-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Body slot — the lazy-loaded region below the server-rendered header
   (drag handle + identity + pill rail render instantly in the layout).
   Flex pass-through so the guest sign-in hero's margin-top:auto keeps
   pinning to the bottom of the menu through the extra wrapper. */
.drop-up-v2 .dropup-body-slot {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Body-only skeleton (hero + bento shapes) shown inside the body slot
   while /headerui/mobileaccountdropupbody loads. Replaced wholesale by
   the populated body partial. */
.dropup-skeleton-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Bento (Rewards + Reshelve) placeholders */
.dropup-skeleton-shell .dropup-skel-bento {
    margin: 10px 12px 0;
}

.dropup-skeleton-shell .dropup-skel-rewards {
    height: 78px;
    border-radius: 12px;
}

.dropup-skeleton-shell .dropup-skel-reshelve {
    height: 58px;
    border-radius: 12px;
}

/* Image-loading overlay: rail shows skeleton tiles until all <img> load.
   The overlay is positioned over the real content; once images finish,
   the .dropup-rail-pending class is removed and the overlay disappears. */
.drop-up-v2 .dropup-orders-rail {
    position: relative;
}

/* Defeat the legacy `.opk-mobile-li:has(div:empty){display:none!important}`
   rule from orderpeek.css — empty <div> tiles inside the skeleton overlay
   would otherwise collapse the entire rail. Higher specificity (id) wins. */
#dropup-orders-rail-host.dropup-orders-rail {
    display: block !important;
}

.drop-up-v2 .dropup-rail-skel-overlay {
    display: none;
    position: absolute;
    inset: 0;
    padding: 0 12px;
    gap: 12px;
    background: #fff;
    pointer-events: none;
}

.drop-up-v2 .dropup-rail-pending .dropup-rail-skel-overlay {
    display: flex;
}

.drop-up-v2 .dropup-rail-pending .opk-home-container {
    visibility: hidden;
}

/* Rail shrinkwraps to the cards' height so the horizontal scrollbar
   lands directly under the status text (no empty band between them).
   The pill grid below provides the 10px separation. */
.drop-up-v2 .dropup-orders-rail {
    flex: 0 0 auto;
    overflow: hidden;
}

/* Reuse the existing OrderPeek home partial inside our dropup,
   but suppress its internal "Recent Orders" header (we render
   our own "Your Orders" eyebrow above the rail) and let it sit
   flush against the dropup edges. */
.drop-up-v2 .dropup-orders-rail .opk-home-container {
    background: transparent;
    padding: 0;
    margin: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

.drop-up-v2 .dropup-orders-rail .opk-home-header {
    display: none;
}

.drop-up-v2 .dropup-orders-rail .opk-home-cards {
    flex: none;
    align-items: flex-start;
}

/* Fixed-size cards. Image is 90x126 (5:7 book ratio); title/status share
   the same 90px width so the ellipsis lands at the image's right edge. */
.drop-up-v2 .dropup-orders-rail .opk-home-card {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px;
    height: auto;
    display: flex !important;
    flex-direction: column;
    flex: none !important;
}

.drop-up-v2 .dropup-orders-rail .opk-card-thumbnail {
    width: 90px !important;
    height: 126px !important;
    flex: none;
    margin-bottom: 6px;
}

.drop-up-v2 .dropup-orders-rail .opk-card-title,
.drop-up-v2 .dropup-orders-rail .opk-card-status {
    flex: none;
    width: 90px;
    max-width: 90px !important;
    text-align: left !important;
    display: block !important;
}

.drop-up-v2 .dropup-orders-rail .opk-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px !important;
}

.drop-up-v2 .dropup-orders-rail .opk-card-status {
    font-size: 10.5px !important;
}

.drop-up-v2 ul.dropup-pill-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    padding: 10px 12px 0 !important;
    margin: 0 !important;
    list-style: none;
}

.drop-up-v2 ul.dropup-pill-grid li {
    background: #BAF0C6;
    border: 1px solid #B9D6BF;
    border-radius: 10px;
    min-height: 64px;
    min-width: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.drop-up-account-menu.drop-up-v2 ul.dropup-pill-grid li.mobile-menu-full-width {
    grid-column: 1 / -1;
    justify-content: center;
    margin-bottom: 0 !important;
}

.drop-up-v2 ul.dropup-pill-grid li a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    color: #1F3A24;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.drop-up-v2 ul.dropup-pill-grid li.mobile-menu-full-width a {
    justify-content: center !important;
}

.drop-up-v2 .dropup-pill-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.drop-up-v2 .dropup-pill-text strong {
    font-weight: 700;
    font-size: 13px;
    color: #1F3A24;
}

.drop-up-v2 .dropup-pill-text .dropup-subtle {
    font-size: 11px;
    color: #4C6A52;
    font-weight: 500;
    margin-top: 1px;
}

.drop-up-v2 .dropup-signout {
    padding: 10px 12px !important;
}

.drop-up-v2 .dropup-signout a {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 8px;
    border: 1px solid #B9D6BF;
    border-radius: 10px;
    padding: 13px;
    color: #1E8A45;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
}