:root {
    --live-primary: #003d9b;
    --live-primary-bright: #0052cc;
    --live-primary-fixed: #dae2ff;
    --live-secondary: #4648d4;
    --live-secondary-container: #6063ee;
    --live-background: #faf8ff;
    --live-surface: #faf8ff;
    --live-surface-gray: #f8fafc;
    --live-surface-lowest: #ffffff;
    --live-surface-low: #f3f3fd;
    --live-surface-container: #ededf8;
    --live-surface-high: #e7e7f2;
    --live-surface-highest: #e1e2ec;
    --live-on-surface: #191b23;
    --live-on-variant: #434654;
    --live-outline: #737685;
    --live-outline-variant: #c3c6d6;
    --live-urgency: #ef4444;
    --live-success: #22c55e;
    --live-gold: #f59e0b;
    --live-silver: #94a3b8;
    --live-bronze: #cd7f32;
    --live-display: "Plus Jakarta Sans", system-ui, sans-serif;
    --live-body: "Inter", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

body.ldm-live-page {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background: var(--live-surface);
    color: var(--live-on-surface);
    font-family: var(--live-body);
    -webkit-tap-highlight-color: transparent;
}

.ldm-live-page a {
    color: inherit;
    text-decoration: none;
}

.ldm-live-page img {
    display: block;
    max-width: 100%;
}

.material-symbols-outlined {
    display: inline-block;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    line-height: 1;
    vertical-align: middle;
}

.live-alert {
    position: sticky;
    top: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40px;
    background: var(--live-urgency);
    color: #fff;
    padding: 8px 32px;
}

.live-alert strong {
    font-family: var(--live-display);
    font-size: 14px;
    font-weight: 800;
}

.live-alert a {
    border-radius: 999px;
    background: #fff;
    color: var(--live-urgency);
    font-size: 14px;
    font-weight: 800;
    padding: 5px 16px;
}

.live-nav {
    position: sticky;
    top: 40px;
    z-index: 1050;
    border-bottom: 1px solid rgba(195, 198, 214, 0.3);
    background: rgba(250, 248, 255, 0.86);
    backdrop-filter: blur(20px);
}

.live-nav__inner,
.live-main,
.live-footer > div,
.live-footer > p {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.live-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 32px;
}

.live-brand {
    color: var(--live-primary);
    font-family: var(--live-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.live-nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.live-nav__links a {
    border-bottom: 2px solid transparent;
    color: var(--live-on-variant);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.live-nav__links a:hover,
.live-nav__links a.is-active {
    border-bottom-color: var(--live-primary);
    color: var(--live-primary);
}

.live-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(195, 198, 214, 0.2);
    border-radius: 999px;
    background: var(--live-surface-low);
    padding: 8px 14px;
}

.live-search span {
    color: var(--live-outline);
}

.live-search input {
    width: 190px;
    border: 0;
    background: transparent;
    color: var(--live-on-surface);
    font-size: 14px;
    outline: 0;
}

.live-icon-btn {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--live-on-variant);
    transition: background 0.2s ease, color 0.2s ease;
}

.live-icon-btn:hover {
    background: var(--live-surface-low);
    color: var(--live-primary);
}

.live-icon-btn i {
    position: absolute;
    right: 4px;
    top: 4px;
    display: flex;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--live-urgency);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.live-main {
    padding: 32px;
}

.live-workspace {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(340px, 4fr);
    gap: 24px;
    transition: grid-template-columns 0.34s ease;
}

.live-primary,
.live-side-panel {
    display: flex;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.34s ease, opacity 0.24s ease;
}

/* Video player styles live in /views/assets/styles/live-video-player.css (independently
   managed alongside /views/assets/js/live-video-player.js and
   /views/partials/live-video-player.php). Only page-layout reactions to the
   player's fullscreen/minimized state stay here, since they affect siblings
   (.live-primary, .live-side-panel, etc.) outside the player itself. */

body.live-player-fullscreen .live-primary {
    display: contents;
}

body.live-player-fullscreen .live-video-card {
    grid-column: 1 / -1;
}

body.live-player-fullscreen .live-next-show,
body.live-player-fullscreen .live-video-info {
    grid-column: 1;
}

body.live-player-fullscreen .live-side-panel {
    grid-column: 2;
    grid-row: 2 / span 3;
}

.live-progress {
    display: block;
    width: 128px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.live-progress i {
    display: block;
    width: 72%;
    height: 100%;
    background: var(--live-primary-fixed);
}

.live-video-info {
    display: grid;
    gap: 12px;
}

.live-video-info h1 {
    margin: 0;
    font-family: var(--live-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.live-host {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-host img {
    width: 40px;
    height: 40px;
    border: 2px solid var(--live-primary-fixed);
    border-radius: 999px;
    object-fit: cover;
}

.live-host strong {
    display: block;
    font-size: 14px;
}

.live-host strong span {
    color: var(--live-primary);
}

.live-host small {
    color: var(--live-on-variant);
    font-size: 12px;
}

.live-follow {
    border: 0;
    border-radius: 999px;
    background: var(--live-primary);
    color: #fff;
    font-weight: 800;
    margin-left: auto;
    padding: 9px 28px;
}

.live-current-product,
.live-chat-card {
    border: 1px solid rgba(195, 198, 214, 0.3);
    border-radius: 12px;
    background: var(--live-surface-lowest);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.live-current-product {
    display: grid;
    gap: 16px;
    min-width: 0;
    overflow: hidden;
    padding: 20px;
}

.live-current-product__intro {
    display: flex;
    gap: 16px;
    min-width: 0;
}

.live-current-product__intro img {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 8px;
    object-fit: cover;
}

.live-current-product__intro > div {
    min-width: 0;
}

.live-current-product__intro span {
    color: var(--live-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-current-product h2 {
    margin: 4px 0 8px;
    font-family: var(--live-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    overflow-wrap: anywhere;
}

.live-current-product p {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    min-width: 0;
}

.live-current-product p strong {
    color: var(--live-primary);
    font-family: var(--live-display);
    font-size: 24px;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
}

.live-current-product del {
    color: var(--live-on-variant);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.live-stock {
    display: grid;
    gap: 8px;
}

.live-stock div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--live-on-variant);
    font-size: 12px;
    font-weight: 800;
}

.live-stock strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--live-urgency);
}

.live-stock .material-symbols-outlined {
    animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-size: 16px;
}

.live-stock progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--live-surface-high);
}

.live-stock progress::-webkit-progress-bar {
    background: var(--live-surface-high);
}

.live-stock progress::-webkit-progress-value,
.live-stock progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(to right, var(--live-secondary), var(--live-urgency));
}

.live-installments {
    border: 1px solid rgba(195, 198, 214, 0.2);
    border-radius: 8px;
    background: var(--live-surface-low);
    padding: 12px;
}

.live-installments small {
    color: var(--live-on-variant);
}

.live-installments div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-installments strong {
    font-size: 14px;
}

.live-installments span {
    border-radius: 4px;
    background: var(--live-secondary-container);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
}

.live-buy-button,
.live-mobile-deal button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--live-success);
    color: #fff;
    font-family: var(--live-display);
    font-size: 18px;
    font-weight: 800;
    padding: 15px 24px;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.live-current-product > .live-buy-button {
    max-width: 100%;
    width: 100%;
}

.live-buy-button:hover,
.live-mobile-deal button:hover {
    filter: brightness(0.96);
}

.live-buy-button:active,
.live-mobile-deal button:active {
    transform: scale(0.96);
}

.live-chat-card {
    display: flex;
    height: min(620px, calc(100dvh - 180px));
    min-height: 400px;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--live-surface-low);
}

.live-chat-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(195, 198, 214, 0.3);
    background: rgba(255, 255, 255, 0.55);
    padding: 16px;
}

.live-chat-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.live-chat-card h2 span {
    color: var(--live-primary);
    font-size: 19px;
}

.live-chat-card header button {
    border: 0;
    background: transparent;
    color: var(--live-on-variant);
    font-size: 11px;
}

.live-chat-stream {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    scrollbar-color: var(--live-outline-variant) transparent;
    scrollbar-width: thin;
}

.live-chat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.live-chat-message strong,
.live-chat-message span {
    flex: 0 0 auto;
    font-size: 14px;
}

.live-chat-message strong {
    color: var(--live-on-variant);
}

.live-chat-message .gold {
    color: var(--live-gold);
}

.live-chat-message .silver {
    color: var(--live-silver);
}

.live-chat-message .bronze {
    color: var(--live-bronze);
}

.live-chat-message p {
    margin: 0;
    color: var(--live-on-variant);
    font-size: 14px;
}

.live-chat-message.is-host span {
    border-radius: 4px;
    background: rgba(0, 61, 155, 0.1);
    color: var(--live-primary);
    font-size: 10px;
    font-weight: 800;
    margin-top: 2px;
    padding: 3px 8px;
}

.live-chat-message.is-host strong,
.live-chat-message.is-host p {
    color: var(--live-primary);
}

.live-chat-message.is-new {
    animation: liveMessageIn 0.28s ease both;
}

.live-chat-empty {
    margin: auto;
    color: var(--live-on-variant);
    font-size: 14px;
    text-align: center;
}

.live-chat-message.is-admin span {
    border-radius: 4px;
    background: rgba(0, 61, 155, 0.1);
    color: var(--live-primary);
    font-size: 10px;
    font-weight: 800;
    margin-top: 2px;
    padding: 3px 8px;
}

.live-chat-message.is-admin strong,
.live-chat-message.is-admin p {
    color: var(--live-primary);
}

.live-chat-message.is-mine {
    justify-content: flex-end;
}

.live-chat-message.is-mine p {
    border-radius: 14px 14px 4px;
    background: var(--live-primary);
    color: #fff;
    padding: 8px 12px;
}

.live-chat-message.is-mine strong {
    color: var(--live-primary);
}

.live-chat-input,
.live-mobile-input[hidden] {
    display: none !important;
}

.live-mobile-input {
    position: relative;
    border-top: 1px solid rgba(195, 198, 214, 0.3);
    background: rgba(255, 255, 255, 0.86);
    padding: 16px;
}

.live-chat-input input,
.live-mobile-input input {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--live-surface-container);
    color: var(--live-on-surface);
    outline: 0;
    padding: 10px 48px 10px 16px;
}

