/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0n16j71j5p],
.components-reconnect-repeated-attempt-visible[b-0n16j71j5p],
.components-reconnect-failed-visible[b-0n16j71j5p],
.components-pause-visible[b-0n16j71j5p],
.components-resume-failed-visible[b-0n16j71j5p],
.components-rejoining-animation[b-0n16j71j5p] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-retrying[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-failed[b-0n16j71j5p],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0n16j71j5p] {
    display: block;
}


#components-reconnect-modal[b-0n16j71j5p] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0n16j71j5p 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0n16j71j5p 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0n16j71j5p 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0n16j71j5p]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0n16j71j5p 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0n16j71j5p {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0n16j71j5p {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0n16j71j5p {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0n16j71j5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0n16j71j5p] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0n16j71j5p] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0n16j71j5p] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0n16j71j5p] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0n16j71j5p] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0n16j71j5p] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0n16j71j5p 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0n16j71j5p] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0n16j71j5p {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/UserAvatar.razor.rz.scp.css */
.user-avatar[b-ezkf5r6ody] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #FFFFFF;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-md);
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.user-avatar-anon[b-ezkf5r6ody] {
    background: var(--c-surface-2);
    color: var(--c-ink-mute);
}

.user-avatar-anon svg[b-ezkf5r6ody] {
    width: 22px;
    height: 22px;
    display: block;
}
/* /Components/Layout/UserAvatarDropdown.razor.rz.scp.css */
.avatar-dropdown[b-nfi4tk1ify] {
    position: relative;
}

.avatar-trigger[b-nfi4tk1ify] {
    background: transparent;
    border: none;
    /* Padding gives the 32px avatar a 44x44 hit area (WCAG 2.5.5). The transparent
       padding doesn't visually enlarge the avatar — it just makes the click target
       comfortable for thumbs on a phone. */
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 120ms var(--ease-out);
}
.avatar-trigger:hover[b-nfi4tk1ify] { box-shadow: 0 0 0 3px var(--c-gold-tint); }
.avatar-trigger:focus-visible[b-nfi4tk1ify] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.avatar-menu[b-nfi4tk1ify] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: var(--sp-2);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avatar-menu-header[b-nfi4tk1ify] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
}
.avatar-menu-email[b-nfi4tk1ify] {
    font-size: var(--fs-sm);
    color: var(--c-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.avatar-menu a[b-nfi4tk1ify],
.avatar-menu-logout-btn[b-nfi4tk1ify] {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-md);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.avatar-menu a:hover[b-nfi4tk1ify],
.avatar-menu-logout-btn:hover[b-nfi4tk1ify] {
    background: var(--c-surface-2);
    color: var(--c-ink);
    text-decoration: none;
}

.avatar-menu-divider[b-nfi4tk1ify] {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-1) 0;
}

.avatar-menu-logout[b-nfi4tk1ify] {
    margin: 0;
    padding: 0;
}
/* /Components/Shared/HeaderSearchBox.razor.rz.scp.css */
.header-search[b-waba2olpn5] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    width: clamp(180px, 30vw, 320px);
    transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.header-search:focus-within[b-waba2olpn5] {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-gold-tint);
}

.header-search input[type="search"][b-waba2olpn5] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    min-width: 0;
}
.header-search input[type="search"][b-waba2olpn5]::-webkit-search-cancel-button { -webkit-appearance: none; }

.header-search-submit[b-waba2olpn5] {
    background: transparent;
    border: 0;
    color: var(--c-ink-mute);
    cursor: pointer;
    padding: 0 var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-search-submit:hover[b-waba2olpn5] { color: var(--c-accent); }

.header-search-list[b-waba2olpn5] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 10;
    max-height: 70vh;
    overflow-y: auto;
}

.header-search-list li[b-waba2olpn5] { margin: 0; padding: 0; }

.header-search-list a[b-waba2olpn5] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none;
    color: inherit;
}
.header-search-list a:hover[b-waba2olpn5],
.header-search-list a.active[b-waba2olpn5] {
    background: var(--c-surface-2);
    text-decoration: none;
}

.header-search-thumb[b-waba2olpn5] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-search-thumb img[b-waba2olpn5] { width: 100%; height: 100%; object-fit: contain; }