.live-chat-input input:focus,
.live-mobile-input input:focus {
    box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.16);
}

.live-chat-input button,
.live-mobile-input button {
    position: absolute;
    right: 22px;
    top: 50%;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--live-primary);
    transform: translateY(-50%);
}

.live-mobile-deal,
.live-mobile-tabs {
    display: none;
}

.live-recently-featured {
    margin-top: 64px;
}

.live-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.live-section-heading h2 {
    margin: 0;
    font-family: var(--live-display);
    font-size: 32px;
    font-weight: 700;
}

.live-section-heading p {
    margin: 4px 0 0;
    color: var(--live-on-variant);
}

.live-carousel-actions {
    display: flex;
    gap: 8px;
}

.live-carousel-actions button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--live-outline-variant);
    border-radius: 999px;
    background: transparent;
    color: var(--live-on-surface);
}

/* Compact horizontal chooser for the show's featured products — placed right next to
   the current-deal card so every product is discoverable without scrolling all the
   way to "Recently Featured". Two copies exist in the markup (desktop sidebar +
   mobile deal bar); both are driven identically by renderProductsStrip(). */
.live-products-strip { margin-top: 16px; }
.live-products-strip[hidden] { display: none; }

/* The only strip left is page-level (after the workspace): the phone layout's
   product chooser. From tablet width up it is hidden — "Products in this show"
   under the video and Recently Featured cover choosing a product there. */
@media (min-width: 768px) {
    .live-main > .live-products-strip { display: none; }
}
.live-products-strip__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.live-products-strip__title { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--live-on-surface); }
.live-products-strip__count { margin-right: 10px; font-size: 12px; color: var(--live-on-variant); font-weight: 600; }
.live-products-strip__track { display: flex; gap: 10px; margin-left: 10px; overflow-x: auto; padding-bottom: 2px; }
.live-products-strip__item {
    position: relative;
    flex: 0 0 auto;
    width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--live-outline-variant);
    border-radius: 16px;
    background: #fff;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.live-products-strip__item.is-active { border-color: var(--live-primary); background: rgba(0, 61, 155, 0.05); }
.live-products-strip__item img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--live-surface-container); flex: 0 0 auto; }
.live-products-strip__item-info { display: grid; gap: 3px; min-width: 0; }
.live-products-strip__item-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--live-on-surface);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-products-strip__item-price { font-size: 12px; font-weight: 800; color: var(--live-primary); }
.live-products-strip__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--live-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.live-products-strip__badge .material-symbols-outlined { font-size: 13px; }

.live-product-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

/* Six across, stepping down at the same widths as the home page's "Explore
   your interests" grid (.home-discover-grid in home.css). Below 992px the
   grid becomes a horizontal scroller (see the 991.98px block). */