.header-search-meta[b-waba2olpn5] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.header-search-title[b-waba2olpn5] {
    font-size: var(--fs-sm);
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-search-sub[b-waba2olpn5] { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-mute); }
.header-search-sub .vendor[b-waba2olpn5] { color: var(--c-ink-dim); }

.header-search-all[b-waba2olpn5] {
    border-top: 1px solid var(--c-border);
    margin-top: 4px;
}
.header-search-all a[b-waba2olpn5] {
    color: var(--c-accent);
    font-size: var(--fs-sm);
    padding: var(--sp-3);
}

@media (max-width: 768px) {
    .header-search[b-waba2olpn5] { width: 100%; }
    .header-search input[type="search"][b-waba2olpn5] {
        font-size: 16px; /* Prevent iOS Safari focus-zoom on font-size < 16px. */
    }
}
/* /Components/Shared/PriceTag.razor.rz.scp.css */
.price-tag[b-cpfb7tz8df] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--ff-display);
}
.price-current[b-cpfb7tz8df] {
    color: var(--c-ink-2);
    font-weight: 600;
    font-size: var(--fs-lg);
}
.price-tag.lg .price-current[b-cpfb7tz8df] { font-size: var(--fs-2xl); }
.price-compare[b-cpfb7tz8df] {
    color: var(--c-ink-dim);
    text-decoration: line-through;
    font-size: var(--fs-sm);
}
.price-drop[b-cpfb7tz8df] { font-weight: 600; }
/* /Components/Shared/ProductCard.razor.rz.scp.css */
.product-card[b-6oktsbvm0d] {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    padding-top: var(--sp-3);
    transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
    display: flex;
    flex-direction: column;
}
.product-card:hover[b-6oktsbvm0d] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.product-card-link[b-6oktsbvm0d] {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card-link:hover[b-6oktsbvm0d] { text-decoration: none; color: inherit; }

.product-card-imagewrap[b-6oktsbvm0d] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--c-surface);
    overflow: hidden;
}
.product-card-imagewrap img[b-6oktsbvm0d] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms var(--ease-out);
}
.product-card:hover .product-card-imagewrap img[b-6oktsbvm0d] { transform: scale(1.03); }

.product-card-noimage[b-6oktsbvm0d] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink-dim);
    font-size: var(--fs-sm);
}