@media (max-width: 1280px) {
    .live-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .live-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* "Recently Featured" renders the shared card (product-card.js, base styles in
   shared.css) so it matches the home page's "Explore your interests" grid.
   Only the live-specific parts — deal selection, the active outline and the
   Buy Live button — are added here. */
.live-product-card {
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.live-product-card.is-active {
    box-shadow: 0 12px 28px rgba(0, 82, 204, 0.16);
    outline: 2px solid var(--live-primary);
    outline-offset: 3px;
}

.live-product-card button.ldm-product-card__image {
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.live-product-card button.ldm-product-card__image:focus-visible {
    outline: 3px solid rgba(0, 82, 204, 0.28);
    outline-offset: 3px;
}

.live-product-card__badge {
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--live-on-variant);
    font-size: 10px;
    font-weight: 800;
    padding: 5px 8px;
}

.live-product-card__buy {
    width: 100%;
    margin-top: 10px;
    padding: 8px 14px;
    font-size: 13px;
}

/* Same shop-name colour and fulfilment chips as the home page's "Explore your
   interests" (home.css). This page does not load home.css, so the rules are
   repeated here; keep the two in step by hand. */
.live-recently-featured .ldm-product-card__vendor,
.live-show-products .ldm-product-card__vendor {
    color: #9e9e9e;
}

.live-recently-featured .ldm-product-card__body small,
.live-show-products .ldm-product-card__body small {
    display: inline-block;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    padding: 2px 7px;
}

.live-recently-featured .ldm-product-card__body small.is-shipping,
.live-show-products .ldm-product-card__body small.is-shipping {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.live-recently-featured .ldm-product-card__body small.is-pickup,
.live-show-products .ldm-product-card__body small.is-pickup {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

/* "Products in this show" — the same cards as Recently Featured, filling the
   space under the video in the left column on wide screens. The column is
   about two-thirds of the page, so it runs four across rather than six. Phones
   and tablets already get the products strip and Recently Featured, so the
   section is hidden there (see the 991.98px block). */
.live-show-products .live-section-heading {
    margin-bottom: 16px;
}

.live-product-grid.live-show-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px) {
    .live-product-grid.live-show-products__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.live-player-fullscreen .live-show-products {
    grid-column: 1;
}

/* Cards past the first two rows are hidden until "Load more" (live-show.js). */
.live-show-products__grid > .ldm-product-card[hidden] {
    display: none;
}

/* Same button as the home page's "Explore your interests" Load more
   (.home-load-more__button in home.css, which this page does not load). */
.live-show-products__more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.live-show-products__more-button {
    display: inline-flex;
    min-width: 200px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #ff9800;
    box-shadow: 0 12px 24px rgba(255, 152, 0, 0.24);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    padding: 12px 28px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.live-show-products__more-button:hover {
    background: #f57c00;
}

.live-show-products__more-button:active {
    transform: scale(0.98);
}

.live-show-products__more-button[hidden] {
    display: none;
}

.live-footer {
    border-top: 1px solid var(--live-outline-variant);
    background: var(--live-surface-highest);
    margin-top: 80px;
}

.live-footer > div {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
    padding: 48px 32px;
}

.live-footer h2 {
    color: var(--live-primary);
    font-family: var(--live-display);
    font-size: 24px;
    font-weight: 900;
}

.live-footer h3 {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-footer p,
.live-footer a {
    color: var(--live-on-variant);
    font-size: 15px;
    line-height: 24px;
}

.live-footer section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-footer > p {
    border-top: 1px solid rgba(195, 198, 214, 0.5);
    margin-bottom: 0;
    padding: 24px 32px;
    text-align: center;
}

@keyframes livePulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes liveMessageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1199.98px) {
    .live-workspace {
        grid-template-columns: minmax(0, 62fr) minmax(320px, 38fr);
        align-items: start;
    }

    .live-side-panel {
        min-height: 700px;
    }

    .live-video-info h1 {
        color: var(--live-primary);
        font-size: 30px;
    }

    .live-current-product {
        border-color: rgba(0, 61, 155, 0.1);
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(12px);
    }

}

@media (max-width: 991.98px) {
    .live-show-products {
        display: none;
    }

    .live-nav__links {
        gap: 18px;
    }

    .live-search {
        display: none;
    }

    .live-workspace {
        grid-template-columns: 1fr;
    }

    body.live-player-fullscreen .live-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
    }

    body.live-player-fullscreen .live-video-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    body.live-player-fullscreen .live-next-show,
    body.live-player-fullscreen .live-video-info {
        grid-column: 1;
        grid-row: auto;
    }

    body.live-player-fullscreen .live-side-panel {
        grid-column: 2;
        grid-row: 2 / span 3;
    }

    .live-side-panel {
        min-height: 0;
    }

    .live-chat-card {
        height: 430px;
        min-height: 430px;
    }
}

@media (max-width: 767.98px) {
    body.live-player-fullscreen {
        overflow: hidden;
    }

    body.ldm-live-page {
        min-height: max(884px, 100dvh);
        padding-bottom: 76px;
    }

    .live-alert {
        gap: 10px;
        justify-content: center;
        min-height: 40px;
        padding: 8px 16px;
    }

    .live-alert strong {
        font-size: 16px;
    }

    .live-alert a {
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: transparent;
        color: #fff;
        padding: 3px 12px;
    }

    .live-nav,
    .live-video-info,
    .live-side-panel,
    .live-footer {
        display: none;
    }

    .live-main {
        padding: 0;
    }

    .live-workspace {
        display: block;
    }

    body.live-player-fullscreen .live-workspace {
        display: block;
    }

    .live-primary {
        display: block;
    }

    body.live-player-fullscreen .live-primary {
        display: block;
    }

    .live-mobile-product {
        display: flex;
        width: fit-content;
        max-width: 80%;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 8px 24px rgba(25, 27, 35, 0.14);
        padding: 12px;
        backdrop-filter: blur(12px);
    }

    .live-mobile-product img {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        object-fit: cover;
    }

    .live-mobile-product strong {
        display: block;
        color: var(--live-primary);
        font-size: 14px;
        line-height: 1.05;
    }

    .live-mobile-product span {
        color: var(--live-on-variant);
        font-size: 12px;
        font-weight: 700;
    }

    .live-mobile-deal {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        border-bottom: 1px solid rgba(195, 198, 214, 0.3);
        background: var(--live-surface-lowest);
        box-shadow: 0 2px 10px rgba(25, 27, 35, 0.08);
        padding: 12px 16px;
    }

    .live-mobile-deal img {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 8px;
        object-fit: cover;
    }

    .live-mobile-deal__info {
        flex: 1;
        min-width: 0;
    }

    .live-mobile-deal__name {
        display: block;
        overflow: hidden;
        color: var(--live-on-surface);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        margin: 2px 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .live-mobile-deal button {
        flex: 0 0 auto;
    }

    .live-mobile-deal small {
        color: var(--live-on-variant);
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-transform: uppercase;
    }

    .live-mobile-deal p {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 0;
    }

    .live-mobile-deal strong {
        color: var(--live-primary);
        /* font-size: 20px; */
         font-size: 12px;
        font-weight: 900;
    }

    .live-mobile-deal del {
        color: var(--live-outline);
        font-size: 10px;
    }

    .live-mobile-deal button {
        font-family: var(--live-body);
        font-size: 14px;
        min-width: 128px;
        padding: 12px 28px;
    }

    .live-mobile-tabs {
        display: flex;
        min-height: 420px;
        flex-direction: column;
        background: var(--live-surface-gray);
    }

    .live-tabs {
        display: flex;
        margin-top: 10px;
        border-bottom: 1px solid rgba(195, 198, 214, 0.3);
        background: #607d8b38;
    }

    .live-tabs button {
        flex: 1;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--live-on-variant);
        font-size: 14px;
        font-weight: 700;
        padding: 16px 8px;
    }

    .live-tabs button.is-active {
        border-bottom-color: var(--live-primary);
        color: var(--live-primary);
        font-weight: 800;
    }

    .live-tab-panel {
        max-height: 353px;
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    .mobile-chat-list {
        display: grid;
        gap: 12px;
    }

    .mobile-chat-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .mobile-chat-row strong {
        color: var(--live-primary);
        font-size: 14px;
        white-space: nowrap;
    }

    .mobile-chat-row p,
    .mobile-info-card p,
    .mobile-info-card li {
        margin: 0;
        border: 1px solid rgba(195, 198, 214, 0.1);
        border-radius: 12px;
        border-top-left-radius: 0;
        background: #fff;
        color: var(--live-on-surface);
        font-size: 14px;
        padding: 8px;
        box-shadow: 0 4px 10px rgba(25, 27, 35, 0.04);
    }

    .mobile-info-card {
        display: grid;
        gap: 12px;
    }

    .mobile-info-card h3 {
        color: var(--live-primary);
        font-size: 16px;
        font-weight: 800;
        margin: 0;
    }

    .mobile-info-card ul {
        display: grid;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-info-card li {
        display: flex;
        gap: 6px;
    }

    /* Product Info tab */
    /* Seller, category, stock, rating, reviews and product code: a two-column
       label | value table. */
    .mobile-product-info__specs {
        width: 100%;
        margin-top: 12px;
        border: 1px solid rgba(195, 198, 214, 0.45);
        border-collapse: separate;
        border-radius: 12px;
        border-spacing: 0;
        overflow: hidden;
        background: #fff;
        font-size: 13px;
    }

    .mobile-product-info__specs th,
    .mobile-product-info__specs td {
        padding: 9px 12px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid rgba(195, 198, 214, 0.35);
    }

    .mobile-product-info__specs tr:last-child th,
    .mobile-product-info__specs tr:last-child td {
        border-bottom: 0;
    }

    .mobile-product-info__specs th {
        width: 40%;
        background: var(--live-surface-gray, #f6f7fb);
        color: var(--live-on-variant);
        font-weight: 600;
    }

    .mobile-product-info__specs td {
        color: var(--live-on-surface);
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .mobile-product-info p {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* The product title and the arrow after it are one link to the full
       product page (replaces the old "View full details" button). */
    .mobile-product-info__title {
        color: inherit;
        text-decoration: none;
    }

    .mobile-product-info__title:hover,
    .mobile-product-info__title:focus-visible {
        color: var(--live-primary);
    }

    .mobile-product-info__expand {
        margin-left: 6px;
        vertical-align: middle;
        color: var(--live-primary);
        font-size: 18px;
    }

    .mobile-product-info__head {
        display: flex;
        gap: 12px;
    }

    .mobile-product-info__head img {
        width: 84px;
        height: 84px;
        flex: 0 0 84px;
        border-radius: 10px;
        object-fit: cover;
    }

    .mobile-product-info__tag {
        color: var(--live-primary);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .mobile-product-info__price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 4px 0 2px;
    }

    /* Same price styling as the Recently Featured cards
       (.ldm-product-card__price in shared.css). */
    .mobile-product-info__price strong {
        color: var(--ldm-primary, #0052cc);
        font-size: 15px;
        font-weight: 800;
    }

    .mobile-product-info__price del {
        color: var(--ldm-outline, #8c8fa8);
        font-size: 12px;
    }

    .mobile-product-info__stock {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #607d8b;
        font-size: 12px;
        font-weight: 400;
    }

    .mobile-product-info__stock .material-symbols-outlined {
        font-size: 16px;
    }

    .mobile-product-info__desc {
        color: var(--live-on-surface);
        font-size: 14px;
        line-height: 1.5;
    }

    /* Two lines with an ellipsis until "Read more" (live-show.js). */
    .mobile-product-info__desc:not(.is-expanded) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .mobile-product-info__more {
        margin-top: 4px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--live-primary);
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-product-info__more[hidden] {
        display: none;
    }

    /* Q&A lives in the mobile tab strip, so hide the desktop card */
    .live-qa-card {
        display: none;
    }

    /* Coming Up Next lives inside the player column on desktop only */
    .live-next-show {
        display: none;
    }

    /* Deal bar actions: Buy Now with the red "Next Up" toggle beneath it */
    .live-mobile-deal__actions {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .live-next-up-toggle:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--live-urgency);
        font-family: inherit;
        font-size: 11px;
        font-weight: 800;
        line-height: 15px;
        padding: 2px 4px;
        cursor: pointer;
    }

    .live-next-up-toggle .material-symbols-outlined {
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    .live-next-up-toggle.is-open .material-symbols-outlined {
        transform: rotate(180deg);
    }

    /* Expandable next-up card below the deal bar */
    .live-next-up-mobile:not([hidden]) {
        display: block;
        border-bottom: 1px solid rgba(195, 198, 214, 0.3);
        background: var(--live-surface);
        padding: 10px 16px;
    }

    .live-next-up-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .live-next-up-track::-webkit-scrollbar { display: none; }

    .live-next-up-slide {
        display: flex;
        flex: 0 0 88%;
        align-items: center;
        gap: 12px;
        scroll-snap-align: start;
        border: 1px solid rgba(195, 198, 214, 0.3);
        border-radius: 12px;
        background: var(--live-surface-lowest);
        padding: 10px;
    }

    .live-next-up-mobile img {
        width: 54px;
        height: 42px;
        flex: 0 0 54px;
        border-radius: 8px;
        object-fit: cover;
    }

    .live-next-up-slide__info {
        flex: 1;
        min-width: 0;
    }

    .live-next-up-mobile__label {
        display: block;
        color: var(--live-urgency);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .live-next-up-slide__info strong {
        display: block;
        overflow: hidden;
        color: var(--live-on-surface);
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .live-next-up-slide__info small {
        display: block;
        overflow: hidden;
        color: var(--live-on-variant);
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .live-next-up-mobile__product {
        display: block;
        margin-top: 2px;
        color: var(--live-on-variant);
        font-size: 12px;
    }

    .live-next-up-mobile__product strong {
        color: var(--live-primary);
    }

    .live-next-up-mobile__reminder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1px solid var(--live-primary);
        border-radius: 999px;
        background: transparent;
        color: var(--live-primary);
        cursor: pointer;
    }

    .live-next-up-mobile__reminder .material-symbols-outlined { font-size: 20px; }

    .live-next-up-mobile__reminder.is-set {
        background: var(--live-primary);
        color: #fff;
    }

    .live-mobile-input {
        display: block;
        background: var(--live-surface);
        padding: 12px;
    }

    .live-recently-featured {
        border-top: 1px solid rgba(195, 198, 214, 0.3);
        background: var(--live-surface);
        margin-top: 0;
        padding: 24px 16px;
    }

    .live-section-heading {
        align-items: center;
        margin-bottom: 16px;
    }

    .live-section-heading h2 {
        color: var(--live-primary);
        font-size: 18px;
    }

    .live-section-heading p,
    .live-carousel-actions {
        display: none;
    }

    .live-section-heading::after {
        content: "See All";
        color: var(--live-primary);
        font-size: 13px;
        font-weight: 800;
    }

    .live-product-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .live-product-grid::-webkit-scrollbar {
        display: none;
    }

    .live-product-card {
        min-width: 160px;
        scroll-snap-align: start;
    }


    .live-product-card__badge {
        display: none;
    }


}

@media (max-width: 420px) {
    .live-alert strong {
        font-size: 14px;
    }
}

.live-reminder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--live-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--live-primary);
    font-weight: 700;
    font-size: 13px;
    margin-left: auto;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.live-reminder:hover,
.live-reminder[data-reminder-set="1"] {
    background: var(--live-primary);
    color: #fff;
}
.live-reminder .material-symbols-outlined { font-size: 16px; }

.live-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Community Q&A (desktop card) */
.live-qa-card {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(195, 198, 214, 0.3);
    border-radius: 12px;
    background: var(--live-surface-low);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px;
}
.live-qa-card header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--live-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--live-on-surface);
}
.live-qa-card header h2 .material-symbols-outlined { color: var(--live-primary); font-size: 20px; }
.live-qa-hint { margin: 0; color: var(--live-on-variant); font-size: 13px; line-height: 1.5; }
.live-qa-list {
    display: grid;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}
.live-qa-empty,
.live-qa-waiting {
    margin: 0;
    color: var(--live-on-variant);
    font-size: 13px;
    line-height: 1.5;
}
.live-qa-item {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(4, 80, 170, 0.12);
    border-radius: 14px;
    background: var(--live-surface);
    padding: 12px;
}
.live-qa-item__question,
.live-qa-answer {
    display: grid;
    gap: 3px;
}
.live-qa-item__question span,
.live-qa-answer span {
    color: var(--live-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.live-qa-item__question strong,
.live-qa-answer strong {
    color: var(--live-on-surface);
    font-size: 13px;
    font-weight: 800;
}
.live-qa-item__question p,
.live-qa-answer p {
    margin: 0;
    color: var(--live-on-surface);
    font-size: 14px;
    line-height: 1.45;
}
.live-qa-item__answers {
    display: grid;
    gap: 8px;
    border-left: 2px solid rgba(4, 80, 170, 0.16);
    margin-left: 4px;
    padding-left: 10px;
}
.live-qa-answer {
    border-radius: 12px;
    background: rgba(4, 80, 170, 0.08);
    padding: 10px;
}
.live-qa-form { display: flex; gap: 8px; }
.live-qa-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(195, 198, 214, 0.5);
    border-radius: 999px;
    background: var(--live-surface);
    color: var(--live-on-surface);
    font-size: 14px;
    padding: 10px 16px;
}
.live-qa-form input:focus { outline: none; border-color: var(--live-primary); }
.live-qa-form button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--live-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
}
.live-qa-form button .material-symbols-outlined { font-size: 18px; }
.live-qa-form button:hover { filter: brightness(0.96); }

/* Coming Up Next */
.live-next-show { margin-top: 20px; }
/* Mobile-only next-up elements are hidden on desktop/tablet */
.live-next-up-toggle,
.live-next-up-mobile { display: none; }
.live-next-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.live-next-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.live-next-slider::-webkit-scrollbar { display: none; }
.live-next-slide {
    display: flex;
    flex: 0 0 240px;
    flex-direction: column;
    border: 1px solid rgba(195, 198, 214, 0.3);
    border-radius: 14px;
    background: var(--live-surface-lowest);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.live-next-slide__media { position: relative; }
.live-next-slide__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.live-next-slide__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 999px;
    background: var(--live-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
}
.live-next-slide__body { display: grid; gap: 6px; padding: 14px; }
.live-next-slide__eyebrow {
    color: var(--live-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.live-next-slide__body h3 { margin: 0; font-family: var(--live-display); font-size: 16px; font-weight: 700; line-height: 1.25; }
.live-next-slide__product { margin: 0; color: var(--live-on-variant); font-size: 13px; }
.live-next-slide__product strong { color: var(--live-primary); }
.live-next-slide__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--live-on-variant);
    font-size: 12px;
}
.live-next-slide__time .material-symbols-outlined { font-size: 15px; }
.live-next-slide .live-next-card__reminder { width: 100%; margin-top: 6px; font-size: 13px; padding: 9px 16px; }
.live-next-card__reminder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: start;
    margin-top: 8px;
    border: 1px solid var(--live-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--live-primary);
    font-family: var(--live-display);
    font-weight: 700;
    font-size: 15px;
    padding: 11px 22px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.live-next-card__reminder .material-symbols-outlined { font-size: 18px; }
.live-next-card__reminder:hover,
.live-next-card__reminder.is-set {
    background: var(--live-primary);
    color: #fff;
}

/* Live quick buy */
.live-quick-buy {
    position: fixed;
    inset: 0;
    z-index: 1100; /* above the mobile bottom nav (z-index: 1050) */
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 24px;
    pointer-events: none;
}
.live-quick-buy.is-open { display: flex; }
.live-quick-buy.is-open .live-quick-buy__sheet { pointer-events: auto; }
.live-quick-buy__backdrop { display: none; }
.live-quick-buy__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid rgba(195, 198, 214, 0.78);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}
/* Scrollable content; the footer (total + pay) stays pinned below it. */
.live-quick-buy__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 24px 8px;
}
.live-quick-buy__footer {
    flex: 0 0 auto;
    display: grid;
    gap: 12px;
    padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--live-outline-variant);
    background: #fff;
}
.live-quick-buy__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--live-surface-low); color: var(--live-on-surface); display: inline-flex; align-items: center; justify-content: center; }
.live-quick-buy__header span { display: inline-flex; color: var(--live-primary); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.live-quick-buy__header h2 { margin: 5px 42px 4px 0; font-family: var(--live-display); font-size: 24px; font-weight: 900; letter-spacing: 0; }
.live-quick-buy__header p { margin: 0; color: var(--live-on-variant); font-size: 13px; }
.live-quick-buy__status { margin-top: 16px; border-radius: 12px; padding: 11px 12px; font-size: 13px; font-weight: 700; }
.live-quick-buy__status.is-info { background: #eef2ff; color: #3730a3; }
.live-quick-buy__status.is-success { background: #dcfce7; color: #166534; }
.live-quick-buy__status.is-error { background: #fee2e2; color: #991b1b; }
.live-quick-buy__product { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; border: 1px solid var(--live-outline-variant); border-radius: 16px; background: var(--live-surface-low); }
.live-quick-buy__product img { width: 90px; height: 90px; border-radius: 12px; object-fit: cover; background: var(--live-surface-container); }
.live-quick-buy__product strong { display: block; font-family: var(--live-display); font-size: 15px; font-weight: 900; line-height: 1.25; }
.live-quick-buy__product p { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.live-quick-buy__product p span { color: var(--live-primary); font-weight: 900; }
.live-quick-buy__product del { color: var(--live-outline); font-size: 12px; }
.live-quick-buy__product small { color: var(--live-on-variant); font-size: 12px; font-weight: 700; }
.live-quick-buy__form { display: grid; gap: 12px; margin-top: 16px; }
.live-quick-buy__form label { display: grid; gap: 6px; margin: 0; }
.live-quick-buy__form label span,
.live-quick-buy__total span { color: var(--live-on-variant); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.live-quick-buy__form input,
.live-quick-buy__form select { width: 100%; min-height: 44px; border: 1.5px solid var(--live-outline-variant); border-radius: 12px; background: #fff; color: var(--live-on-surface); font: inherit; font-size: 14px; padding: 0 12px; outline: 0; }
.live-quick-buy__form input:focus,
.live-quick-buy__form select:focus { border-color: var(--live-primary); box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.1); }
.live-quick-buy__address { display: grid; gap: 10px; margin-top: 4px; }
.live-quick-buy__address[hidden] { display: none; }
.live-quick-buy__new-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-quick-buy__new-address[hidden] { display: none; }
.live-quick-buy__new-address .span-2 { grid-column: 1 / -1; }
.live-quick-buy__address-hint { margin: 0; color: var(--live-on-variant); font-size: 12px; }
.live-quick-buy__address-link { justify-self: start; border: 0; background: none; padding: 0; color: var(--live-primary); font-size: 13px; font-weight: 800; cursor: pointer; }
.live-quick-buy__saved-addresses { display: grid; gap: 10px; }
.live-quick-buy__address-card {
    display: grid;
    gap: 4px;
    text-align: left;
    border: 1.5px solid var(--live-outline-variant);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.live-quick-buy__address-card.is-active { border-color: var(--live-primary); background: rgba(0, 61, 155, 0.05); }
.live-quick-buy__address-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-quick-buy__address-card-top strong { font-size: 13px; font-weight: 900; }
.live-quick-buy__address-card-top em { font-style: normal; color: var(--live-primary); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.live-quick-buy__address-card-name { font-size: 13px; font-weight: 700; }
.live-quick-buy__address-card-lines { color: var(--live-on-variant); font-size: 12px; }
.live-quick-buy__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; border-radius: 14px; background: var(--live-surface-low); padding: 14px; }
.live-quick-buy__total strong { color: var(--live-primary); font-family: var(--live-display); font-size: 20px; font-weight: 900; }
.live-quick-buy__submit { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--live-success); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--live-display); font-size: 16px; font-weight: 900; cursor: pointer; }
.live-quick-buy__submit:disabled { opacity: 0.72; cursor: wait; }

/* Payment method — radio card group (auto-selected from the chosen currency). */
.live-quick-buy__field { display: grid; gap: 6px; }
.live-quick-buy__field-label { color: var(--live-on-variant); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.live-quick-buy__methods { display: grid; gap: 8px; }
.live-quick-buy__method {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr 22px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border: 1.5px solid var(--live-outline-variant);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.live-quick-buy__method input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}
.live-quick-buy__method-icon { color: var(--live-on-variant); font-size: 22px; }
.live-quick-buy__method-text { display: grid; gap: 1px; }
.live-quick-buy__method-text b { font-size: 14px; font-weight: 800; }
.live-quick-buy__method-text small { color: var(--live-on-variant); font-size: 12px; }
.live-quick-buy__method-check { color: var(--live-primary); font-size: 22px; opacity: 0; transition: opacity 0.15s ease; }
.live-quick-buy__method:has(input:checked),
.live-quick-buy__method.is-active {
    border-color: var(--live-primary);
    background: rgba(0, 61, 155, 0.05);
}
.live-quick-buy__method:has(input:checked) .live-quick-buy__method-icon,
.live-quick-buy__method.is-active .live-quick-buy__method-icon { color: var(--live-primary); }
.live-quick-buy__method:has(input:checked) .live-quick-buy__method-check,
.live-quick-buy__method.is-active .live-quick-buy__method-check { opacity: 1; }
.live-quick-buy__method:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.15); }

@media (max-width: 767.98px) {
    /* Bottom sheet that sits BELOW the sticky player so the stream keeps
       playing and stays visible while the customer fills in the details.
       Lifted above the fixed bottom nav so the pay button stays visible. */
    .live-quick-buy {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0;
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
    .live-quick-buy__sheet {
        width: 100%;
        max-height: 66vh;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 55px rgba(15, 23, 42, 0.24);
        animation: liveQuickBuySheetIn 0.28s ease;
    }
    .live-quick-buy__body { padding: 20px 18px 6px; }
    .live-quick-buy__footer { padding: 12px 18px 16px; }
    .live-quick-buy__new-address { grid-template-columns: 1fr; }
    .live-quick-buy__product { grid-template-columns: 76px 1fr; }
    .live-quick-buy__product img { width: 76px; height: 76px; }
}
@keyframes liveQuickBuySheetIn {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Unfolded foldable (same definition as home.css): the mobile tabs read
   Product Info, Live Chat, Q&A, and Product Info opens first (live-show.js).
   Visual order only — the markup keeps Live Chat first for phones. */
@media (max-width: 767.98px) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
    .live-tabs [data-live-tab="details"] { order: 1; }
    .live-tabs [data-live-tab="chat"] { order: 2; }
    .live-tabs [data-live-tab="qa"] { order: 3; }

    /* Product Info shows in full instead of scrolling inside the panel: no
       353px cap and no inner scroll. The fixed 480px minimum fits the collapsed
       info (header, two-line description, details table) and keeps the panel
       steady between products; "Read more" grows it rather than scrolling. */
    .live-tab-panel[data-active-tab="details"] {
        height: auto;
        min-height: 480px;
        max-height: none;
        overflow: visible;
    }
}