.product-card-oos-overlay[b-6oktsbvm0d] {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(10, 13, 0, 0.65);
    color: #FFFFFF;
    text-align: center;
    padding: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.product-card-drop-badge[b-6oktsbvm0d] {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    background: var(--c-danger);
    color: #FFFFFF;
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: 2px var(--sp-2);
    border-radius: var(--r-sm);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    line-height: 1.2;
}

.product-card-atl-badge[b-6oktsbvm0d] {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    background: var(--c-gold);
    color: #FFFFFF;
    font-weight: 600;
    font-size: var(--fs-xs);
    padding: 2px var(--sp-2);
    border-radius: var(--r-sm);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

/* Compact variant for the DVD rail and other secondary surfaces. */
.product-card.compact .product-card-body[b-6oktsbvm0d] { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
.product-card.compact .product-card-title[b-6oktsbvm0d] { font-size: var(--fs-sm); -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.4em; }
.product-card.compact .product-card-meta[b-6oktsbvm0d] { font-size: var(--fs-xs); }
.product-card.compact .product-card-drop-badge[b-6oktsbvm0d] { font-size: var(--fs-xs); padding: 1px 6px; }
.product-card.compact .product-card-atl-badge[b-6oktsbvm0d] { font-size: 10px; padding: 1px 5px; }

.product-card-body[b-6oktsbvm0d] {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.product-card-title[b-6oktsbvm0d] {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-ink-2);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.product-card-meta[b-6oktsbvm0d] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-mute);
    flex-wrap: wrap;
}
.product-card-meta .vendor[b-6oktsbvm0d] { color: var(--c-ink-dim); }
.product-card-added[b-6oktsbvm0d] { display: flex; justify-content: flex-end; }
/* /Components/Shared/PromotionStrip.razor.rz.scp.css */
/* Top-of-page strip rendering CJ promotional banners above /deals. Only Banner link types
   reach this component (filtered in CommissionJunctionPromotionsService). */

.promotion-strip[b-nbspbe3zuw] {
    margin: 0 0 var(--sp-6) 0;
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.promotion-strip-header[b-nbspbe3zuw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.promotion-strip-title[b-nbspbe3zuw] {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--c-ink);
}

.promotion-strip-disclosure[b-nbspbe3zuw] {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-mute);
    font-style: italic;
}

/* Responsive grid: cards wrap into rows naturally, no horizontal scrolling. The minmax floor
   is wrapped in min() so on viewports narrower than the floor (i.e. mobile), each card
   stretches to 100% of the available width rather than overflowing horizontally. On wider
   viewports auto-fill packs as many columns as fit at 440px+ each. */
.promotion-strip-cards[b-nbspbe3zuw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
    gap: var(--sp-3);
}

.promotion-card[b-nbspbe3zuw] {
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}

/* CJ banner HTML always embeds an <img> with hardcoded width="1200" height="1200"
   attributes even when the actual file is much smaller (e.g. 429x429). Those attributes
   apply to layout reservation, so we OVERRIDE them in CSS so the image fills the card
   width and uses a square aspect ratio regardless of source dimensions. aspect-ratio
   keeps cards uniform-height in the grid even when CJ swaps in non-square sources later.

   IMPORTANT: banner HTML is rendered via @((MarkupString)item.SafeBannerHtml) in the .razor.
   MarkupString-injected elements do NOT receive Blazor's component-scope attribute, so
   plain scoped selectors won't match them. We use ::deep to opt-out of scoping, which
   makes these rules match descendant images regardless of their scope attribute. */
.promotion-card[b-nbspbe3zuw]  img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block; /* removes the inline-baseline gap below the image — no need for line-height tricks on the anchor */
}

/* CJ sometimes embeds a 1x1 tracking pixel inside the same HTML block. Don't hide it via
   display:none (would suppress the request and break impression tracking). The !important
   width:100% rule above would stretch a 1x1 to fill its parent, so we snipe pixels by
   their explicit width="1" height="1" attributes and force them off-flow at 1x1. */
.promotion-card[b-nbspbe3zuw]  img[width="1"][height="1"] {
    width: 1px !important;
    height: 1px !important;
    aspect-ratio: auto;
    object-fit: fill;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Defensive text-link fallback styling. Only Banner type reaches the component today, but
   the markup retains the text-link branch in case the service filter is changed later.
   This selector is NOT ::deep — the <a class="promotion-text-link"> is rendered directly
   in the .razor markup so it carries the component scope attribute. */
.promotion-text-link[b-nbspbe3zuw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-3);
    color: var(--c-ink);
    text-decoration: none;
    transition: background 100ms var(--ease-out);
}

.promotion-text-link:hover[b-nbspbe3zuw] {
    background: var(--c-surface);
    text-decoration: none;
    color: var(--c-ink);
}

.promotion-text-link-name[b-nbspbe3zuw] {
    font-weight: 500;
    font-size: var(--fs-md);
}

.promotion-coupon[b-nbspbe3zuw] {
    font-size: var(--fs-sm);
    color: var(--c-ink-mute);
}

.promotion-coupon code[b-nbspbe3zuw] {
    background: var(--c-surface);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    border: 1px dashed var(--c-border-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--c-ink);
}

.promotion-expiry[b-nbspbe3zuw] {
    font-size: var(--fs-xs);
    color: var(--c-ink-mute);
}
/* /Components/Shared/WishlistAddButton.razor.rz.scp.css */
.wishlist-add[b-vfo81v4nxu] {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    color: var(--c-ink-2);
    border: 1px solid var(--c-border-strong);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    text-decoration: none;
    z-index: 2;
    transition: transform 100ms var(--ease-out), background 100ms var(--ease-out), color 100ms var(--ease-out);
}
.wishlist-add-form[b-vfo81v4nxu] {
    margin: 0;
    padding: 0;
}
.wishlist-add:hover[b-vfo81v4nxu] {
    transform: scale(1.08);
    background: var(--c-gold);
    color: #FFFFFF;
    text-decoration: none;
}
.wishlist-add.on[b-vfo81v4nxu] {
    background: var(--c-gold);
    color: #FFFFFF;
    border-color: var(--c-gold);
}
.wishlist-add.on:hover[b-vfo81v4nxu] {
    background: var(--c-gold-soft);
    color: #FFFFFF;
}
.wishlist-add:focus-visible[b-vfo81v4nxu] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}